Hexo搭建GitHub博客(持续更新)

发表于 | 评论数： | 热度： ℃   |   字数统计: 13.7k字   |   阅读时长: ≈ 65分钟

入门Hexo

由于平时自己喜欢看一些技术类文章整理成Word笔记，总感觉这种方式太low，想自己搭建属于自己的博客，在网上查阅了一下，发现Hexo在GitHub或者是码云上搭建博客非常给力。
然后自己也搭建了博客，这篇文章就记录了搭建的过程及一些优化。

什么是Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown （或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。大家进入 Hexo官网 进行查看。

安装Hexo

安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

  • Node.js
  • Git
  • cnpm 如果npm运行出错就安装cnpm国内镜像
    所有必备的应用程序安装完成后，即可使用 npm或者cnpm 安装 Hexo。
    打开Git Bash here，输入：
1
2
3
$ npm install -g hexo-cli 
或者 
$ cnpm install -g hexo-cli

检查是否安装Hexo完成,查询是否成功，显示hexo-cli 版本就说明成功了

1
$ hexo -V

img

建站

安装一切所需的程序后，就可以开始建站了，就是创建我们的博客,大家也可以进入 建站官网 查看。
新建一个文件夹，来管理我们的博客项目，执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

运行命令

1
2
3
$ hexo init <folder>
$ cd <folder>
$ cnpm install

注：<folder>是表示建站的博客项目名
打开Git Bash here，输入：

1
$ hexo init githubBlog

img

进入创建的博客项目下，安装

1
2
$ cd githubBlog
$ cnpm install

img

安装之后，整个博客项目目录如下：
img

访问URL

1
2
3
$ hexo server 
或者
$ hexo s

img

访问URL：http://localhost:4000，效果如下图：
img

到这里已经通过Hexo初步创建博客了，下面再来了解一下如何将我们的博客托管到GitHub服务器上。

托管到GitHub

GitHub创建repositories

进入GitHub官网中浏览器输入 https://github.com/ ,如果还没有账号就创建一个账号就好了。登录自己的账号。直接new repositories 或者进入You repositories 在new repositories。
img
img

进入到创建 repositories 页面后,一定要注意，将新建的repository的名字为: You account name.github.io。其他默认就好了。
img
img

配置

GitHub的Repository创建好后，在回到本地的Hexo的githubBlog项目中，找到在项目的根目录下_config.yml找到 deploy标签
img
在该文件下面添加

注：repository: https://github.com/whb1990/whb1990.github.io 是自己刚刚创建You account name.github.io 的repository，在Clone with HTTPS里面，复制粘贴就好了，冒号后面记得空格。branch 后面是master就好了。

1
2
3
4
deploy:                                      #部署
  type: git
  repository: https://github.com/whb1990/whb1990.github.io.git
  branch: master

img

在_config.yml找到url进行修改为：

1
url: http://whb1990.github.io                  #博客网址

部署

到这里就差不到了，接下来需要执行一些命令，将博客部署到GitHub上去。
打开Git Bash Here进入githubBlog 根目录下，首先需要安装一下 hexo-deployer-git 不然可能出现错误无法部署成功。

1
$ cnpm install hexo-deployer-git --save

img

然后在执行以下命令:

1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy

或者简写

1
2
3
$ hexo clean
$ hexo g
$ hexo d

部署成功如下显示:
img

测试

我们进行访问 https://whb1990.github.io/ 和 http://localhost:4000/ 一样的页面说明是已经成功。
img

站点文件配置

在根githubBlog目录下_config.yml文件，我们暂且称为站点配置文件，以便与后面讲到的主题配置文件(Next主题下的_config.yml文件)进行区分。

网站

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 您的名字
language 网站使用的语言
timezone 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。

img

目录

参数 描述
source_dir 资源文件夹，这个文件夹用来存放内容。
public_dir 公共文件夹，这个文件夹用于存放生成的站点文件。
tag_dir 标签文件夹
archive_dir 归档文件夹
category_dir 分类文件夹
code_dir Include code 文件夹
i18n_dir 国际化（i18n）文件夹
skip_render 跳过指定文件的渲染，您可使用 glob 来配置路径

img

文章

参数 描述 默认值
new_post_name 新文章的文件名称 :title.md
default_layout 预设布局 post
auto_spacing 在中文和英文之间加入空格 false
titlecase 把标题转换为 title case false
external_link 在新标签中打开链接 true
filename_case 把文件名称转换为 (1) 小写或 (2) 大写 0
render_drafts 显示草稿 false
post_asset_folder 启动 Asset 文件夹 false
relative_link 把链接改为与根目录的相对位址 false
future 显示未来的文章 true
highlight 代码块的设置

