[EasyHexo 專欄] #2 - 魔改 Next 不完全教程

ChungZH發表於2019-01-21

Hexo

EasyHexo? 輕鬆使用 Hexo 搭建你的部落格

EasyHexo GitHub Repo? EasyHexo/Easy-Hexo

本篇作者：yi-yun

前言

這篇文章並沒有劃定適宜人群，只是希望你可以通過此篇教程找到適合你的配置，或者通過我的部落格找到一些靈感。這就是這篇教程的意義。

另外，需要說明的是，我的部落格使用的主題是 Next 6.3 版本。

學習之前，還希望你能先學一點 Yaml 基礎知識以及 Stylus 基礎知識。不會的話多動手也可以做到，並不需要熟練掌握。

約定

一般提供方法，且按步驟。如果修改方法很多，我會以 • 方式區分
仔細看清站點配置檔案和主題配置檔案
部落格檔案目錄為 root 目錄，即包括你的 themes/ 、source/ 等資料夾的部落格根目錄。
效果圖在每個教程最開頭。~~（大部分都有，逃~~

個性化配置

修改打賞文字抖動

個人不喜歡這個設計所以改了

修改檔案 themes\next\source\css\_common\components\post\post-reward.styl，將 hover 註釋即可

可以在 themes\next\source\css\_custom\custom.styl 中新增重疊樣式（推薦）

//二維碼不抖動
#wechat:hover p, #alipay:hover p {
    animation: none;
}
複製程式碼

修改打賞按鈕

在 themes\next\source\css\_custom\custom.styl 中新增程式碼

//打賞按鈕修改
#rewardButton span {
    height: 35px;
    width: 35px;
    //line-height:30px; 
    font-size: 15px;
    font-family: "PingFang SC", "Microsoft YaHei", Georgia, sans-serif;
    background: #34495e;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: 0.2s ease-out;

    &:hover {
        background: #649ab6;
        -webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        -moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }
}
複製程式碼

修改 themes\next\languages\zh-CN.yml 檔案，將打賞字樣改為
```
reward:
donate: <i class="fa fa-qrcode fa-2x" style="line-height:35px;"></i>
wechatpay: 微信支付
alipay: 支付寶
複製程式碼
```
PS: 這裡語言檔案的名字跟不同主題有關係，有可能不是 zh-CN.yml

修改 `busuanzi` 統計功能

主題配置檔案中搜尋 busuanzi 增加

busuanzi_count:
enable: true
site_uv: true #total visitors
site_uv_icon: user
site_uv_header: 訪問使用者：
site_uv_footer: 人
site_pv: true #total views
site_pv_icon: eye
site_pv_header: 訪問次數：
site_pv_footer: 次
post_views: true
post_views_icon: eye
複製程式碼

themes\next\layout\_third-party\analytics\busuanzi-counter 變更為

<i class="fa fa-{{ theme.busuanzi_count.site_uv_icon }}"></i>&nbsp
    {{ theme.busuanzi_count.site_uv_header }}
    <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
    {{ theme.busuanzi_count.site_uv_footer }}
    
<i class="fa fa-{{ theme.busuanzi_count.site_pv_icon }}"></i>&nbsp
    {{ theme.busuanzi_count.site_pv_header }}
    <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
    {{ theme.busuanzi_count.site_pv_footer }}
複製程式碼

PS: busuanzi 因為在 2018.10.12 左右七牛雲域名過期，導致無法顯示人數，如果你的主題是舊版本，請在第二步的檔案中更新為 src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"

給文章底部加星星（點贊）

雖然是非同步，但訪問速度太慢，經常載入不出來

在主題配置檔案中搜尋 rating 即可
點選此連結註冊賬號，設定站點後，點選左側設定， site 建議選私人，rate 選擇顏色儲存即可
複製 ID 到配置檔案，選擇顏色

新增程式碼，搜尋 rating，對比程式碼

        {% if theme.rating.enable %}
        <div class="wp_rating">
+           <div style="color: rgba(0, 0, 0, 0.75); font-size:13px; letter-spacing:3px">(&gt;看完記得五星好評哦&lt;)</div>
            <div id="wpac-rating"></div>
        </div>
        {% endif %}
