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自定義文件
初步安裝
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:
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 許可協議。轉載請註明出處!