Hexo yilia 主題啟用及相關設置


部分教程來自互聯網,如侵聯刪。

主題地址:https://github.com/litten/hexo-theme-yilia

主題的啟用

下載並啟用

進入命令行,下載 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 里面的內容清空。不過這個請求是異步的,不會影響博客加載速度,而且作者已經不維護了,所以關不關都行。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM