2020 Hexo NexT 最简单的深度美化

1 秒钟教程

看完 1 秒钟教程，后面初始化用来理解和查缺补漏

安装

在没有 root 权限的文件下，打开 Git Bash，Linux 或 mac 打开终端，运行以下代码

苹果电脑用

git clone --depth 1 https://gitee.com/weilining/quick-hexo-next.git blog && cd blog && npm config set registry http://registry.npm.taobao.org && sudo npm install hexo-cli@latest -g && npm i && npm ls --depth 0 && hexo cl && hexo s

其他

git clone --depth 1 https://gitee.com/weilining/quick-hexo-next.git blog && cd blog && npm config set registry http://registry.npm.taobao.org && npm install hexo-cli@latest -g && npm i && npm ls --depth 0 && hexo cl && hexo s

预览

http://localhost:4000

初始化

开始

先配置好以下环境

Git
Node.js

1 2	git --version node --version

Hexo

代理快速安装

npm config set registry http://registry.npm.taobao.org
npm install hexo-cli@latest -g # macOS用sudo npm install hexo-cli@latest -g
git clone --depth 1 https://gitee.com/weilining/hexo-starter.git blog
cd blog
git clone --depth 1 https://gitee.com/weilining/hexo-theme-landscape.git themes/landscape
npm i

本地预览

1	hexo cl && hexo s

http://localhost:4000

生成静态网页文件

1	hexo cl && hexo g # 静态网页文件在 blog/public 里

写作

hexo.io

1	hexo new "带空格的帖子标题" # 创建一篇新文章

进阶

先准备好以下

GitHub 账号
创建_config.next.yml(在_config.yml旁边)

代理快速安装

1
2
3

cd blog
npm config set registry http://registry.npm.taobao.org
npm install hexo-theme-next # https://github.com/next-theme/hexo-theme-next

配置

_config.yml的theme: landscape改成下面的

1	theme: next

网页个人信息

_config.yml

title: Ln's Blog # 标题
subtitle: '有朋自远方来，不亦乐乎' # 副标题
description: '算法、技术' # 描述
keywords: # 关键词
author: Lining Wei # 作者
language: zh-CN # 语言
timezone: 'Asia/ShangHai' # 时区

域名

_config.yml的url: http://example.com

1	url: https://weilining.github.io

缓存

_config.next.yml加入以下代码

1 2	cache: enable: true # 允许缓存内容生成。在NexT v6.0.0中引入。

生成 hexo 后，删除不必要的文件。

_config.next.yml加入以下代码

1	minify: true # 生成hexo后，删除不必要的文件。

换 Gemini 方案

_config.next.yml加入以下代码

可选四种方案

💟 Muse | 🔯 Mist | ♓️ Pisces | ♊️ Gemini

# Schemes
# scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini # 方案设定

暗模式

_config.next.yml加入以下代码

1	darkmode: true #暗模式

网站信息设置

_config.next.yml加入以下代码

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /manifest.json

自定义徽标

_config.next.yml加入以下代码

1	custom_logo: /uploads/custom-logo.jpg

版权声明

_config.next.yml加入以下代码

creative_commons:
  license: by-nc-sa
  sidebar: false #侧边拦显示
  post: true #文章底部是否显示

菜单栏

_config.next.yml加入以下代码

menu:
  home: / || fa fa-bell
  archives: /archives/ || fa fa-archive
  categories: /categories/ || fa fa-th
  tags: /tags/ || fa fa-tags
  sitemap: /sitemap.xml || fa fa-sitemap
  baidusitemap: /baidusitemap.xml || fa fa-cloud

菜单栏设置

_config.next.yml加入以下代码

1
2
3

menu_settings:
  icons: true
  badges: true # 文章数显示

侧边栏设置

_config.next.yml加入以下代码

sidebar:
  position: left #左边显示
  display: post #自动扩展帖子。 默认。
  padding: 18 # 边栏填充（以像素为单位）。
  offset: 12 #侧边栏与顶部菜单栏的偏移量（以像素为单位）（仅适用于Pisces|Gemini）。

侧边栏头像

_config.next.yml加入以下代码

