npm install --save sweetalert2

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>

// ES6 Modules or TypeScript
import Swal from 'sweetalert2'
// CommonJS
const Swal = require('sweetalert2')

Swal.fire('基本信息彈框')

Swal.fire(
 '標(biāo)題下有文字',
 '標(biāo)題下的文字?',
 'question'
 )

Swal.fire({
 type: 'error',
 title: '標(biāo)題',
 text: '出錯(cuò)啦！',
 footer: '<a href>為什么會(huì)出錯(cuò)?</a>'
 })

Swal.fire({
 title: '<strong>HTML <u>示例</u></strong>',
 type: 'info',
 html:
 '你可以使用自定義的html<a ,
 showCloseButton: true,
 showCancelButton: true,
 focusConfirm: false,
 confirmButtonText:
 '好的',
 confirmButtonAriaLabel: '看起來不錯(cuò)',
 cancelButtonText:
 '取消',
 cancelButtonAriaLabel: '取消',
 })

Swal.fire({
 position: 'top-end',
 type: 'success',
 title: '你的修改以保存',
 showConfirmButton: false,
 timer: 1500
 })

Swal.fire({
 title: '確定要?jiǎng)h除么?',
 text: "刪除后將無法撤銷!",
 type: 'warning',
 showCancelButton: true,
 confirmButtonColor: '#3085d6',
 cancelButtonColor: '#d33',
 confirmButtonText: '確定',
 cancelButtonText:'取消'
 }).then((result) => {
 if (result.value) {
 Swal.fire(
 '刪除成功!',
 '文件已被刪除',
 'success'
 )
 }
 })

Swal.fire({
 title: '標(biāo)題',
 text: '自定義圖片',
 imageUrl: 'https://unsplash.it/400/200',
 imageWidth: 400,
 imageHeight: 200,
 imageAlt: 'Custom image',
 animation: false
 })

Swal.fire({
 title: '自定義寬度、邊框和背景',
 width: 600,
 padding: '3em',
 background: '#fff url(/images/trees.png)',
 })

let timerInterval
Swal.fire({
 title: '自動(dòng)關(guān)閉的彈框!',
 html: '我會(huì)在<strong></strong> 秒后關(guān)閉.',
 timer: 2000,
 onBeforeOpen: () => {
 Swal.showLoading()
 timerInterval = setInterval(() => {
 Swal.getContent().querySelector('strong')
 .textContent = Swal.getTimerLeft()
 }, 100)
 },
 onClose: () => {
 clearInterval(timerInterval)
 }
}).then((result) => {
 if (
 // Read more about handling dismissals
 result.dismiss === Swal.DismissReason.timer
 ) {
 console.log('I was closed by the timer')
 }
})

Swal.fire({
 title: '提交用戶名',
 input: 'text',
 inputAttributes: {
 autocapitalize: 'off'
 },
 showCancelButton: true,
 confirmButtonText: '提交',
 cancelButtonText: '取消',
 showLoaderOnConfirm: true,
 preConfirm: (login) => {
 return fetch(`//api.github.com/users/${login}`)
 .then(response => {
 if (!response.ok) {
 throw new Error(response.statusText)
 }
 return response.json()
 })
 .catch(error => {
 Swal.showValidationMessage(
 `請(qǐng)求出錯(cuò): ${error}`
 )
 })
 },
 allowOutsideClick: () => !Swal.isLoading()
 }).then((result) => {
 if (result.value) {
 Swal.fire({
 title: `${result.value.login}'s avatar`,
 imageUrl: result.value.avatar_url
 })
 }
 })

Swal.mixin({
 input: 'text',
 confirmButtonText: '下一步',
 showCancelButton: true,
 cancelButtonText:'取消',
 progressSteps: ['1', '2', '3']
 }).queue([
 {
 title: '問題1',
 text: '使用modal很簡單？'
 },
 '問題2',
 '問題3'
 ]).then((result) => {
 if (result.value) {
 Swal.fire({
 title: '所有問題回答完成!',
 html:
 '你的答案是: <pre><code>' +
 JSON.stringify(result.value) +
 '</code></pre>',
 confirmButtonText: 'Lovely!'
 })
 }
 })

npm install --save sweetalert2

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>

// ES6 Modules or TypeScript
import Swal from 'sweetalert2'
// CommonJS
const Swal = require('sweetalert2')

Swal.fire('基本信息彈框')

Swal.fire(
 '標(biāo)題下有文字',
 '標(biāo)題下的文字?',
 'question'
 )

Swal.fire({
 type: 'error',
 title: '標(biāo)題',
 text: '出錯(cuò)啦！',
 footer: '<a href>為什么會(huì)出錯(cuò)?</a>'
 })

Swal.fire({
 title: '<strong>HTML <u>示例</u></strong>',
 type: 'info',
 html:
 '你可以使用自定義的html<a ,
 showCloseButton: true,
 showCancelButton: true,
 focusConfirm: false,
 confirmButtonText:
 '好的',
 confirmButtonAriaLabel: '看起來不錯(cuò)',
 cancelButtonText:
 '取消',
 cancelButtonAriaLabel: '取消',
 })

