個人博客主題美化 選擇主題 Hexo預設的主題是landscape,推薦以下主題: 1. "snippet" 2. "Hiero" 3. "JSimple" 4. "BlueLake" 詳見:https://github.com/search?q=hexo theme 應用主題 1. 下載主題 2. ...
個人博客主題美化
選擇主題
Hexo預設的主題是landscape,推薦以下主題:
詳見:https://github.com/search?q=hexo-theme
應用主題
- 下載主題
- 將下載好的主題文件夾,粘貼到站點目錄的
themes
下。 - 更改站點配置文件
_config.yml
的theme欄位,為主題文件夾的名稱:
# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: <主題文件夾的名稱>
主題優化
以上主題都有比較詳細的說明文檔,本節主要解決主題優化的常見問題。
主題優化一般包括:
設置「RSS」
添加「標簽」頁面
添加「分類」頁面
設置「字體」
問題:引用國外字體鏡像較慢。
解決:可以改用國內的。將\themes*\layout_partials\head external-fonts.swig文件中fonts.google.com改成fonts.lug.ustc.edu.cn。
設置「代碼高亮主題」
側邊欄社交鏈接
問題:圖標哪裡找?
解決:Font Awesome
開啟打賞功能
問題:微信支付寶二維碼不美觀,規格不一。
解決:線上生成二維碼
設置友情鏈接
騰訊公益404頁面
站點建立時間
訂閱微信公眾號
設置「動畫效果」
問題:慢,需要等待 JavaScript 腳本完全載入完畢後才會顯示內容。
解決:將主題配置文件_config.yml
中,use_motion欄位的值設為false
來關閉動畫。設置「背景動畫」
主題優化還包括:
添加背景圖
在 themes/*/source/css/_custom/custom.styl 中添加如下代碼:
body{ background:url(/images/bg.jpg); background-size:cover; background-repeat:no-repeat; background-attachment:fixed; background-position:center;}
修改Logo字體
在 themes/*/source/css/_custom/custom.styl
中添加如下代碼:
@font-face { font-family: Zitiming; src: url('/fonts/Zitiming.ttf');}.site-title { font-size: 40px !important; font-family: 'Zitiming' !important;}
其中字體文件在 themes/next/source/fonts
目錄下,裡面有個 .gitkeep
的隱藏文件,打開寫入你要保留的字體文件,比如我的是就是寫入 Zitiming.ttf
,具體字型檔自己從網上下載即可。
修改內容區域的寬度
編輯主題的 source/css/_variables/custom.styl
文件,新增變數:
// 修改成你期望的寬度$content-desktop = 700px// 當視窗超過 1600px 後的寬度$content-desktop-large = 900px
網站標題欄背景顏色
打開 themes/*/source/css/_custom/custom.styl
,在裡面寫下如下代碼:
.site-meta { background: $blue; //修改為自己喜歡的顏色}
自定義滑鼠樣式
打開 themes/*/source/css/_custom/custom.styl
,在裡面寫下如下代碼:
// 滑鼠樣式 * { cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important } :active { cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important }
文章加密訪問
打開 themes/*/layout/_partials/head.swig
文件,在 ``之前插入代碼:
<script> (function(){ if('{{ page.password }}'){ if (prompt('請輸入密碼') !== '{{ page.password }}'){ alert('密碼錯誤'); history.back(); } } })();</script>
寫文章時加上password: *
:
---title: 2018date: 2018-10-25 16:10:03password: 123456---
實現點擊出現桃心效果
- 在
/themes/*/source/js/src
下新建文件click.js
,接著把以下粘貼到click.js
文件中。
代碼如下:
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
- 在
\themes\*\layout\_layout.swig
文件末尾添加:
<!-- 頁面點擊小紅心 --><script type="text/javascript" src="/js/src/clicklove.js"></script>
靜態資源壓縮
在站點目錄下:
$ npm install gulp -g
安裝gulp插件:
npm install gulp-minify-css --savenpm install gulp-uglify --savenpm install gulp-htmlmin --savenpm install gulp-htmlclean --savenpm install gulp-imagemin --save
在 Hexo
站點下新建 gulpfile.js
文件,文件內容如下:
var gulp = require('gulp');var minifycss = require('gulp-minify-css');var uglify = require('gulp-uglify');var htmlmin = require('gulp-htmlmin');var htmlclean = require('gulp-htmlclean');var imagemin = require('gulp-imagemin');// 壓縮css文件gulp.task('minify-css', function() { return gulp.src('./public/**/*.css') .pipe(minifycss()) .pipe(gulp.dest('./public'));});// 壓縮html文件gulp.task('minify-html', function() { return gulp.src('./public/**/*.html') .pipe(htmlclean()) .pipe(htmlmin({ removeComments: true, minifyJS: true, minifyCSS: true, minifyURLs: true, })) .pipe(gulp.dest('./public'))});// 壓縮js文件gulp.task('minify-js', function() { return gulp.src(['./public/**/.js','!./public/js/**/*min.js']) .pipe(uglify()) .pipe(gulp.dest('./public'));});// 壓縮 public/demo 目錄內圖片gulp.task('minify-images', function() { gulp.src('./public/demo/**/*.*') .pipe(imagemin({ optimizationLevel: 5, //類型:Number 預設:3 取值範圍:0-7(優化等級) progressive: true, //類型:Boolean 預設:false 無損壓縮jpg圖片 interlaced: false, //類型:Boolean 預設:false 隔行掃描gif進行渲染 multipass: false, //類型:Boolean 預設:false 多次優化svg直到完全優化 })) .pipe(gulp.dest('./public/uploads'));});// 預設任務gulp.task('default', [ 'minify-html','minify-css','minify-js','minify-images']);
只需要每次在執行 generate
命令後執行 gulp
就可以實現對靜態資源的壓縮,壓縮完成後執行 deploy
命令同步到伺服器:
hexo ggulphexo d
修改訪問URL路徑
預設情況下訪問URL路徑為:domain/2018/10/18/關於本站
,修改為 domain/About/關於本站
。 編輯 Hexo
站點下的 _config.yml
文件,修改其中的 permalink
欄位:
permalink: :category/:title/
博文置頂
安裝插件
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save
然後在需要置頂的文章的Front-matter中加上top即可:
---title: 2018date: 2018-10-25 16:10:03top: 10---
- 設置置頂標誌
打開:/themes/*/layout/_macro/post.swig,定位到
,插入以下代碼即可:
{% if post.top %} <i class="fa fa-thumb-tack"></i> <font color=7D26CD>置頂</font> <span class="post-meta-divider">|</span>{% endif %}
在右上角或者左上角實現fork me on github
- 選擇樣式GitHub Ribbons,
- 修改圖片跳轉鏈接,將
<a href="https://github.com/you">
中的鏈接換為自己Github鏈接: - 打開
themes/next/layout/_layout.swig
文件,把代碼複製到<div class="headband"></div>
下麵。
主頁文章添加邊框陰影效果
打開 themes/*/source/css/_custom/custom.styl
,向裡面加代碼:
// 主頁文章添加陰影效果.post { margin-top: 0px; margin-bottom: 60px; padding: 25px; -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5); -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);}
顯示當前瀏覽進度
修改themes/*/_config.yml
,把 false
改為 true
:
# Back to top in sidebarb2t: true# Scroll percent label in b2t buttonscrollpercent: true
創建分類頁
在終端視窗下,定位到 Hexo
站點目錄下,新建:
$ cd <站點目錄>$ hexo new page categories
加入 廣告
註冊,複製廣告代碼
部署到網站。
2.1. 新建
theme/*/layout/_custom/google_ad.swig
,將 AdSense 上的代碼粘貼進去2.2. 頭部。在
theme/*/layout/_custom/head.swig
中也粘貼一份2.3. 每篇博客。在
theme/*/layout/post.swig
里中在希望看到的地方加上:{% include '_custom/google_ad.swig' %}
例如:在
<div id="posts" class="posts-expand"> </div>
中間插入,總代碼如下:{% block content %} <div id="posts" class="posts-expand"> {{ post_template.render(page) }} {% include '_custom/google_ad.swig' %} </div>{% endblock %}
等待審核通過。如果失敗,可再次申請。
添加萌萌噠
首先,安裝npm包:
npm install --save hexo-helper-live2d
然後在hexo的配置文件_config.yml
中添加如下配置,詳細配置可以參考文檔:
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
debug: false
model:
use: live2d-widget-model-shizuku
display:
position: right
width: 150
height: 300
mobile:
show: true
然後下載模型,模型名稱可以到這裡參考,一些模型的預覽可以在這裡。
npm install live2d-widget-model-shizuku
所有模型列表如下:
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01
(usenpm install --save live2d-widget-model-haru
)live2d-widget-model-haru/02
(usenpm install --save live2d-widget-model-haru
)live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
下載完之後,在Hexo根目錄中新建文件夾live2d_models,然後在node_modules文件夾中找到剛剛下載的live2d模型,將其複製到live2d_models中,然後編輯配置文件中的model.use
項,將其修改為live2d_models文件夾中的模型文件夾名稱。
複製你喜歡的模型名字:
Epsilon2.1
Gantzert_Felixander
haru
miku
ni-j
nico
nietzche
nipsilon
nito
shizuku
tsumiki
wanko
z16
hibiki
koharu
haruto
Unitychan
tororo
hijiki
插件配置
以下插件(評論系統、數據統計與分析、內容分享服務、搜索服務)各選一個即可。
評論系統
推薦指數 | 優點 | 缺點 | |
---|---|---|---|
Valine | 4 | 每天30000條評論,10GB的儲存 | 作者評論無標識 |
來必力/livere | 4 | 多種賬號登錄 | 評論無法導出 |
暢言 | 3 | 美觀 | 必須備案功能變數名稱 |
gitment | 3 | 簡潔 | 只能登陸github評論 |
Disqus | 1 | 需要翻*牆 |
Valine
1.1. 獲取APP ID 和 APP Key
請先登錄或註冊 LeanCloud, 進入控制台後點擊左下角創建應用,
進入剛剛創建的應用,選擇左下角的設置
>應用Key
,然後就能看到你的APP ID
和APP Key
了。
1.2. 填寫APP ID 和 APP Key到主題配置文件_config.yml
1.3. 運行hexo g&&hexo d
推送到博客。
來必力/livere
2.1. 登陸 來必力 獲取你的 LiveRe UID。
2.2. 填寫LiveRe UID到主題配置文件_config.yml
暢言
3.1.獲取APP ID 和 APP Key
請先登錄或註冊 暢言, 點擊“立即免費獲取暢言”,
新建站點,點擊管理,點擊評論插件>評論管理,
點擊後臺總覽,然後就能看到你的APP ID
和APP Key
了。
3.2. 填寫APP ID 和 APP Key到主題配置文件_config.yml
3.3. 運行hexo g&&hexo d
推送到博客。
gitment
(如果博客搭建再碼雲上不能運行,個人沒有解決)
4.1. 安裝插件:
npm i --save gitment
4.2. 申請應用
在New OAuth App為你的博客應用一個密鑰:
Application name:隨便寫Homepage URL:這個也可以隨意寫,就寫你的博客地址就行Application description:描述,也可以隨意寫Authorization callback URL:這個必須寫你的博客地址
4.3. 配置
編輯主題配置文件themes/*/_config.yml
:
# Gitment# Introduction: https://imsun.net/posts/gitment-introduction/gitment: enable: true mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway count: true # Show comments count in post meta area lazy: false # Comments lazy loading with a button cleanly: false # Hide 'Powered by ...' on footer, and more language: # Force language, or auto switch by theme github_user: {you github user id} github_repo: 公開的git倉庫,評論會作為那個項目的issue client_id: {剛纔申請的ClientID} client_secret: {剛纔申請的Client Secret} proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect redirect_protocol: # Protocol of redirect_uri with force_redirect_pro
Disqus
編輯 主題配置文件themes/*/_config.yml
, 將 disqus 下的 enable 設定為 true,同時提供您的 shortname。count 用於指定是否顯示評論數量。
disqus: enable: false shortname: count: true
數據統計與分析
推薦指數 | 優點 | 缺點 | |
---|---|---|---|
不蒜子 | 4 | 可直接將訪問次數顯示在您在網頁上(也可不顯示) | 只計數 |
百度統計 | 3 | 收錄慢 |
不蒜子
編輯 主題配置文件 themes/*/_config.yml
中的busuanzi_count
的配置項即可。
- 當
enable: true
時,代表開啟全局開關。 - 若
site_uv
(本站訪客數)、site_pv
(本站訪客數)、page_pv
(本文總閱讀量)的值均為false
時,不蒜子僅作記錄而不會在頁面上顯示。
註意:
不蒜子官方因七牛強制過期原有的『dn-lbstatics.qbox.me』功能變數名稱(預計2018年10月初),與客服溝通數次無果,即使我提出為此付費也不行,只能更換功能變數名稱到『busuanzi.ibruce.info』!
解決辦法:
找到主題調用不蒜子的swig文件。一般在”\themes*\layout_third-party\analytics\busuanzi-counter.swig”
更改功能變數名稱
把原有的:<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>功能變數名稱改一下即可:<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
百度統計
- 登錄 百度統計,定位到站點的代碼獲取頁面
- 複製統計腳本 id,如圖:
- 編輯 主題配置文件
themes/*/_config.yml
,修改欄位google_analytics
,值設置成你的統計腳本 id。
內容分享服務
推薦指數 | 優點 | 缺點 | |
---|---|---|---|
百度分享 | 4 | 穩定 | 不太美觀 |
need-more-share2 | 4 | 美觀 | 更新不及時(比如微信分享API) |
百度分享
編輯 主題配置文件,添加/修改欄位 baidushare
,值為 true
即可。
# 百度分享服務baidushare: true
need-more-share2
編輯 主題配置文件,添加/修改欄位 needmoreshare2
,值為 true
即可。
needmoreshare2: enable: true
搜索服務
推薦指數 | 優點 | 缺點 | |
---|---|---|---|
Local Search | 4 | 配置方便 | |
Swiftype | 2 | 需註冊 | |
Algolia | 2 | 需註冊 |
Local Search
添加百度/谷歌/本地 自定義站點內容搜索
安裝
hexo-generator-searchdb
,在站點的根目錄下執行以下命令:$ npm install hexo-generator-searchdb --save
編輯 站點配置文件,新增以下內容到任意位置:
search: path: search.xml field: post format: html limit: 10000
編輯 主題配置文件,啟用本地搜索功能:
# Local searchlocal_search: enable: true
Error: watch /path/to/hexo/theme/ EMPERM
因為目前在Windows Subsystem for Linux中,有些內容更改時,還不能實時更新到hexo伺服器。所以需要重新編譯,再啟動伺服器:
$ hexo generate
$ hexo server -s
#### Template render error有時運行命令`$ hexo generate` 返回一個錯誤:
FATAL Something’s wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Template render error: (unknown path)
這意味著有些認不出來單詞在你的文件,並且很可能在你的新博文,或者配置文件`_config.yml`中,比如縮進錯誤:錯誤例子:
plugins:
hexo-generator-feed
hexo-generator-sitemap
```