Hexo主題更改以及小功能的新增

Null指標發表於2019-03-02
Hexo

前言

之前搭建的部落格基本功能已經實現了，現在就折騰著好好維護一下我的部落格了，於是參考著別人的部落格新增一些小功能，並且整理了下來。

新搭建的部落格的預設主題都是landscape，我的主題是基於yelee風格的，作者也是在hexo-theme-yilia的基礎上進行的修改。

具體的使用可以參考官方文件

首先給大家介紹下新增的功能吧

主題更改

下載主題

git clone https://github.com/MOxFIVE/hexo-theme-yelee.git
複製程式碼

修改主題

開啟專案目錄下的_config.yml檔案

主題更改，注意的是在yelee前面有個空格

theme: yelee
複製程式碼

語言更換

開啟專案目錄下的_config.yml檔案

# Site
language: zh-Hans
複製程式碼

目前可用語言:

en English 英語
zh-Hans Chinese (Simplified) 大陸簡體
zh-Hant-HK Chinese (Traditional) 港澳繁體
zh-Hant-TW Chinese (Traditional) 臺灣正體

個人頭像

預設頭像儲存於 yelee/source/img/avatar.png

配置中對應填寫 /img/avatar.png，可替換圖片或指定新地址

themes/yelee/_config.yml 背景引數:

avatar: /img/avatar.png
複製程式碼

文章摘要

目前主題可使用兩種方式在首頁顯示文章摘要而不是全文。

方法一: <!-- more -->

title: Hello World
date: 2015-12-03 00:00:00
---
<Excerpt in index | 首頁摘要> 
<!-- more -->
<The rest of contents | 餘下全文>
複製程式碼

<!-- more --> 之前最好不要有空格等字元；

方法二: description in Front-matter

title: Hello World
date: 2015-12-03 00:00:00
description: "Welcome to Hexo! This is your very first post."
---
<Contents>
複製程式碼

通過 description 新增的摘要只能為純文字；

description 中的內容加引號，可以避免一些程式錯誤，例如當內容裡包含英文冒號時。

摘要

主選單

按下面格式新增邊欄選單，選單前的 # 表示註釋掉該行，即隱藏掉該條目

themes/yelee/_config.yml 背景引數:

menu:
  主頁: /
  所有文章: /archives/
  #隨筆: /tags/隨筆
  標籤雲: /tags/
  關於我: /about/
複製程式碼

標籤雲

使用 Hexo 命令新建一個名為 tags 的頁面即可

hexo new page tags
複製程式碼

該頁面標題可以在檔案 \hexo\source\tags\index.md 中修改

同一篇文章設定多個分類後的問題 issue#4

標籤雲

關於我的頁面

使用 Hexo 命令新建一個名為 about 的頁面即可

hexo new page about
複製程式碼

該頁面內容在檔案 \hexo\source\about\index.md 中修改

關於我

本地搜尋

使用搜尋需先安裝對應外掛，用於生成索引資料

外掛主頁: hexo-generator-search

#on: true 改為 on: true即為啟用搜尋

search: 
  #on: true
  onload: false
複製程式碼

onload: true : 索引資料 search.xml 隨頁面一起載入 [效率優先]