Swal.fire({
 position: 'top-end',
 type: 'success',
 title: '你的修改以保存',
 showConfirmButton: false,
 timer: 1500
 })

Swal.fire({
 title: '確定要?jiǎng)h除么?',
 text: "刪除后將無法撤銷!",
 type: 'warning',
 showCancelButton: true,
 confirmButtonColor: '#3085d6',
 cancelButtonColor: '#d33',
 confirmButtonText: '確定',
 cancelButtonText:'取消'
 }).then((result) => {
 if (result.value) {
 Swal.fire(
 '刪除成功!',
 '文件已被刪除',
 'success'
 )
 }
 })

Swal.fire({
 title: '標(biāo)題',
 text: '自定義圖片',
 imageUrl: 'https://unsplash.it/400/200',
 imageWidth: 400,
 imageHeight: 200,
 imageAlt: 'Custom image',
 animation: false
 })

Swal.fire({
 title: '自定義寬度、邊框和背景',
 width: 600,
 padding: '3em',
 background: '#fff url(/images/trees.png)',
 })

let timerInterval
Swal.fire({
 title: '自動(dòng)關(guān)閉的彈框!',
 html: '我會(huì)在<strong></strong> 秒后關(guān)閉.',
 timer: 2000,
 onBeforeOpen: () => {
 Swal.showLoading()
 timerInterval = setInterval(() => {
 Swal.getContent().querySelector('strong')
 .textContent = Swal.getTimerLeft()
 }, 100)
 },
 onClose: () => {
 clearInterval(timerInterval)
 }
}).then((result) => {
 if (
 // Read more about handling dismissals
 result.dismiss === Swal.DismissReason.timer
 ) {
 console.log('I was closed by the timer')
 }
})

Swal.fire({
 title: '提交用戶名',
 input: 'text',
 inputAttributes: {
 autocapitalize: 'off'
 },
 showCancelButton: true,
 confirmButtonText: '提交',
 cancelButtonText: '取消',
 showLoaderOnConfirm: true,
 preConfirm: (login) => {
 return fetch(`//api.github.com/users/${login}`)
 .then(response => {
 if (!response.ok) {
 throw new Error(response.statusText)
 }
 return response.json()
 })
 .catch(error => {
 Swal.showValidationMessage(
 `請(qǐng)求出錯(cuò): ${error}`
 )
 })
 },
 allowOutsideClick: () => !Swal.isLoading()
 }).then((result) => {
 if (result.value) {
 Swal.fire({
 title: `${result.value.login}'s avatar`,
 imageUrl: result.value.avatar_url
 })
 }
 })

Swal.mixin({
 input: 'text',
 confirmButtonText: '下一步',
 showCancelButton: true,
 cancelButtonText:'取消',
 progressSteps: ['1', '2', '3']
 }).queue([
 {
 title: '問題1',
 text: '使用modal很簡單？'
 },
 '問題2',
 '問題3'
 ]).then((result) => {
 if (result.value) {
 Swal.fire({
 title: '所有問題回答完成!',
 html:
 '你的答案是: <pre><code>' +
 JSON.stringify(result.value) +
 '</code></pre>',
 confirmButtonText: 'Lovely!'
 })
 }
 })

、前言

由于平時(shí)自己喜歡看一些技術(shù)類文章整理成Word筆記，總感覺這種方式太low，想自己搭建屬于自己的博客，在網(wǎng)上查閱了一下，發(fā)現(xiàn)Hexo在GitHub或者是碼云上搭建博客非常給力。然后自己也搭建了博客，這篇文章就記錄了搭建的過程及一些優(yōu)化。

二、入門Hexo

2.1、什么是Hexo