avatar:
  url: /images/logo.svg
  rounded: true   #设置图片是否为圆形，当图片为正方形时为圆，否则为椭圆
  rotated: true #设置鼠标移到图片上后头像是否转动

边栏中的帖子/类别/标签

_config.next.yml加入以下代码

1	site_state: true

联系方式

_config.next.yml加入以下代码

social:
  GitHub: https://github.com/weilining/blog.io || fab fa-github
social_icons:
  enable: true
  icons_only: true
  transition: true

友链

_config.next.yml加入以下代码

links_settings:
  icon: fa fa-globe
  title: 友情链接
  layout: inline
links:
  Ln: https://weilining.github.io

文章目录

_config.next.yml加入以下代码

toc:
  enable: true
  number: true
  wrap: true # 如果为true，则如果标题宽度比侧栏宽度长，则所有单词将放在下一行。

页脚设置

_config.next.yml加入以下代码

footer:
  since: 2015 # 开始时间
  icon:
    name: fa fa-heart
    animated: true # 动画
    color: "#808080"
  copyright: Ln # 作者版权
  powered: false # 主题信息显示

自动摘录首页中的描述作为前导文字

_config.next.yml加入以下代码

1	excerpt_description: true # 自动摘录首页中的描述作为前导文字。

发布元显示设置

_config.next.yml加入以下代码

post_meta:
  item_text: true # “条目文字”显示
  created_at: true # 文章“发表于”显示
  updated_at:
    enable: ture # 文章“更新于”显示
    another_day: true
  categories: true #文章“分类于” 显示

使用图标代替符号＃在帖子底部指示标签

_config.next.yml加入以下代码

1	tag_icon: true # 使用图标代替符号＃在帖子底部指示标签

打赏

_config.next.yml加入以下代码

reward_settings:
  enable: true
  animation: true
  comment: Buy me a coffee #这里填你的提示语
reward:
  wechatpay: https://cdn.jsdelivr.net/gh/weilining/blog.io@master/images/apple-touch-icon-next.png
  alipay: https://cdn.jsdelivr.net/gh/weilining/blog.io@master/images/apple-touch-icon-next.png

在线轻松浏览和编辑博客源代码

_config.next.yml加入以下代码

1
2
3

post_edit:
  enable: true
  url: https://github.com/weilining/blogbackup.io/edit/main/source/ # 叉子链接和编辑

在帖子页脚中显示上一个帖子和下一个帖子（如果存在）

_config.next.yml加入以下代码

1	post_navigation: left

_config.next.yml加入以下代码

tagcloud:
  min: 12 # Minimun font size in px
  max: 30 # Maxium font size in px
  amount: 200 # Total amount of tags
  orderby: name # Order of tags
  order: 1 # Sort order

预连接 CDN 以获取字体和插件

_config.next.yml加入以下代码

1	preconnect: true

减少宽度较窄的设备上的填充/边距缩进

_config.next.yml加入以下代码

1	mobile_layout_economy: true # 手机文章紧挨着

Android Chrome 标题面板颜色（$ brand-bg / $ headband-bg => $ black-deep）

_config.next.yml加入以下代码

1	android_chrome_color: "#222"

代码 mac 风格&&粘贴按钮

_config.next.yml加入以下代码

codeblock:
  copy_button:
    enable: true
    style: mac

阅读百分比显示

_config.next.yml加入以下代码

back2top:
  enable: true
  sidebar: true
  scrollpercent: true

阅读进度条

_config.next.yml加入以下代码

reading_progress:
  enable: true
  position: bottom
  color: "#37c6c0"
  height: 3px

书签

_config.next.yml加入以下代码

1 2	bookmark: enable: true

横幅位于右上角

_config.next.yml加入以下代码

github_banner:
  enable: true
  permalink: https://github.com/weilining
  title: Follow me on GitHub

字体

_config.next.yml加入以下代码

font:
  enable: true
  global:
    external: true
    family: Noto Serif SC # 思源宋体

SEO 设置

_config.next.yml加入以下代码