onload: false : 當啟用搜尋框時再下載索引資料 `[按需載入]

搜尋

站點小圖示

若將圖示儲存於 yelee/source/favicon.png

則配置中對應填寫 /favicon.png，另外填網路圖片的地址也可

themes/yelee/_config.yml 背景引數:

favicon: /favicon.png
複製程式碼

圖示

社交圖示

去掉設定前的 # 再填寫連結即可

themes/yelee/_config.yml 背景引數:

subnav:
  Email: "mailto:1287530995@qq.com"
  #新浪微博: "sina weibo"
  GitHub: https://github.com/nullcxy
  #V2EX: "#"
  #RSS: "/atom.xml"
複製程式碼

設定 Email 時保留 mailto: 可考慮加密郵件地址 ctrlq.org/encode/

使用 RSS 需先安裝對應外掛 github.com/hexojs/hexo…

社交

網站成立年份

themes/yelee/_config.yml 背景引數:

since: 2016
複製程式碼

預設為 2016，若填入年份小於當前年份，則顯示為 2015-2016 類似的格式

年份

背景圖片

背景圖檔案所在路徑:

/yelee/source/background/
複製程式碼

themes/yelee/_config.yml 背景引數:

background_image: 5
複製程式碼
  • 預設值為5，可按需修改
  • "5": 設定/yelee/source/background/資料夾中 bg-1.jpg 到 bg-5.jpg 這5張圖片為背景
  • "0": 取消網頁背景圖，使用淳樸的灰白主題

背景

文章目錄

配置中啟用目錄

themes/yelee/_config.yml 背景引數:

toc:
  on: true
複製程式碼

指定文章中關閉目錄 toc: false

title: Hello World
date: 2015-08-19 00:00:00
toc: false
---
複製程式碼

目錄

版權

配置中啟用目錄

themes/yelee/_config.yml 背景引數:

copyright: true
複製程式碼

指定文章中關閉目錄 original: false

title: Hello World
date: 2015-08-19 00:00:00
original: false
---
複製程式碼

原始連結設定

修改 站點配置 檔案中 url 的值為你的網站域名

url: http://MOxFIVE.xyz
複製程式碼

版權

左邊主選單鳥屋

themes/yelee/_config.yml 背景引數:

左邊欄鳥屋

邊欄鳥屋

關閉鳥屋

# 邊欄多標籤切換
tagcloud: false
複製程式碼

友情連結

## 編輯友鏈
friends:
  Hexo: https://hexo.io
  GitHub: https://pages.github.com/
  MOxFIVE: http://moxfive.xyz/

## 關閉友鏈
friends: false
複製程式碼

關於我

# 是否開啟“關於我”。
aboutme: 專注於前端

# 關閉“關於我”
aboutme: false
複製程式碼

評論

來必力評論

介紹

yelee原生是支援Disqus、多說和有言的，可以參考官網-評論系統

但是多說已經關閉，有言支援又不友好，又發現Disqus在手機上展示不出來，發現還需要翻牆，那實在對使用者太不友好了，於是我選擇使用來必力評論系統

來必力

註冊

註冊後可以檢視資料分析

資料分析

程式碼管理，我們需要用到這個data-uid

程式碼

整合

新增data-uid

開啟theme/yelee/_config.yml，新增配置資訊

 livere:
    on: true
    livere_uid: Your uid
複製程式碼

建立ejs檔案

在themes/yelee/layout/_partial/comments資料夾建立livere.ejs檔案，將程式碼拷貝進去，將你註冊後的程式碼拷貝到

裡面。

<section class="livere" id="comments">
    <!-- 來必力City版安裝程式碼 -->
    <div id="lv-container" data-id="city" data-uid="Your 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版安裝程式碼已完成 -->
</section>
複製程式碼

追加邏輯判斷

開啟themes/yelee/layout/_partial/article.ejs，在下圖位置插入下面的邏輯判斷程式碼

else if (theme.livere.on) { %>
	<%- partial('comments/livere') %>
<% } 
複製程式碼

判斷

如此，就大功告成，可以進行留言了，看下效果：

評論

文章字數統計以及閱讀時長

前言

next主題是已經整合這個功能的，但是yelee就需要我們自己配置了，可以看下官網對hexo-wordcount的介紹

整合

安裝hexo-wordcount

npm i --save hexo-wordcount
複製程式碼

檔案配置

在yelee/layout/_partial/post/word.ejs下建立word.ejs檔案：

<div style="margin-top:10px;">
    <span class="post-time">
      <span class="post-meta-item-icon">
        <i class="fa fa-keyboard-o"></i>
        <span class="post-meta-item-text">  字數統計: </span>
        <span class="post-count"><%= wordcount(post.content) %>字</span>
      </span>
    </span>

    <span class="post-time">
      &nbsp; | &nbsp;
      <span class="post-meta-item-icon">
        <i class="fa fa-hourglass-half"></i>
        <span class="post-meta-item-text">  閱讀時長: </span>
        <span class="post-count"><%= min2read(post.content) %>分</span>
      </span>
    </span>
</div>
複製程式碼

然後新增邏輯判斷

開啟 themes/yelee/layout/_partial/article.ejs

<% if(theme.word_count && !post.no_word_count){ %>
	<%- partial('post/word') %>
<% } %>
複製程式碼

在下圖位置新增

判斷

word_count 是主題_config.yml中配置是否需要新增字數統計功能控制 flag，

no_word_count即配置文章是否需要顯示字數統計的功能。

看一下效果吧

統計

網易雲音樂

前言

對於一名Android開發者來講，網易雲音樂是必不可少的功能，那部落格也要新增這個功能咯。

整合

MarkDown 是支援 h5 程式碼的，所以整合過來很簡單，開啟網易雲音樂，搜尋你想要的音樂

網易雲

點選對應的生成外鏈播放器，當然前提是要有版權的，很多音樂還是沒有版權的，可以設定尺寸，是否自動播放，最後拷貝對應的程式碼，拷貝到你想要放置的位置即可。

iframe

看一下效果吧

音樂

滑鼠點選桃心效果

前言

如果滑鼠點選的時候出現特效，那一定會使整個部落格的顏值提升一大截

整合

拷貝需要的檔案

進入我的備份，拷貝需要的檔案

桃心

新增配置

開啟themes/yelee/layout/_partial/after-footer.ejs檔案，新增剛剛新增檔案的配置。

<script type="text/javascript" src="/resources/float.js"></script>
<script type="text/javascript" src="/resources/love.js"></script>
<script type="text/javascript" color=0,104,183 opacity=1 zindex=-1 count=50 src="/resources/particle.js"></script>
<script type="text/javascript" src="/resources/typewriter.js"></script>
複製程式碼

配置

點選頁面檢視一下效果

桃心效果

新增可愛的萌妹子或者萌寵

前言

如果在頁面上新增個萌寵或者萌妹紙，那是不是很卡哇伊呢。大家可以檢視原始碼來挑選自己喜歡的模型。

整合

安裝

npm install --save hexo-helper-live2d
複製程式碼

配置

在站點的 _config.yml 下配置

live2d:
  enable: true
  scriptFrom: local
  model:
    use: live2d-widget-model-miku
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
複製程式碼

其中，live2d.model.use使用來配置對應的萌寵模型，我這邊是live2d-widget-model-miku

看一下效果吧

萌妹

新增網站執行時間

前言

可以實時展示自己的部落格的執行時間，還是蠻有成就感的。

整合

在 hexo/themes/yelee/layout 資料夾下找到你的 footer 檔案，即腳佈局檔案，在對應的位置新增一下程式碼。

<span id="timeDate">載入天數...</span><span id="times">載入時分秒...</span>
<script>
    var now = new Date(); 
    function createtime() { 
        var grt= new Date("02/14/2018 12:49:00");//此處修改你的建站時間或者網站上線時間 
        now.setTime(now.getTime()+250); 
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
        document.getElementById("timeDate").innerHTML = "本站已安全執行 "+dnum+" 天 "; 
        document.getElementById("times").innerHTML = hnum + " 小時 " + mnum + " 分 " + snum + " 秒"; 
    } 
setInterval("createtime()",250);
</script>
複製程式碼

執行效果

執行時長

相關文章