我的博客主題美化

時間  2019-12-01
標籤 我的 博客 主題 美化 简体版
原文   原文鏈接

我的博客主題美化

選擇主題

Hexo默認的主題是landscape，推薦如下主題：javascript

  1. snippet
  2. Hiero
  3. JSimple
  4. BlueLake

詳見：https://github.com/search?q=hexo-themecss

應用主題

  1. 下載主題
  2. 將下載好的主題文件夾，粘貼到站點目錄的themes下。
  3. 更改站點配置文件_config.yml 的theme字段，爲主題文件夾的名稱：
# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: <主題文件夾的名稱>

主題優化

以上主題都有比較詳細的說明文檔，本節主要解決主題優化的常見問題。html

主題優化通常包括：java

  • 設置「RSS」node

  • 添加「標籤」頁面git

  • 添加「分類」頁面github

  • 設置「字體」web

    問題：引用國外字體鏡像較慢。npm

    解決：能夠改用國內的。將\themes*\layout_partials\head external-fonts.swig文件中fonts.google.com改爲fonts.lug.ustc.edu.cn。gulp

  • 設置「代碼高亮主題」

  • 側邊欄社交連接

    問題：圖標哪裏找？

    解決：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---
實現點擊出現桃心效果
  1. 在/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);
  1. 在\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/
博文置頂

  1. 安裝插件

    $ 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---
  1. 設置置頂標誌

打開：/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
  1. 選擇樣式GitHub Ribbons,
  2. 修改圖片跳轉連接,將<a href="https://github.com/you">中的連接換爲本身Github連接：
  3. 打開 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
加入 廣告

主要有兩種：百度SSP和谷歌Adsense。方法相似：

  1. 註冊，複製廣告代碼

  2. 部署到網站。

    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 %}

  3. 等待審覈經過。若是失敗，可再次申請。

添加萌萌噠

首先，安裝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 (use npm install --save live2d-widget-model-haru)
  • live2d-widget-model-haru/02 (use npm 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文件夾中的模型文件夾名稱。

  1. 複製你喜歡的模型名字：

    Epsilon2.1

    img

    Gantzert_Felixander

    img

    haru

    img

    miku

    img

    ni-j

    img

    nico

    img

    nietzche

    img

    nipsilon

    img

    nito

    img

    shizuku

    img

    tsumiki

    img

    wanko

    img

    z16

    img

    hibiki

    img

    koharu

    img

    haruto

    img

    Unitychan

    img

    tororo

    img

    hijiki

    img

插件配置

如下插件（評論系統、數據統計與分析、內容分享服務、搜索服務）各選一個便可。

評論系統

推薦指數 優勢 缺點
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』！

解決辦法：

  1. 找到主題調用不蒜子的swig文件。通常在」\themes*\layout_third-party\analytics\busuanzi-counter.swig」

  2. 更改域名

    把原有的：<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>
百度統計
  1. 登陸 百度統計，定位到站點的代碼獲取頁面
  2. 複製統計腳本 id，如圖：
    ​img
  3. 編輯 主題配置文件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 需註冊

添加百度/谷歌/本地 自定義站點內容搜索

  1. 安裝 hexo-generator-searchdb，在站點的根目錄下執行如下命令：

    $ npm install hexo-generator-searchdb --save

  2. 編輯 站點配置文件，新增如下內容到任意位置：

    search:  path: search.xml  field: post  format: html  limit: 10000

  3. 編輯 主題配置文件，啓用本地搜索功能：

    # 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 ```

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程