disable_baidu_transformation: true # 禁用移动设备上的百度转换，建议 true
index_with_subtitle: true # 带副标题的索引,开启后会在标签标题后面自动加上网站名称，建议 true
exturl: true # 使用Base64加密和解密自动添加外部URL。# nofollow防止外链搜索
google_site_verification: 11111cBkV43JHcyiH4z1Yk2xu-mqlS1fQNk5Dzv7_q0
bing_site_verification: 11111C77E02800759CE29C4ACCE487BD
yandex_site_verification: 11111a93328de5da
baidu_site_verification: 1111-1FDrn4lvkD
baidu_push: true #建议 true #启用百度推送，这样博客会自动把网址推到百度，这对SEO很有帮助。

LaTex 支持

_config.next.yml加入以下代码

math:
  every_page: true
  mathjax:
    enable: true

站内页面刷新

_config.next.yml加入以下代码

1	pjax: true # 站内页面刷新

另外，关于开启 pjax,页面切换后，再回到首页，js 不会重新加载的问题。请在引入 js 的位置给标签添加[dat
a-pjax]属性。

1	<script data-pjax src=.js”></script>

图片浏览

实现该功能的基础是在文章中插入图片。该项功能的效果是：点击文中插图，图片能够放大，有幻灯片的效果。目前 NexT 提供了两款插件 fancybox 和 mediumzoom，两款插件开启一个即可。两款插件的效果不同，各有各的特点，我推荐使用 mediumzoom。

图像的缩放功能

_config.next.yml加入以下代码

1	fancybox: true

查看大图

_config.next.yml加入以下代码

1	mediumzoom: true # 查看大图

图片懒加载

_config.next.yml加入以下代码

1	lazyload: true # 图片懒加载

Pangu

_config.next.yml加入以下代码

1	pangu: true

quicklink

_config.next.yml加入以下代码

quicklink:
  enable: true # 预加载用户视区中的链接
  home: true
  archive: true
  delay: true
  timeout: 3000
  priority: true

来必力评论

_config.next.yml加入以下代码

1	livere_uid: MTAyMC80NDkyOC8yMTQ1MA==

不蒜子网站访客统计

_config.next.yml加入以下代码

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: far fa-eye

pdf

1 2	pdf: enable: true

Markdown

1	{% pdf /path/to/your/file.pdf %}

动画且异步加载

_config.next.yml加入以下代码

1
2
3

motion:
  enable: true
  async: true

加载动画

_config.next.yml加入以下代码

1
2
3

nprogress:
  enable: true # 页面加载过程中，进度条位于顶部。
  spinner: true

丝带

_config.next.yml加入以下代码

1 2	canvas_ribbon: enable: true

打开 jsdelivr 加速

_config.next.yml加入以下代码

1
2
3

vendors:
  internal: jsdelivr
  plugins: jsdelivr

资产

_config.next.yml加入以下代码

1
2
3

css: css
js: js
images: images

部署到 GitHub

GitHub 创建仓库并打开 GitHub Pages 功能

仓库名：Github 用户名.github.io

例如：weilining.github.io

验证仓库是否创建成功：https://github.com/weilining/weilining.github.io

PS:记得打开 GitHub Pages

setting->GitHub Pages

URL 设置

_config.yml的url: http://example.com改成下面的

1	url: https://weilining.github.io

安装模块

1	npm install hexo-deployer-git

配置

deploy:
  - type: git
    repo:
      github:
        url: https://github.com/weilining/weilining.github.io.git # https://github.com/Github 用户名/仓库名/资源路径
        branch: master
        token: f7e4ee8c4b57d3fab8c0680e192c11111fa844f6 # GitHub Personal Access Token
    name: weilining # Github 用户名
    email: email@gmail.com # Github 登陆邮箱

获取 GitHub Personal Access Token 方法

GitHub Pages 预览

https://weilining.github.io

高级

先准备好以下

创建blog/source/_data/styles.styl

搜索

GitHub

插件安装

1	npm install hexo-generator-searchdb

配置

_config.yml

1
2
3

search:
  path: search.json
  field: all

_config.next.yml

local_search:
  enable: true
  trigger: auto
  top_n_per_article: 1

RSS 订阅

官方文档

https://github.com/hexojs/hexo-generator-feed

模块安装

