碼上快樂

相關內容    簡體    繁體

個人博客主題美化

本文轉載自   查看原文   2019-08-23 21:12   376    個人博客搭建

個人博客主題美化

選擇主題

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

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

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

應用主題

  1. 下載主題
  2. 將下載好的主題文件夾，粘貼到站點目錄的themes下。
  3. 更改站點配置文件_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---
實現點擊出現桃心效果
  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
```


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 博客美化——Silence主題皮膚 博客園主題美化教程 Silence - 博客園主題美化-介紹 Hexo 博客Next 搭建與美化主題 博客園SimpleMemory主題美化 可愛的博客園樣式美化、自定義博客園主題樣式 kali linux主題美化 jenkins主題簡單美化 博客園主題美化：目錄、音樂播放、回到頂部小火箭 Hexo博客Next v7.X 主題升級,美化警示錄
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM