hexo-theme-next @modified LRH

hexo-theme-next

基於hexo-theme-next 6.0+的Pisces模板做的DIY擴展性設計。主要是一些custom stlye還有一些第三方的js。修改的地方太多也有點小亂就不提PR了。 官方Demo => https://theme-next.org
記錄一下折騰過程，修改內容以博採眾長爲準，以後備份恢復博客也好方便自己。本文之前的美化修改請見hexo分類。
主題中若有遺漏第三方插件或應用的key及id值等請修改爲自己對應的值

主要的幾個自定義文件

_config.swig         #主題配置文件 相關賬戶信息自己註冊替換
\layout\custom\head.swig      #在頭部自定義加入標籤
\layout\custom\google_adsense.swig    #谷歌廣告模塊，內有註釋暫時棄用
\layout\_layout.swig        #主佈局
\layout\_macro\post.swig      #文章佈局
\layout\_macro\post-copyright.swig    #文章版權
\layout\_macro\siderbar.swig      #側欄模板
\layout\_third-party\copy-code.swig   #複製按鈕
\layout\_partials\comments.swig     #評論主模板
\layout\_partials\footer.swig     #底部模板
\layout\_third-party\custom.swig      #該模塊在layout.swig引入用於在body自定義標籤
\source\css\_custom\customs.styl    #主要用戶自定義樣式表
\source\fonts\          #引入了一些我的手寫體及外部字體
\scripts\qcloudcdn.js       #騰訊雲cos桶刷新緩存的腳本，不需要可刪掉[^1]
\layout\_partials\footer_custom.swig    #footer自定義文件

^1

初步安裝

cd hexo
git clone https://github.com/Lruihao/hexo-theme-next themes/next

更新內容

更多自定義詳見源碼

備案信息自定義

# -------------------------------------------------------------
# footer_custom Settings
# ---------------------------------------------------------------
beian:
  enable: true
  gov: 湘公網安備 43030402000254號
  recordcode: 43030402000254
  icp: 湘ICP備18020535號

文字抖動特效

<div class="shaky">(づ●'◡'●)づ ❥內容區</div>

左下角微信公衆號

\source\css\_custom\customs.styl  

相關文章收納

加入H5標籤，實現可收納功能，點擊查看詳情。

Chat Services

共chatra,tidio,daovoice三個選項，三選一

# Chatra Support
# See: https://chatra.io
# Dashboard: https://app.chatra.io/settings/general
chatra:
  enable: false
  async: true
  id: # visit Dashboard to get your ChatraID
  #embed: # unfinished experimental feature for developers, See: https://chatra.io/help/api/#injectto

# Tidio Support
# See: https://www.tidiochat.com
# Dashboard: https://www.tidiochat.com/panel/dashboard
tidio:
  enable: false
  key: # Public Key, get it from Dashboard, See: https://www.tidiochat.com/panel/settings/developer

#在線客服
daovoice: true
daovoice_app_id: xxxx   # http://www.daovoice.io/

pdf和Mermaid解析模塊

pdf傳送門

pdf:
  enable: false
  # Default height
  height: 500px
  pdfobject:
    cdn: //cdn.jsdelivr.net/npm/pdfobject@2/pdfobject.min.js
    #cdn: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js

# Mermaid tag
mermaid:
  enable: false
  # Available themes: default | dark | forest | neutral
  theme: forest
  cdn: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
  #cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js

模仿csdn轉發樣式

...
   <a class="post-title-link" href="{{ url_for(post.path) }}" itemprop="url">
+    {% if post.repost %}
+      <span class="repost">轉</span>
+    {% endif %}
     {{ post.title | default(__('post.untitled'))}}
   </a>
 {% else -%}
+  {% if post.repost %}
+    <span class="repost">轉</span>
+  {% endif %}
   {{- post.title -}}
...

.repost {
  color: #5acc79;
  border: 1px solid #e7f4df;
  border-radius: 20px;
  padding: 2px 5px;
  font-size: 15px;
  font-weight: 500;
}

---
title: xxxx
repost: true
---

預覽

熱度頁面

打開hexo\themes\next\layout新建top.swig文件，寫下如下內容保存：
其中第36行改成你自己的leancloud的appid和appkey,比如我的是在主題配置文件裏面的valine配置下，所以我就寫成theme.valine.appid。和我一樣就不需要修改，其他自行配置。

然後hexo n page top新建一個頁面文章配置寫下如下內容，limit表示顯示篇數：

---
title: 熱度
layout: top
limit: 20
---

複製按鈕樣式

本來只想簡單美化一下變成night樣式的，後來寫完發現3dbtn也挺喜歡的。

codeblock:
  # Manual define the border radius in codeblock
  # Leave it empty for the default 1
  border_radius: 5
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result
    show_result: true
    # Style: 'light,night,flat,3dbtn' is currently available, leave it empty or light is default theme
    style: night

本文作者： 李瑞豪
修改時間： 2019-05-30 23:34:28
本文鏈接： https://lruihao.cn/posts/hexo-theme-next.html
版權聲明： 本博客所有文章除特別聲明外，均採用 BY-NC-SA 4.0 許可協議。轉載請註明出處！