1	npm i hexo-generator-feed

配置

_config.next.yml

1 2	social: RSS: /atom.xml \|\| fa fa-rss

live2d 宠物

官方文档

模型

模块安装

1 2	npm install hexo-helper-live2d npm install live2d-widget-model-wanko

配置

_config.yml

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-wanko
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7

jsdelivr 配置

live2d:
  enable: true
  # enable: false
  scriptFrom: jsdelivr # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    # use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url

背景透明

blog/source/_data/styles.styl

// 背景透明
.main {
  opacity: 0.9;
}

背景图

GitHub

blog/source/_data/styles.styl

//背景
body{
  background:url('https://cdn.jsdelivr.net/gh/weilining/blog.io/images/background-dark.jpg');
  height:100%;
  width:100%;
  background-repeat:repeat-x;
  background-attachment:fixed;
  background-size:cover;
}

插入图片

_config.yml 的post_asset_folder: true改成下面的

# https://hexo.io/zh-cn/docs/asset-folders
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

访客地图

获取访客地图脚本

https://clustrmaps.com/

脚本颜色

Home/My Websites/Weilining.cf Widget Code & Customization

Widget Customization

site选Auto

1 2	Ocean Color: #282828 Land Color: #ccc

脚本放站点底部

/blog/source/_data/footer.njk没有文件就创建

1	<script type='text/javascript' id='clustrmaps' src='//cdn.clustrmaps.com/'></script>

主题配置

_config.next.yml

1 2	custom_file_path: footer: source/_data/footer.njk

百度 SEO

模块安装

1	npm install hexo-generator-baidu-sitemap

配置

_config.yml后面加上以下代码

1 2	baidusitemap: path: baidusitemap.xml

hexo cl && hexo s

http://localhost:4000/baidusitemap.xml

百度、必应、主动推送

GitHUb

站点地图模块安装

1	npm install --save hexo-submit-urls-to-search-engine

配置

百度站点管理

普通收录->资源提交->API 提交->推送接口里有 token

_config.yml后面加上以下代码

hexo_submit_urls_to_search_engine:
  submit_condition: count ###链接被提交的条件，可选值：count | period 现仅支持count
  count: 10 ### 提交最新的10个链接
  period: 900 ### 提交修改时间在 900 秒内的链接
  google: 0 ### 是否向Google提交，可选值：1 | 0（0：否；1：是）
  bing: 1 ### 是否向bing提交，可选值：1 | 0（0：否；1：是）
  baidu: 1 ### 是否向baidu提交，可选值：1 | 0（0：否；1：是）
  txt_path: submit_urls.txt #### 文本文档名， 需要推送的链接会保存在此文本文档里
  baidu_host: https://cjh0613.github.io #### 在百度站长平台中注册的域名
  baidu_token: 请按照文档说明获取 #### 请注意这是您的秘钥， 所以请不要把它直接发布在公众仓库里!
  bing_host: https://cjh0613.github.io #### 在bing站长平台中注册的域名
  bing_token: 请按照文档说明获取 #### 请注意这是您的秘钥， 所以请不要把它直接发布在公众仓库里!
  google_host: https://cjh0613.github.io #### 在google站长平台中注册的域名
  google_key_file: Project.json ###存放google key的json文件，放于网站根目录（与hexo _config.yml文件位置相同），请不要把json文件内容直接发布在公众仓库里!
  replace: 0  ### 是否替换链接中的部分字符串，可选值：1 | 0（0：否；1：是）
  find_what: http://cjh0613.github.io/blog
  replace_with: https://cjh0613.com

_config.yml的deploy:改成

1
2
3

deploy:
  - type: ''
  - type: cjh_baidu_url_submitter ### 主动提交百度爬虫

_config.yml的url: http://example.com改成

1	url: https://weilining.cf

hexo cl &&hexo g && hexo d最后出现{"remain":2996,"success":2}即可

谷歌 SEO

站点地图模块安装

1	npm install hexo-generator-sitemap

配置

_config.yml后面加上以下代码

1 2	sitemap: path: sitemap.xml

hexo cl && hexo s

http://localhost:4000/sitemap.xml