Hexo 是一個(gè)快速、簡潔且高效的博客框架。Hexo 使用 Markdown(https://daringfireball.net/projects/markdown/) （或其他渲染引擎）解析文章，在幾秒內(nèi)，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁。大家進(jìn)入 Hexo官網(wǎng)(https://hexo.io/zh-cn/docs/) 進(jìn)行查看。

2.2、安裝Hexo

安裝 Hexo 相當(dāng)簡單。然而在安裝前，您必須檢查電腦中是否已安裝下列應(yīng)用程序：

• Node.js：https://nodejs.org/en/
• Git：https://git-scm.com/
• cnpm ：如果npm運(yùn)行出錯(cuò)就安裝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 -V

2.3、建站

安裝一切所需的程序后，就可以開始建站了，就是創(chuàng)建我們的博客,大家也可以進(jìn)入 建站官網(wǎng)(https://hexo.io/zh-cn/docs/setup) 查看。

新建一個(gè)文件夾，來管理我們的博客項(xiàng)目，執(zhí)行下列命令，Hexo 將會(huì)在指定文件夾中新建所需要的文件。

2.3.1、運(yùn)行命令

$ hexo init <folder>
$ cd <folder>
$ cnpm install

注：<folder>是表示建站的博客項(xiàng)目名。

打開Git Bash here，輸入：

$ hexo init githubBlog

進(jìn)入創(chuàng)建的博客項(xiàng)目下進(jìn)行安裝

$ cd githubBlog
$ cnpm install

安裝之后，整個(gè)博客項(xiàng)目目錄如下：

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

進(jìn)入GitHub官網(wǎng)中瀏覽器輸入 https://github.com/ ,如果還沒有賬號(hào)就創(chuàng)建一個(gè)賬號(hào)就好了。

登錄自己的賬號(hào)。直接new repositories 或者進(jìn)入You repositories 再new repositories。

進(jìn)入到創(chuàng)建 repositories 頁面后,一定要注意，將新建的repository的名字為: Your account name.github.io。其他默認(rèn)就好了。

2.4.2、配置

GitHub的Repository創(chuàng)建好后，再回到本地的Hexo的githubBlog項(xiàng)目中，找到在項(xiàng)目的根目錄下_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ù)制粘貼就好了，冒號(hào)后面記得空格。branch 后面是master就好了。

在 _config.yml 找到 url 進(jìn)行修改為：

url: http://whb1990.github.io                  #博客網(wǎng)址

2.4.3、部署

到這里就差不多了，接下來需要執(zhí)行一些命令，將博客部署到GitHub上去。

打開Git Bash Here進(jìn)入githubBlog 根目錄下，首先需要安裝一下 hexo-deployer-git(https://github.com/hexojs/hexo-deployer-git) 不然可能出現(xiàn)錯(cuò)誤無法部署成功。

$ cnpm install hexo-deployer-git --save

然后再執(zhí)行以下命令:

$ hexo clean
$ hexo generate
$ hexo deploy

或者簡寫

$ hexo clean
$ hexo g
$ hexo d

部署成功如下顯示:

2.4.4、測試

我們進(jìn)行訪問 https://whb1990.github.io/ 和 http://localhost:4000/ 一樣的頁面說明是已經(jīng)成功。

三、站點(diǎn)文件配置

在根githubBlog目錄下 _config.yml文件，我們暫且稱為站點(diǎn)配置文件，以便與后面講到的主題配置文件(Next主題下的 _config.yml 文件)進(jìn)行區(qū)分。

3.1、網(wǎng)站

3.2、目錄

3.3、文章

3.4、分類&標(biāo)簽

3.5、分頁

四、寫作

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)建帶有中文的路徑名稱時(shí)，生成靜態(tài)頁面hexo g可能會(huì)報(bào)錯(cuò)。

warning: LF will be replaced by CRLF in xxxx
The file will have its original line endings in your working directory.

這是由于 路徑中存在 / 的符號(hào)轉(zhuǎn)義問題 ，如：創(chuàng)建文章時(shí)命名為中文，一般都出現(xiàn)這個(gè)小問題。

解決方法，在命令行中輸入:

$ git config --global core.autocrlf false

然后重新生成文件部署就好了。

4.2、編輯文章

創(chuàng)建的文章在source/_posts目錄下，打開文件進(jìn)行編輯，完全支持Markdown語法。

五、Next主題

在 Hexo主題官網(wǎng)(https://hexo.io/themes/) 中有許多主題，大家喜歡什么就進(jìn)行部署和編輯就好了，大致的思路都是差不多的。

我選擇的 Next主題(https://github.com/theme-next/hexo-theme-next) ，網(wǎng)上很多也是用的這個(gè)主題。

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下就會(huì)有next目錄

5.2、切換主題

在項(xiàng)目根目錄下打開 _config.yml 文件將 theme 設(shè)置為 next 即可：

部署之后查看效果如下，有點(diǎn)丑：

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              #站點(diǎn)地圖
  commonweal: /404/ || heartbeat                #公益404

在menu_settings如果設(shè)置icon: false則無圖標(biāo)，badges: true則標(biāo)簽都會(huì)顯示數(shù)字

menu_settings:
  icons: true
  badges: false

注：這里需要?jiǎng)?chuàng)建about頁面，很簡單，同創(chuàng)建標(biāo)簽tags、歸檔archives頁面一樣的方式，所需要?jiǎng)?chuàng)建的名稱要與menu相對(duì)應(yīng)，舉例說明如下。

$ hexo new page about   #看看menu上還有什么標(biāo)簽沒創(chuàng)建就行創(chuàng)建
$ hexo new page tags   #創(chuàng)建標(biāo)簽等