分类&标签

参数 描述 默认值
default_category 默认分类 uncategorized
category_map 分类别名
tag_map 标签别名

分页

参数 描述 默认值
per_page 每页显示的文章量 (0 = 关闭分页功能) 10
pagination_dir 分页目录 page

写作

创建文章

1
$ hexo new [layout] <title>

如：创建hello-world

1
$ hexo new hello-world

如果不添加title，默认就是标题title: hello-world。
这里注意一下，如果创建带有中文的路径名称时，生成静态页面hexo g可能会报错。

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

这是由于原因是路径中存在 / 的符号转义问题 如：创建文章时命名为中文，一般都出现这个小问题。

解决

在命令行中输入: 

1
$ git config --global core.autocrlf false

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

编辑文章

创建的文章在source/_posts目录下，打开文件进行编辑，完全支持Markdown语法。
img

Next主题

在 Hexo主题官网 中有许多主题，大家喜欢什么就进行部署和编辑就好了，大致的思路都是差不多的。
我选择的 Next主题 ，网上很多也是用的这个主题。

安装

在githubBlog根目录下，执行以下命令：

1
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

上面的命令是clone最新版本的主题，也可以使用下面的命令clone指定版本的主题

1
$ git clone --branch v7.1.1 https://github.com/theme-next/hexo-theme-next themes/next

img
安装完成之后，在themes下就会有next目录
img

切换主题

在项目根目录下打开_config.yml文件将theme设置为next即可：
img
部署之后查看效果如下，有点丑：
img

主题配置

一般配置都在theme/next/-config.yml文件下配置。

  1. 修改整体布局

在theme/next/-config.yml找到menu看看自己博客所需的分类

1
2
3
4
5
6
7
8
9
menu:
  home: / || home                               #首页
  about: /about/ || user                        #关于
  tags: /tags/ || tags                          #标签
  categories: /categories/ || th                #目录
  archives: /archives/ || archive               #归档
  #schedule: /schedule/ || calendar             #日程
  sitemap: /sitemap.xml || sitemap              #站点地图
  commonweal: /404/ || heartbeat                #公益404

在menu_settings如果设置icon: false则无图标，badges: true则标签都会显示数字

1
2
3
menu_settings:
  icons: true
  badges: false

注:这里需要创建about页面，很简单，同理创建标签tags、归档archives页面一样的方式，所需要创建的名称要与menu相对应，举例说明如下。

1
2
$ hexo new page about   #看看menu上还有什么标签没创建就行创建
$ hexo new page tags   #创建标签等

创建完成之后在自己项目查找，如我的是githubBlog/source/目录下查看新创建好的相关标签页面，里面包含各自的index.md文件，大家可以自行编辑了。

  1. Schemes方案设置
1
2
3
4
5
# Schemes
#scheme: Muse                                    #这是 Nex默认版本，黑白主调，大量留白                               
#scheme: Mist                                    #Muse 的紧凑版本，整洁有序的单栏外观
#scheme: Pisces                                  #双栏 Scheme，小家碧玉似的清新
scheme: Gemini                                   #双子座，也是双栏形式，和Pisces类似

自己喜欢什么风格自行选择。

  1. social设置

使用方式: Key: permalink || icon Key表示标签显示，permalink表示URI连接，icon表示图标，自己添加所要显示的，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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:                                   #设置图标是否显示这里
  enable: true                                  #表示开启
  icons_only: false                             #只显示图片
  transition: false