_config.next.yml加上以下代码

1	google_site_verification: KZjcRcBkV43JHcyiH4z1Yk2xu-mqlS1fQNk5Dzv7_q0

部署

GitHub 先创建一个任意名字的私有仓库（一个私有仓库的 GitHub Pages 分支是公开的，其他分支私有）

直接部署 GitHub Pages

GitHub

安装模块

1	npm install hexo-deployer-git --save

配置

blog/_config.yml

deploy:
  - type: git
    repo:
      github:
        url: https://github.com:name/name.git # GitHub Pages 的https
        branch: gh-pages # GitHub Pages的分支
        token: GitHub Token
    name: name # GitHub用户名
    email: email@qq.com # GitHub登陆邮箱

推送到 GitHub 远程仓库

1	hexo cl && hexo g && hexo d

打开 GitHub Pages

进入项目->settings 找到 GitHub Pages，选择 GitHub Pages 的分支 gh-pages，打开 GitHub Pages

域名绑定

创建 CNAME

blog/source 里创建 CNAME 文件，全大写，CNAME 里写入

lllll.cf

域名管理

设置 CNAME 记录，填入 github.io

GitHub Action 部署到 GitHub Pages

设置 secrets

进入项目->settings/secrets 增加三个参数

1
2
3

GH_NAME
GH_EMAIL
GH_TOKEN

配置

.github/workflows/main.yml

name: Deploy Blog

on:
  push:
    branches:
      - main
env:
  TZ: Asia/Shanghai

jobs:
  build: # 一项叫做build的任务
    name: Hexo blog build & deploy
    runs-on: ubuntu-latest # 在最新版的Ubuntu系统下运行

    steps:
    - name: Checkout codes # 将仓库内master分支的内容下载到工作目录
      uses: actions/checkout@master # 脚本来自 https://github.com/actions/checkout
      with:
        persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal token
        fetch-depth: 1

    - name: Setup Node # 配置Node环境
      uses: actions/setup-node@v1 # 配置脚本来自 https://github.com/actions/setup-node
      with:
        node-version: '12.x'

    - name: Cache
      uses: actions/cache@v1
      id: cache-dependencies
      with:
        path: node_modules
        key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

    - name: Install plugins
      if: steps.cache-dependencies.outputs.cache-hit != 'true'
      run: |
        npm install

    - name: Deploy && Create local changes
      run: |
        npm install hexo-cli -g
        hexo cl && hexo g

    - name: Commit files
      run: |
        git config --global core.ignorecase false
        # set git infomation
        git config --global user.email '${{ secrets.GH_NAME }}' # set up GitHub name
        git config --global user.name '${{ secrets.GH_EMAIL }}' # set up GitHub email
        cd ./public
        git init
        git add .
        git commit -m "Add changes" -a

    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GH_TOKEN }} # set up GitHub Token for deploy
        publish_branch: gh-pages #default: gh-pages

打开 GitHub Pages

进入项目->settings 找到 GitHub Pages，选择 GitHub Pages 的分支 gh-pages，打开 GitHub Pages

域名绑定

创建 CNAME

blog/source 里创建 CNAME 文件，全大写，CNAME 里写入

lllll.cf

域名管理

设置 CNAME 记录，填入 github.io

服务器

blog/public下所有文件复制到 nginx 的 web 服务器根目录

部署到 vercel

注册 vercel

https://vercel.com，GitHub邮箱换谷歌邮箱，进行注册

通过 GitHub 源码部署到 vercel

选 Import a Git Repository，仓库 https 填入。

FRAMEWORK PRESET 选择 Hexo，然后 Deploy

域名绑定

进入 vercel 项目，settings/domains，填入 lllll.cf，域名管理设置 A 记录，ip 填入 76.76.21.21

添加一言

blog/source/_data/sidebar.njk

将下面这段代码放入页面内需要展示一句话的位置即可。