創(chuàng)建完成之后在自己項(xià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://www.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 || skype


social_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: true

5.3.5、toc邊欄中的目錄設(shè)置

toc:                                            #邊欄設(shè)置
  enable: true                                  #是否啟用邊欄
  # Automatically add list number to toc.
  number: true                                  #自動(dòng)將列表編號(hào)添加到toc
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false                                   #true時(shí)是當(dāng)標(biāo)題寬度很長時(shí)，自動(dòng)換到下一行
  # 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 | zero
creative_commons: by-nc-sa

5.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: false

5.3.8、save_scroll配置

# Automatically saving scroll position on each post / page in cookies.
save_scroll: false                              #是否在Cookie中自動(dòng)保存每個(gè)帖子/頁面上的滾動(dòng)位置。

5.3.9、excerpt_description

# Automatically excerpt description in homepage as preamble text.
excerpt_description: false                       #是否自動(dòng)摘錄主頁中的描述作為前導(dǎo)文本。

5.3.10、auto_excerpt配置

auto_excerpt:
  enable: true                                  #是否自動(dòng)摘錄。不推薦
  length: 150                                   #這里是說文章開頭第一個(gè)字到第150個(gè)字就顯示"閱讀全文"

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: flat

5.3.12、wechat_subscriber微信配置

wechat_subscriber:
  enabled: true #是否啟動(dòng)微信訂閱
  qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg
  description: ex. subscribe to my blog by scanning my public wechat account

5.3.13、footer 底部設(shè)置

footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2019                                   #建站開始時(shí)間


  # 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，進(jìn)入theme/next目錄下

$ cd themes/next

2. 獲取該漢字支持Git module，執(zhí)行命令以下命令獲得

$ git clone https://github.com/theme-next/theme-next-han source/lib/Han

3. 設(shè)置漢字支持

han: true  

4. 更新update

$ cd themes/next/source/lib/Han
$ git pull

5.3.17、font字體設(shè)置

font:
  # Use custom fonts families or not.
  # Depended options: `external` and `family`.
  enable: true                                 #默認(rèn)false 如果要進(jìn)行字體修改那么設(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，按以下步驟進(jìn)行

1. 打開 Fork_me_on_GitHub(https://github.blog/2008-12-19-github-ribbons/) 鏈接，里面有許多樣式，選擇自己喜歡的樣式，將其復(fù)制下來。

2. 打開自己博客項(xiàng)目中的themes/next/layout/_layout.swig文件，搜索<div class="headband"></div> 將復(fù)制的內(nèi)容粘貼到<div class="headband"></div>下面，如下：

配置右上角的Fork_me_on_GitHub:

七、修改文章底部標(biāo)簽

在博客項(xiàng)目中找到/themes/next/layout/_macro/post.swig，搜索 rel="tag"，將 #號(hào) 換成<i class="fa fa-tag"></i>

原先#號(hào)的樣式

修改為圖標(biāo)的樣式

八、設(shè)置背景動(dòng)畫樣式

NexT里面有幾種動(dòng)畫背景樣式canvas_nest、three_waves、canvas_lines、canvas_sphere等

8.1、canvas_nest如下圖所示:

按照以下步驟完成：

1. 打開Git Bash Here進(jìn)入自己文件夾下/themes/next文件夾下

$ cd /themes/next

2. 下載安裝 canvas_nest module`執(zhí)行

$ git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

在 /themes/next/source/lib查看會(huì)看到canvas_nest文件夾

3. 在/themes/next/_config.yml設(shè)置

canvas_nest: true

8.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
#OR
canvas_lines: true
#OR
canvas_sphere: true

8.3、canvas_ribbon

canvas_ribbon只適合 scheme、Pisces這里不測試了，大家可以進(jìn)入 canvas_ribbon(https://github.com/theme-next/theme-next-canvas-ribbon) 安裝。

九、在網(wǎng)站底部添加訪問量

1. 進(jìn)入 \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 %}

在這個(gè)位置上添加以下代碼:

<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ù)點(diǎn)擊n篇文章，只記錄1次訪客數(shù)
busuanzi_value_site_pv  #表示用戶連續(xù)點(diǎn)擊n篇文章，記錄+n次訪問量

十、給每篇文章添加類別和標(biāo)簽

在創(chuàng)建的文章都在source/_post目錄下找到，每篇文章添加tags、categories。

十一、添加進(jìn)度條

添加進(jìn)度條的話在手機(jī)瀏覽的時(shí)候一般情況都有自帶的進(jìn)度條了，例如微信瀏覽、瀏覽器瀏覽等等，這樣就出現(xiàn)重復(fù)的進(jìn)度條了，這里看個(gè)人是否添加。但是在電腦瀏覽器瀏覽卻是不錯(cuò)的。

按照以下步驟進(jìn)行或者進(jìn)入這里 Progress配置(https://github.com/theme-next/theme-next-pace) 查看如何配置

1. 打開Git Bash Here進(jìn)入自己文件夾下/themes/next文件夾下

$ cd /themes/next

2. 下載安裝 Progress module 執(zhí)行

$ git clone https://github.com/theme-next/theme-next-pace source/lib/pace

在 /themes/next/source/lib查看會(huì)看到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)搜索。

按以下步驟進(jìn)行或者進(jìn)入 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 --save

2. 在根目錄下的 _config.yml添加

#表示站內(nèi)搜索
search:  
    path: search.xml
    field: post
    format: html
    limit: 10000

3. 在themes/next/_config.yml文件中搜索local_search，進(jìn)行設(shè)置

local_search:
  enable: true  #設(shè)置為true
  trigger: auto  # auto /  manual，auto 自動(dòng)搜索、manual：按回車[enter ]鍵手動(dòng)搜索
  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                               #啟用動(dòng)畫效果
  comment: 捐贈(zèng)作者請(qǐng)點(diǎn)擊下方的“打賞”按鈕       #內(nèi)容

十四、友情鏈接

# Blog rolls                                    #友情鏈接
links_icon: link
links_title: 友情鏈接
links_layout: block
#links_layout: inline
links:
  Eirunye: http://eirunye.github.io/   #所需添加的友情鏈接 Title是表示友情鏈接的博客名稱或者隨意你取，后面是鏈接，冒號(hào)后面記得空格
  程曉明: https://www.infoq.cn/profile/1278512```

十五、添加閱讀統(tǒng)計(jì)

給每篇文章進(jìn)行添加閱讀統(tǒng)計(jì)，效果如下圖:

1. 進(jìn)入 leancloud(https://leancloud.cn/)

2. 創(chuàng)建應(yīng)用

3. 進(jìn)入設(shè)置頁面獲取應(yīng)用Key

將App ID、App Key 配置到next/_config.yml中leancloud_visitors

leancloud_visitors:
  enable: true 設(shè)置為true 默認(rèn)為false
  app_id:  #你的App ID，注意冒號(hào)后面空格
  app_key:  #你的App Key，注意冒號(hào)后面空格
  Dependencies:  https://github.com/theme-next/hexo-leancloud-counter-security #設(shè)置依賴
  security: true #如果您不關(guān)心lc計(jì)數(shù)器中的安全性并且只想直接使用它（沒有hexo-leancloud-counter-security插件），請(qǐng)將`security`設(shè)置為`false`。
  betterPerformance: true#更好的性能

4. 在leancloud存儲(chǔ)的位置創(chuàng)建Class，必須命名為Counter

5. 查看后臺(tái)統(tǒng)計(jì)數(shù)據(jù)

十六、添加評(píng)論

我的博客選擇的是Valine。

在next/_config.yml搜索Valine，進(jìn)入 Valine(https://leancloud.cn/) 官網(wǎng)，也是 leancloud(https://leancloud.cn/) 官網(wǎng)，進(jìn)入leancloud 控制臺(tái),沒有賬號(hào)密碼就進(jìn)行設(shè)置。

1. 創(chuàng)建應(yīng)用

參考上面 添加閱讀統(tǒng)計(jì) 的創(chuàng)建應(yīng)用。

2. 進(jìn)入設(shè)置頁面獲取應(yīng)用key

參考上面 添加閱讀統(tǒng)計(jì) 的進(jìn)入設(shè)置頁面獲取應(yīng)用key。

3. 在next/_config.yml進(jìn)行配置。

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# 驗(yàn)證碼 默認(rèn)為false
  placeholder: Just go go ^_^ # 初始化評(píng)論顯示，根據(jù)自己修改，這里默認(rèn)，
  avatar: wavatar # 頭像風(fēng)格，默認(rèn)為mm，可進(jìn)入網(wǎng)址：https://valine.js.org/visitor.html查看頭像設(shè)置，這里有許多頭像風(fēng)格，進(jìn)行設(shè)置
  guest_info: nick,mail,link # 自定義評(píng)論標(biāo)題
  pageSize: 10 # 分頁大小，10頁就自動(dòng)分頁
  visitor: true # 是否允許游客評(píng)論 ，進(jìn)入官網(wǎng)查看設(shè)置：https://valine.js.org/visitor.html

4. 顯示結(jié)果

這樣就完成了valine評(píng)論的配置了，接下來就可以進(jìn)行評(píng)論了，我們還可以在后臺(tái)查看評(píng)論信息。

5. 在后臺(tái)查看評(píng)論數(shù)據(jù)

在valine后臺(tái)，存儲(chǔ)位置中的數(shù)據(jù)里面創(chuàng)建Class，名稱必須為命名為Comment。

參考上面 添加閱讀統(tǒng)計(jì) 的創(chuàng)建Class。

注：選擇valine評(píng)論系統(tǒng)是因?yàn)橹С謬鴥?nèi)網(wǎng)絡(luò)，不需要連接外網(wǎng)（翻墻）就可以進(jìn)行顯示評(píng)論系統(tǒng)，而且很好管理，頁面簡單。

十七、添加RSS

效果如下圖：

實(shí)現(xiàn)步驟如下：

1. 切換到你的blog根目錄下，然后安裝 Hexo 插件：(這個(gè)插件會(huì)放在node_modules這個(gè)文件夾里)

$ cnpm install --save hexo-generator-feed

2. 然后在根目錄的站點(diǎn)配置文件 _config.yml下進(jìn)行配置

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

十八、點(diǎn)擊出現(xiàn)桃心效果

效果如下圖：

實(shí)現(xiàn)步驟如下：

1. 打開瀏覽器，輸入：http://7u2ss1.com1.z0.glb.clouddn.com/love.js

2. 然后將里面的代碼copy一下，新建love.js文件并且將代碼復(fù)制進(jìn)去，然后保存。

3. 將love.js文件放到路徑/themes/next/source/js/src里面，然后打開\themes\next\layout\_layout.swig文件,在末尾（在前面引用會(huì)出現(xiàn)找不到的bug）添加以下代碼：

<!-- 頁面點(diǎn)擊小紅心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

十九、修改文章內(nèi)鏈接文本樣式

效果如下圖：

實(shí)現(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)記

效果如下圖：

實(shí)現(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之前兩個(gè)DIV）：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然后打開主題配置文件_config.yml，在末尾添加：

# 文章末尾添加“本文結(jié)束”標(biāo)記
passage_end_tag:
  enabled: true

二十一、修改``代碼塊自定義樣式

效果如下：

實(shí)現(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;
}

二十二、主頁文章添加陰影效果

效果如下圖：

實(shí)現(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);
  }

二十三、添加熱度

效果如下圖：

實(shí)現(xiàn)步驟如下：

next主題集成leanCloud，打開/themes/next/layout/_macro/post.swig ，在畫紅線的區(qū)域添加 ℃：

然后打開，/themes/next/languages/zh-Hans.yml，將畫紅框的改為熱度就可以了:

二十四、網(wǎng)站底部字?jǐn)?shù)統(tǒng)計(jì)

