手把手教你搭建漂亮好看的个人网站：手把手教你搭建漂亮好看的个人网站
手把手教你搭建漂亮好看的个人网站：手把手教你搭建漂亮好看的个人网站打开Git Bash here，输入：所有必备的应用程序安装完成后，即可使用 npm或者cnpm 安装 Hexo。Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(https://daringfireball.net/projects/markdown/) （或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。大家进入 Hexo官网(https://hexo.io/zh-cn/docs/) 进行查看。2.2、安装Hexo安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：
一、前言
由于平时自己喜欢看一些技术类文章整理成Word笔记，总感觉这种方式太low，想自己搭建属于自己的博客，在网上查阅了一下，发现Hexo在GitHub或者是码云上搭建博客非常给力。然后自己也搭建了博客，这篇文章就记录了搭建的过程及一些优化。
二、入门Hexo
2.1、什么是Hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(https://daringfireball.net/projects/markdown/) （或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。大家进入 Hexo官网(https://hexo.io/zh-cn/docs/) 进行查看。
2.2、安装Hexo
安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：
- Node.js：https://nodejs.org/en/
- Git：https://git-scm.com/
- cnpm ：如果npm运行出错就安装cnpm国内镜像
所有必备的应用程序安装完成后，即可使用 npm或者cnpm 安装 Hexo。
打开Git Bash here，输入：
$ npm install -g hexo-cli
或者
$ cnpm install -g hexo-cli
检查是否安装Hexo完成 查询是否成功，显示hexo-cli 版本就说明成功了
$ hexo -V
2.3、建站
安装一切所需的程序后，就可以开始建站了，就是创建我们的博客 大家也可以进入 建站官网(https://hexo.io/zh-cn/docs/setup) 查看。
新建一个文件夹，来管理我们的博客项目，执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。
2.3.1、运行命令
$ hexo init <folder>
$ cd <folder>
$ cnpm install
注：<folder>是表示建站的博客项目名。
打开Git Bash here，输入：
$ hexo init githubBlog
进入创建的博客项目下进行安装
$ cd githubBlog
$ cnpm install
安装之后，整个博客项目目录如下：
2.3.2、访问URL
$ hexo server
或者
$ hexo s
访问URL：http://localhost:4000，效果如下图：
到这里已经通过Hexo初步创建博客了，下面再来了解一下如何将我们的博客托管到GitHub服务器上。
2.4、托管到GitHub
2.4.1、GitHub创建repositories
进入GitHub官网中浏览器输入 https://github.com/ 如果还没有账号就创建一个账号就好了。
登录自己的账号。直接new repositories 或者进入You repositories 再new repositories。
进入到创建 repositories 页面后 一定要注意，将新建的repository的名字为: Your account name.github.io。其他默认就好了。
2.4.2、配置
GitHub的Repository创建好后，再回到本地的Hexo的githubBlog项目中，找到在项目的根目录下_config.yml找到 deploy标签
在该文件下面添加如下内容：
deploy: #部署
type: git
repository: https://github.com/whb1990/whb1990.github.io.git
branch: master
注：repository: https://github.com/whb1990/whb1990.github.io 是自己刚刚创建Your account name.github.io 的repository，在Clone with HTTPS里面，复制粘贴就好了，冒号后面记得空格。branch 后面是master就好了。
在 _config.yml 找到 url 进行修改为：
url: http://whb1990.github.io #博客网址
2.4.3、部署
到这里就差不多了，接下来需要执行一些命令，将博客部署到GitHub上去。
打开Git Bash Here进入githubBlog 根目录下，首先需要安装一下 hexo-deployer-git(https://github.com/hexojs/hexo-deployer-git) 不然可能出现错误无法部署成功。
$ cnpm install hexo-deployer-git --save
然后再执行以下命令:
$ hexo clean
$ hexo generate
$ hexo deploy
或者简写
$ hexo clean
$ hexo g
$ hexo d
部署成功如下显示:
2.4.4、测试
我们进行访问 https://whb1990.github.io/ 和 http://localhost:4000/ 一样的页面说明是已经成功。
三、站点文件配置
在根githubBlog目录下 _config.yml文件，我们暂且称为站点配置文件，以便与后面讲到的主题配置文件(Next主题下的 _config.yml 文件)进行区分。
3.1、网站
|
参数 |
描述 |
|
title |
网站标题 |
|
subtitle |
网站副标题 |
|
description |
网站描述 |
|
author |
您的名字 |
|
language |
网站使用的语言 |
|
timezone |
网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York Japan 和 UTC 。 |
3.2、目录
|
参数 |
描述 |
|
source_dir |
资源文件夹，这个文件夹用来存放内容。 |
|
public_dir |
公共文件夹，这个文件夹用于存放生成的站点文件。 |
|
tag_dir |
标签文件夹 |
|
archive_dir |
归档文件夹 |
|
category_dir |
分类文件夹 |
|
code_dir |
Include code 文件夹 |
|
i18n_dir |
国际化（i18n）文件夹 |
|
skip_render |
跳过指定文件的渲染，您可使用 glob 来配置路径 |
3.3、文章
|
参数 |
描述 |
默认值 |
|
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 |
代码块的设置 |
3.4、分类&标签
|
参数 |
描述 |
默认值 |
|
default_category |
默认分类 |
uncategorized |
|
category_map |
分类别名 | |
|
tag_map |
标签别名 |
3.5、分页
|
参数 |
描述 |
默认值 |
|
per_page |
每页显示的文章量 (0 = 关闭分页功能) |
10 |
|
pagination_dir |
分页目录 |
page |
四、写作
4.1、创建文章
$ hexo new [layout] <title>
如：创建hello-world
$ hexo new hello-world
如果不添加title，默认就是标题title: hello-world。
这里注意一下，如果创建带有中文的路径名称时，生成静态页面hexo g可能会报错。
warning: LF will be replaced by CRLF in xxxx
The file will have its original line endings in your working directory.
这是由于 路径中存在 / 的符号转义问题 ，如：创建文章时命名为中文，一般都出现这个小问题。
解决方法，在命令行中输入:
$ git config --global core.autocrlf false
然后重新生成文件部署就好了。
4.2、编辑文章
创建的文章在source/_posts目录下，打开文件进行编辑，完全支持Markdown语法。
五、Next主题
在 Hexo主题官网(https://hexo.io/themes/) 中有许多主题，大家喜欢什么就进行部署和编辑就好了，大致的思路都是差不多的。
我选择的 Next主题(https://github.com/theme-next/hexo-theme-next) ，网上很多也是用的这个主题。
5.1、安装
在githubBlog根目录下，执行以下命令：
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
上面的命令是clone最新版本的主题，也可以使用下面的命令clone指定版本的主题
$ git clone --branch v7.1.1 https://github.com/theme-next/hexo-theme-next themes/next
安装完成之后，在themes下就会有next目录
5.2、切换主题
在项目根目录下打开 _config.yml 文件将 theme 设置为 next 即可：
部署之后查看效果如下，有点丑：
5.3、主题配置
一般配置都在 theme/next/-config.yml文件下配置。
5.3.1、修改整体布局
在 theme/next/-config.yml 找到 menu 看看自己博客所需的分类
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则标签都会显示数字
menu_settings:
icons: true
badges: false
注：这里需要创建about页面，很简单，同创建标签tags、归档archives页面一样的方式，所需要创建的名称要与menu相对应，举例说明如下。
$ hexo new page about #看看menu上还有什么标签没创建就行创建
$ hexo new page tags #创建标签等
创建完成之后在自己项目查找，如我的是githubBlog/source/目录下查看新创建好的相关标签页面，里面包含各自的index.md文件，大家可以自行编辑了。
5.3.2、Schemes方案设置
# Schemes
#scheme: Muse #这是 Nex默认版本，黑白主调，大量留白
#scheme: Mist #Muse 的紧凑版本，整洁有序的单栏外观
#scheme: Pisces #双栏 Scheme，小家碧玉似的清新
scheme: Gemini #双子座，也是双栏形式，和Pisces类似
自己喜欢什么风格自行选择。
5.3.3、social设置
使用方式: Key: permalink || icon Key表示标签显示，permalink表示URI连接，icon表示图标，自己添加所要显示的
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该效果不显示。
5.3.4、avatar头像设置
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
5.3.5、toc边栏中的目录设置
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 #最大深度
5.3.6、Creative Commons 4.0国际许可设置
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons: by-nc-sa
5.3.7、sidebar侧边栏配置这里选择默认吧
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中自动保存每个帖子/页面上的滚动位置。
5.3.9、excerpt_description
# Automatically excerpt description in homepage as preamble text.
excerpt_description: false #是否自动摘录主页中的描述作为前导文本。
5.3.10、auto_excerpt配置
auto_excerpt:
enable: true #是否自动摘录。不推荐
length: 150 #这里是说文章开头第一个字到第150个字就显示"阅读全文"
5.3.11、codeblock代码块配置
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal #代码突出显示主题
# Manual define the border radius in codeblock leave it blank for the default value: 1
border_radius: 1
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result.
show_result: true
# Available values: default | flat | mac
style: flat
5.3.12、wechat_subscriber微信配置
wechat_subscriber:
enabled: true #是否启动微信订阅
qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg
description: ex. subscribe to my blog by scanning my public wechat account
5.3.13、footer 底部设置
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版本
5.3.14、favicon标签页图标
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固定标签
5.3.15、Math Equations Render Support 数学方程式渲染支持
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 #默认
5.3.16、Han Support 支持汉字
设置汉字支持，按照以下步骤：
1. 打开Git Bash Here，进入theme/next目录下
$ cd themes/next
2. 获取该汉字支持Git module，执行命令以下命令获得
$ git clone https://github.com/theme-next/theme-next-han source/lib/Han
3. 设置汉字支持
han: true
4. 更新update
$ cd themes/next/source/lib/Han
$ git pull
5.3.17、font字体设置
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(https://github.blog/2008-12-19-github-ribbons/) 链接，里面有许多样式，选择自己喜欢的样式，将其复制下来。
2. 打开自己博客项目中的themes/next/layout/_layout.swig文件，搜索<div class="headband"></div> 将复制的内容粘贴到<div class="headband"></div>下面，如下：
配置右上角的Fork_me_on_GitHub:
七、修改文章底部标签
在博客项目中找到/themes/next/layout/_macro/post.swig，搜索 rel="tag"，将 #号 换成<i class="fa fa-tag"></i>
原先#号的样式
修改为图标的样式
八、设置背景动画样式
NexT里面有几种动画背景样式canvas_nest、three_waves、canvas_lines、canvas_sphere等
8.1、canvas_nest如下图所示:
按照以下步骤完成：
1. 打开Git Bash Here进入自己文件夹下/themes/next文件夹下
$ cd /themes/next
2. 下载安装 canvas_nest module`执行
$ git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
在 /themes/next/source/lib查看会看到canvas_nest文件夹
3. 在/themes/next/_config.yml设置
canvas_nest: true
8.2、 three_waves如图所示
three_waves(https://github.com/theme-next/theme-next-three) 设置步骤，和 canvas_nest(https://github.com/theme-next/theme-next-canvas-nest) 步骤是一样的。
下载完成后，在/themes/next/_config.yml设置
three_waves: true
#OR
canvas_lines: true
#OR
canvas_sphere: true
8.3、canvas_ribbon
canvas_ribbon只适合 scheme、Pisces这里不测试了，大家可以进入 canvas_ribbon(https://github.com/theme-next/theme-next-canvas-ribbon) 安装。
九、在网站底部添加访问量
1. 进入 \themes\next\layout\_partials\footer.swig 文件顶部第一行添加
<scriptasyncsrc="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
2. 搜索
{% if theme.footer.powered.enable %}
在这个位置上添加以下代码:
<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>
注：这里的id值可以选择两种
busuanzi_value_site_uv #表示用户连续点击n篇文章，只记录1次访客数
busuanzi_value_site_pv#表示用户连续点击n篇文章，记录 n次访问量
十、给每篇文章添加类别和标签
在创建的文章都在source/_post目录下找到，每篇文章添加tags、categories。
十一、添加进度条
添加进度条的话在手机浏览的时候一般情况都有自带的进度条了，例如微信浏览、浏览器浏览等等，这样就出现重复的进度条了，这里看个人是否添加。但是在电脑浏览器浏览却是不错的。
按照以下步骤进行或者进入这里 Progress配置(https://github.com/theme-next/theme-next-pace) 查看如何配置
1. 打开Git Bash Here进入自己文件夹下/themes/next文件夹下
$ cd /themes/next
2. 下载安装 Progress module 执行
$ git clone https://github.com/theme-next/theme-next-pace source/lib/pace
在 /themes/next/source/lib查看会看到pace文件夹
3. 在/themes/next/_config.yml设置
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 #任选一种
十二、添加站内搜索
由于可能需要快速查找相关文章，那么就需要添加站内搜索。
按以下步骤进行或者进入 NexT配置站内搜索(https://github.com/theme-next/hexo-generator-searchdb) 文档查看如何配置
1. 安装站内搜索插件
$ npm install hexo-generator-searchdb --save
或者
$ cnpm install hexo-generator-searchdb --save
2. 在根目录下的 _config.yml添加
#表示站内搜索
search:
path: search.xml
field: post
format: html
limit: 10000
3. 在themes/next/_config.yml文件中搜索local_search，进行设置
local_search:
enable: true #设置为true
trigger: auto # auto / manual，auto 自动搜索、manual：按回车[enter ]键手动搜索
top_n_per_article: 1
unescape: true
十三、添加打赏
NexT主要提供三种打赏方式分别是微信、支付宝、比特币
在themes/next搜索Reward：
reward_settings:
# If true reward would be displayed in every article by default.
# You can show or hide reward in a specific article throuth `reward: true | false` in Front-matter.
enable: true #启用打赏
animation: true #启用动画效果
comment: 捐赠作者请点击下方的“打赏”按钮 #内容
十四、友情链接
# 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```
十五、添加阅读统计
给每篇文章进行添加阅读统计，效果如下图:
1. 进入 leancloud(https://leancloud.cn/)
2. 创建应用
3. 进入设置页面获取应用Key
将App ID、App Key 配置到next/_config.yml中leancloud_visitors
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#更好的性能
4. 在leancloud存储的位置创建Class，必须命名为Counter
5. 查看后台统计数据
十六、添加评论
我的博客选择的是Valine。
在next/_config.yml搜索Valine，进入 Valine(https://leancloud.cn/) 官网，也是 leancloud(https://leancloud.cn/) 官网，进入leancloud 控制台 没有账号密码就进行设置。
1. 创建应用
参考上面 添加阅读统计 的创建应用。
2. 进入设置页面获取应用key
参考上面 添加阅读统计 的进入设置页面获取应用key。
3. 在next/_config.yml进行配置。
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
4. 显示结果
这样就完成了valine评论的配置了，接下来就可以进行评论了，我们还可以在后台查看评论信息。
5. 在后台查看评论数据
在valine后台，存储位置中的数据里面创建Class，名称必须为命名为Comment。
参考上面 添加阅读统计 的创建Class。
注：选择valine评论系统是因为支持国内网络，不需要连接外网（翻墙）就可以进行显示评论系统，而且很好管理，页面简单。
十七、添加RSS
效果如下图：
实现步骤如下：
1. 切换到你的blog根目录下，然后安装 Hexo 插件：(这个插件会放在node_modules这个文件夹里)
$ cnpm install --save hexo-generator-feed
2. 然后在根目录的站点配置文件 _config.yml下进行配置
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed # RSS订阅
3. 然后打开next主题文件夹里面的_config.yml，在里面配置为如下：
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml
十八、点击出现桃心效果
效果如下图：
实现步骤如下：
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）添加以下代码：
<!-- 页面点击小红心 -->
<script type="text/Javascript" src="/js/src/love.js"></script>
十九、修改文章内链接文本样式
效果如下图：
实现步骤如下：
修改文件 themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css样式：
// 文章内链接文本样式
.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 是为了不影响首页“阅读全文”的显示样式，颜色可以自己定义。
二十、在每篇文章末尾统一添加“本文结束”标记
效果如下图：
实现步骤如下：
在路径 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件，并添加以下内容：
<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）：
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
然后打开主题配置文件_config.yml，在末尾添加：
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
二十一、修改``代码块自定义样式
效果如下：
实现步骤如下：
打开\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;
}
二十二、主页文章添加阴影效果
效果如下图：
实现步骤如下：
打开\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);
}
二十三、添加热度
效果如下图：
实现步骤如下：
next主题集成leanCloud，打开/themes/next/layout/_macro/post.swig ，在画红线的区域添加 ℃：
然后打开，/themes/next/languages/zh-Hans.yml，将画红框的改为热度就可以了:
二十四、网站底部字数统计
效果如下图：
实现步骤如下：
切换到根目录下，然后运行如下代码
$ cnpm install hexo-wordcount --save
然后在/themes/next/layout/_partials/footer.swig文件尾部加上：
<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 参数的值设置为
skip_render: README.md
保存退出即可。再次使用 hexo d 命令部署博客的时候就不会在渲染 README.md 这个文件了。
二十六、实现统计功能
效果如下图：
实现步骤如下：
在根目录下安装 hexo-wordcount，运行：
$ cnpm install hexo-wordcount --save
然后在主题的配置文件中，配置如下：
# 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
二十七、添加顶部加载条
效果如下图：
实现步骤如下：
打开/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">
但是，默认的是粉色的，要改变颜色可以在/themes/next/layout/_partials/head.swig文件中添加如下代码（接在刚才link的后面）
<style>
.pace .pace-progress {
background: #1E92FB; /*进度条颜色*/
height: 3px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #1E92FB 0 0 5px #1E92FB; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #1E92FB; /*上边框颜色*/
border-left-color: #1E92FB; /*左边框颜色*/
}
</style>
二十八、在文章底部增加版权信息
效果如下图：
实现步骤如下：
在目录 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>本文标题:</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：
.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"
保存重新生成即可。如果要在该博文下面增加版权信息的显示，需要在 Markdown 中增加copyright: true的设置，类似：
---
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文件中添加：
copyright: true
这样每次hexo new "你的内容"之后，生成的md文件会自动把copyright:true加到里面去。
二十九、隐藏网页底部powered By Hexo / 强力驱动
打开themes/next/layout/_partials/footer.swig，隐藏或删除如下代码，如下图：
三十、修改打赏字体不闪动
修改文件next/source/css/_common/components/post/post-reward.styl，然后注释其中的函数wechat:hover和alipay:hover，如下：
/* 注释文字闪动函数
#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;
}
*/
三十一、文章加密访问
效果如下图：
实现步骤如下：
打开themes/next/layout/_partials/head/head.swig文件 在以下位置插入这样一段代码：
<script>
(function(){
if('{{ page.password }}'){
if (prompt('请输入文章密码') !== '{{ page.password }}'){
alert('密码错误！');
history.back();
}
}
})();
</script>
然后在文章上写成类似这样：
三十二、添加鼠标点击显示字体效果
效果如下图：
实现步骤如下：
在 /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
("富强" "民主" "文明" "和谐" "自由" "平等" "公正" "法治" "爱国" "敬业" "诚信" "友善");
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文件末尾添加以下代码：
<!--单击显示文字-->
<script type="text/javascript" src="/js/click_show_text.js"></script>
三十三、添加鼠标点击烟花爆炸效果
效果如下图：
实现步骤如下：
在 \themes\next\source\js 目录下新建一个 fireworks.js 的文件，里面写入以下代码：
"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0 360)*Math.PI/180 a=anime.random(50 180) n=[-1 1][anime.random(0 1)]*a;return{x:e.x n*Math.cos(t) y:e.y n*Math.sin(t)}}function createParticule(e t){var a={};return a.x=e a.y=t a.color=colors[anime.random(0 colors.length-1)] a.radius=anime.random(16 32) a.endPos=setParticuleDirection(a) a.draw=function(){ctx.beginPath() ctx.arc(a.x a.y a.radius 0 2*Math.PI !0) ctx.fillStyle=a.color ctx.fill()} a}function createCircle(e t){var a={};return a.x=e a.y=t a.color="#F00" a.radius=0.1 a.alpha=0.5 a.lineWidth=6 a.draw=function(){ctx.globalAlpha=a.alpha ctx.beginPath() ctx.arc(a.x a.y a.radius 0 2*Math.PI !0) ctx.lineWidth=a.lineWidth ctx.strokeStyle=a.color ctx.stroke() ctx.globalAlpha=1} a}function renderParticule(e){for(var t=0;t<e.animatables.length;t ){e.animatables[t].target.draw()}}function animateParticules(e t){for(var a=createCircle(e t) n=[] i=0;i<numberOfParticules;i ){n.push(createParticule(e t))}anime.timeline().add({targets:n x:function(e){return e.endPos.x} y:function(e){return e.endPos.y} radius:0.1 duration:anime.random(1200 1800) easing:"easeOutExpo" update:renderParticule}).add({targets:a radius:anime.random(80 160) lineWidth:0 alpha:{value:0 easing:"linear" duration:anime.random(600 800)} duration:anime.random(1200 1800) easing:"easeOutExpo" update:renderParticule offset:0})}function debounce(e t){var a;return function(){var n=this i=arguments;clearTimeout(a) a=setTimeout(function(){e.apply(n i)} t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d") numberOfParticules=30 pointerX=0 pointerY=0 tap="mousedown" colors=["#FF1461" "#18FF92" "#5A87FF" "#FBF38C"] setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth canvasEl.height=2*window.innerHeight canvasEl.style.width=window.innerWidth "px" canvasEl.style.height=window.innerHeight "px" canvasEl.getContext("2d").scale(2 2)} 500) render=anime({duration:1/0 update:function(){ctx.clearRect(0 0 canvasEl.width canvasEl.height)}});document.addEventListener(tap function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play() updateCoords(e) animateParticules(pointerX pointerY))} !1) setCanvasSize() window.addEventListener("resize" setCanvasSize !1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0 360)*Math.PI/180 a=anime.random(50 180) n=[-1 1][anime.random(0 1)]*a;return{x:e.x n*Math.cos(t) y:e.y n*Math.sin(t)}}function createParticule(e t){var a={};return a.x=e a.y=t a.color=colors[anime.random(0 colors.length-1)] a.radius=anime.random(16 32) a.endPos=setParticuleDirection(a) a.draw=function(){ctx.beginPath() ctx.arc(a.x a.y a.radius 0 2*Math.PI !0) ctx.fillStyle=a.color ctx.fill()} a}function createCircle(e t){var a={};return a.x=e a.y=t a.color="#F00" a.radius=0.1 a.alpha=0.5 a.lineWidth=6 a.draw=function(){ctx.globalAlpha=a.alpha ctx.beginPath() ctx.arc(a.x a.y a.radius 0 2*Math.PI !0) ctx.lineWidth=a.lineWidth ctx.strokeStyle=a.color ctx.stroke() ctx.globalAlpha=1} a}function renderParticule(e){for(var t=0;t<e.animatables.length;t ){e.animatables[t].target.draw()}}function animateParticules(e t){for(var a=createCircle(e t) n=[] i=0;i<numberOfParticules;i ){n.push(createParticule(e t))}anime.timeline().add({targets:n x:function(e){return e.endPos.x} y:function(e){return e.endPos.y} radius:0.1 duration:anime.random(1200 1800) easing:"easeOutExpo" update:renderParticule}).add({targets:a radius:anime.random(80 160) lineWidth:0 alpha:{value:0 easing:"linear" duration:anime.random(600 800)} duration:anime.random(1200 1800) easing:"easeOutExpo" update:renderParticule offset:0})}function debounce(e t){var a;return function(){var n=this i=arguments;clearTimeout(a) a=setTimeout(function(){e.apply(n i)} t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d") numberOfParticules=30 pointerX=0 pointerY=0 tap="mousedown" colors=["#FF1461" "#18FF92" "#5A87FF" "#FBF38C"] setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth canvasEl.height=2*window.innerHeight canvasEl.style.width=window.innerWidth "px" canvasEl.style.height=window.innerHeight "px" canvasEl.getContext("2d").scale(2 2)} 500) render=anime({duration:1/0 update:function(){ctx.clearRect(0 0 canvasEl.width canvasEl.height)}});document.addEventListener(tap function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play() updateCoords(e) animateParticules(pointerX pointerY))} !1) setCanvasSize() window.addEventListener("resize" setCanvasSize !1)};
然后在 \themes\next\layout\layout.swing 文件中写入以下代码：
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="/js/fireworks.js"></script>
三十四、自定义鼠标指针样式
在 \themes\next\source\css\_custom\custom.styl 文件 body 样式里写入如下代码：
/*自定义鼠标样式*/
body {
cursor: url("/images/mouse.cur") auto;
background-color: @theme_background;
}
鼠标指针可以用 Axialis CursorWorkshop 这个软件自己制作，不同主题具体放的文件有所不同，确保在博客主体 body 的 CSS 文件中即可，其中的鼠标指针链接可替换成自己的，首先尝试加载mouse.cur ，如果该文件不存在或由于其他原因无效，那么 auto 会被使用，也就是自动默认效果，图片格式为.ico、.ani、.cur，建议使用.cur，如果使用.ani或者其他格式无效，原因是浏览器兼容问题。
三十五、添加彩色滚动变换字体
在你想要添加彩色滚动变换字体的地方写入以下代码即可，其中文字可自行更改：
<div id="binft"></div>
<script>
var binft = function (r) {
function t() {
return b[Math.floor(Math.random() * b.length)]
}
function e() {
return String.fromCharCode(94 * Math.random() 33)
}
function n(r) {
for (var n = document.createDocumentFragment() i = 0; r > i; i ) {
var l = document.createElement("span");
l.textContent = e() l.style.color = t() n.appendChild(l)
}
return n
}
function i() {
var t = o[c.skillI];
c.step ? c.step-- : (c.step = g c.prefixP < l.length ? (c.prefixP >= 0 && (c.text = l[c.prefixP]) c.prefixP ) : "forward" === c.direction ? c.skillP < t.length ? (c.text = t[c.skillP] c.skillP ) : c.delay ? c.delay-- : (c.direction = "backward" c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0 -1) c.skillP--) : (c.skillI = (c.skillI 1) % o.length c.direction = "forward")) r.textContent = c.text r.appendChild(n(c.prefixP < l.length ? Math.min(s s c.prefixP) : Math.min(s t.length - c.skillP))) setTimeout(i d)
}
var l = ""
o = ["青青陵上柏，磊磊涧中石。" "人生天地间，忽如远行客。" "斗酒相娱乐，聊厚不为薄。" "驱车策驽马，游戏宛与洛。" "洛中何郁郁，冠带自相索。" "长衢罗夹巷，王侯多第宅。" "两宫遥相望，双阙百余尺。" "极宴娱心意，戚戚何所迫？"].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：
三十六、浏览器网页标题恶搞
效果如下图：
实现步骤如下：
在目录 \themes\next\source\js 下新建一个 FunnyTitle.js 文件，在里面填写如下代码：
<!--浏览器搞笑标题-->
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 文件中写入以下代码：
<!--浏览器搞笑标题-->
<script type="text/javascript" src="\js\FunnyTitle.js"></script>
再次部署博客后就可以看见标题搞笑的效果了。
三十七、添加网站雪花飘落效果
效果如下图：
实现步骤如下：
在\themes\next\source\js目录下新建一个 snow.js文件，粘贴以下代码：
/*样式一*/
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="snowbox" />').css({'position': 'absolute' 'z-index':'9999' 'top': '-50px'}).html('❄')
documentHeight = $(document).height()
documentWidth = $(document).width()
defaults = {
minSize : 10
maxSize : 20
newOn : 1000
flakeColor : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
}
options = $.extend({} defaults options);
var interval= setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100
startOpacity = 0.5 Math.random()
sizeFlake = options.minSize Math.random() * options.maxSize
endPositionTop = documentHeight - 200
endPositionLeft = startPositionLeft - 500 Math.random() * 500
durationFall = documentHeight * 10 Math.random() * 5000;
$flake.clone().appendTo('body').css({
left: startPositionLeft
opacity: startOpacity
'font-size': sizeFlake
color: options.flakeColor
}).animate({
top: endPositionTop
left: endPositionLeft
opacity: 0.2
} durationFall 'linear' function(){
$(this).remove()
});
} options.newOn);
};
})(jQuery);
$(function(){
$.fn.snow({
minSize: 5 /* 定义雪花最小尺寸 */
maxSize: 50 /* 定义雪花最大尺寸 */
newOn: 300 /* 定义密集程度，数字越小越密集 */
});
});
/*样式二*/
/* 控制下雪 */
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 文件中写入以下代码：
<!-- 雪花特效 -->
<script type="text/javascript" src="\js\snow.js"></script>
如果没效果，请确认网页是否已载入JQurey，如果没有请在下雪代码之前引入JQ即可：
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
三十八、添加背景动态彩带效果
效果如下图：
实现步骤如下：
在 \themes\next\layout\layout.swing 文件中写入以下代码：
<!-- 样式一（鼠标点击更换样式） -->
<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>
三十九、添加背景代码雨特效
效果如下图：
实现步骤如下：
在 \themes\next\source\js 目录下新建一个 DigitalRain.js文件，粘贴以下代码：
window.onload = function(){
//获取画布对象
var canvas = document.getElementById("canvas");
//获取画布的上下文
var context =canvas.getContext("2d");
var s = window.screen;
var W = canvas.width = s.width;
var H = canvas.height;
//获取浏览器屏幕的宽度和高度
//var W = window.innerWidth;
//var H = window.innerHeight;
//设置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 中写入样式：
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>
四十、代码块复制功能
效果如下图：
实现步骤如下：
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 目录下，创建clipboard-use.js，文件内容如下：
/*页面载入完成后，创建复制按钮*/
!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样式文件中添加下面代码：
//代码块复制按钮
.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 结束标签（</body>）之前添加）：
<!-- 代码块复制功能 -->
<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目录
$ cd next/source/lib
2. 下载插件
$ git clone https://github.com/theme-next/theme-next-fancybox3 fancybox
3. 更改主题配置文件
fancybox: true
四十二、3D动态标签云
1. 安装标签云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 %}
根据自己的需要放在合适的位置。重新hexo s一下，就可以出现刚刚那个3d标签云了!
四十三、添加卡通人物
效果如下图：
实现步骤如下：
1. 下载 live2d(https://github.com/EYHN/hexo-helper-live2d)
$ cnpm install --save hexo-helper-live2d
2. 下载模型
$ cnpm install live2d-widget-model-z16
更多模型选择请 访问https://github.com/EYHN/hexo-helper-live2d。
3. 修改站点配置文件
#添加萌宠，以下任选一个
#live2d-widget-model-chitose
#live2d-widget-model-epsilon2_1
#live2d-widget-model-gf
#live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
#live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
#live2d-widget-model-haruto
#live2d-widget-model-hibiki
#live2d-widget-model-hijiki
#live2d-widget-model-izumi
#live2d-widget-model-koharu
#live2d-widget-model-miku
#live2d-widget-model-ni-j
#live2d-widget-model-nico
#live2d-widget-model-nietzsche
#live2d-widget-model-nipsilon
#live2d-widget-model-nito
#live2d-widget-model-shizuku
#live2d-widget-model-tororo
#live2d-widget-model-tsumiki
#live2d-widget-model-unitychan
#live2d-widget-model-wanko
#live2d-widget-model-z16
live2d:
enable: true
scriptFrom: local
model:
use: live2d-widget-model-z16
display:
position: right #模型位置
width: 140 #模型宽度
height: 260 #模型高度
mobile:
show: false #是否在手机端显示
四十四、卡通人物升级版
效果如下图：
能说话、能换装、能玩游戏、能拍照、还能自定义。
实现步骤如下：
1. 下载 张书樵(https://github.com/stevenjoezhang/live2d-widget) 大神的项目，解压到本地博客目录的themes/next/source下，修改autoload.js文件，将如下代码：
const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";
改为
const live2d_path = "/live2d-widget/";
2. 在/themes/next/layout/_layout.swing中 新增如下内容：
<script src="/live2d-widget/autoload.js"></script>
3. 在主题配置文件 中 新增如下内容：
live2d:
enable: true
想修改看板娘大小、位置、格式、文本内容等，可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css。
四十五、扩展看板娘模型
由于官方的看板娘模型比较少，可手动添加模型。
把 github模型(https://github.com/summerscar/live2dDemo) 下载到本地，解压后将assets目录拷贝到博客根目录中的live2d_models（自己新建，文件名不可改）里，再修改_config.yml 里的 live2d中model.use即可（改为live2d_models中的模型名字就行）。
四十六、去掉顶部黑线
打开themes\next\source\css\_custom\custom.styl添加以下代码：
.headband {display:none;}
四十七、 修改主题页面布局为圆角
47.1、 方法一
在/themes/next/source/css/_variables/custom.styl文件种添加如下代码（以Gemini风格为例）：
// 修改主题页面布局为圆角
// 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;
效果如下图：
四十八、 自适应背景图片
1. 在站点配置文件夹/themes/next/source/images/放入你的背景图片;
2. 然后修改主题文件夹themes/source/css/_custom/custom.styl，在custom.styl开头加入如下的代码:
body {
background: url(/images/background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
/*这是设置底部文字 看个人需要修改*/
#footer > div > div {
color: #eee;
}
}
四十九、 防止每次heox clean 后CNAME文件被删除
1. 先把github中的CNAME文件复制一份到本地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下所有子节点。
var infoEle = document.querySelector('#comments .info');
if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0){
infoEle.childNodes.forEach(function(item) {
item.parentNode.removeChild(item);
});
}
五十一、增加词云
增加之前的效果如下图：
方法比较简单，加个js脚本就好了，就加在标签的那个页面好了。
打开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特效
先上效果图：
能设置阴影效果和实现文本编辑功能，不过文本只存在浏览器页面上，不会真正保存。
实现步骤如下：
1.引入JS
这里需要新建两个js文件events.js和codeblock.js，路径位于/themes/next/scripts/包下。
events.js代码如下：
// mac Panel效果代码块相关
var exec = require('child_process').exec;
// new 后自动打开编辑器
hexo.on('new' function(data){
exec('open -a MacDown ' data.path);
});
codeblock.js代码如下：
// 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
})
2.引入CSS
在/themes/next/source/css/_common/components/highlight/目录下新建macPanel.styl文件，内容如下：
// 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是根据我本地的样式做过调整，注释的代码为原有的，根据需要调整样式即可。
3.配置引用
在themes/next/source/css/_common/components/highlight/highlight.styl文件中引入刚才新建的macPanel.styl：
@require "macPanel"
配置在文件的顶部位置即可。
到此Mac Panel已配置完成，根据需要可调整主题配置文件中的highlight_theme选项，选择自己喜欢的样式。
4.可能遇到的问题
如果在配置完毕后，hexo启动报错，可将站点配置文件里的highlight属性auto_detect改成false：
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命令安装即可。比如：
npm install eslint@4.x babel-eslint@8 --save-dev
2.配置
修改根目录站点配置文件config.yml，改为：
permalink: posts/:abbrlink.html # 此处可以自己设置，也可以直接使用 /:abbrlink
abbrlink:
alg: crc32 #算法：crc16(default) and crc32
rep: hex #进制：dec(default) and hex
这里将页面都添加了 .html 的后缀，用来伪装成静态页面(虽说Hexo的页面本身就是静态页面)，这样可以直接从路径就知道这是个静态页面，方便seo。
生成的链接将会是这样的(官方样例)：
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字段之后而不会改变链接地址。
最后附上一张我个人网站的全览图：