1 2	{# 一言 #} <script type="text/javascript" src="https://api.uixsj.cn/hitokoto/w.php?code=js"></script><div id="xsjhitokoto"><script>xsjhitokoto()</script></div>

中英文版使用方法同上

1	<script type="text/javascript" src="https://api.uixsj.cn/hitokoto/en.php?code=js"></script><div id="enhitokoto"><script>enhitokoto()</script></div>

音乐播放器

GitHub

下载源码

cd blog
mkdir -p source/dist
wget https://gitee.com/weilining/APlayer/raw/master/dist/APlayer.min.css -O source/dist/APlayer.min.css
wget https://gitee.com/weilining/APlayer/raw/master/dist/APlayer.min.css.map -O source/dist/APlayer.min.css.map
wget https://gitee.com/weilining/APlayer/raw/master/dist/APlayer.min.js -O source/dist/APlayer.min.js
wget https://gitee.com/weilining/APlayer/raw/master/dist/APlayer.min.js.map -O source/dist/APlayer.min.js.map

配置

_config.next.yml

1 2	custom_file_path: header: source/_data/header.njk

/source/_data/header.njk

<!-- 加入APlayer音乐播放器 -->
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>

放入自己喜欢的音乐

在blog/source/dist目录里，新建 music.js 文件，并把如下代码粘贴进去。

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    autoplay: false,
    audio: [
	{
        name: "平凡之路",
        artist: '朴树',
        url: 'http://www.ytmp3.cn/down/59211.mp3',
        cover: 'http://p1.music.126.net/W_5XiCv3rGS1-J7EXpHSCQ==/18885211718782327.jpg?param=130y130',
      },
	  {
        name: '这些民谣 - 一次听个够',
        artist: '翁大涵',
        url: 'http://www.ytmp3.cn/down/60222.mp3',
        cover: 'http://p2.music.126.net/Wx5GNJEpay2JbfVUJc4Aew==/109951163094853876.jpg?param=130y130',
      },
      {
        name: '你的酒馆对我打了烊',
        artist: '陈雪凝',
        url: 'http://www.ytmp3.cn/down/59770.mp3',
        cover: 'http://p1.music.126.net/LiRR__0pJHSivqBHZzbMUw==/109951163816225567.jpg?param=130y130',
      },
	  {
        name: 'Something Just Like This',
        artist: 'The Chainsmokers',
        url: 'http://www.ytmp3.cn/down/50463.mp3',
        cover: 'http://p2.music.126.net/ggnyubDdMxrhpqYvpZbhEQ==/3302932937412681.jpg?param=130y130',
      },
      {
        name: 'Good Time',
        artist: 'Owl City&Carly Rae Jepsen',
        url: 'http://www.ytmp3.cn/down/34148.mp3',
        cover: 'http://p1.music.126.net/c5NVKUIAUcyN4BQUDbGnEg==/109951163221157827.jpg?param=130y130',
      }
    ]
});

发布字数显示设置

GitHub

模块安装

1	npm install hexo-word-counter

配置

_config.next.yml加入下面代码

1
2
3

symbols_count_time:
  separated_meta: true
  item_text_total: true

文章模版

blog/scaffolds/post.md改成下面代码

---
title: {{ title }}
date: {{ date }}
updated: {{ date }}
toc: true
comments: true
sticky: 100
tags:
  - default
categories:
  - default
description:
  - default

---





<!-- more -->

hexo new post，就有上面的模版了

文章缩合

你想缩合的地方使用下面代码

1	<!-- more -->

鼠标点击烟花

主题配置

_config.next.yml

1 2	custom_file_path: bodyEnd: source/_data/body-end.njk

创建 body-end.njk

blog/source/_data/body-end.njk没有就创建

1 2	<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;"></canvas> <script type="text/javascript" src="/js/cursor/fireworks.js"></script>

创建 fireworks.js

blog/source/js/cursor/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)};

在线联系功能

Hexo 博客添加在线联系功能

Hexo 博客如何添加在线联系功能呢,发现了一个不错的网站可以提供在线联系的服务，当有用户在网页上给你留言后会通过邮件或者微信通知你，可以及时的解答用户的疑问。

最终的效果可以参考我博客的右下角,有个聊天的按钮,效果如下所示:

配置方法如下:
首先到 DaoVoice 上注册一个账号,注册完成后会得到一个 app_id，获取 appid 的步骤如下图所示:

daovoice