效果如下圖：

實(shí)現(xiàn)步驟如下：

切換到根目錄下，然后運(yù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">站點(diǎn)總字?jǐn)?shù){{ totalcount(site) }}字</span>
</div>

二十五、添加 README.md 文件

每個(gè)項(xiàng)目下一般都有一個(gè) README.md 文件，但是使用 hexo 部署到倉庫后，項(xiàng)目下是沒有 README.md 文件的。

在 Hexo 目錄下的 source 根目錄下添加一個(gè) README.md 文件，修改站點(diǎn)配置文件 _config.yml，將 skip_render 參數(shù)的值設(shè)置為

skip_render: README.md

保存退出即可。再次使用 hexo d 命令部署博客的時(shí)候就不會(huì)在渲染 README.md 這個(gè)文件了。

二十六、實(shí)現(xiàn)統(tǒng)計(jì)功能

效果如下圖：

實(shí)現(xiàn)步驟如下：

在根目錄下安裝 hexo-wordcount，運(yùn)行：

$ cnpm install hexo-wordcount --save

然后在主題的配置文件中，配置如下：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true                               #字?jǐn)?shù)統(tǒng)計(jì)
  min2read: true                                #閱讀時(shí)長預(yù)計(jì)
  totalcount: true                              #總字?jǐn)?shù)統(tǒng)計(jì)
  separated_meta: true

二十七、添加頂部加載條

效果如下圖：

實(shí)現(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; /*進(jìn)度條顏色*/
        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)信息

效果如下圖：

實(shí)現(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 }} 的個(gè)人博客">{{ theme.author }}</a></p>
  <p><span>發(fā)布時(shí)間:</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="點(diǎn)擊復(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)載請(qǐng)保留原文鏈接及作者。</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ā)-ReentrantLock