複製程式碼

修改文章底部留白新增如下程式碼：

.post-widgets {
    padding-top: 0px;
}
.post-nav {
    margin-top: 30px;
}
複製程式碼

側邊欄近期文章

原理：去除友鏈，將友鏈換成近期文章

新增如下程式碼：

{% if theme.recent_posts %}
    <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout  }}">
    <div class="links-of-blogroll-title">
        <i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
        {{ theme.recent_posts_title }}
    </div>
    <ul class="links-of-blogroll-list">
        {% set posts = site.posts.sort('-date') %}
        {% for post in posts.slice('0', '5') %}
        <li>
            <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
        </li>
        {% endfor %}
    </ul>
    </div>
{% endif %}
複製程式碼

在主題配置檔案中配置

recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true
複製程式碼

複製文字新增版權資訊

在 themes\next\source\js\src 新建 copy.js，程式碼如下：

function addLink() 
{ 
    var body_element = document.body; var selection;
    selection = window.getSelection(); 
    if (window.clipboardData) { // Internet Explorer 
        var pagelink ="\r\n\r\n 原文出自[ Yi-Yun部落格 ](yi-yun.github.io) \n除特別宣告外，均採用CC BY-NC-SA 4.0許可協議\n轉載請保留原文連結: "+document.location.href+""; 
        var copytext = selection + pagelink;
        window.clipboardData.setData ("Text", copytext); 
        return false; 
    }
    else {
        var pagelink = "<br/>原文出自[ Yi-Yun部落格 ](yi-yun.github.io)<br/>除特別宣告外，均採用 CC BY-NC-SA 4.0 許可協議<br/>轉載請保留原文連結: "+document.location.href+"";
        var copytext = selection + "<br/>"+pagelink;
        var newdiv = document.createElement('div');
        newdiv.style.position='absolute';
        newdiv.style.left='-99999px';
        body_element.appendChild(newdiv);
        newdiv.innerHTML = copytext;
        selection.selectAllChildren(newdiv);
        window.setTimeout(function() { body_element.removeChild(newdiv);},0);
    } 
} 
document.oncopy = addLink;
複製程式碼

在 next\layout\_layout.swig 檔案中，新增引用（注：在 swig 檔案末尾新增）：
```
<script type="text/javascript" src="/js/src/copy.js"></script>
複製程式碼
```

新增 DaoVioce

很多靈感都是逛部落格獲得的

註冊

首先在 DaoVoice 註冊個賬號，點選->邀請碼是 cbaf2df2。

獲取 app_id

點選左側應用設定->安裝到網站

在程式碼中找到 app_id

修改 `head.swig`

在 themes\next\layout\_custom\head.swig 新增如下程式碼

{% if theme.daovoice %}
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}
複製程式碼

修改主題配置檔案

檔案末尾新增如下程式碼

# Online contact
daovoice: true
daovoice_app_id:   # 這裡填你剛才獲得的 app_id
複製程式碼

至此，網頁的線上聯絡功能已經完成，hexo s 可檢視頁面，視窗和位置可自行配置

聊天視窗配置

我的配置

繫結微信

在使用者介面點選右上角頭像即可掃碼繫結，即時通訊可在微信小程式中

新增吉祥物

安裝依賴

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

站點配置

# hexo-helper-live2d配置，參考https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
debug: false
model:
    scale: 1
    use: live2d-widget-model-wanko
display:
    superSample: 2 # 超取樣等級
    width: 100 
    height: 100
    position: left # 位置
mobile:
    show: false
react:
    opacityDefault: 0.9 # 預設透明度
    opacityOnHover: 0.5 # 滑鼠移上透明度
複製程式碼

網頁標題崩潰欺騙

新增 JavaScript 程式碼在 themes\next\source\js\src 資料夾下建立 crash_cheat.js，新增程式碼：

var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        $('[rel="icon"]').attr('href', "/img/TEP.ico");
        document.title = '╭(°A°`)╮ 頁面崩潰啦 ~';
        clearTimeout(titleTime);
    }
    else {
        $('[rel="icon"]').attr('href', "/favicon.ico");
        document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitle;
        titleTime = setTimeout(function () {
            document.title = OriginTitle;
        }, 2000);
    }
});
複製程式碼