以 next 主题为例,打开/themes/next/layout/_partials/head.swig 文件添加如下

复制

{% if theme.daovoice %}
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}

接着打开主题配置文件_config.yml，添加如下代码：

复制

1
2
3

# Online contact
daovoice: true
daovoice_app_id: 这里输入前面获取的app_id

最后执行 hexo clean && hexo g && hexo s 就能看到效果了。

需要注意的是,next 主题下聊天的按钮会和其他按钮重叠到一起，可以到聊天设置，修改下按钮的位置:

最后到右上角选择管理员，微信绑定,可以绑定你的微信号，关注公众号后打开小程序，就可以实时收发消息，有新的消息也会通过微信通知，设置页面如下:

效果展示: 酱油哥博客

友盟站长统计

https://www.umeng.com/

Canvas 实现《黑客帝国》特效

GitHub

脚本放站点底部

/blog/source/_data/footer.njk没有文件就创建

1	<script src="https://cdn.jsdelivr.net/npm/canvas-matrix.js@0/canvas-matrix.min.js"></script>

主题配置

_config.next.yml

1 2	custom_file_path: footer: source/_data/footer.njk

顶级

SEO 优化

缩短 url

_config.yml的permalink: :year/:month/:day/:title/改成

1	permalink: :title.html

NexT 防止外链搜索

blog/_config.next.yml

1	exturl: true # 使用Base64加密和解密自动添加外部URL。

hexo cl && hexo s

其他主题防外链

GitHub

模块安装

1	npm i hexo-filter-nofollow

配置

_config.yml

nofollow:
  enable: true
  field: site
  exclude:
    - 'exclude1.com'
    - 'exclude2.com'

robots.txt

1
2
3

cd blog
mkdir source
wget https://gitee.com/weilining/quick-hexo-next/raw/master/source/robots.txt -O source/robots.txt

robots.txt的内容