注：图标库来源 [https://fontawesome.com/icons?from=io] ，在scheme: Pisces该效果不显示。

  1. avatar头像设置
1
2
3
4
5
6
7
8
9
10
11
12
13
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.
  #头像是否旋转
  rotated: true
  1. toc边栏中的目录设置
1
2
3
4
5
6
7
8
9
10
toc:                                            #边栏设置
  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时是当标题宽度很长时，自动换到下一行
  # 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                                  #最大深度
  1. Creative Commons 4.0国际许可设置
1
2
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons: by-nc-sa
  1. sidebar侧边栏配置这里选择默认吧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
  1. save_scroll配置
1
2
# Automatically saving scroll position on each post / page in cookies.
save_scroll: false                              #是否在Cookie中自动保存每个帖子/页面上的滚动位置。
  1. excerpt_description
1
2
# Automatically excerpt description in homepage as preamble text.
excerpt_description: false                       #是否自动摘录主页中的描述作为前导文本。
  1. auto_excerpt配置
1
2
3
auto_excerpt:
  enable: true                                  #是否自动摘录。不推荐
  length: 150                                   #这里是说文章开头第一个字到第150个字就显示"阅读全文"
  1. codeblock代码块配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
  1. wechat_subscriber微信配置
1
2
3
4
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 account
  1. footer 底部设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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                             #设置图标，想修改图标从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 王洪博               #版权

  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版本
  1. favicon标签页图标
1
2
3
4
5
favicon:
  small: /images/favicon-16x16-next.png   #小图标 默认的NexT
  medium: /images/favicon-32x32-next.png  #中图标 默认NexT
  apple_touch_icon: /images/apple-touch-icon-next.png #苹果触摸图标
  safari_pinned_tab: /images/logo.svg   #safari固定标签
  1. Math Equations Render Support 数学方程式渲染支持
1
2
3
4
5
6
7
8
math:
  enable: true  #默认为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  #默认 这里大家根据自己需求
  katex:
    cdn: //cdn.jsdelivr.net/npm/katex@0.7.1/dist/katex.min.css   #默认

16 .Han Support 支持汉字

设置汉字支持，按照以下步骤：

  1. 打开Git Bash Here,进入theme/next目录下
1
$ cd themes/next
  1. 获取该汉字支持Git module,执行命令以下命令获得
1
$ git clone https://github.com/theme-next/theme-next-han source/lib/Han
  1. 设置汉字支持
1
han: true
  1. 更新update
1
2
$ cd themes/next/source/lib/Han
$ git pull

img

  1. font字体设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
font:
  # Use custom fonts families or not.
  # Depended options: `external` and `family`.
  enable: true                                 #默认false 如果要进行字体修改那么设置为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:

添加图标链接到GitHub

一般在右上角或者左上角，如配置右上角Fork_me_on_GitHub,按以下步骤进行

  1. 打开 Fork_me_on_GitHub 链接，里面有许多样式，选择自己喜欢的样式，将其复制下来。
    img

  2. 打开自己博客项目中的themes/next/layout/_layout.swig文件，搜索<div class="headband"></div> 将复制的内容粘贴到<div class="headband"></div>下面，如下：

img
配置右上角的Fork_me_on_GitHub:
img

修改文章底部标签

在博客项目中找到/themes/next/layout/_macro/post.swig，搜索 rel="tag"，将 #号 换成<i class="fa fa-tag"></i>
img

原先#号的样式
img

修改为图标的样式
img

设置背景动画样式

NexT里面有几种动画背景样式canvas_nest、three_waves、canvas_lines、canvas_sphere等

  • canvas_nest如下图所示:
    img

按照以下步骤完成

  1. 打开Git Bash Here进入自己文件夹下/themes/next文件夹下
1
$ cd /themes/next
  1. 下载安装 canvas_nest module 执行
1
$ git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

img

在 /themes/next/source/lib查看会看到canvas_nest文件夹
img

  1. 在/themes/next/_config.yml设置
1
canvas_nest: true
  • three_waves如图所示
    img

three_waves 设置步骤，和 canvas_nest 步骤是一样的。
下载完成后，在/themes/next/_config.yml设置

1
2
3
4
5
three_waves: true
#OR
canvas_lines: true
#OR
canvas_sphere: true
  • canvas_ribbon

canvas_ribbon只适合 scheme Pisces 这里不测试了，大家可以进入 canvas_ribbon 安装。

在网站底部添加访问量

  1. 进入 \themes\next\layout\_partials\footer.swig 文件顶部第一行添加
1
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  1. 搜索
1
{% if theme.footer.powered.enable %}

在这个位置上添加以下代码:

1
2
3
4
5
<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

注：这里的id值可以选择两种

1
2
busuanzi_value_site_uv  #表示用户连续点击n篇文章，只记录1次访客数
busuanzi_value_site_pv  #表示用户连续点击n篇文章，记录+n次访问量

这里对应的是2上的id值

给每篇文章添加类别和标签

在创建的文章都在source/_post目录下找到，每篇文章添加tags、categories

添加进度条

添加进度条的话在手机浏览的时候一般情况都有自带的进度条了，例如微信浏览、浏览器浏览等等，这样就出现重复的进度条了，这里看个人是否添加。但是在电脑浏览器浏览却是不错的。
本例设置的如下pace-theme-center-circle显示

按照以下步骤进行或者进入这里 Progress配置 查看如何配置

  1. 打开Git Bash Here进入自己文件夹下/themes/next文件夹下
1
$ cd /themes/next
  1. 下载安装 Progress module 执行
1
$ git clone https://github.com/theme-next/theme-next-pace source/lib/pace

在 /themes/next/source/lib查看会看到pace文件夹
img

  1. 在/themes/next/_config.yml设置
1
2
3
4
5
6
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               #任选一种

添加站内搜索

由于可能需要快速查找相关文章，那么就需要添加站内搜索。
img

按以下步骤进行或者进入 NexT配置站内搜索 文档查看如何配置

  1. 安装站内搜索插件
1
2
3
$  npm install hexo-generator-searchdb --save
或者
$ cnpm install hexo-generator-searchdb --save
  1. 在根目录下的_config.yml添加
1
2
3
4
5
6
#表示站内搜索
search:  
    path: search.xml
    field: post
    format: html
    limit: 10000
  1. 在themes/next/_config.yml文件中搜索local_search,进行设置
1
2
3
4
5
local_search:
  enable: true  #设置为true
  trigger: auto  # auto /  manual，auto 自动搜索、manual：按回车[enter ]键手动搜索
  top_n_per_article: 1
  unescape: true

添加打赏

NexT主要提供三种打赏方式分别是微信、支付宝、比特币
在themes/next搜索Reward：

1
2
3
4
5
6
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: 捐赠作者请点击下方的“打赏”按钮       #内容

友情链接

1
2
3
4
5
6
7
8
# Blog rolls                                    #友情链接
links_icon: link
links_title: 友情链接
links_layout: block
#links_layout: inline
links:
  Eirunye: http://eirunye.github.io/   #所需添加的友情链接 Title是表示友情链接的博客名称或者随意你取，后面是链接，冒号后面记得空格
  程晓明: https://www.infoq.cn/profile/1278512

添加阅读统计

给每篇文章进行添加阅读统计，效果如下图:
img

  1. 进入 leancloud
    img

  2. 创建应用
    img

  3. 进入设置页面获取应用Key
    img

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

1
2
3
4
5
6
7
leancloud_visitors:
  enable: true 设置为true 默认为false
  app_id:  #你的App ID，注意冒号后面空格
  app_key:  #你的App Key，注意冒号后面空格
  Dependencies:  https://github.com/theme-next/hexo-leancloud-counter-security #设置依赖
  security: true #如果您不关心lc计数器中的安全性并且只想直接使用它（没有hexo-leancloud-counter-security插件），请将`security`设置为`false`。
  betterPerformance: true#更好的性能

  1. 在leancloud存储的位置创建Class,必须命名为Counter
    img

  2. 查看后台统计数据
    img

添加评论

我的博客选择的是Valine。

在next/_config.yml搜索Valine,进入 Valine 官网，也是 leancloud 官网，进入leancloud 控制台,没有账号密码就进行设置。

  1. 创建应用
    参考上面 添加阅读统计 的创建应用。

  2. 进入设置页面获取应用key
    参考上面 添加阅读统计 的进入设置页面获取应用key。

  3. 在next/_config.yml进行配置。

1
2
3
4
5
6
7
8
9
10
11
valine:
  enable: true # 设置为true，默认为false
  appid:  # 将应用key的App ID设置在这里
  appkey: # 将应用key的App Key设置在这里
  notify: true# 邮箱通知 , https://github.com/xCss/Valine/wiki，默认为false
  verify: true# 验证码 默认为false
  placeholder: Just go go ^_^ # 初始化评论显示，根据自己修改，这里默认，
  avatar: wavatar # 头像风格，默认为mm，可进入网址：https://valine.js.org/visitor.html查看头像设置，这里有许多头像风格，进行设置
  guest_info: nick,mail,link # 自定义评论标题
  pageSize: 10 # 分页大小，10页就自动分页
  visitor: true # 是否允许游客评论 ，进入官网查看设置：https://valine.js.org/visitor.html
  1. 显示结果
    img

这样就完成了valine评论的配置了，接下来就可以进行评论了，我们还可以在后台查看评论信息。

  1. 在后台查看评论数据

在valine后台，存储位置中的数据里面创建Class，名称必须为命名为Comment
参考上面 添加阅读统计 的创建Class。
img

注：选择valine评论系统是因为支持国内网络，不需要连接外网（翻墙）就可以进行显示评论系统，而且很好管理，页面简单。

添加RSS

效果如下图：
img

实现方法：

  1. 切换到你的blog根目录下，然后安装 Hexo 插件：(这个插件会放在node_modules这个文件夹里)
1
$ cnpm install --save hexo-generator-feed
  1. 然后在根目录的站点配置文件_config.yml下进行配置
1
2
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed                     # RSS订阅
  1. 然后打开next主题文件夹里面的_config.yml,在里面配置为如下：
1
2
3
4
# 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

点击出现桃心效果

效果如下图：

img

实现方法

  1. 打开浏览器，输入： http://7u2ss1.com1.z0.glb.clouddn.com/love.js
  2. 然后将里面的代码copy一下，新建love.js文件并且将代码复制进去，然后保存。
  3. 将love.js文件放到路径/themes/next/source/js/src里面，然后打开\themes\next\layout\_layout.swig文件,在末尾（在前面引用会出现找不到的bug）添加以下代码：
1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

修改文章内链接文本样式

效果如下图：
img

实现方法

修改文件 themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css样式：

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.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 是为了不影响标题，选择 p 是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。

在每篇文章末尾统一添加“本文结束”标记

效果如下图：
img

实现方法

在路径 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下画红色部分代码（post-footer之前两个DIV）：
img

1
2
3
4
5
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然后打开主题配置文件（_config.yml),在末尾添加：

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