引用
在themes\next\layout\_layout.swig檔案中，新增引用（注：在swig末尾新增）：
```
<script type="text/javascript" src="/js/src/crash_cheat.js"></script>
複製程式碼
```

文末新增結束標記

修改 themes\next\layout\_macro\passage-end-tag.swig 檔案

<div> 
   {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結束<i class="fa fa-paw"></i>感謝您的閱讀-------------</div>
    {% endif %}
</div>
複製程式碼

修改網頁底部的桃心

更改主題配置檔案中的圖示名字即可

icon:
    name: user  
    animated: true 
    color: "#808080"
複製程式碼

透明

找到自己相應的 Scheme 下的相關檔案，我的是 Pisces。

themes\next\source\css\_schemes\Pisces\_layout.styl
- 背景
  .content-wrap
- 選單欄
  .header-inner
themes\next\source\css\_schemes\Pisces\_sidebar.styl
- 側邊欄
  .sidebar-inner

找到 background屬性更改為 background: rgba(255,255,255,0.7) 即為透明度30%的白色

更改 sidebar 大小

找到 themes\next\source\js\src\util.js

function updateSidebarHeight(height) {
    height = height || 'auto';
    $('.site-overview, .post-toc').css('max-height', height);
  }
複製程式碼

可在 height 後加50

底部加上執行時間

在 hexo/themes/[your theme]/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>
複製程式碼

滑鼠爆炸特效

注：這個指令碼源於 anime.js 的官網，由 hexo-theme-melody 的開發者 Molunerfinn 最先引出。

下載這個指令碼，放在 themes/next/source/js/src

修改程式碼

{% if theme.fireworks %}
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="/js/src/fireworks.js"></script>
{% endif %}
複製程式碼

開啟主題配置檔案，在裡面最後寫下：
```
fireworks: true
複製程式碼
```

SEO 優化

看個人喜好修改，不一定要改的一模一樣

首頁 title 優化

更改 index.swig 檔案 your-hexo-site\themes\next\layout

{% block title %} {{ config.title }} {% endblock %}
{% block title %} {{ theme.keywords }} - {{ config.title }}{{ theme.description }} {% endblock %}
{% block title %}{{ theme.description }}-{{ title }}{% if theme.index_with_subtitle and subtitle %} – {{ subtitle }}{% endif %}{% endblock %}
複製程式碼

修改文章連結

編輯站點配置檔案，修改其中的 permalink 欄位改為 permalink: :title.html 即可。

新增 "nofollow" 標籤

修改程式碼

{{ __('footer.powered', '<a class="theme-link" href="http://hexo.io" rel="external nofollow">Hexo</a>') }}
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow">
複製程式碼

同理，sidebar.swig也作如下修改

<a href="http://creativecommons.org/licenses/{{ theme.creative_commons }}/4.0" class="cc-opacity" target="_blank" rel="external nofollow">
<a href="{{ link }}" target="_blank" rel="external nofollow">{{ name }}</a>
複製程式碼

參考連結

很久以前的事情了...有些參考連結找不到了，而且找不到原創...

好了，本文就到這裡。如果對 Hexo 有什麼疑問，歡迎在評論區中提問，我會盡力回答。或者你也可以選擇更優秀的方式 issue 提問！

如果你想學學 Hexo，可以到 EasyHexo 學習。

謝謝大家！

???

[EasyHexo 專欄] #1 - Markdown 編輯器推薦與語法簡介
2018-12-21
Hexo
蟻劍原理與魔改
2020-11-21
魔改redis之新增命令hrandmember
2020-12-27
Redis
演算法識別(一)--TEA及其魔改
2024-07-23
演算法
mongodb如何改_id欄位？
2021-09-11
MongoDB
拒絕魔改，Flutter動態配置多環境
2021-05-12
Flutter
Next.js 入門教程
2020-02-17
JS
專用ROS軟路由如何設定改wifi地址教程
2021-01-24
ROS路由WiFi
Hexo Next主題進階教程
2018-07-31
Hexo
快速將下劃線欄位改為駝峰欄位
2024-05-16
看到一個魔改執行緒池，面試素材加一！
2021-11-29
執行緒面試
Hexo+NexT（零）：最全Hexo+Next搭建部落格教程
2019-06-30
Hexo
【docker專欄2】CentOS作業系統安裝DockerCE
2022-07-10
DockerCentOS作業系統
專案經理與魔術師（轉）
2007-08-13
優化 Go 錯誤處理，魔改 Go recover 靠譜嗎？
2022-07-09
優化Go
魔改 32位 WinXP 可以用上 16GB 記憶體
2024-03-26
記憶體
GDE專欄 | Android Things中的I2C
2017-03-15
Android
picturetoexe v3.60 beta #2不完全破解 (2千字)
2001-04-30
HarmonyOS NEXT 5.0自定義增強版導航欄元件|鴻蒙ArkUI自定義標題欄
2024-10-31
元件鴻蒙UI
《iOS 專案化入門教程之試題2》
2020-12-03
iOS
Bert文字分類實踐（二）：魔改Bert，融合TextCNN的新思路
2021-10-11
文字分類CNN
Next.js 入門超詳解教程
2020-02-17
JS
改變表中非空欄位的型別
2008-11-28
型別
🚀2023最新版克魔助手抓包教程(9) - 克魔助手 IOS 資料抓包
2024-01-30
iOS
為什麼Next.js 13會改變遊戲規則？
2023-03-28
JS遊戲
巫師改編劇《獵魔人》口碑跳水，遊戲到影視的鴻溝有多深？
2020-01-02
遊戲
中環混改尚存變數高調的TCL要上演“資本魔輸”？
2020-06-29
變數
魔改swagger：knife4j的另外一種開啟方式
2021-10-16
Swagger
Less is richness，基於less is more的部落格園寬屏主題魔改
2024-08-12
mac選單欄設定教程
2020-10-10
Mac
基於 abp vNext 和 .NET Core 開發部落格專案 - 自定義倉儲之增刪改查
2020-05-20
鴻蒙Next-支付寶SDK接入教程
2024-08-20
鴻蒙
改變表的欄位順序dbms_REDEFINITION
2013-03-19
一、JVM專欄之一
2019-04-18
JVM
Docker專欄-第一課
2022-12-06
Docker
掘金專欄寫作指南
2017-07-11
《Java專欄》— 初學Java
2017-10-28
Java
AT2000的不完全破解！ (2千字)
2001-06-19

[EasyHexo 專欄] #2 - 魔改 Next 不完全教程

前言

約定

個性化配置

修改打賞文字抖動

修改打賞按鈕

修改 `busuanzi` 統計功能

給文章底部加星星（點贊）

側邊欄近期文章

複製文字新增版權資訊

新增 DaoVioce

註冊

獲取 app_id

修改 `head.swig`

修改主題配置檔案

聊天視窗配置

繫結微信

新增吉祥物

網頁標題崩潰欺騙

文末新增結束標記

修改網頁底部的桃心

透明

更改 sidebar 大小

底部加上執行時間

滑鼠爆炸特效

SEO 優化

首頁 title 優化

修改文章連結

新增 "nofollow" 標籤

推薦工具

參考連結

相關文章

[EasyHexo 專欄] #2 - 魔改 Next 不完全教程

前言

約定

個性化配置

修改打賞文字抖動

修改打賞按鈕

修改 busuanzi 統計功能

給文章底部加星星（點贊）

側邊欄近期文章

複製文字新增版權資訊

新增 DaoVioce

註冊

獲取 app_id

修改 head.swig

修改主題配置檔案

聊天視窗配置

繫結微信

新增吉祥物

網頁標題崩潰欺騙

文末新增結束標記

修改網頁底部的桃心

透明

更改 sidebar 大小

底部加上執行時間

滑鼠爆炸特效

SEO 優化

首頁 title 優化

修改文章連結

新增 "nofollow" 標籤

推薦工具

參考連結

相關文章

修改 `busuanzi` 統計功能

修改 `head.swig`