Hexo博客優(yōu)化之Matery主題美化
點(diǎn)擊上方藍(lán)字 ?關(guān)注我們
小羅giaogiao屋
簡單易懂的才是最好的
前言：
????嗨，老鐵們！上一篇文章介紹了如何基礎(chǔ)地創(chuàng)建一個博客，今天呢，就再續(xù)前章，把我們目前這么丑丑的博客變成一見傾心的美物~所以，廢話不多說，進(jìn)階！向著美麗出發(fā)！
ONE
1
主題個性化設(shè)置
個人比較喜歡的主題是hexo-theme-matery，下面也都是基于這個主題的一些配置
TWO
2
主題下載
項(xiàng)目下執(zhí)行
1.git?clone?https://github.com/blinkfox/hexo-theme-matery.git?themes/matery
更換根目錄下的_config.yml配置文件中的theme參數(shù)
##?Plugins:?https://hexo.io/plugins/
##?Themes:?https://hexo.io/themes/
theme:?matery
修改成你剛剛clone到本地要更換的主題
文章頭部設(shè)置
將/scaffolds/post.md修改為如下代碼：
---
title:?{{?title?}}
date:?{{?date?}}
top:?false
cover:?false
password:
summary:
tags:
categories:
---
效果示例：
---
title:?TypeScript聲明文件
date:?2019-09-05?10:29:29
categories:?
-?TypeScript
tags:?
-?TypeScript
---
Three
3
導(dǎo)航配置
根目錄_config.yml配置
title:?Luo's Blog
subtitle:?Alexd star
description:?Welcome to Luo'Blog
keywords:?Luo,github
author:?羅成
language:?zh-CN
timezone:
menu:
??主頁:
????url:?/
????icon:?fa-home
??標(biāo)簽:
????url:?/tags
????icon:?fa-tags
??分類:
????url:?/categories
????icon:?fa-bookmark
??工具:
????url:?/friends
????icon:?fa-rocket
??歸檔:
????url:?/archives
????icon:?fa-archive
??關(guān)于:
????url:?/about
????icon:?fa-user-circle-o
效果：
標(biāo)簽
頁面文章標(biāo)簽配置：
---
title:?nvm版本管理
date:?2019-09-05?10:29:29
tags:?
-?nodejs
-?npm
-?nvm
---
在每個md文件的頭部添加tags標(biāo)簽屬性， 標(biāo)簽下面可以寫任意的標(biāo)簽value值；
文章里面展示效果如下（左側(cè)）：
導(dǎo)航上配置完標(biāo)簽之后需要在本地新建標(biāo)簽的目錄
hexo?new?page?tags
切換到標(biāo)簽頁展示如下：
點(diǎn)擊每個標(biāo)簽都能篩選出該標(biāo)簽下對應(yīng)的文章。
分類
文章分類配置：
---
title:?nvm版本管理
date:?2019-09-05?10:29:29
categories:?
-?nodejs
---
文章內(nèi)部展示效果如下（右側(cè)）：
導(dǎo)航上配置完分類之后需要在本地新建分類的目錄
hexo?new?page?categories
切換到分類頁展示如下：
404頁面
原來的主題沒有404頁面，首先在/source/目錄下新建一個404.md，內(nèi)容如下：
---
title:?404
date:?2017-07-19?16:41:10
type:?"404"
layout:?"404"
description:?"你訪問的頁面被外星人叼走了?:("
---
然后在/themes/matery/layout/目錄下新建一個404.ejs文件，內(nèi)容如下：
<style?type="text/css">
????/*?don't?remove.?*/
????.about-cover?{
????????height:?75vh;
????}
</style>
<div?class="bg-cover?pd-header?about-cover">
????<div?class="container">
????????<div?class="row">
????????????<div?class="col?s10?offset-s1?m8?offset-m2?l8?offset-l2">
????????????????<div?class="brand">
????????????????????<div?class="title?center-align">
????????????????????????404
????????????????????</div>
????????????????????<div?class="description?center-align">
????????????????????????<%=?page.description?%>
????????????????????</div>
????????????????</div>
????????????</div>
????????</div>
????</div>
</div>
<script>
????//?每天切換?banner?圖.??Switch?banner?image?every?day.
????$('.bg-cover').css('background-image',?'url(/medias/banner/'?+?new?Date().getDay()?+?'.jpg)');
</script>
效果如下：
添加建站時間
修改/themes/matery/layout/_partial/footer.ejs文件，在最后加上
<script?language?=?javascript?>
????function?siteTime()?{
????????window.setTimeout("siteTime()",?1000);
????????var?seconds?=?1000;
????????var?minutes?=?seconds?*?60;
????????var?hours?=?minutes?*?60;
????????var?days?=?hours?*?24;
????????var?years?=?days?*?365;
????????var?today?=?new?Date();
????????var?todayYear?=?today.getFullYear();
????????var?todayMonth?=?today.getMonth()?+?1;
????????var?todayDate?=?today.getDate();
????????var?todayHour?=?today.getHours();
????????var?todayMinute?=?today.getMinutes();
????????var?todaySecond?=?today.getSeconds();
????????var?t1?=?Date.UTC(2018,?08,?11,?00,?00,?00);?//北京時間2018-2-13?00:00:00?
????????var?t2?=?Date.UTC(todayYear,?todayMonth,?todayDate,?todayHour,?todayMinute,?todaySecond);?
????????var?diff?=?t2?-?t1;?var?diffYears?=?Math.floor(diff?/?years);?
????????var?diffDays?=?Math.floor((diff?/?days)?-?diffYears?*?365);?
????????var?diffHours?=?Math.floor((diff?-?(diffYears?*?365?+?diffDays)?*?days)?/?hours);?
????????var?diffMinutes?=?Math.floor((diff?-?(diffYears?*?365?+?diffDays)?*?days?-?diffHours?*?hours)?/?minutes);?
????????var?diffSeconds?=?Math.floor((diff?-?(diffYears?*?365?+?diffDays)?*?days?-?diffHours?*?hours?-?diffMinutes?*?minutes)?/?seconds);?document.getElementById("sitetime").innerHTML?=?"本站已運(yùn)行?"?+diffYears+"?年?"+diffDays?+?"?天?"?+?diffHours?+?"?小時?"?+?diffMinutes?+?"?分鐘?"?+?diffSeconds?+?"?秒";?
????}?
????siteTime();?
</script>
然后在適當(dāng)位置加上一下代碼
<span?id="sitetime"></span>
如：
?<div?class="col?s12?m8?l8?copy-right">
????<span?id="sitetime"></span>?<br>
????本站由©<a?href="https://gongchenghuigch.github.io/"?target="_blank">gongchenghui</a>基于
????<a?href="https://hexo.io/"?target="_blank">Hexo</a>?的
????<a?href="https://github.com/blinkfox/hexo-theme-matery"?target="_blank">hexo-theme-matery</a>主題搭建.
添加萌萌的動漫人物（看板娘）
先看看添加卡通人物之后的效果：
安裝插件
?npm?install?--save?hexo-helper-live2d
安裝下載動畫人物庫 如：
npm?install?live2d-widget-model-z16?-D
根目錄_config.yml配置里面添加：
live2d:?
??enable:?true?
??scriptFrom:?local?
??pluginRootPath:?live2dw/?
??pluginJsPath:?lib/?
??pluginModelPath:?assets/?
??tagMode:?false?
??log:?false?
??model:?
????use:?live2d-widget-model-z16?
??display:?
????position:?right?
????width:?150?
????height:?300?
??mobile:?
????show:?true?
????react:?
??????opacity:?0.7
動畫庫的樣式示例：
shizuku：
Epsilon2.1
z16：
添加網(wǎng)易云音樂
如何在文章里面插入音樂呢？
打開網(wǎng)易云音樂網(wǎng)頁版，找到你自己想聽的音樂
點(diǎn)擊生成外鏈接：
然后把里面的HTML代碼復(fù)制到你的文章里面就可以了。
添加搜索
安裝搜索插件：
npm?install?hexo-generator-search?--save
根目錄_config.yml配置：
search:
??path:?search.xml
??field:?post
END
????????
????????到這里就大功告成啦?。‖F(xiàn)在你就能看到一個人見人愛的博客，并且還可以拿去分享(ZhuangBi)。哈哈哈，喜歡本教程嘛？純手打，希望各位大老爺們兒，漂亮姐姐們動動小手“點(diǎn)贊，關(guān)注，在看”。一鍵三連?。刹灰麓我欢ü?/p>
小劉
“咦？我進(jìn)自己的網(wǎng)站感覺很慢很卡?。俊?br>嘿嘿，下期就出網(wǎng)站優(yōu)化加速的教程啊~不見不散~
小羅
小劉
這么肝嘛？！愛了愛了~
掃碼關(guān)注 公眾號
給你不一樣的愛