修改``代码块自定义样式

效果如下：
img

实现方法
打开\themes\next\source\css\_custom\custom.styl,向里面加入：(颜色可以自己定义)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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;
}

主页文章添加阴影效果

效果如下图：
img

实现方法

打开\themes\next\source\css\_custom\custom.styl,向里面加入：

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
 .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);
  }

添加热度

效果如下图：
img

实现方法

next主题集成leanCloud，打开/themes/next/layout/_macro/post.swig,在画红线的区域添加℃：
img

然后打开，/themes/next/languages/zh-Hans.yml,将画红框的改为热度就可以了:
img

网站底部字数统计

效果如下图：
img

实现方法

切换到根目录下，然后运行如下代码

1
$ cnpm install hexo-wordcount --save

然后在/themes/next/layout/_partials/footer.swig文件尾部加上：

1
2
3
4
<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">站点总字数{{ totalcount(site) }}字</span>
</div>

添加 README.md 文件

每个项目下一般都有一个 README.md 文件，但是使用 hexo 部署到仓库后，项目下是没有 README.md 文件的。

在 Hexo 目录下的 source 根目录下添加一个 README.md 文件，修改站点配置文件 _config.yml，将 skip_render 参数的值设置为

1
skip_render: README.md

保存退出即可。再次使用 hexo d 命令部署博客的时候就不会在渲染 README.md 这个文件了。