copyright: true
date: 2019-08-26 14:59:12
updated:
tags:
 - Java 
 - J.U.C
categories:
 - Java 
 - J.U.C
---

如果你覺得每次都要輸入copyright: true很麻煩的話,那么在/scaffolds/post.md文件中添加：

copyright: true

這樣每次hexo new "你的內(nèi)容"之后，生成的md文件會(huì)自動(dòng)把copyright:true加到里面去。

二十九、隱藏網(wǎng)頁底部powered By Hexo / 強(qiáng)力驅(qū)動(dòng)

打開themes/next/layout/_partials/footer.swig，隱藏或刪除如下代碼，如下圖：

三十、修改打賞字體不閃動(dòng)

修改文件next/source/css/_common/components/post/post-reward.styl，然后注釋其中的函數(shù)wechat:hover和alipay:hover，如下：

/* 注釋文字閃動(dòng)函數(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;
}
*/

三十一、文章加密訪問

效果如下圖：

實(shí)現(xiàn)步驟如下：

打開themes/next/layout/_partials/head/head.swig文件,在以下位置插入這樣一段代碼：

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('請(qǐng)輸入文章密碼') !== '{{ page.password }}'){
                alert('密碼錯(cuò)誤！');
                history.back();
            }
        }
    })();
</script>

然后在文章上寫成類似這樣：

三十二、添加鼠標(biāo)點(diǎn)擊顯示字體效果

效果如下圖：

實(shí)現(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
        ("富強(qiáng)", "民主", "文明", "和諧", "自由", "平等", "公正", "法治", "愛國", "敬業(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");
}