# 允许所有用户代理的浏览器爬虫进行访问（爬取数据）
User-agent: *
# 允许访问的内容
Allow: /
# 不允许访问的内容
Disallow: /img/
Disallow: /css/
Disallow: /js/
Disallow: /photos/
Disallow: /*.css
Disallow: /*.js


Sitemap: https://weilining.cf/sitemap.xml
Sitemap: https://weilining.cf/baidusitemap.xml

Sitemap: http://weilining.cf/sitemap.xml
Sitemap: http://weilining.cf/baidusitemap.xml

打开“robots.txt 测试工具”

移动

curl -A 'Mozilla/5.0 (Linux;u;Android 4.2.2;zh-cn;) AppleWebKit/534.46 (KHTML,like Gecko) Version/5.1 Mobile Safari/10600.6.3 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html）' https://weilining.cf

1	curl -A 'Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html)' https://weilining.cf

加载性能优化

quicklink

blog/_config.next.yml

quicklink:
  enable: true
  home: true
  archive: true
  delay: true
  timeout: 3000
  priority: true
  ignores:

CDN

cloudflare

建议：要开启 CDN，先删除其他 A/AAAA，只留一条。关闭 CDN 之后再加多条 A/AAAA。

MarkDown 书写

二级标题后紧跟的子标题级别必须是三级标题。
一个页面一个 H1 标签，以二级标题为起点，二级标题不要太多。

## 标题

jsDelivr 全站托管

加速主题和 css

_config.next.yml

avatar:
  url: //cdn.jsdelivr.net/gh/weilining/blog.io/images/logo.svg
vendors:
  internal: jsdelivr
  plugins: jsdelivr
css: //cdn.jsdelivr.net/gh/weilining/blog.io/css
js: //cdn.jsdelivr.net/gh/weilining/blog.io/js
images: //cdn.jsdelivr.net/gh/weilining/blog.io/images

加速 js

blog/source/_data/body-end.njk

1 2	<!-- 社会主义价值观 --> <script type="text/javascript" src="{{ theme.js }}/cursor/text.js" async="async"></script>

加速 images

blog/source/_data/styles.styl

body{
  background-image: url('//cdn.jsdelivr.net/gh/weilining/blog.io/images/background-dark.webp');
  background-attachment:fixed;
  background-size:cover;
}

优化

只留必要依赖

主题配置文件 _config.next.yml 中不必要的依赖不要添加。

比如对我来说，3D 效果之类的都没必要，所以 canvas_ribbon.js 啥的都不必开启。

最后用到的有：

quicklink：预加载用户视区中的链接
pjax：站内页面刷新
lazyload：图片懒加载
mediumzoom：查看大图

quicklink 我没啥感觉；

pjax，由于网络原因，我偶尔会觉得浏览器（网页）卡死了；

lazyload 和 mediumzoom 有点效果，不过虽然我这也没几张图就是了……

能上 CDN 的先上 CDN

前提：我把博客放 Github Pages 的。

看的这篇文章，尝试了下：JsDelivr 全站托管

js、css、images 用 jsdelivr 加速

在 _config.next.yml 下修改 Assets：

1
2
3

css: //cdn.jsdelivr.net/gh/weilining/blog.io/css
js: //cdn.jsdelivr.net/gh/weilining/blog.io/js
images: //cdn.jsdelivr.net/gh/weilining/blog.io/images

avater、favicon

1	{{ theme.images }} == //cdn.jsdelivr.net/gh/weilining/blog.io/images

favicon、avatar 不包含在 images 里，需要单独改下。

images 仅包含文章引用的本地图片。

字体

默认的快

各种依赖

在 _config.next.yml 的 vendors 配置。

也全用 jsdelivr 的比较好。

我用到的一些依赖：

1
2
3

vendors:
  internal: jsdelivr
  plugins: jsdelivr

静态资源压缩 hexo-neat

GitHub

模块安装

1	npm install hexo-neat

配置

_config.yml

# hexo-neat
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
  enable: true
  exclude:
# 压缩css
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 压缩js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'

静态资源压缩 Hexo-all-minifier

GitHub

模块安装

1	npm install hexo-all-minifier --save

配置

_config.yml

all_minifier: true
html_minifier:
  silent: true
css_minifier:
  silent: true
js_minifier:
  silent: true
image_minifier:
  enable: false

GitHub Action 自动构建

blog/.github/workflows/main.yml没有就创建，main.yml写入下面代码

name: Deploy Hexo

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]

    steps:
      - name:
        uses: actions/checkout@v1

      - name: Step Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}

      - name: Install Hexo CI
        run: |
          export TZ='Asia/Shanghai'
          npm install hexo-cli -g

      - name: Cache
        uses: actions/cache@v1
        id: cache-dependencies
        with:
          path: node_modules
          key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

      - name: Install plugins
        if: steps.cache-dependencies.outputs.cache-hit != 'true'
        run: |
          npm install

      - name: Deploy
        run: |
          hexo cl && hexo g && hexo d

图床使用 jsdelivr 加速

PicGO

GitHub

Windows 下载地址：https://github.com/Molunerfinn/PicGo/releases/download/v2.2.2/PicGo-Setup-2.2.2.exe

macOS 下载地址：https://github.com/Molunerfinn/PicGo/releases/download/v2.2.2/PicGo-2.2.2.dmg

GitHub

创建一个叫 img 的仓库，用于存放图片

jsdelivr

PicGo->图床设置->GitHub 图床

设定仓库名：weilining/img
设定分支名：main # GitHub默认main
设定Token：1111190051ea1e009338ad498acf6d89ef68e910 #获取教程https://weilining.cf/3.html
指定存储路径：img/
设定自定义域名：https://cdn.jsdelivr.net/gh/weilining/img@main

工具

插件

插件名	官方文档	功能	NexT 集成
hexo-related-popular-posts	GitHub	相关文章	是
hexo-generator-baidu-sitemap		百度站点地图	否
hexo-generator-sitemap		谷歌站点地图	否
hexo-deployer-git		部署	否
hexo-generator-searchdb		本地搜索	是
hexo-generator-feed		RSS	是
hexo-submit-urls-to-search-engine		百度主动推送	否
hexo-word-counter		文字数	是
hexo-theme-next		NexT 主题	是
hexo-helper-live2d	GitHub	宠物	否
live2d-widget-model-wanko	模型	宠物模型	否