实现统计功能

效果如下图：
img

实现方法

在根目录下安装 hexo-wordcount,运行：

1
$ cnpm install hexo-wordcount --save

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

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true                               #字数统计
  min2read: true                                #阅读时长预计
  totalcount: true                              #总字数统计
  separated_meta: true

添加顶部加载条

效果如下图：
img

实现方法

打开/themes/next/layout/_partials/head.swig文件，添加红框上的代码
img

1
2
<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">

但是，默认的是粉色的，要改变颜色可以在/themes/next/layout/_partials/head.swig文件中添加如下代码（接在刚才link的后面）

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

在文章底部增加版权信息

效果如下图：
img

实现方法

在目录 next/layout/_macro/下添加 my-copyright.swig：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{% 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>本文标题:</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>发布时间:</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="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <!--
  <p><span>许可协议:</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)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
  --> 
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
	  $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success", 
          showConfirmButton: true
          });
	    });
    });  
</script>
{% endif %}

在目录next/source/css/_common/components/post/下添加my-post-copyright.styl：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.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，在代码

1
2
3
4
5
<div>
      {% if not is_index %}
        {% include 'wechat-subscriber.swig' %}
      {% endif %}
</div>

之前添加增加如下代码：

1
2
3
4
5
<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

如下图：
img

修改next/source/css/_common/components/post/post.styl文件，在最后一行增加代码：

1
@import "my-post-copyright"

保存重新生成即可。如果要在该博文下面增加版权信息的显示，需要在 Markdown 中增加copyright: true的设置，类似：

1
2
3
4
5
6
7
8
9
10
11
12
---
title: Java并发-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文件中添加：

1
copyright: true

这样每次hexo new "你的内容"之后，生成的md文件会自动把copyright:true加到里面去。

隐藏网页底部powered By Hexo / 强力驱动

打开themes/next/layout/_partials/footer.swig,隐藏或删除如下代码，如下图：
img

修改打赏字体不闪动

修改文件next/source/css/_common/components/post/post-reward.styl，然后注释其中的函数wechat:hover和alipay:hover，如下：

1
2
3
4
5
6
7
8
9
10
11
12
/* 注释文字闪动函数
 #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;
}
*/

文章加密访问

效果如下图：
img

实现方法

打开themes/next/layout/_partials/head/head.swig文件,在以下位置插入这样一段代码：
img

1
2
3
4
5
6
7
8
9
10
<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

然后在文章上写成类似这样：
img

添加鼠标点击显示字体效果

效果如下图：
img

实现方法