其中的社會(huì)主義核心價(jià)值觀可以根據(jù)你自己的創(chuàng)意替換為其他文字，然后在 \themes\next\layout\_layout.swing文件末尾添加以下代碼：

<!--單擊顯示文字-->
<script type="text/javascript" src="/js/click_show_text.js"></script>

三十三、添加鼠標(biāo)點(diǎn)擊煙花爆炸效果

效果如下圖：

實(shí)現(xiàn)步驟如下：

在 \themes\next\source\js 目錄下新建一個(gè) 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 這個(gè)軟件自己制作，不同主題具體放的文件有所不同，確保在博客主體 body 的 CSS 文件中即可，其中的鼠標(biāo)指針鏈接可替換成自己的，首先嘗試加載mouse.cur ，如果該文件不存在或由于其他原因無效，那么 auto 會(huì)被使用，也就是自動(dòng)默認(rèn)效果，圖片格式為.ico、.ani、.cur，建議使用.cur，如果使用.ani或者其他格式無效，原因是瀏覽器兼容問題。

三十五、添加彩色滾動(dòng)變換字體

在你想要添加彩色滾動(dòng)變換字體的地方寫入以下代碼即可，其中文字可自行更改：

<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 = ["青青陵上柏，磊磊澗中石。", "人生天地間，忽如遠(yuǎn)行客。","斗酒相娛樂，聊厚不為薄。", "驅(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)題惡搞

效果如下圖：

實(shí)現(xiàn)步驟如下：

在目錄 \themes\next\source\js 下新建一個(gè) 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)站雪花飄落效果

效果如下圖：

實(shí)現(xiàn)步驟如下：

在\themes\next\source\js目錄下新建一個(gè) 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é)點(diǎn) */
    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 */
    }
}
/* 雪運(yùn)動(dòng)對(duì)象 */
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;
    /* 左右擺動(dòng)(余弦) */
    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;
};
// 渲染雪花-隨機(jī)形狀（此處可修改雪花顏色?。。。?flakeMove.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)"); /* 若要改為其他顏色，請(qǐng)自行查 */
    snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找16進(jìn)制的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>

如果沒效果，請(qǐng)確認(rèn)網(wǎng)頁是否已載入JQurey，如果沒有請(qǐng)?jiān)谙卵┐a之前引入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>

三十八、添加背景動(dòng)態(tài)彩帶效果

效果如下圖：

實(shí)現(xiàn)步驟如下：

在 \themes\next\layout\layout.swing 文件中寫入以下代碼：

<!-- 樣式一（鼠標(biāo)點(diǎn)擊更換樣式） -->
<script src="https://g.joyinshare.com/hc/ribbon.min.js" type="text/javascript"></script>


<!-- 樣式二（飄動(dòng)的彩帶） -->
<script src="https://g.joyinshare.com/hc/piao.js" type="text/javascript"></script>

三十九、添加背景代碼雨特效

效果如下圖：

實(shí)現(xiàn)步驟如下：

在 \themes\next\source\js 目錄下新建一個(gè) DigitalRain.js文件，粘貼以下代碼：

window.onload = function(){
    //獲取畫布對(duì)象
    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;
    //每個(gè)文字的字體大小
    var fontSize = 12;
    //計(jì)算列
    var colunms = Math.floor(W /fontSize);  
    //記錄每列文字的y軸坐標(biāo)
    var drops = [];
    //給每一個(gè)文字初始化一個(gè)起始點(diǎn)的位置
    for(var i=0;i<colunms;i++){
        drops.push(0);
    }
    //運(yùn)動(dòng)的文字
    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)色，十六進(jì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);
            //如果要改變時(shí)間，肯定就是改變每次他的起點(diǎn)
            if(y >= canvas.height && Math.random() > 0.99){
                drops[i] = 0;
            }
            drops[i]++;
        }
    };
    function randColor(){//隨機(jī)顏色
        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ù)制功能

效果如下圖：

實(shí)現(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文章中圖片點(diǎn)擊實(shí)現(xiàn)全屏查看

使用圖片瀏覽放大功能fancybox插件。

1. 切換到lib目錄

$ cd next/source/lib

2. 下載插件

$ git clone https://github.com/theme-next/theme-next-fancybox3 fancybox

3. 更改主題配置文件

fancybox: true

四十二、3D動(dòng)態(tài)標(biāo)簽云

1. 安裝標(biāo)簽云hexo-tag-cloud插件

$ cnpm install hexo-tag-cloud@^2.* --save

2. 配置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)剛剛那個(gè)3d標(biāo)簽云了!

四十三、添加卡通人物

效果如下圖：

實(shí)現(xiàn)步驟如下：

