部分教程來自互聯網,如侵聯刪。
主題的啟用
下載並啟用
進入命令行,下載 yilia 主題,輸入:
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
修改站點配置文件 _config.yml
,找到如下代碼:
## Themes: https://hexo.io/themes/
theme: landscape
將 landscape
修改為 yilia
即可。
修改語言
打開站點配置文件,搜索language
,找到如下代碼:
author:
language:
timezone:
在 language
后面輸入 zh-CN
。
注意:冒號后面必須有一個空格。
主題相關設置
“所有文章”按鈕的安裝
首先使用命令 node -v
檢查版本是不是大於 6.2
在博客根目錄執行以下命令:
npm i hexo-generator-json-content --save
在博客配置文件 _config.yml
最下面加上:
jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: false
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: true
添加圖片資源文件夾
路徑為 themes/yilia/source/
下,可添加一個 assets
文件夾,里面存放圖片資源即可
需要添加頭像或者微信/支付寶二維碼圖片,直接引用即可。路徑為 themes/yilia/_config.yml
。
# 微信二維碼圖片
weixin: /assets/img/wechat.png
# 頭像圖片
avatar: /assets/img/head.jpg
# 網頁圖標
favicon: /assets/img/head.jpg
文章顯示摘要
在你 MD 格式文章正文插入 <!-- more -->
即可,只會顯示它之前的,此后的就不顯示,點擊文章標題,全文閱讀才可看到,同時注釋掉文件 themes/yilia/_config.yml
里的:
# excerpt_link: more
文章顯示目錄
增加文章目錄 TOC ( table of content ),方便閱讀文章,在 themes/yilia/_config.yml
中進行配置 toc: 2
即可,它會將你 Markdown 語法的標題,生成目錄,目錄查看在右下角。
增加歸檔菜單
修改 themes/yilia/_config.yml
內容:
menu:
主頁: /
歸檔: /archives/index.html
修復失效的微信分享二維碼
打開 themes\yilia\layout\_partial\post\share.ejs
文件
把第49行中的 //pan.baidu.com/share/qrcode?url=
修改為:
//api.qrserver.com/v1/create-qr-code/?size=150x150&data=
更改左側昵稱字體
在 themes\yilia\source\main.0cf68a.css
文件里面修改,找到 header-author
,修改里面的 font-family
,改成:
font-family:"Times New Roman",Georgia,Serif
左側顯示總文章數
打開 themes\yilia\layout\_partial\left-col.ejs
文件
在:
<nav class="header-menu">
<ul>
<% for (var i in theme.menu){ %>
<li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
<%}%>
</ul>
</nav>
后面添加:
<nav>
總文章數 <%=site.posts.length%>
</nav>
添加字數統計
首先安裝 hexo-wordcount
使用如下命令安裝:
npm i --save hexo-wordcount
Node 版本7.6.0之前,請安裝 2.x 版本 (Node.js v7.6.0 and previous)
npm install hexo-wordcount@2 --save
然后在 themes\yilia\layout\_partial\left-col.ejs
中添加:
<nav>
總字數 <span class="post-count"><%= totalcount(site, '0,0.0a') %></span>
</nav>
添加位置在如下代碼的下面:
<nav>
總文章數 <%=site.posts.length%>
</nav>
編輯 themes\yilia\layout\_partial\article.ejs
在header下面加入:
<div align="center" class="post-count">
字數:<%= wordcount(post.content) %>字 | 預計閱讀時長:<%= min2read(post.content) %>分鍾
</div>
即可顯示單篇字數和預計閱讀時長。
添加來必力(livere)評論系統
yilia 默認帶了幾個系統,但是沒有來必力,所以可以自己加
首先是去注冊來必力,然后獲取到自己的 id
新建 themes\yilia\layout\_partial\comment\livere.ejs
文件,輸入如下內容:
<!-- 來必力City版安裝代碼 -->
<div id="lv-container" data-id="city" data-uid="<%=theme.livere_uid%>">
<script type="text/javascript">
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');
</script>
<noscript>為正常使用來必力評論功能請激活JavaScript</noscript>
</div>
<!-- City版安裝代碼已完成 -->
然后編輯 themes\yilia\layout\_partial\article.ejs
文件,找到:<% if (!index && post.comments){ %>
,添加:
<% if (theme.livere){ %>
<%- partial('comment/livere', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
<% } %>
在主題配置文件 themes\yilia\_config.yml
中添加以下內容:
livere: true
livere_uid: 你的id
關閉信息收集(自選)
關於訪問 litten.me:9005
的問題,這個主題的作者之前為了更好地完善這個主題,有時候會收集用戶的客戶端信息,詳情請見 https://github.com/litten/hexo-theme-yilia/issues/528 ,如果不想被統計,就將 themes\yilia\source-src\js\report.js
里面的內容清空。不過這個請求是異步的,不會影響博客加載速度,而且作者已經不維護了,所以關不關都行。