在 /themes/next/source/js 下新建文件 click_show_text.js，在 click_show_text.js 文件中添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array
        ("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        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");
}

其中的社会主义核心价值观可以根据你自己的创意替换为其他文字，然后在 \themes\next\layout\_layout.swing 文件末尾添加以下代码：

1
2
<!--单击显示文字-->
<script type="text/javascript" src="/js/click_show_text.js"></script>

添加鼠标点击烟花爆炸效果

效果如下图：
img

实现方法

在 \themes\next\source\js 目录下新建一个 fireworks.js 的文件，里面写入以下代码：

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)}"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 文件中写入以下代码：

1
2
3
<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>

自定义鼠标指针样式

在 \themes\next\source\css\_custom\custom.styl 文件 body 样式里写入如下代码：

1
2
3
4
5
/*自定义鼠标样式*/
body {
  cursor: url("/images/mouse.cur"),auto;
  background-color: @theme_background;
}

鼠标指针可以用 Axialis CursorWorkshop 这个软件自己制作，不同主题具体放的文件有所不同，确保在博客主体 body 的 CSS 文件中即可，其中的鼠标指针链接可替换成自己的，首先尝试加载mouse.cur ，如果该文件不存在或由于其他原因无效，那么 auto 会被使用，也就是自动默认效果，图片格式为.ico、.ani、.cur，建议使用.cur，如果使用.ani或者其他格式无效，原因是浏览器兼容问题。

添加彩色滚动变换字体

在你想要添加彩色滚动变换字体的地方写入以下代码即可，其中文字可自行更改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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 = ["青青陵上柏，磊磊涧中石。", "人生天地间，忽如远行客。","斗酒相娱乐，聊厚不为薄。", "驱车策驽马，游戏宛与洛。","洛中何郁郁，冠带自相索。","长衢罗夹巷，王侯多第宅。","两宫遥相望，双阙百余尺。","极宴娱心意，戚戚何所迫？"].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>

我是放在了侧边栏头像的下边，描述的位置\themes\next\layout\_macro\sidebar.swing：
img

浏览器网页标题恶搞

效果如下图：
img
img

实现方法

在目录 \themes\next\source\js 下新建一个 FunnyTitle.js 文件，在里面填写如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--浏览器搞笑标题-->
 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 文件中写入以下代码：

1
2
<!--浏览器搞笑标题-->
<script type="text/javascript" src="\js\FunnyTitle.js"></script>

再次部署博客后就可以看见标题搞笑的效果了。

添加网站雪花飘落效果

效果如下图：
img

实现方法

在 \themes\next\source\js 目录下新建一个 snow.js 文件，粘贴以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/*样式一*/
(function($){
	$.fn.snow = function(options){
	var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
	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  /* 定义密集程度，数字越小越密集 */
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/*样式二*/
/* 控制下雪 */
function snowFall(snow) {
    /* 可配置属性 */
    snow = snow || {};
    this.maxFlake = snow.maxFlake || 200;   /* 最多片数 */
    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(){
    /* 创建画布 */
    snowCanvas.apply(this);
    /* 创建雪花形状 */
    createFlakes.apply(this);
    /* 画雪 */
    drawSnow.apply(this)
}
/* 创建画布 */
function snowCanvas() {
    /* 添加Dom结点 */
    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坐标 */
    this.y = Math.floor(Math.random() * canvasHeight);  /* y坐标 */
    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                                       /* 步数 */
}
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)
    }
};
/* 飞出边界-放置最顶端继续坠落 */
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;
};
// 渲染雪花-随机形状（此处可修改雪花颜色！！！）
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)");  /* 此处是雪花颜色，默认是白色 */
    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();
};
/* 创建雪花-定义形状 */
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);
    });
}
/* 调用及控制方法 */
var snow = new snowFall({maxFlake:60});
snow.start();

然后在 \themes\next\layout\layout.swing 文件中写入以下代码：

1
2
<!-- 雪花特效 -->
<script type="text/javascript" src="\js\snow.js"></script>

如果没效果，请确认网页是否已载入JQurey，如果没有请在下雪代码之前引入JQ即可：

1
2
<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>

添加背景动态彩带效果

效果如下图：
img

实现方法

在 \themes\next\layout\layout.swing 文件中写入以下代码：

1
2
3
4
5
<!-- 样式一（鼠标点击更换样式） -->
<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>

添加背景代码雨特效

效果如下图：
img

实现方法