1. 下載 live2d(https://github.com/EYHN/hexo-helper-live2d)

$ cnpm install --save hexo-helper-live2d  

2. 下載模型

$ cnpm install live2d-widget-model-z16

更多模型選擇請(qǐng) 訪問https://github.com/EYHN/hexo-helper-live2d。

3. 修改站點(diǎn)配置文件

#添加萌寵，以下任選一個(gè)
#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
live2d:
  enable: true
  scriptFrom: local
  model:
    use: live2d-widget-model-z16     
  display:
    position: right                             #模型位置                 
    width: 140                                  #模型寬度
    height: 260                                 #模型高度
  mobile:
    show: false                                 #是否在手機(jī)端顯示

四十四、卡通人物升級(jí)版

效果如下圖：

能說話、能換裝、能玩游戲、能拍照、還能自定義。

實(shí)現(xiàn)步驟如下：

1. 下載 張書樵(https://github.com/stevenjoezhang/live2d-widget) 大神的項(xiàng)目，解壓到本地博客目錄的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。

四十五、擴(kuò)展看板娘模型

由于官方的看板娘模型比較少，可手動(dòng)添加模型。

把 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. 在站點(diǎn)配置文件夾/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è)置底部文字, 看個(gè)人需要修改*/
     #footer > div > div {
        color: #eee;
    }
}

四十九、 防止每次heox clean 后CNAME文件被刪除

1. 先把github中的CNAME文件復(fù)制一份到本地public

2. 再安裝插件

cnpm install hexo-generator-cname --save

3. 根目錄_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é)點(diǎn)。
var infoEle = document.querySelector('#comments .info');
if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0){
  infoEle.childNodes.forEach(function(item) {
    item.parentNode.removeChild(item);
  });
}

五十一、增加詞云

增加之前的效果如下圖：

方法比較簡單，加個(gè)js腳本就好了，就加在標(biāo)簽的那個(gè)頁面好了。

打開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è)置陰影效果和實(shí)現(xiàn)文本編輯功能，不過文本只存在瀏覽器頁面上，不會(huì)真正保存。

實(shí)現(xiàn)步驟如下：

1.引入JS

這里需要新建兩個(gè)js文件events.js和codeblock.js，路徑位于/themes/next/scripts/包下。

events.js代碼如下：

// mac Panel效果代碼塊相關(guān)
var exec = require('child_process').exec;


// new 后自動(dòng)打開編輯器
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選項(xiàng)，選擇自己喜歡的樣式。

4.可能遇到的問題

如果在配置完畢后，hexo啟動(dòng)報(bào)錯(cuò)，可將站點(diǎn)配置文件里的highlight屬性auto_detect改成false：

highlight:
   enable: true
   line_number: true
-  auto_detect: true
+  auto_detect: false
   tab_replace:

如果還是有問題，可仔細(xì)檢查一下剛才新建的文件、修改的配置文件，有什么地方配置錯(cuò)了，或者是語法上的錯(cuò)誤,修改后重新啟動(dòng)即可看到效果。

五十三、 為文章生成永久鏈接

hexo默認(rèn)的文章鏈接形式為year/:month/:day/:title，是按照年、月、日、標(biāo)題來生成的。當(dāng)把文章源文件名改掉之后，鏈接也會(huì)改變，這很不友好。并且如果文章標(biāo)題是中文的，那么該路徑就會(huì)出現(xiàn)中文字符。在路徑中出現(xiàn)了中文字符很容易引發(fā)各種問題，而且也不利于seo，因?yàn)槁窂桨四暝氯杖齻€(gè)層級(jí)，層級(jí)太深不利于百度蜘蛛抓取。

解決辦法就是利用其它的插件來生成唯一的路徑，這樣就算文件標(biāo)題隨意修改，而不會(huì)導(dǎo)致原本的鏈接失效而造成站點(diǎn)下存在大量的死鏈。

1.安裝插件

cnpm install hexo-abbrlink --save

注意：執(zhí)行此命令可能會(huì)不成功，提示你缺少相應(yīng)的依賴，比如babel-eslint、mini-css-extract-plugin、webpack-cli…使用npm命令安裝即可。比如：

npm install eslint@4.x babel-eslint@8 --save-dev

2.配置

修改根目錄站點(diǎn)配置文件config.yml，改為：

permalink: posts/:abbrlink.html  # 此處可以自己設(shè)置，也可以直接使用 /:abbrlink
abbrlink:
  alg: crc32   #算法：crc16(default) and crc32
  rep: hex     #進(jìn)制：dec(default) and hex

這里將頁面都添加了 .html 的后綴，用來偽裝成靜態(tài)頁面(雖說Hexo的頁面本身就是靜態(tài)頁面)，這樣可以直接從路徑就知道這是個(gè)靜態(tài)頁面，方便seo。

生成的鏈接將會(huì)是這樣的(官方樣例)：

crc16 & hex
https://post.zz173.com/posts/66c8.html


crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html


crc32 & dec
https://post.zz173.com/posts/1690090958.html

生成完后，原md文件的Front-matter內(nèi)會(huì)增加abbrlink字段，值為生成的ID`。這個(gè)字段確保了在我們修改了Front-matter內(nèi)的博客標(biāo)題title或創(chuàng)建日期date字段之后而不會(huì)改變鏈接地址。

最后附上一張我個(gè)人網(wǎng)站的全覽圖：