一、前言
由于平時自己喜歡看一些技術(shù)類文章整理成Word筆記，總感覺這種方式太low，想自己搭建屬于自己的博客，在網(wǎng)上查閱了一下，發(fā)現(xiàn)Hexo在GitHub或者是碼云上搭建博客非常給力。然后自己也搭建了博客，這篇文章就記錄了搭建的過程及一些優(yōu)化。
二、入門Hexo
2.1、什么是Hexo
Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(https://daringfireball.net/projects/markdown/) （或其他渲染引擎）解析文章，在幾秒內(nèi)，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁。大家進入 Hexo官網(wǎng)(https://hexo.io/zh-cn/docs/) 進行查看。
2.2、安裝Hexo
安裝 Hexo 相當(dāng)簡單。然而在安裝前，您必須檢查電腦中是否已安裝下列應(yīng)用程序：
Node.js：https://nodejs.org/en/Git：https://git-scm.com/cnpm ：如果npm運行出錯就安裝cnpm國內(nèi)鏡像所有必備的應(yīng)用程序安裝完成后，即可使用 npm或者cnpm 安裝 Hexo。
打開Git Bash here，輸入：
$ npm install -g hexo-cli 或者 $ cnpm install -g hexo-cli檢查是否安裝Hexo完成,查詢是否成功，顯示hexo-cli 版本就說明成功了
$ hexo -V2.3、建站
安裝一切所需的程序后，就可以開始建站了，就是創(chuàng)建我們的博客,大家也可以進入 建站官網(wǎng)(https://hexo.io/zh-cn/docs/setup) 查看。
新建一個文件夾，來管理我們的博客項目，執(zhí)行下列命令，Hexo 將會在指定文件夾中新建所需要的文件。
2.3.1、運行命令
$ hexo init <folder>$ cd <folder>$ cnpm install注：<folder>是表示建站的博客項目名。
打開Git Bash here，輸入：
$ hexo init githubBlog進入創(chuàng)建的博客項目下進行安裝
$ cd githubBlog$ cnpm install安裝之后，整個博客項目目錄如下：
2.3.2、訪問URL
$ hexo server 或者$ hexo s訪問URL：http://localhost:4000，效果如下圖：
到這里已經(jīng)通過Hexo初步創(chuàng)建博客了，下面再來了解一下如何將我們的博客托管到GitHub服務(wù)器上。
2.4、托管到GitHub
2.4.1、GitHub創(chuàng)建repositories
進入GitHub官網(wǎng)中瀏覽器輸入 https://github.com/ ,如果還沒有賬號就創(chuàng)建一個賬號就好了。
登錄自己的賬號。直接new repositories 或者進入You repositories 再new repositories。
進入到創(chuàng)建 repositories 頁面后,一定要注意，將新建的repository的名字為: Your account name.github.io。其他默認(rèn)就好了。
2.4.2、配置
GitHub的Repository創(chuàng)建好后，再回到本地的Hexo的githubBlog項目中，找到在項目的根目錄下_config.yml找到 deploy標(biāo)簽
在該文件下面添加如下內(nèi)容：
deploy: #部署 type: git repository: https://github.com/whb1990/whb1990.github.io.git branch: master注：repository: https://github.com/whb1990/whb1990.github.io 是自己剛剛創(chuàng)建Your account name.github.io 的repository，在Clone with HTTPS里面，復(fù)制粘貼就好了，冒號后面記得空格。branch 后面是master就好了。
在 _config.yml 找到 url 進行修改為：
url: http://whb1990.github.io #博客網(wǎng)址2.4.3、部署
到這里就差不多了，接下來需要執(zhí)行一些命令，將博客部署到GitHub上去。
打開Git Bash Here進入githubBlog 根目錄下，首先需要安裝一下 hexo-deployer-git(https://github.com/hexojs/hexo-deployer-git) 不然可能出現(xiàn)錯誤無法部署成功。
$ cnpm install hexo-deployer-git --save然后再執(zhí)行以下命令:
$ hexo clean$ hexo generate$ hexo deploy或者簡寫
$ hexo clean$ hexo g$ hexo d部署成功如下顯示:
2.4.4、測試
我們進行訪問 https://whb1990.github.io/ 和 http://localhost:4000/ 一樣的頁面說明是已經(jīng)成功。
三、站點文件配置
在根githubBlog目錄下 _config.yml文件，我們暫且稱為站點配置文件，以便與后面講到的主題配置文件(Next主題下的 _config.yml 文件)進行區(qū)分。
3.1、網(wǎng)站
參數(shù)
描述
title
網(wǎng)站標(biāo)題
subtitle
網(wǎng)站副標(biāo)題
description
網(wǎng)站描述
author
您的名字
language
網(wǎng)站使用的語言
timezone
網(wǎng)站時區(qū)。Hexo 默認(rèn)使用您電腦的時區(qū)。時區(qū)列表。比如說：America/New_York, Japan, 和 UTC 。
3.2、目錄
參數(shù)
描述
source_dir
資源文件夾，這個文件夾用來存放內(nèi)容。
public_dir
公共文件夾，這個文件夾用于存放生成的站點文件。
tag_dir
標(biāo)簽文件夾
archive_dir
歸檔文件夾
category_dir
分類文件夾
code_dir
Include code 文件夾
i18n_dir
國際化（i18n）文件夾
skip_render
跳過指定文件的渲染，您可使用 glob 來配置路徑
3.3、文章
參數(shù)
描述
默認(rèn)值
new_post_name
新文章的文件名稱
:title.md
default_layout
預(yù)設(shè)布局
post
auto_spacing
在中文和英文之間加入空格
false
titlecase
把標(biāo)題轉(zhuǎn)換為 title case
false
external_link
在新標(biāo)簽中打開鏈接
true
filename_case
把文件名稱轉(zhuǎn)換為 (1) 小寫或 (2) 大寫
0
render_drafts
顯示草稿
false
post_asset_folder
啟動 Asset 文件夾
false
relative_link
把鏈接改為與根目錄的相對位址
false
future
顯示未來的文章
true
highlight
代碼塊的設(shè)置
3.4、分類&標(biāo)簽
參數(shù)
描述
默認(rèn)值
default_category
默認(rèn)分類
uncategorized
category_map
分類別名
tag_map
標(biāo)簽別名
3.5、分頁
參數(shù)
描述
默認(rèn)值
per_page
每頁顯示的文章量 (0 = 關(guān)閉分頁功能)
10
pagination_dir
分頁目錄
page
四、寫作
4.1、創(chuàng)建文章
$ hexo new [layout] <title>如：創(chuàng)建hello-world
$ hexo new hello-world如果不添加title，默認(rèn)就是標(biāo)題title: hello-world。
這里注意一下，如果創(chuàng)建帶有中文的路徑名稱時，生成靜態(tài)頁面hexo g可能會報錯。
warning: LF will be replaced by CRLF in xxxxThe file will have its original line endings in your working directory.這是由于 路徑中存在 / 的符號轉(zhuǎn)義問題 ，如：創(chuàng)建文章時命名為中文，一般都出現(xiàn)這個小問題。
解決方法，在命令行中輸入:
$ git config --global core.autocrlf false然后重新生成文件部署就好了。
4.2、編輯文章
創(chuàng)建的文章在source/_posts目錄下，打開文件進行編輯，完全支持Markdown語法。
五、Next主題
在 Hexo主題官網(wǎng)(https://hexo.io/themes/) 中有許多主題，大家喜歡什么就進行部署和編輯就好了，大致的思路都是差不多的。
我選擇的 Next主題(https://github.com/theme-next/hexo-theme-next) ，網(wǎng)上很多也是用的這個主題。
5.1、安裝
在githubBlog根目錄下，執(zhí)行以下命令：
$ git clone https://github.com/theme-next/hexo-theme-next themes/next上面的命令是clone最新版本的主題，也可以使用下面的命令clone指定版本的主題
$ git clone --branch v7.1.1 https://github.com/theme-next/hexo-theme-next themes/next安裝完成之后，在themes下就會有next目錄
5.2、切換主題
在項目根目錄下打開 _config.yml 文件將 theme 設(shè)置為 next 即可：
部署之后查看效果如下，有點丑：
5.3、主題配置
一般配置都在 theme/next/-config.yml文件下配置。
5.3.1、修改整體布局
在 theme/next/-config.yml 找到 menu 看看自己博客所需的分類
menu: home: / || home #首頁 about: /about/ || user #關(guān)于 tags: /tags/ || tags #標(biāo)簽 categories: /categories/ || th #目錄 archives: /archives/ || archive #歸檔 #schedule: /schedule/ || calendar #日程 sitemap: /sitemap.xml || sitemap #站點地圖 commonweal: /404/ || heartbeat #公益404在menu_settings如果設(shè)置icon: false則無圖標(biāo)，badges: true則標(biāo)簽都會顯示數(shù)字
menu_settings: icons: true badges: false注：這里需要創(chuàng)建about頁面，很簡單，同創(chuàng)建標(biāo)簽tags、歸檔archives頁面一樣的方式，所需要創(chuàng)建的名稱要與menu相對應(yīng)，舉例說明如下。
$ hexo new page about #看看menu上還有什么標(biāo)簽沒創(chuàng)建就行創(chuàng)建$ hexo new page tags #創(chuàng)建標(biāo)簽等創(chuàng)建完成之后在自己項目查找，如我的是githubBlog/source/目錄下查看新創(chuàng)建好的相關(guān)標(biāo)簽頁面，里面包含各自的index.md文件，大家可以自行編輯了。
5.3.2、Schemes方案設(shè)置
# Schemes#scheme: Muse #這是 Nex默認(rèn)版本，黑白主調(diào)，大量留白 #scheme: Mist #Muse 的緊湊版本，整潔有序的單欄外觀#scheme: Pisces #雙欄 Scheme，小家碧玉似的清新scheme: Gemini #雙子座，也是雙欄形式，和Pisces類似自己喜歡什么風(fēng)格自行選擇。
5.3.3、social設(shè)置
使用方式: Key: permalink || icon Key表示標(biāo)簽顯示，permalink表示URI連接，icon表示圖標(biāo)，自己添加所要顯示的
social: GitHub: https://github.com/whb1990 || github E-Mail: mailto:whbsurpass@163.com || envelope QQ: 270028806 || qq 微信: yan521bo ||weixin #Weibo: https://weibo.com/yourname || weibo #Google: https://plus.google.com/yourname || google #Twitter: https://twitter.com/yourname || twitter #FB Page: https://xintu.facebook.com/yourname || facebook #VK Group: https://vk.com/yourname || vk #StackOverflow: https://stackoverflow.com/yourname || stack-overflow #YouTube: https://youtube.com/yourname || youtube #Instagram: https://instagram.com/yourname || instagram #Skype: skype:yourname?call|chat || skypesocial_icons: #設(shè)置圖標(biāo)是否顯示這里 enable: true #表示開啟 icons_only: false #只顯示圖片 transition: false注：圖標(biāo)庫來源https://fontawesome.com/icons?from=io，在scheme: Pisces該效果不顯示。
5.3.4、avatar頭像設(shè)置
avatar: # In theme directory (source/images): /images/avatar.gif # In site directory (source/uploads): /uploads/avatar.gif # You can also use other linking images. url: /images/avatar.jpg # If true, the avatar would be dispalyed in circle. #圓形框 rounded: true # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar. opacity: 1 # If true, the avatar would be rotated with the cursor. #頭像是否旋轉(zhuǎn) rotated: true5.3.5、toc邊欄中的目錄設(shè)置
toc: #邊欄設(shè)置 enable: true #是否啟用邊欄 # Automatically add list number to toc. number: true #自動將列表編號添加到toc # If true, all words will placed on next lines if header width longer then sidebar width. wrap: false #true時是當(dāng)標(biāo)題寬度很長時，自動換到下一行 # If true, all level of TOC in a post will be displayed, rather than the activated part of it. expand_all: false #折疊 # Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` in Front-matter. max_depth: 6 #最大深度5.3.6、Creative Commons 4.0國際許可設(shè)置
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zerocreative_commons: by-nc-sa5.3.7、sidebar側(cè)邊欄配置這里選擇默認(rèn)吧
sidebar: # Sidebar Position, available values: left | right (only for Pisces | Gemini). position: left #position: right # Manual define the sidebar width. If commented, will be default for: # Muse | Mist: 320 # Pisces | Gemini: 240 width: 240 # Sidebar Display, available values (only for Muse | Mist): # - post expand on posts automatically. Default. # - always expand for all pages automatically. # - hide expand only when click on the sidebar toggle icon. # - remove totally remove sidebar including sidebar toggle. display: post # Sidebar offset from top menubar in pixels (only for Pisces | Gemini). offset: 12 # Enable sidebar on narrow view (only for Muse | Mist). onmobile: true # Click any blank part of the page to close sidebar (only for Muse | Mist). dimmer: false5.3.8、save_scroll配置
# Automatically saving scroll position on each post / page in cookies.save_scroll: false #是否在Cookie中自動保存每個帖子/頁面上的滾動位置。5.3.9、excerpt_description
# Automatically excerpt description in homepage as preamble text.excerpt_description: false #是否自動摘錄主頁中的描述作為前導(dǎo)文本。5.3.10、auto_excerpt配置
auto_excerpt: enable: true #是否自動摘錄。不推薦 length: 150 #這里是說文章開頭第一個字到第150個字就顯示"閱讀全文"5.3.11、codeblock代碼塊配置
codeblock: # Code Highlight theme # Available values: normal | night | night eighties | night blue | night bright # See: https://github.com/chriskempson/tomorrow-theme highlight_theme: normal #代碼突出顯示主題 # Manual define the border radius in codeblock, leave it blank for the default value: 1 border_radius: 1 # Add copy button on codeblock copy_button: enable: true # Show text copy result. show_result: true # Available values: default | flat | mac style: flat5.3.12、wechat_subscriber微信配置
wechat_subscriber: enabled: true #是否啟動微信訂閱 qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg description: ex. subscribe to my blog by scanning my public wechat account5.3.13、footer 底部設(shè)置
footer: # Specify the date when the site was setup. If not defined, current year will be used. since: 2019 #建站開始時間 # Icon between year and copyright info. icon: # Icon name in Font Awesome. See: https://fontawesome.com/v4.7.0/icons/ # `heart` is recommended with animation in red (#ff0000). name: heart #設(shè)置圖標(biāo)，想修改圖標(biāo)從https://fontawesome.com/v4.7.0/icons獲取 # If you want to animate the icon, set it to true. animated: true # Change the color of icon, using Hex Code. color: "#ff0000" # If not defined, `author` from Hexo `_config.yml` will be used. copyright: ?2019 by 王洪博 #版權(quán) powered: # Hexo link (Powered by Hexo). enable: true ##是否顯示Hexo link # Version info of Hexo after Hexo link (vX.X.X). version: true #是否顯示Hexo版本 theme: # Theme & scheme info link (Theme - NexT.scheme). enable: true #是否顯示NexT主題 # Version info of NexT after scheme info (vX.X.X). version: true #是否顯示NexT版本5.3.14、favicon標(biāo)簽頁圖標(biāo)
favicon: small: /images/favicon-16x16-next.png #小圖標(biāo) 默認(rèn)的NexT medium: /images/favicon-32x32-next.png #中圖標(biāo) 默認(rèn)NexT apple_touch_icon: /images/apple-touch-icon-next.png #蘋果觸摸圖標(biāo) safari_pinned_tab: /images/logo.svg #safari固定標(biāo)簽5.3.15、Math Equations Render Support 數(shù)學(xué)方程式渲染支持
math: enable: true #默認(rèn)為false per_page: true engine: mathjax #兩種方式 mathjax / katex mathjax: cdn: //cdn.jsdelivr.net/npm/mathjax@2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML #默認(rèn) 這里大家根據(jù)自己需求 katex: cdn: //cdn.jsdelivr.net/npm/katex@0.7.1/dist/katex.min.css #默認(rèn)5.3.16、Han Support 支持漢字
設(shè)置漢字支持，按照以下步驟：
1. 打開Git Bash Here，進入theme/next目錄下
$ cd themes/next2. 獲取該漢字支持Git module，執(zhí)行命令以下命令獲得
$ git clone https://github.com/theme-next/theme-next-han source/lib/Han3. 設(shè)置漢字支持
han: true4. 更新update
$ cd themes/next/source/lib/Han$ git pull5.3.17、font字體設(shè)置
font: # Use custom fonts families or not. # Depended options: `external` and `family`. enable: true #默認(rèn)false 如果要進行字體修改那么設(shè)置為true # Uri of fonts host, e.g. //fonts.googleapis.com (Default). host: //fonts.lug.ustc.edu.cn # Font options: # `external: true` will load this font family from `host` above. # `family: Times New Roman`. Without any quotes. # `size: x.x`. Use `em` as unit. Default: 1 (16px) # Global font settings used for all elements inside <body>. global: external: true family: Lato size: # Font settings for site title (.site-title). title: external: true family: size: # Font settings for headlines (<h1> to <h6>). headings: external: true family: Roboto Slab size: # Font settings for posts (.post-body). posts: external: true family: # Font settings for <code> and code blocks. codes: external: true family: Roboto Mono # Font settings for Logo. # Fallback to `global` font settings. logo: external: true family: size:六、添加圖標(biāo)鏈接到GitHub
一般在右上角或者左上角，如配置右上角Fork_me_on_GitHub，按以下步驟進行
1. 打開 Fork_me_on_GitHub(https://github.blog/2008-12-19-github-ribbons/) 鏈接，里面有許多樣式，選擇自己喜歡的樣式，將其復(fù)制下來。
2. 打開自己博客項目中的themes/next/layout/_layout.swig文件，搜索<div class="headband"></div> 將復(fù)制的內(nèi)容粘貼到<div class="headband"></div>下面，如下：
配置右上角的Fork_me_on_GitHub:
七、修改文章底部標(biāo)簽
在博客項目中找到/themes/next/layout/_macro/post.swig，搜索 rel="tag"，將 #號 換成<i class="fa fa-tag"></i>
原先#號的樣式
修改為圖標(biāo)的樣式
八、設(shè)置背景動畫樣式
NexT里面有幾種動畫背景樣式canvas_nest、three_waves、canvas_lines、canvas_sphere等
8.1、canvas_nest如下圖所示:
按照以下步驟完成：
1. 打開Git Bash Here進入自己文件夾下/themes/next文件夾下
$ cd /themes/next2. 下載安裝 canvas_nest module`執(zhí)行
$ git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest在 /themes/next/source/lib查看會看到canvas_nest文件夾
3. 在/themes/next/_config.yml設(shè)置
canvas_nest: true8.2、 three_waves如圖所示
three_waves(https://github.com/theme-next/theme-next-three) 設(shè)置步驟，和 canvas_nest(https://github.com/theme-next/theme-next-canvas-nest) 步驟是一樣的。
下載完成后，在/themes/next/_config.yml設(shè)置
three_waves: true#ORcanvas_lines: true#ORcanvas_sphere: true8.3、canvas_ribbon
canvas_ribbon只適合 scheme、Pisces這里不測試了，大家可以進入 canvas_ribbon(https://github.com/theme-next/theme-next-canvas-ribbon) 安裝。
九、在網(wǎng)站底部添加訪問量
1. 進入 \themes\next\layout\_partials\footer.swig 文件頂部第一行添加
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>2. 搜索
{% if theme.footer.powered.enable %}在這個位置上添加以下代碼:
<div class="powered-by"><i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv"> 本站訪客數(shù):<span id="busuanzi_value_site_uv"></span></span></div>注：這里的id值可以選擇兩種
busuanzi_value_site_uv #表示用戶連續(xù)點擊n篇文章，只記錄1次訪客數(shù)busuanzi_value_site_pv #表示用戶連續(xù)點擊n篇文章，記錄+n次訪問量十、給每篇文章添加類別和標(biāo)簽
在創(chuàng)建的文章都在source/_post目錄下找到，每篇文章添加tags、categories。
十一、添加進度條
添加進度條的話在手機瀏覽的時候一般情況都有自帶的進度條了，例如微信瀏覽、瀏覽器瀏覽等等，這樣就出現(xiàn)重復(fù)的進度條了，這里看個人是否添加。但是在電腦瀏覽器瀏覽卻是不錯的。
按照以下步驟進行或者進入這里 Progress配置(https://github.com/theme-next/theme-next-pace) 查看如何配置
1. 打開Git Bash Here進入自己文件夾下/themes/next文件夾下
$ cd /themes/next2. 下載安裝 Progress module 執(zhí)行
$ git clone https://github.com/theme-next/theme-next-pace source/lib/pace在 /themes/next/source/lib查看會看到pace文件夾
3. 在/themes/next/_config.yml設(shè)置
pace: enable: true # Themes list: # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal theme: minimal #任選一種十二、添加站內(nèi)搜索
由于可能需要快速查找相關(guān)文章，那么就需要添加站內(nèi)搜索。
按以下步驟進行或者進入 NexT配置站內(nèi)搜索(https://github.com/theme-next/hexo-generator-searchdb) 文檔查看如何配置
1. 安裝站內(nèi)搜索插件
$ npm install hexo-generator-searchdb --save或者$ cnpm install hexo-generator-searchdb --save2. 在根目錄下的 _config.yml添加
#表示站內(nèi)搜索search: path: search.xml field: post format: html limit: 100003. 在themes/next/_config.yml文件中搜索local_search，進行設(shè)置
local_search: enable: true #設(shè)置為true trigger: auto # auto / manual，auto 自動搜索、manual：按回車[enter ]鍵手動搜索 top_n_per_article: 1 unescape: true十三、添加打賞
NexT主要提供三種打賞方式分別是微信、支付寶、比特幣
在themes/next搜索Reward：
reward_settings: # If true, reward would be displayed in every article by default. # You can show or hide reward in a specific article throuth `reward: true | false` in Front-matter. enable: true #啟用打賞 animation: true #啟用動畫效果 comment: 捐贈作者請點擊下方的“打賞”按鈕 #內(nèi)容十四、友情鏈接
# Blog rolls #友情鏈接links_icon: linklinks_title: 友情鏈接links_layout: block#links_layout: inlinelinks: Eirunye: http://eirunye.github.io/ #所需添加的友情鏈接 Title是表示友情鏈接的博客名稱或者隨意你取，后面是鏈接，冒號后面記得空格 程曉明: https://xintu.infoq.cn/profile/1278512```十五、添加閱讀統(tǒng)計
給每篇文章進行添加閱讀統(tǒng)計，效果如下圖:
1. 進入 leancloud(https://leancloud.cn/)
2. 創(chuàng)建應(yīng)用
3. 進入設(shè)置頁面獲取應(yīng)用Key
將App ID、App Key 配置到next/_config.yml中l(wèi)eancloud_visitors
leancloud_visitors: enable: true 設(shè)置為true 默認(rèn)為false app_id: #你的App ID，注意冒號后面空格 app_key: #你的App Key，注意冒號后面空格 Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security #設(shè)置依賴 security: true #如果您不關(guān)心lc計數(shù)器中的安全性并且只想直接使用它（沒有hexo-leancloud-counter-security插件），請將`security`設(shè)置為`false`。 betterPerformance: true#更好的性能4. 在leancloud存儲的位置創(chuàng)建Class，必須命名為Counter
5. 查看后臺統(tǒng)計數(shù)據(jù)
十六、添加評論
我的博客選擇的是Valine。
在next/_config.yml搜索Valine，進入 Valine(https://leancloud.cn/) 官網(wǎng)，也是 leancloud(https://leancloud.cn/) 官網(wǎng)，進入leancloud 控制臺,沒有賬號密碼就進行設(shè)置。
1. 創(chuàng)建應(yīng)用
參考上面 添加閱讀統(tǒng)計 的創(chuàng)建應(yīng)用。
2. 進入設(shè)置頁面獲取應(yīng)用key
參考上面 添加閱讀統(tǒng)計 的進入設(shè)置頁面獲取應(yīng)用key。
3. 在next/_config.yml進行配置。
valine: enable: true # 設(shè)置為true，默認(rèn)為false appid: # 將應(yīng)用key的App ID設(shè)置在這里 appkey: # 將應(yīng)用key的App Key設(shè)置在這里 notify: true# 郵箱通知 , https://github.com/xCss/Valine/wiki，默認(rèn)為false verify: true# 驗證碼 默認(rèn)為false placeholder: Just go go ^_^ # 初始化評論顯示，根據(jù)自己修改，這里默認(rèn)， avatar: wavatar # 頭像風(fēng)格，默認(rèn)為mm，可進入網(wǎng)址：https://valine.js.org/visitor.html查看頭像設(shè)置，這里有許多頭像風(fēng)格，進行設(shè)置 guest_info: nick,mail,link # 自定義評論標(biāo)題 pageSize: 10 # 分頁大小，10頁就自動分頁 visitor: true # 是否允許游客評論 ，進入官網(wǎng)查看設(shè)置：https://valine.js.org/visitor.html4. 顯示結(jié)果
這樣就完成了valine評論的配置了，接下來就可以進行評論了，我們還可以在后臺查看評論信息。
5. 在后臺查看評論數(shù)據(jù)
在valine后臺，存儲位置中的數(shù)據(jù)里面創(chuàng)建Class，名稱必須為命名為Comment。
參考上面 添加閱讀統(tǒng)計 的創(chuàng)建Class。
注：選擇valine評論系統(tǒng)是因為支持國內(nèi)網(wǎng)絡(luò)，不需要連接外網(wǎng)（翻墻）就可以進行顯示評論系統(tǒng)，而且很好管理，頁面簡單。
十七、添加RSS
效果如下圖：
實現(xiàn)步驟如下：
1. 切換到你的blog根目錄下，然后安裝 Hexo 插件：(這個插件會放在node_modules這個文件夾里)
$ cnpm install --save hexo-generator-feed2. 然后在根目錄的站點配置文件 _config.yml下進行配置
## Plugins: http://hexo.io/plugins/plugins: hexo-generate-feed # RSS訂閱3. 然后打開next主題文件夾里面的_config.yml，在里面配置為如下：
# Set rss to false to disable feed link.# Leave rss as empty to use site's feed link.# Set rss to specific value if you have burned your feed already.rss: /atom.xml十八、點擊出現(xiàn)桃心效果
效果如下圖：
實現(xiàn)步驟如下：
1. 打開瀏覽器，輸入：http://7u2ss1.com1.z0.glb.clouddn.com/love.js
2. 然后將里面的代碼copy一下，新建love.js文件并且將代碼復(fù)制進去，然后保存。
3. 將love.js文件放到路徑/themes/next/source/js/src里面，然后打開\themes\next\layout\_layout.swig文件,在末尾（在前面引用會出現(xiàn)找不到的bug）添加以下代碼：
<!-- 頁面點擊小紅心 --><script type="text/javascript" src="/js/src/love.js"></script>十九、修改文章內(nèi)鏈接文本樣式
效果如下圖：
實現(xiàn)步驟如下：
修改文件 themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css樣式：
// 文章內(nèi)鏈接文本樣式.post-body p a{ color: #0593d3; border-bottom: none; border-bottom: 1px solid #0593d3; &:hover { color: #fc6423; border-bottom: none; border-bottom: 1px solid #fc6423; }}其中選擇 .post-body 是為了不影響標(biāo)題，選擇 p 是為了不影響首頁“閱讀全文”的顯示樣式，顏色可以自己定義。
二十、在每篇文章末尾統(tǒng)一添加“本文結(jié)束”標(biāo)記
效果如下圖：
實現(xiàn)步驟如下：
在路徑 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件，并添加以下內(nèi)容：
<div> {% if not is_index %} <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結(jié)束<i class="fa fa-paw"></i>感謝您的閱讀-------------</div> {% endif %}</div>接著打開\themes\next\layout\_macro\post.swig文件，在post-body 之后， post-footer`之前添加如下畫紅色部分代碼（post-footer之前兩個DIV）：
<div> {% if not is_index %} {% include 'passage-end-tag.swig' %} {% endif %}</div>然后打開主題配置文件_config.yml，在末尾添加：
# 文章末尾添加“本文結(jié)束”標(biāo)記passage_end_tag: enabled: true二十一、修改``代碼塊自定義樣式
效果如下：
實現(xiàn)步驟如下：
打開\themes\next\source\css\_custom\custom.styl，向里面加入：(顏色可以自己定義)
// Custom styles.code { color: #ff7600; background: #fbf7f8; margin: 2px;}// 大代碼塊的自定義樣式.highlight, pre { margin: 5px 0; padding: 5px; border-radius: 3px;}.highlight, code, pre { border: 1px solid #d6d6d6;}二十二、主頁文章添加陰影效果
效果如下圖：
實現(xiàn)步驟如下：
打開\themes\next\source\css\_custom\custom.styl，向里面加入：
// 主頁文章添加陰影效果 .post { margin-top: 60px; 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); }二十三、添加熱度
效果如下圖：
實現(xiàn)步驟如下：
next主題集成leanCloud，打開/themes/next/layout/_macro/post.swig ，在畫紅線的區(qū)域添加 ℃：
然后打開，/themes/next/languages/zh-Hans.yml，將畫紅框的改為熱度就可以了:
二十四、網(wǎng)站底部字?jǐn)?shù)統(tǒng)計
效果如下圖：
實現(xiàn)步驟如下：
切換到根目錄下，然后運行如下代碼
$ cnpm install hexo-wordcount --save然后在/themes/next/layout/_partials/footer.swig文件尾部加上：
<div class="theme-info"> <div class="powered-by"></div> <span class="post-count">站點總字?jǐn)?shù){{ totalcount(site) }}字</span></div>二十五、添加 README.md 文件
每個項目下一般都有一個 README.md 文件，但是使用 hexo 部署到倉庫后，項目下是沒有 README.md 文件的。
在 Hexo 目錄下的 source 根目錄下添加一個 README.md 文件，修改站點配置文件 _config.yml，將 skip_render 參數(shù)的值設(shè)置為
skip_render: README.md保存退出即可。再次使用 hexo d 命令部署博客的時候就不會在渲染 README.md 這個文件了。
二十六、實現(xiàn)統(tǒng)計功能
效果如下圖：
實現(xiàn)步驟如下：
在根目錄下安裝 hexo-wordcount，運行：
$ cnpm install hexo-wordcount --save然后在主題的配置文件中，配置如下：
# Post wordcount display settings# Dependencies: https://github.com/willin/hexo-wordcountpost_wordcount: item_text: true wordcount: true #字?jǐn)?shù)統(tǒng)計 min2read: true #閱讀時長預(yù)計 totalcount: true #總字?jǐn)?shù)統(tǒng)計 separated_meta: true二十七、添加頂部加載條
效果如下圖：
實現(xiàn)步驟如下：
打開/themes/next/layout/_partials/head.swig文件，添加紅框上的代碼
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script><link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">但是，默認(rèn)的是粉色的，要改變顏色可以在/themes/next/layout/_partials/head.swig文件中添加如下代碼（接在剛才link的后面）
<style> .pace .pace-progress { background: #1E92FB; /*進度條顏色*/ height: 3px; } .pace .pace-progress-inner { box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /*陰影顏色*/ } .pace .pace-activity { border-top-color: #1E92FB; /*上邊框顏色*/ border-left-color: #1E92FB; /*左邊框顏色*/ }</style>二十八、在文章底部增加版權(quán)信息
效果如下圖：
實現(xiàn)步驟如下：
在目錄 next/layout/_macro/下添加 my-copyright.swig：
{% if page.copyright %}<div class="my_post_copyright"> <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script> <!-- JS庫 sweetalert 可修改路徑 --> <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <p><span>本文標(biāo)題:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p> <p><span>文章作者:</span><a href="/" title="訪問 {{ theme.author }} 的個人博客">{{ theme.author }}</a></p> <p><span>發(fā)布時間:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p> <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p> <p><span>原始鏈接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a> <span class="copy-path" title="點擊復(fù)制文章鏈接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="復(fù)制成功！"></i></span> </p> <!-- <p><span>許可協(xié)議:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商業(yè)性使用-禁止演繹 4.0 國際</a> 轉(zhuǎn)載請保留原文鏈接及作者。</p> --> </div><script> var clipboard = new Clipboard('.fa-clipboard'); $(".fa-clipboard").click(function(){ clipboard.on('success', function(){ swal({ title: "", text: '復(fù)制成功', icon: "success", showConfirmButton: true }); }); }); </script>{% endif %}在目錄next/source/css/_common/components/post/下添加my-post-copyright.styl：
.my_post_copyright { width: 85%; max-width: 45em; margin: 2.8em auto 0; padding: 0.5em 1.0em; border: 1px solid #d3d3d3; font-size: 0.93rem; line-height: 1.6em; word-break: break-all; background: rgba(255,255,255,0.4);}.my_post_copyright p{margin:0;}.my_post_copyright span { display: inline-block; width: 5.2em; color: #b5b5b5; font-weight: bold;}.my_post_copyright .raw { margin-left: 1em; width: 5em;}.my_post_copyright a { color: #808080; border-bottom:0;}.my_post_copyright a:hover { color: #a3d2a3; text-decoration: underline;}.my_post_copyright:hover .fa-clipboard { color: #000;}.my_post_copyright .post-url:hover { font-weight: normal;}.my_post_copyright .copy-path { margin-left: 1em; width: 1em; +mobile(){display:none;}}.my_post_copyright .copy-path:hover { color: #808080; cursor: pointer;}修改next/layout/_macro/post.swig，在代碼
<div> {% if not is_index %} {% include 'wechat-subscriber.swig' %} {% endif %}</div>之前添加增加如下代碼：
<div> {% if not is_index %} {% include 'my-copyright.swig' %} {% endif %}</div>如下圖：
修改next/source/css/_common/components/post/post.styl文件，在最后一行增加代碼：
@import "my-post-copyright"保存重新生成即可。如果要在該博文下面增加版權(quán)信息的顯示，需要在 Markdown 中增加copyright: true的設(shè)置，類似：
---title: Java并發(fā)-ReentrantLockcopyright: truedate: 2019-08-26 14:59:12updated:tags: - Java - J.U.Ccategories: - Java - J.U.C---如果你覺得每次都要輸入copyright: true很麻煩的話,那么在/scaffolds/post.md文件中添加：
copyright: true這樣每次hexo new "你的內(nèi)容"之后，生成的md文件會自動把copyright:true加到里面去。
二十九、隱藏網(wǎng)頁底部powered By Hexo / 強力驅(qū)動
打開themes/next/layout/_partials/footer.swig，隱藏或刪除如下代碼，如下圖：
三十、修改打賞字體不閃動
修改文件next/source/css/_common/components/post/post-reward.styl，然后注釋其中的函數(shù)wechat:hover和alipay:hover，如下：
/* 注釋文字閃動函數(shù) #wechat:hover p{ animation: roll 0.1s infinite linear; -webkit-animation: roll 0.1s infinite linear; -moz-animation: roll 0.1s infinite linear;} #alipay:hover p{ animation: roll 0.1s infinite linear; -webkit-animation: roll 0.1s infinite linear; -moz-animation: roll 0.1s infinite linear;}*/三十一、文章加密訪問
效果如下圖：
實現(xiàn)步驟如下：
打開themes/next/layout/_partials/head/head.swig文件,在以下位置插入這樣一段代碼：
<script> (function(){ if('{{ page.password }}'){ if (prompt('請輸入文章密碼') !== '{{ page.password }}'){ alert('密碼錯誤！'); history.back(); } } })();</script>然后在文章上寫成類似這樣：
三十二、添加鼠標(biāo)點擊顯示字體效果
效果如下圖：
實現(xiàn)步驟如下：
在 /themes/next/source/js 下新建文件click_show_text.js，在 click_show_text.js文件中添加以下代碼：
var a_idx = 0;jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array ("富強", "民主", "文明", "和諧", "自由", "平等", "公正", "法治", "愛國", "敬業(yè)", "誠信", "友善"); var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 5, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "#FF0000" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 3000, function() { $i.remove(); }); }); setTimeout('delay()', 2000);});function delay() { $(".buryit").removeAttr("onclick");}其中的社會主義核心價值觀可以根據(jù)你自己的創(chuàng)意替換為其他文字，然后在 \themes\next\layout\_layout.swing文件末尾添加以下代碼：
<!--單擊顯示文字--><script type="text/javascript" src="/js/click_show_text.js"></script>三十三、添加鼠標(biāo)點擊煙花爆炸效果
效果如下圖：
實現(xiàn)步驟如下：
在 \themes\next\source\js 目錄下新建一個 fireworks.js 的文件，里面寫入以下代碼：
"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};然后在 \themes\next\layout\layout.swing 文件中寫入以下代碼：
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> <script type="text/javascript" src="/js/fireworks.js"></script>三十四、自定義鼠標(biāo)指針樣式
在 \themes\next\source\css\_custom\custom.styl 文件 body 樣式里寫入如下代碼：
/*自定義鼠標(biāo)樣式*/body { cursor: url("/images/mouse.cur"),auto; background-color: @theme_background;}鼠標(biāo)指針可以用 Axialis CursorWorkshop 這個軟件自己制作，不同主題具體放的文件有所不同，確保在博客主體 body 的 CSS 文件中即可，其中的鼠標(biāo)指針鏈接可替換成自己的，首先嘗試加載mouse.cur ，如果該文件不存在或由于其他原因無效，那么 auto 會被使用，也就是自動默認(rèn)效果，圖片格式為.ico、.ani、.cur，建議使用.cur，如果使用.ani或者其他格式無效，原因是瀏覽器兼容問題。
三十五、添加彩色滾動變換字體
在你想要添加彩色滾動變換字體的地方寫入以下代碼即可，其中文字可自行更改：
<div id="binft"></div> <script> var binft = function (r) { function t() { return b[Math.floor(Math.random() * b.length)] } function e() { return String.fromCharCode(94 * Math.random() + 33) } function n(r) { for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } return n } function i() { var t = o[c.skillI]; c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) } var l = "", o = ["青青陵上柏，磊磊澗中石。", "人生天地間，忽如遠行客。","斗酒相娛樂，聊厚不為薄。", "驅(qū)車策駑馬，游戲宛與洛。","洛中何郁郁，冠帶自相索。","長衢羅夾巷，王侯多第宅。","兩宮遙相望，雙闕百余尺。","極宴娛心意，戚戚何所迫？"].map(function (r) { return r + "" }), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = { text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g }; i() }; binft(document.getElementById('binft'));</script>我是放在了側(cè)邊欄頭像的下邊，描述的位置\themes\next\layout\_macro\sidebar.swing：
三十六、瀏覽器網(wǎng)頁標(biāo)題惡搞
效果如下圖：
實現(xiàn)步驟如下：
在目錄 \themes\next\source\js 下新建一個 FunnyTitle.js 文件，在里面填寫如下代碼：
<!--瀏覽器搞笑標(biāo)題--> var OriginTitle = document.title; var titleTime; document.addEventListener('visibilitychange', function () { if (document.hidden) { $('[rel="icon"]').attr('href', "/img/trhx2.png"); document.title = 'ヽ(●-`Д′-)ノ你丑你就走！'; clearTimeout(titleTime); } else { $('[rel="icon"]').attr('href', "/img/trhx2.png"); document.title = 'ヾ(???3)ノ你帥就回來！' + OriginTitle; titleTime = setTimeout(function () { document.title = OriginTitle; }, 2000); } });然后在 \themes\next\layout\layout.swing 文件中寫入以下代碼：
<!--瀏覽器搞笑標(biāo)題--><script type="text/javascript" src="\js\FunnyTitle.js"></script>再次部署博客后就可以看見標(biāo)題搞笑的效果了。
三十七、添加網(wǎng)站雪花飄落效果
效果如下圖：
實現(xiàn)步驟如下：
在\themes\next\source\js目錄下新建一個 snow.js文件，粘貼以下代碼：
/*樣式一*/(function($){ $.fn.snow = function(options){ var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('?'), documentHeight = $(document).height(), documentWidth = $(document).width(), defaults = { minSize : 10, maxSize : 20, newOn : 1000, flakeColor : "#AFDAEF" /* 此處可以定義雪花顏色，若要白色可以改為#FFFFFF */ }, options = $.extend({}, defaults, options); var interval= setInterval( function(){ var startPositionLeft = Math.random() * documentWidth - 100, startOpacity = 0.5 + Math.random(), sizeFlake = options.minSize + Math.random() * options.maxSize, endPositionTop = documentHeight - 200, endPositionLeft = startPositionLeft - 500 + Math.random() * 500, durationFall = documentHeight * 10 + Math.random() * 5000; $flake.clone().appendTo('body').css({ left: startPositionLeft, opacity: startOpacity, 'font-size': sizeFlake, color: options.flakeColor }).animate({ top: endPositionTop, left: endPositionLeft, opacity: 0.2 },durationFall,'linear',function(){ $(this).remove() }); }, options.newOn); };})(jQuery);$(function(){ $.fn.snow({ minSize: 5, /* 定義雪花最小尺寸 */ maxSize: 50,/* 定義雪花最大尺寸 */ newOn: 300 /* 定義密集程度，數(shù)字越小越密集 */ });});/*樣式二*//* 控制下雪 */function snowFall(snow) { /* 可配置屬性 */ snow = snow || {}; this.maxFlake = snow.maxFlake || 200; /* 最多片數(shù) */ this.flakeSize = snow.flakeSize || 10; /* 雪花形狀 */ this.fallSpeed = snow.fallSpeed || 1; /* 墜落速度 */}/* 兼容寫法 */requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback) { setTimeout(callback, 1000 / 60); };cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame || window.oCancelAnimationFrame;/* 開始下雪 */snowFall.prototype.start = function(){ /* 創(chuàng)建畫布 */ snowCanvas.apply(this); /* 創(chuàng)建雪花形狀 */ createFlakes.apply(this); /* 畫雪 */ drawSnow.apply(this)}/* 創(chuàng)建畫布 */function snowCanvas() { /* 添加Dom結(jié)點 */ var snowcanvas = document.createElement("canvas"); snowcanvas.id = "snowfall"; snowcanvas.width = window.innerWidth; snowcanvas.height = document.body.clientHeight; snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;"); document.getElementsByTagName("body")[0].appendChild(snowcanvas); this.canvas = snowcanvas; this.ctx = snowcanvas.getContext("2d"); /* 窗口大小改變的處理 */ window.onresize = function() { snowcanvas.width = window.innerWidth; /* snowcanvas.height = window.innerHeight */ }}/* 雪運動對象 */function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) { this.x = Math.floor(Math.random() * canvasWidth); /* x坐標(biāo) */ this.y = Math.floor(Math.random() * canvasHeight); /* y坐標(biāo) */ this.size = Math.random() * flakeSize + 2; /* 形狀 */ this.maxSize = flakeSize; /* 最大形狀 */ this.speed = Math.random() * 1 + fallSpeed; /* 墜落速度 */ this.fallSpeed = fallSpeed; /* 墜落速度 */ this.velY = this.speed; /* Y方向速度 */ this.velX = 0; /* X方向速度 */ this.stepSize = Math.random() / 30; /* 步長 */ this.step = 0 /* 步數(shù) */}flakeMove.prototype.update = function() { var x = this.x, y = this.y; /* 左右擺動(余弦) */ this.velX *= 0.98; if (this.velY <= this.speed) { this.velY = this.speed } this.velX += Math.cos(this.step += .05) * this.stepSize; this.y += this.velY; this.x += this.velX; /* 飛出邊界的處理 */ if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) { this.reset(canvas.width, canvas.height) }};/* 飛出邊界-放置最頂端繼續(xù)墜落 */flakeMove.prototype.reset = function(width, height) { this.x = Math.floor(Math.random() * width); this.y = 0; this.size = Math.random() * this.maxSize + 2; this.speed = Math.random() * 1 + this.fallSpeed; this.velY = this.speed; this.velX = 0;};// 渲染雪花-隨機形狀（此處可修改雪花顏色?。。。ゝlakeMove.prototype.render = function(ctx) { var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size); snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)"); /* 此處是雪花顏色，默認(rèn)是白色 */ snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改為其他顏色，請自行查 */ snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)"); /* 找16進制的RGB 顏色代碼。*/ ctx.save(); ctx.fillStyle = snowFlake; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); ctx.restore();};/* 創(chuàng)建雪花-定義形狀 */function createFlakes() { var maxFlake = this.maxFlake, flakes = this.flakes = [], canvas = this.canvas; for (var i = 0; i < maxFlake; i++) { flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed)) }}/* 畫雪 */function drawSnow() { var maxFlake = this.maxFlake, flakes = this.flakes; ctx = this.ctx, canvas = this.canvas, that = this; /* 清空雪花 */ ctx.clearRect(0, 0, canvas.width, canvas.height); for (var e = 0; e < maxFlake; e++) { flakes[e].update(); flakes[e].render(ctx); } /* 一幀一幀的畫 */ this.loop = requestAnimationFrame(function() { drawSnow.apply(that); });}/* 調(diào)用及控制方法 */var snow = new snowFall({maxFlake:60});snow.start();然后在 \themes\next\layout\layout.swing 文件中寫入以下代碼：
<!-- 雪花特效 --><script type="text/javascript" src="\js\snow.js"></script>如果沒效果，請確認(rèn)網(wǎng)頁是否已載入JQurey，如果沒有請在下雪代碼之前引入JQ即可：
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script><script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>三十八、添加背景動態(tài)彩帶效果
效果如下圖：
實現(xiàn)步驟如下：
在 \themes\next\layout\layout.swing 文件中寫入以下代碼：
<!-- 樣式一（鼠標(biāo)點擊更換樣式） --><script src="https://g.joyinshare.com/hc/ribbon.min.js" type="text/javascript"></script><!-- 樣式二（飄動的彩帶） --><script src="https://g.joyinshare.com/hc/piao.js" type="text/javascript"></script>三十九、添加背景代碼雨特效
效果如下圖：
實現(xiàn)步驟如下：
在 \themes\next\source\js 目錄下新建一個 DigitalRain.js文件，粘貼以下代碼：
window.onload = function(){ //獲取畫布對象 var canvas = document.getElementById("canvas"); //獲取畫布的上下文 var context =canvas.getContext("2d"); var s = window.screen; var W = canvas.width = s.width; var H = canvas.height; //獲取瀏覽器屏幕的寬度和高度 //var W = window.innerWidth; //var H = window.innerHeight; //設(shè)置canvas的寬度和高度 canvas.width = W; canvas.height = H; //每個文字的字體大小 var fontSize = 12; //計算列 var colunms = Math.floor(W /fontSize); //記錄每列文字的y軸坐標(biāo) var drops = []; //給每一個文字初始化一個起始點的位置 for(var i=0;i<colunms;i++){ drops.push(0); } //運動的文字 var str ="WELCOME TO WWW.ITRHX.COM"; //4:fillText(str,x,y);原理就是去更改y的坐標(biāo)位置 //繪畫的函數(shù) function draw(){ context.fillStyle = "rgba(238,238,238,.08)";//遮蓋層 context.fillRect(0,0,W,H); //給字體設(shè)置樣式 context.font = "600 "+fontSize+"px Georgia"; //給字體添加顏色 context.fillStyle = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"][parseInt(Math.random() * 10)];//randColor();可以rgb,hsl, 標(biāo)準(zhǔn)色，十六進制顏色 //寫入畫布中 for(var i=0;i<colunms;i++){ var index = Math.floor(Math.random() * str.length); var x = i*fontSize; var y = drops[i] *fontSize; context.fillText(str[index],x,y); //如果要改變時間，肯定就是改變每次他的起點 if(y >= canvas.height && Math.random() > 0.99){ drops[i] = 0; } drops[i]++; } }; function randColor(){//隨機顏色 var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return "rgb("+r+","+g+","+b+")"; } draw(); setInterval(draw,35);};然后在 \themes\next\source\css\_custom\custom.styl 中寫入樣式：
canvas { position: fixed; right: 0px; bottom: 0px; min-width: 100%; min-height: 100%; height: auto; width: auto; z-index: -1;}在 \themes\next\layout\layout.swing 文件中寫入以下代碼：
<!-- 代碼雨 --> <canvas id="canvas" width="1440" height="900" ></canvas> <script type="text/javascript" src="/js/DigitalRain.js"></script>四十、代碼塊復(fù)制功能
效果如下圖：
實現(xiàn)步驟如下：
1. 下載 clipboard.js
clipboard.js(https://raw.githubusercontent.com/zenorocha/clipboard.js/master/dist/clipboard.js) clipboard.min.js(https://raw.githubusercontent.com/zenorocha/clipboard.js/master/dist/clipboard.min.js)保存文件clipboard.js / clipboard.min.js 到路徑\themes\next\source\js\src下。
2. 使用clipboard.js
也是在 \themes\next\source\js\src 目錄下，創(chuàng)建clipboard-use.js，文件內(nèi)容如下：
/*頁面載入完成后，創(chuàng)建復(fù)制按鈕*/!function (e, t, a) { /* code */ var initCopyCode = function(){ var copyHtml = ''; copyHtml += '<button class="btn-copy" data-clipboard-snippet="">'; copyHtml += ' <i class="fa fa-globe"></i><span>copy</span>'; copyHtml += '</button>'; $(".highlight .code pre").before(copyHtml); new ClipboardJS('.btn-copy', { target: function(trigger) { return trigger.nextElementSibling; } }); } initCopyCode();在\themes\next\source\css\_custom\custom.styl樣式文件中添加下面代碼：
//代碼塊復(fù)制按鈕.highlight{ //方便copy代碼按鈕（btn-copy）的定位 position: relative;}.btn-copy { display: inline-block; cursor: pointer; background-color: #eee; background-image: linear-gradient(#fcfcfc,#eee); border: 1px solid #d5d5d5; border-radius: 3px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-appearance: none; font-size: 13px; font-weight: 700; line-height: 20px; color: #333; -webkit-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; padding: 2px 6px; position: absolute; right: 5px; top: 5px; opacity: 0;}.btn-copy span { margin-left: 5px;}.highlight:hover .btn-copy{ opacity: 1;}3. 引用
在\themes\next\layout\_layout.swig文件中，添加引用（注：在 swig 末尾或 body 結(jié)束標(biāo)簽（</body>）之前添加）：
<!-- 代碼塊復(fù)制功能 --> <script type="text/javascript" src="/js/src/clipboard.min.js"></script> <script type="text/javascript" src="/js/src/clipboard-use.js"></script>四十一、Hexo文章中圖片點擊實現(xiàn)全屏查看
使用圖片瀏覽放大功能fancybox插件。
1. 切換到lib目錄
$ cd next/source/lib2. 下載插件
$ git clone https://github.com/theme-next/theme-next-fancybox3 fancybox3. 更改主題配置文件
fancybox: true四十二、3D動態(tài)標(biāo)簽云
1. 安裝標(biāo)簽云hexo-tag-cloud插件
$ cnpm install hexo-tag-cloud@^2.* --save2. 配置sidebar.swig文件
打開next/layout/_macro/sidebar.swig，輸入：
{% if site.tags.length > 1 %}<script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script><script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script><div class="widget-wrap"> <div id="myCanvasContainer" class="widget tagcloud"> <canvas width="250" height="250" id="resCanvas" style="width=100%"> {{ list_tags() }} </canvas> </div></div>{% endif %}根據(jù)自己的需要放在合適的位置。重新hexo s一下，就可以出現(xiàn)剛剛那個3d標(biāo)簽云了!
四十三、添加卡通人物
效果如下圖：
實現(xiàn)步驟如下：
1. 下載 live2d(https://github.com/EYHN/hexo-helper-live2d)
$ cnpm install --save hexo-helper-live2d2. 下載模型
$ cnpm install live2d-widget-model-z16更多模型選擇請 訪問https://github.com/EYHN/hexo-helper-live2d。
3. 修改站點配置文件
#添加萌寵，以下任選一個#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-z16live2d: enable: true scriptFrom: local model: use: live2d-widget-model-z16 display: position: right #模型位置 width: 140 #模型寬度 height: 260 #模型高度 mobile: show: false #是否在手機端顯示四十四、卡通人物升級版
效果如下圖：
能說話、能換裝、能玩游戲、能拍照、還能自定義。
實現(xiàn)步驟如下：
1. 下載 張書樵(https://github.com/stevenjoezhang/live2d-widget) 大神的項目，解壓到本地博客目錄的themes/next/source下，修改autoload.js文件，將如下代碼：
const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";改為
const live2d_path = "/live2d-widget/";2. 在/themes/next/layout/_layout.swing中,新增如下內(nèi)容：
<script src="/live2d-widget/autoload.js"></script>3. 在主題配置文件 中,新增如下內(nèi)容：
live2d: enable: true想修改看板娘大小、位置、格式、文本內(nèi)容等，可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css。
四十五、擴展看板娘模型
由于官方的看板娘模型比較少，可手動添加模型。
把 github模型(https://github.com/summerscar/live2dDemo) 下載到本地，解壓后將assets目錄拷貝到博客根目錄中的live2d_models（自己新建，文件名不可改）里，再修改_config.yml 里的 live2d中model.use即可（改為live2d_models中的模型名字就行）。
四十六、去掉頂部黑線
打開themes\next\source\css\_custom\custom.styl添加以下代碼：
.headband {display:none;}四十七、 修改主題頁面布局為圓角
47.1、 方法一
在/themes/next/source/css/_variables/custom.styl文件種添加如下代碼（以Gemini風(fēng)格為例）：
// 修改主題頁面布局為圓角// Variables of Gemini scheme// =================================================@import "Pisces.styl";// Settings for some of the most global styles.// --------------------------------------------------$body-bg-color = #eee// Borders.// --------------------------------------------------$box-shadow-inner = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12)$box-shadow = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12), 0 -1px .5px 0 rgba(0,0,0,.09)$border-radius-inner = initial$border-radius = initial$border-radius-inner = 15px 15px 15px 15px;$border-radius = 15px;47.2、 方法二
在\themes\next\source\css\_variables\Gemini.styl文件中直接添加：
// 修改主題頁面布局為圓角$border-radius-inner = 15px 15px 15px 15px;$border-radius = 15px;效果如下圖：
四十八、 自適應(yīng)背景圖片
1. 在站點配置文件夾/themes/next/source/images/放入你的背景圖片;
2. 然后修改主題文件夾themes/source/css/_custom/custom.styl，在custom.styl開頭加入如下的代碼:
body { background: url(/images/background.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 50%; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; /*這是設(shè)置底部文字, 看個人需要修改*/ #footer > div > div { color: #eee; }}四十九、 防止每次heox clean 后CNAME文件被刪除
1. 先把github中的CNAME文件復(fù)制一份到本地public
2. 再安裝插件
cnpm install hexo-generator-cname --save3. 根目錄_config.yml中添加
Plugins:- hexo-generator-cname并修改
url: yoursite.com五十、 去除valine的Powered By
修改\themes\next\layout\_third-party\comments\valine.swig文件
new Valine({...pageSize:'{{ theme.valine.pageSize }}' || 10,});//新增以下代碼即可，可以移除.info下所有子節(jié)點。var infoEle = document.querySelector('#comments .info');if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0){ infoEle.childNodes.forEach(function(item) { item.parentNode.removeChild(item); });}五十一、增加詞云
增加之前的效果如下圖：
方法比較簡單，加個js腳本就好了，就加在標(biāo)簽的那個頁面好了。
打開themes\next\layout\page.swig`找到
{% if page.type === "tags" %}將下面這段代碼:
<div class="tag-cloud"> <div class="tag-cloud-title"> {% set visibleTags = 0 %} {% for tag in site.tags %} {% if tag.length %} {% set visibleTags += 1 %} {% endif %} {% endfor %} {{ _p('counter.tag_cloud', visibleTags) }} </div> <div class="tag-cloud-tags"> {% if not theme.tagcloud %} {{ tagcloud({min_font: 12, max_font: 30, amount: 200, color: true, start_color: '#ccc', end_color: '#111'}) }} {% else %} {{ tagcloud({min_font: 13, max_font: 31, amount: 1000, color: true, start_color: '#9733EE', end_color: '#FF512F'}) }} {% endif %} </div></div>換成下面這段代碼：
<div class="tag-cloud"> <!-- <div class="tag-cloud-title"> {{ _p('counter.tag_cloud', site.tags.length) }} </div> --> <div class="tag-cloud-tags" id="tags"> {{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#fff', end_color: '#fff'}) }} </div></div><br><script type="text/javascript"> var alltags=document.getElementById('tags'); var tags=alltags.getElementsByTagName('a'); for (var i = tags.length - 1; i >= 0; i--) { var r=Math.floor(Math.random()*75+130); var g=Math.floor(Math.random()*75+100); var b=Math.floor(Math.random()*75+80); tags[i].style.background = "rgb("+r+","+g+","+b+")"; }</script><style type="text/css"> div#posts.posts-expand .tag-cloud a{ background-color: #f5f7f1; border-radius: 6px; padding-left: 10px; padding-right: 10px; margin-top: 18px; } .tag-cloud a{ background-color: #f5f7f1; border-radius: 4px; padding-right: 5px; padding-left: 5px; margin-right: 5px; margin-left: 0px; margin-top: 8px; margin-bottom: 0px; } .tag-cloud a:before{ content: ""; } .tag-cloud-tags{ text-align: left; counter-reset: tags; }</style>效果如下圖：
五十二、代碼塊Mac Panel特效
先上效果圖：
能設(shè)置陰影效果和實現(xiàn)文本編輯功能，不過文本只存在瀏覽器頁面上，不會真正保存。
實現(xiàn)步驟如下：
1.引入JS
這里需要新建兩個js文件events.js和codeblock.js，路徑位于/themes/next/scripts/包下。
events.js代碼如下：
// mac Panel效果代碼塊相關(guān)var exec = require('child_process').exec;// new 后自動打開編輯器hexo.on('new', function(data){ exec('open -a MacDown ' + data.path);});codeblock.js代碼如下：
// mac Panel效果代碼塊相關(guān)var attributes = [ 'autocomplete="off"', 'autocorrect="off"', 'autocapitalize="off"', 'spellcheck="false"', 'contenteditable="true"']var attributesStr = attributes.join(' ')hexo.extend.filter.register('after_post_render', function (data) { while (/<figure class="highlight ([a-zA-Z]+)">.*?<\/figure>/.test(data.content)) { data.content = data.content.replace(/<figure class="highlight ([a-zA-Z]+)">.*?<\/figure>/, function () { var language = RegExp.$1 || 'plain' var lastMatch = RegExp.lastMatch lastMatch = lastMatch.replace(/<figure class="highlight /, '<figure class="iseeu highlight /') return '<div class="highlight-wrap"' + attributesStr + 'data-rel="' + language.toUpperCase() + '">' + lastMatch + '</div>' }) } return data})2.引入CSS
在/themes/next/source/css/_common/components/highlight/目錄下新建macPanel.styl文件，內(nèi)容如下：
// mac Panel效果代碼塊相關(guān).highlight-wrap[data-rel] { position: relative; overflow: hidden; border-radius: 5px; //box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.4); box-shadow:18px 18px 15px 0px rgba(0,0,0,.4) margin: 35px 0; ::-webkit-scrollbar { height: 10px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); } &::before { color: white; content: attr(data-rel); height: 38px; line-height: 38px; //background: #21252b; background: #108414de; color: #fff; font-size: 16px; //position: absolute; top: 0; left: 0; width: 100%; //font-family: 'Source Sans Pro', sans-serif; font-weight: bold; padding: 0px 80px; text-indent: 15px; float: left; } &::after { content: ' '; position: absolute; -webkit-border-radius: 50%; border-radius: 50%; background: #fc625d; width: 12px; height: 12px; top: 0; left: 20px; margin-top: 13px; -webkit-box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b; box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b; z-index: 3; }}此css是根據(jù)我本地的樣式做過調(diào)整，注釋的代碼為原有的，根據(jù)需要調(diào)整樣式即可。
3.配置引用
在themes/next/source/css/_common/components/highlight/highlight.styl文件中引入剛才新建的macPanel.styl：
@require "macPanel"配置在文件的頂部位置即可。
到此Mac Panel已配置完成，根據(jù)需要可調(diào)整主題配置文件中的highlight_theme選項，選擇自己喜歡的樣式。
4.可能遇到的問題
如果在配置完畢后，hexo啟動報錯，可將站點配置文件里的highlight屬性auto_detect改成false：
highlight: enable: true line_number: true- auto_detect: true+ auto_detect: false tab_replace:如果還是有問題，可仔細(xì)檢查一下剛才新建的文件、修改的配置文件，有什么地方配置錯了，或者是語法上的錯誤,修改后重新啟動即可看到效果。
五十三、 為文章生成永久鏈接
hexo默認(rèn)的文章鏈接形式為year/:month/:day/:title，是按照年、月、日、標(biāo)題來生成的。當(dāng)把文章源文件名改掉之后，鏈接也會改變，這很不友好。并且如果文章標(biāo)題是中文的，那么該路徑就會出現(xiàn)中文字符。在路徑中出現(xiàn)了中文字符很容易引發(fā)各種問題，而且也不利于seo，因為路徑包含了年月日三個層級，層級太深不利于百度蜘蛛抓取。
解決辦法就是利用其它的插件來生成唯一的路徑，這樣就算文件標(biāo)題隨意修改，而不會導(dǎo)致原本的鏈接失效而造成站點下存在大量的死鏈。
1.安裝插件
cnpm install hexo-abbrlink --save注意：執(zhí)行此命令可能會不成功，提示你缺少相應(yīng)的依賴，比如babel-eslint、mini-css-extract-plugin、webpack-cli…使用npm命令安裝即可。比如：
npm install eslint@4.x babel-eslint@8 --save-dev2.配置
修改根目錄站點配置文件config.yml，改為：
permalink: posts/:abbrlink.html # 此處可以自己設(shè)置，也可以直接使用 /:abbrlinkabbrlink: alg: crc32 #算法：crc16(default) and crc32 rep: hex #進制：dec(default) and hex這里將頁面都添加了 .html 的后綴，用來偽裝成靜態(tài)頁面(雖說Hexo的頁面本身就是靜態(tài)頁面)，這樣可以直接從路徑就知道這是個靜態(tài)頁面，方便seo。
生成的鏈接將會是這樣的(官方樣例)：
crc16 & hexhttps://post.zz173.com/posts/66c8.htmlcrc16 & dechttps://post.zz173.com/posts/65535.htmlcrc32 & hexhttps://post.zz173.com/posts/8ddf18fb.htmlcrc32 & dechttps://post.zz173.com/posts/1690090958.html生成完后，原md文件的Front-matter內(nèi)會增加abbrlink字段，值為生成的ID`。這個字段確保了在我們修改了Front-matter內(nèi)的博客標(biāo)題title或創(chuàng)建日期date字段之后而不會改變鏈接地址。
最后附上一張我個人網(wǎng)站的全覽圖：
掃描二維碼推送至手機訪問。
版權(quán)聲明：本文由信途科技轉(zhuǎn)載于網(wǎng)絡(luò)，如有侵權(quán)聯(lián)系站長刪除。
轉(zhuǎn)載請注明出處http://macbookprostickers.com/xintu/1711.html