在 \themes\next\source\js 目录下新建一个 DigitalRain.js 文件，粘贴以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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;
    //设置canvas的宽度和高度
    canvas.width = W;
    canvas.height = H;
    //每个文字的字体大小
    var fontSize = 12;
    //计算列
    var colunms = Math.floor(W /fontSize);	
    //记录每列文字的y轴坐标
    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的坐标位置
    //绘画的函数
    function draw(){
        context.fillStyle = "rgba(238,238,238,.08)";//遮盖层
        context.fillRect(0,0,W,H);
        //给字体设置样式
        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, 标准色，十六进制颜色
        //写入画布中
        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 中写入样式：

1
2
3
4
5
6
7
8
9
10
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 文件中写入以下代码：

1
2
3
<!-- 代码雨 -->
 <canvas id="canvas" width="1440" height="900" ></canvas>
 <script type="text/javascript" src="/js/DigitalRain.js"></script>

代码块复制功能

效果如下图：
img

实现方法

  1. 下载 clipboard.js

保存文件clipboard.js / clipboard.min.js 到路径\themes\next\source\js\src下。

  1. 使用clipboard.js

也是在 \themes\next\source\js\src 目录下，创建clipboard-use.js，文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*页面载入完成后，创建复制按钮*/
!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样式文件中添加下面代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//代码块复制按钮
.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;
}
  1. 引用

在\themes\next\layout\_layout.swig文件中，添加引用（注：在 swig 末尾或 body 结束标签（</body>）之前添加）：

1
2
3
<!-- 代码块复制功能 -->
 <script type="text/javascript" src="/js/src/clipboard.min.js"></script>  
 <script type="text/javascript" src="/js/src/clipboard-use.js"></script>

Hexo文章中图片点击实现全屏查看

使用图片浏览放大功能fancybox插件。

  1. 切换到lib目录
1
$ cd next/source/lib
  1. 下载插件
1
$ git clone https://github.com/theme-next/theme-next-fancybox3 fancybox
  1. 更改主题配置文件
1
fancybox: true

3D动态标签云

  1. 安装标签云hexo-tag-cloud插件
1
$ cnpm install hexo-tag-cloud@^2.* --save
  1. 配置sidebar.swig文件

打开next/layout/_macro/sidebar.swig，输入：

1
2
3
4
5
6
7
8
9
10
11
{% 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 %}

根据自己的需要放在合适的位置。重新hexo s一下，就可以出现刚刚那个3d标签云了!

添加卡通人物

效果如下图：
img

实现方法

  1. 下载 live2d
1
$ cnpm install --save hexo-helper-live2d
  1. 下载模型
1
$ cnpm install live2d-widget-model-z16

更多模型选择请 点击此处， 各个模型的预览请 点击此处

  1. 修改站点配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#添加萌宠，以下任选一个
#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                                 #是否在手机端显示

卡通人物升级版

效果如下图：
img

能说话、能换装、能玩游戏、能拍照、还能自定义。

实现方法

  1. 下载 张书樵 大神的项目，解压到本地博客目录的themes/next/source下，修改autoload.js文件，如下：
    将

    1
    2
    3
    4
    const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";
    改为

    const live2d_path = "/live2d-widget/";

  2. 在/themes/next/layout/_layout.swing中,新增如下内容：

1
<script src="/live2d-widget/autoload.js"></script>
  1. 在主题配置文件 中,新增如下内容：
1
2
live2d:
  enable: true

想修改看板娘大小、位置、格式、文本内容等，可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css。

扩展看板娘模型

由于官方的看板娘模型比较少，可手动添加模型。

把 github模型 下载到本地，解压后将assets目录拷贝到博客根目录中的live2d_models（自己新建，文件名不可改）里，再修改_config.yml 里的 live2d中model.use即可（改为live2d_models中的模型名字就行）。

live2d配置

扩展的live2d模型效果

去掉顶部黑线

打开themes\next\source\css\_custom\custom.styl添加以下代码：

1
.headband {display:none;}

修改主题页面布局为圆角

方法一

在/themes/next/source/css/_variables/custom.styl文件种添加如下代码（以Gemini风格为例）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 修改主题页面布局为圆角
// 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;

方法二

在\themes\next\source\css\_variables\Gemini.styl文件中直接添加：

1
2
3
// 修改主题页面布局为圆角
$border-radius-inner            = 15px 15px 15px 15px;
$border-radius                  = 15px;

效果如下图：
img

自适应背景图片

  1. 在站点配置文件夹/themes/next/source/images/放入你的背景图片;

  2. 然后修改主题文件夹themes/source/css/_custom/custom.styl，在custom.styl开头加入如下的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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;

    /*这是设置底部文字, 看个人需要修改*/
     #footer > div > div {
        color: #eee;
    }
}

