1 秒钟教程

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

安装

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

苹果电脑用

1
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

其他

1
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

代理快速安装

1
2
3
4
5
6
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旁边)

NexT

代理快速安装

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.ymltheme: landscape改成下面的

1
theme: next

网页个人信息

_config.yml

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

域名

_config.ymlurl: 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

1
2
3
4
5
# Schemes
# scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini # 方案设定

暗模式

_config.next.yml加入以下代码

1
darkmode: true #暗模式

网站信息设置

_config.next.yml加入以下代码

1
2
3
4
5
6
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加入以下代码

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

菜单栏

_config.next.yml加入以下代码

1
2
3
4
5
6
7
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加入以下代码

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

侧边栏头像

_config.next.yml加入以下代码

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

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

_config.next.yml加入以下代码

1
site_state: true

联系方式

_config.next.yml加入以下代码

1
2
3
4
5
6
social:
GitHub: https://github.com/weilining/blog.io || fab fa-github
social_icons:
enable: true
icons_only: true
transition: true

友链

_config.next.yml加入以下代码

1
2
3
4
5
6
links_settings:
icon: fa fa-globe
title: 友情链接
layout: inline
links:
Ln: https://weilining.github.io

文章目录

_config.next.yml加入以下代码

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

页脚设置

_config.next.yml加入以下代码

1
2
3
4
5
6
7
8
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加入以下代码

1
read_more_btn: true

发布元显示设置

_config.next.yml加入以下代码

1
2
3
4
5
6
7
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加入以下代码

1
2
3
4
5
6
7
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

标签页面的 TagCloud 设置

_config.next.yml加入以下代码

1
2
3
4
5
6
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加入以下代码

1
2
3
4
codeblock:
copy_button:
enable: true
style: mac

阅读百分比显示

_config.next.yml加入以下代码

1
2
3
4
back2top:
enable: true
sidebar: true
scrollpercent: true

阅读进度条

_config.next.yml加入以下代码

1
2
3
4
5
reading_progress:
enable: true
position: bottom
color: "#37c6c0"
height: 3px

书签

_config.next.yml加入以下代码

1
2
bookmark:
enable: true

横幅位于右上角

_config.next.yml加入以下代码

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

字体

_config.next.yml加入以下代码

1
2
3
4
5
font:
enable: true
global:
external: true
family: Noto Serif SC # 思源宋体

SEO 设置

_config.next.yml加入以下代码

1
2
3
4
5
6
7
8
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加入以下代码

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

_config.next.yml加入以下代码

1
2
3
4
5
6
7
quicklink:
enable: true # 预加载用户视区中的链接
home: true
archive: true
delay: true
timeout: 3000
priority: true

来必力评论

_config.next.yml加入以下代码

1
livere_uid: MTAyMC80NDkyOC8yMTQ1MA==

不蒜子网站访客统计

_config.next.yml加入以下代码

1
2
3
4
5
6
7
8
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.ymlurl: http://example.com改成下面的

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

安装模块

1
npm install hexo-deployer-git

配置

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

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

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

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

1
2
3
4
// 背景透明
.main {
opacity: 0.9;
}

背景图

GitHub

blog/source/_data/styles.styl

1
2
3
4
5
6
7
8
9
//背景
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.ymlpost_asset_folder: true改成下面的

1
2
3
4
5
# 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

siteAuto

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后面加上以下代码

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

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

_config.ymlurl: 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

1
2
3
4
5
6
7
8
9
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 里写入

1
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

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
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 里写入

1
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

下载源码

1
2
3
4
5
6
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

1
2
3
4
5
<!-- 加入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 文件,并把如下代码粘贴进去。

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
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改成下面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
---
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没有就创建

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)};

在线联系功能

Hexo 博客添加在线联系功能

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

最终的效果可以参考我博客的右下角,有个聊天的按钮,效果如下所示:
img
配置方法如下:
首先到 DaoVoice 上注册一个账号,注册完成后会得到一个 app_id,获取 appid 的步骤如下图所示:

daovoice

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

复制

1
2
3
4
5
6
7
8
9
{% 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 主题下聊天的按钮会和其他按钮重叠到一起,可以到聊天设置,修改下按钮的位置:

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

友盟站长统计

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.ymlpermalink: :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

1
2
3
4
5
6
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的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 允许所有用户代理的浏览器爬虫进行访问(爬取数据)
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 测试工具”

移动

1
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

PC

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

加载性能优化

blog/_config.next.yml

1
2
3
4
5
6
7
8
quicklink:
enable: true
home: true
archive: true
delay: true
timeout: 3000
priority: true
ignores:

CDN

cloudflare

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

MarkDown 书写

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

1
## 标题

jsDelivr 全站托管

加速主题和 css

_config.next.yml

1
2
3
4
5
6
7
8
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

1
2
3
4
5
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.ymlvendors 配置。

也全用 jsdelivr 的比较好。

我用到的一些依赖:

1
2
3
vendors:
internal: jsdelivr
plugins: jsdelivr

静态资源压缩 hexo-neat

GitHub

模块安装
1
npm install hexo-neat
配置

_config.yml

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

1
2
3
4
5
6
7
8
9
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写入下面代码

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
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 图床

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

img

工具

网页访问速度测试

https://www.17ce.com/

https://www.ping.cn/

http://ping.chinaz.com/

https://www.boce.com/

http://www.ce8.com/

页面加载性能测试

Google PageSpeed Insights

http://seo.cjzzc.com/

各平台收录查询

百度收录 weilining.cf 查询
必应收录 weilining.cf 查询
谷歌收录 weilining.cf 查询
360 收录 weilining.cf 查询
yandex 收录 weilining.cf 查询
搜狗收录 weilining.cf 查询

各平台 Robots.txt 测试工具

百度
必应
谷歌
Yandex

各平台管理

必应

百度

Yandex

谷歌

插件

插件名版本号官方文档功能NexT 集成
hexo-related-popular-postsnpmGitHub相关文章
hexo-generator-baidu-sitemapnpm百度站点地图
hexo-generator-sitemapnpm谷歌站点地图
hexo-deployer-gitnpm部署
hexo-generator-searchdbnpm本地搜索
hexo-generator-feednpmRSS
hexo-submit-urls-to-search-enginenpm百度主动推送
hexo-word-counternpm文字数
hexo-theme-nextnpmNexT 主题
hexo-helper-live2dnpmGitHub宠物
live2d-widget-model-wankonpm模型宠物模型

参考

Hexo 官方中文文档

Hexo 的官方_config.yml

https://gitee.com/weilining/hexo-starter/blob/master/_config.yml

NexT 的官方_config.yml

https://gitee.com/weilining/hexo-theme-next/blob/master/_config.yml

theme-next-docs/_config.next.yml

theme-next-docs/_config.yml

theme-next-docs

NexT docs

Hexo

2019Hexo 博客 Next 主题深度美化 打造一个炫酷博客(2)-奥怪的小栈

https://blog.bill.moe/hexo-theme-next-config-optimization/