防止每次heox clean 后CNAME文件被删除

  1. 先把github中的CNAME文件复制一份到本地public

  2. 再安装插件

1
cnpm install hexo-generator-cname --save
  1. 根目录_config.yml中添加
1
2
Plugins:
- hexo-generator-cname

并修改

1
url: yoursite.com

去除valine的Powered By

修改\themes\next\layout\_third-party\comments\valine.swig文件

1
2
3
4
5
6
7
8
9
10
11
12
new Valine({
...
pageSize:'{{ theme.valine.pageSize }}' || 10,
});

//新增以下代码即可，可以移除.info下所有子节点。
var infoEle = document.querySelector('#comments .info');
if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0){
  infoEle.childNodes.forEach(function(item) {
    item.parentNode.removeChild(item);
  });
}

增加词云

增加之前的效果如下图：
旧tag效果

方法比较简单，加个js脚本就好了，就加在标签的那个页面好了。

打开themes\next\layout\page.swig 找到

1
{% if page.type === "tags" %}

将下面这段代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>

换成下面这段代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<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>

效果如下图：

tag词云效果

代码块Mac Panel特效

先上效果图：
代码块MacPanel特效

能设置阴影效果和实现文本编辑功能，不过文本只存在浏览器页面上，不会真正保存。

实现步骤

引入JS

这里需要新建两个js文件events.js和codeblock.js，路径位于/themes/next/scripts/包下。

events.js代码：

1
2
3
4
5
6
7
// mac Panel效果代码块相关
var exec = require('child_process').exec;

// new 后自动打开编辑器
hexo.on('new', function(data){
  exec('open -a MacDown ' + data.path);
});

codeblock.js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// mac Panel效果代码块相关
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
})

引入CSS

在/themes/next/source/css/_common/components/highlight/目录下新建macPanel.styl文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

// mac Panel效果代码块相关
.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是根据我本地的样式做过调整，注释的代码为原有的，根据需要调整样式即可。

配置引用

在/themes/next/source/css/_common/components/highlight/highlight.styl文件中引入刚才新建的macPanel.styl：

1
@require "macPanel"

配置在文件的顶部位置即可。

到此Mac Panel已配置完成，根据需要可调整主题配置文件中的highlight_theme选项，选择自己喜欢的样式。

可能遇到的问题

如果在配置完毕后，hexo启动报错，可将站点配置文件里的highlight属性auto_detect改成false：

1
2
3
4
5
6
highlight:
   enable: true
   line_number: true
-  auto_detect: true
+  auto_detect: false
   tab_replace:

如果还是有问题，可仔细检查一下刚才新建的文件、修改的配置文件，有什么地方配置错了，或者是语法上的错误,修改后重新启动即可看到效果。

为文章生成永久链接

hexo默认的文章链接形式为year/:month/:day/:title，是按照年、月、日、标题来生成的。当把文章源文件名改掉之后，链接也会改变，这很不友好。并且如果文章标题是中文的，那么该路径就会出现中文字符。在路径中出现了中文字符很容易引发各种问题，而且也不利于seo，因为路径包含了年月日三个层级，层级太深不利于百度蜘蛛抓取。

解决办法就是利用其它的插件来生成唯一的路径，这样就算文件标题随意修改，而不会导致原本的链接失效而造成站点下存在大量的死链。

安装插件

1
cnpm install hexo-abbrlink --save

注意：执行此命令可能会不成功，提示你缺少相应的依赖，比如babel-eslint、mini-css-extract-plugin、webpack-cli…使用npm命令安装即可。比如：

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

配置

修改根目录站点配置文件config.yml，改为：

1
2
3
4
permalink: posts/:abbrlink.html  # 此处可以自己设置，也可以直接使用 /:abbrlink
abbrlink:
	alg: crc32   #算法： crc16(default) and crc32
	rep: hex     #进制： dec(default) and hex

这里将页面都添加了 .html 的后缀，用来伪装成静态页面(虽说Hexo的页面本身就是静态页面)，这样可以直接从路径就知道这是个静态页面，方便seo。

生成的链接将会是这样的(官方样例)：

1
2
3
4
5
6
7
8
9
10
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 内会增加abbrlink 字段，值为生成的ID 。这个字段确保了在我们修改了Front-matter 内的博客标题title或创建日期date字段之后而不会改变链接地址。

本文标题:Hexo搭建GitHub博客(持续更新)

文章作者:王洪博

发布时间:2019年04月03日 - 11:04

最后更新:2019年09月12日 - 10:09

原始链接:http://whb1990.github.io/posts/d5766023.html

▄︻┻═┳一如果你喜欢这篇文章，请点击下方"打赏"按钮请我喝杯 ☕
0%