Hexo 搭配 GitHub 建立博客, 选用 nexT 主题 | 机械细胞
0%

Hexo 搭配 GitHub 建立博客, 选用 nexT 主题

发表于 更新于 分类于 ， ，
本文字数： 137k 阅读时长 ≈ 2:04

整理网上的Next优化方法,外加写一份文章

感觉博客还行,不再羡慕别人的主题了

特效全开,跟开了吃鸡一样,电脑呼呼的

看了下建站时间,花了23天整,为了一个工具,感觉血亏

等学习前端知识以后再改吧,现在先用着

Hexo 博客搭建

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub上.

因为Hexo的创建者是台湾人，对中文的支持很友好，可以选择中文进行查看。

官网: hexo官网

安装 Git

pass

参考:

  1. Git - Book (git-scm.com)
  2. 超详细Git 安装教程(Windows)_eno_yang的博客-CSDN博客_git安装

Git 代码备份

安装nodejs

pass

参考:

  1. Node.js 中文网

安装hexo

选择准备安装的目录,打开git bash,输入

1
2
3
4
5
6
7
8
9
10
11
//全局安装
npm install -g hexo-cli
//查看一下版本
hexo -v

//初始化hexo, 即创建"myblog"文件夹并添加相关文件
hexo init myblog//创建文件夹
cd myblog //进入这个myblog文件夹
npm install//添加相关文件
hexo g//生成文件
hexo s//本地浏览

打开hexo的服务，在浏览器输入localhost:4000就可以看到你生成的博客了。

GitHub创建个人仓库

创建一个和你用户名相同的仓库，后面加.github.io，只有这样，将来要部署到GitHub page的时候，才会被识别.

new_repository

生成SSH添加到GitHub

ssh，简单来讲，就是一个秘钥，其中，id_rsa是你这台电脑的私人秘钥，不能给别人看的，id_rsa.pub是公共秘钥，可以随便给别人看。把这个公钥放在GitHub上，这样当你链接GitHub自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过git上传你的文件到GitHub上。

打开git bash,输入

1
2
git config --global user.name "yourname"
git config --global user.email "youremail"

这里的yourname输入你的GitHub用户名，youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。

检查一下你有没有输对

1
2
git config user.name
git config user.email

创建SSH,一路回车即可

1
ssh-keygen -t rsa -C "youremail"

打开C:\Users\用户\.ssh\id_rsa.pub, 复制内容

在github的用户设置里,找到SSH and GPG keys,点击New SSH key

new_SSH

Title随意,将复制内容填入Key,点击New SSH key

查看是否成功

1
ssh -T git@github.com

参考:

  1. hexo史上最全搭建教程_Fangzh的技术博客-CSDN博客_hexo

将hexo部署到GitHub

打开myblog文件夹下的站点配置文件_config.yml

找到代码并修改

1
2
3
4
deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

repo: 仓库名,可直接在你创建的仓库复制,有三种,复制后粘贴即可

repo

branch:准备部署的分支,一般使用main,可随意填写

如下为我的配置

1
2
3
4
5
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:Liuzh25/Liuzh25.github.io.git,main

安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub

1
npm install hexo-deployer-git --save

部署命令

1
2
3
hexo clean
hexo generate
hexo deploy

其中 hexo clean清除了你之前生成的东西，也可以不加。
hexo generate 顾名思义，生成静态文章，可以用 hexo g缩写
hexo deploy 部署文章，可以用hexo d缩写

注意第一次deploy时可能要你输入username和password。

等待

进入 http://yourname.github.io ,如果显示为空白,而不是404,说明你已经部署成功,请等待1-4小时

设置个人域名(了解)

注册一个阿里云账户,在阿里云上买一个域名

实名认证

在域名控制台点解析进去

添加如下

域名

即将**www.jxxb.top和jxxb.top**均指向yourname.github.io

不推荐指向IP地址

然后,修改github仓库设置如下

连接

最后一步

1
2
3
hexo clean
hexo g
hexo d

写文章

Hexo支持makedown语言,这是一种轻量级的标记语言,类似于html,为你的文章添加文字格式及图片,音频,链接等,文件名后缀.md

语法可在Markdown 中文网或者Markdown 教程 | 菜鸟教程查看

推荐使用Typora文本编辑器

在git bash输入下列代码

1
hexo new abc

即在\myblog\source\_posts文件夹下创建abc.md文件并预先输入信息

使用文本编辑器或者记事本打开编辑即可

编辑完毕,部署至网页

1
2
3
hexo clean
hexo g
hexo d

参考:

  1. Markdown 中文网
  2. Typora官网

安装NexT

安装「主题」

在 /myblog 启动Git bash

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

启用「主题」

编辑 **站点配置文件 _config.yml **(位于根目录)

1
theme: next

将Hexo 站点配置文件（/_config.yml）与 NexT主题配置文件(/themes/next/_config.yml)备份

将主题配置文件独立出来

hexo-next的更新不够人性化,且 Hexo 站点配置文件（/_config.yml）与 NexT主题配置文件(/themes/next/_config.yml)的割裂使得配置时体验也不算太好

因此现在有四种配置方法,参考官方文档DATA-FILES.md

  1. 直接在Hexo 站点配置文件和NexT主题配置文件内编写

    优点: 当在本地预览(hexo s)时,更改后可实时查看,不需要再操作git bash(退出本地预览并再次进入)

  2. NexT主题配置文件内**override: false（默认）**,从站点配置文件和主题配置文件中复制你需要更改的条目至/myblog/source/_data/next.yml,如果没有就新建,通常是没有的.

    缺点: 某些插件只能从站点配置文件读取选项

  3. NexT主题配置文件内**override: false改为true,将主题配置文件中全部内容复制到next.yml,在Hexo 站点配置文件和next.yml**内编写

  4. 确认**next.yml文件不存在,存在要删除或改名,然后将站点配置文件和主题配置文件中复制的你需要更改的条目,即方法2的内容向右移两个空格,在这些参数最上方添加一行 theme_config:,放置于站点配置文件**末尾.如下

    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
    # Deployment
    ## Docs: https://hexo.io/docs/one-command-deployment
    deploy:
      type: git
      repo: git@github.com:Liuzh25/Liuzh25.github.io.git,main

    theme_config:


      # 自定义文件
      custom_file_path:
        #head: source/_data/head.swig
        #header: source/_data/header.swig
        #sidebar: source/_data/sidebar.swig
        #postMeta: source/_data/post-meta.swig
        #postBodyEnd: source/_data/post-body-end.swig
        #footer: source/_data/footer.swig
        #bodyEnd: source/_data/body-end.swig
        #variable: source/_data/variables.styl
        #mixin: source/_data/mixins.styl
        style: source/_data/styles.styl
      
      # ---------------------------------------------------------------
      # 网站信息设置
      # ---------------------------------------------------------------
      
      # 头像
      favicon:
        small: /uploads/favicon-16x16-next.png
        medium: /uploads/favicon-32x32-next.png

    推荐使用方法2或4,这里我使用的方法2,并且只将主题配置文件复制到**next.yml**

参考:

  1. hexo-theme-next/DATA-FILES.md at master · theme-next/hexo-theme-next

编辑站点配置文件

编辑下列代码如下所示

1
2
3
4
5
6
7
8
9
10
11
12
# Site
title: 机械细胞
subtitle: 三十功名尘与土，八千里路云和月
description: 三十功名尘与土，八千里路云和月
keywords: 个人,博客
author: 谨礼
language: zh-CN
timezone: Asia/Shanghai

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://www.jxxb.top

参考:

  1. Hexo+NexT（二）：Hexo站点配置详解_Guide2IT-CSDN博客
  2. hexo _config.yml站点配置文件说明_猫狗记-CSDN博客

博客个性化初试

GitHub Corners「图标角」

粘贴代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面)，并把href改为你的github地址,将style="fill:#151513; color:#fff改为你喜欢的颜色.

最新版本NexT主题支持**GitHub Corners**

编辑 主题配置文件 _config.yml(复制到**next.yml**,方法2)

1
2
3
4
5
# GitHub corner.
github_banner:
  enable: true
  permalink: https://github.com/Liuzh25
  title: 欢迎访问我的GitHub主页

编辑后发现在网页右上角,且颜色为黑白色,准备更改

按F12后如下图

corner

用红圈内按键指向**GitHub Corners**,显示如下

corner

点击mian.css:1180,打开mian.css,复制如下代码

1
2
3
4
5
6
7
8
9
.github-corner svg {
  border: 0;
  color: #fff;
  fill: #222;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1000;
}

打开GitHub Corners (tholman.com),对比代码,会发现右边和左边的区别是

1
2
3
- right: 0;
+ left: 0;
+ transform: scale(-1, 1);

编辑**/myblog/source/_data/styles.styl**文件添加下列代码

1
2
3
4
5
6
7
8
9
10
.github-corner svg {
  border: 0;
  color: #fff;
  fill: #FD6C6C;
  position: absolute;
  left: 0;
  transform: scale(-1, 1);
  top: 0;
  z-index: 1000;
}

将主题配置文件内style代码注释#去掉.(复制到**next.yml**,方法2)

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

GitHub Corners

GitHub Corners

color

参考:

  1. GitHub Corners (tholman.com)
  2. 科学上最令人舒服的十种颜色（RGB)
  3. Color Hex Color Codes

图标角延伸知识

使用F12找到对应的css文件,并在/_data/styles.styl文件内重写,用于个性化自己的网站

参考:

  1. 基于Hexo搭建个人博客——进阶篇(从入门到入土) | ookamiAntD’s Blog

编辑NexT主题配置文件

设置「网站标签图标」和「页脚」

在/myblog/source下创建文件夹,将16x16及32x32的任意图像格式文件放入,并在代码内填写路径

亦可以使用链接

图标的使用方法请阅读下一条

编辑 主题配置文件 _config.yml(复制到**next.yml**,方法2)

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
# ---------------------------------------------------------------
# 网站信息设置
# ---------------------------------------------------------------

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

# 页脚    
footer:
  # 指定网站设置的日期,如果没有定义，则使用当前时间.
  since: 2021

  # 图标,位于时间和版权信息之间.
  icon:
    name: fab fa-ravelry
    # 如果你想要动画图标，设置它为true.
    animated: true
    # 改变图标的颜色，使用十六进制代码.
    color: "#dada1"
  # 如果没有定义，将在Hexo主配置中使用' author '.
  copyright: 机械细胞
  
  # 控制(由 Hexo 强力驱动)是否显示
  powered: false

#版权信息
creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language: deed.zh

图标的选用

NexT 默认使用 Font Awesome 库作为 icon 库,美中不足的是，有一些中国的社交网站的图标在 Font Awesome 库中并没有提供，包括我们熟悉的哔哩哔哩、豆瓣、简书等等。所以如果想使用这些图标，就需要我们使用本地图标进行手动添加。

首先,在 阿里巴巴矢量图标库 之类的网站找到你需要的图标，下载 SVG 格式文件。在/myblog/source新建文件夹,并放入.

编辑 source/_data/styles.styl 文件,编辑代码

将主题配置文件内custom_file_path:style代码注释#去掉.(如果你之前没有这么做)

最后一步,引用.

1
name: fab fa-ravelry

Font Awesome 的图标引用方式有fa,fab,fad,far,fal等,每种类型可能有相应图标,也可能没有所以如果出现图标叠加,请换引用方式或者图标名,推荐更改图标名.fa-xxx,其中,**fa-**不能省略,可能出错,我暂时不会改

参考:

  1. 阿里巴巴矢量图标库
  2. Hexo + NexT 通过自定义样式添加 Bilibili 图标_R先生一天不学习就浑身难受-CSDN博客
  3. Hexo博客之优雅使用阿里iconfont图标_小康博客-CSDN博客
  4. Hexo-使用阿里iconfont图标

设置「布局风格」

编辑 主题配置文件 _config.yml(复制到**next.yml**,方法2)

将你需用启用的scheme前面注释 # 去除即可。

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# 布局设置
# ---------------------------------------------------------------

# 布局
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

添加「菜单项」

fab后面的图标是我自己下载并添加的,参考条目8

badges控制的是归档,标签,分类旁边是否显示统计数

若要添加自定义菜单项,直接插入,并在/themes/next/languages/zh_CN中添加对应代码

编辑 主题配置文件 _config.yml(复制到**next.yml**,方法2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# ---------------------------------------------------------------
# 菜单设置
# ---------------------------------------------------------------

# 菜单
# 格式: `Key: /link/ || icon`
menu:
  home: / || fab fa-home
  tags: /tags/ || fab fa-tags
  categories: /categories/ || fab fa-categories
  archives: /archives/ || fab fa-archive
  videos: /videos/ || fab fa-video
  music: /music/ || fab fa-music
  photos: /photos/ || fab fa-photo
  books: /videos/ || fab fa-book
  #schedule: /schedule/ || fab fa-calendar
  #sitemap: /sitemap.xml || fab fa-sitemap
  commonweal: /404/ || fab fa-commonweal
  about: /about/ || fab fa-about

# 启用/禁用菜单图标/项目徽章.
menu_settings:
  icons: true
  badges: true

编辑**zh-CN.yml**

1
2
3
4
5
6
7
8
9
10
11
12
13
14
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  music: 音乐
  videos: 视频
  books: 图书
  photos: 照片
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益 404

设置「侧栏」

  1. 侧栏位置
  2. 侧栏头像
  3. 添加社交链接
  4. 添加友链
  5. 侧边栏目录设置

编辑 主题配置文件 _config.yml(复制到**next.yml**,方法2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
# ---------------------------------------------------------------
# 侧边栏设置
# ---------------------------------------------------------------

sidebar:
  # 侧栏位置.
  position: left
  #position: right

  # 自定义侧栏宽度,默认如下:Muse | Mist: 320  Pisces | Gemini: 240
  #width: 300

  # 侧栏顶部填充像素.
  padding: 18
  # 侧栏与菜单栏和文档的像素偏移
  offset: 12

# 侧栏头像
avatar:
  url: /uploads/avatar.jpeg
  # 头像显示圆形.
  rounded: true
  # 鼠标放置时头像旋转.
  rotated: true

# 日志/分类/标签在侧边栏.
site_state: false

# 社交链接
# 格式: `关键字: 链接 || 图标名`
social:
  GitHub: https://github.com/Liuzh25 || fa fa-github
  E-Mail: 786189861@qq.com || fa fa-email
  QQ: tencent://message/?uin=1095652242 || fa fa-qq
  QQ对话: tencent://Message/?Uin=786189861&websiteName=www.oicqzone.com&Menu=yes || fa fa-qqduihua
  CSDN: https://blog.csdn.net/qq_37828104 || fa fa-csdn
  码云: https://gitee.com/Liuzh25 || fab fa-gitee
  力扣: https://leetcode-cn.com/u/liuzh25/ || fab fa-leetcode
  哔哩哔哩: https://space.bilibili.com/500942397 || fab fa-bilibili
  知乎: https://www.zhihu.com/people/jin-li-22-85 || fa fa-zhihu
  百度: http://www.baidu.com || fab fa-baidu

# `enable` 控制是否显示图标 ,`icons_only` 控制是否隐藏关键字, `transition` 暂时不懂.
social_icons:
  enable: true
  icons_only: false
  transition: false

# 友情链接
links_settings:
  icon: fab fa-link
  title: 友情链接
  # 链接排列方式
  #layout: block
  layout: inline
  
links:
  野生程序员: http://www.yscxy.net/
  又见苍岚: https://www.zywvvd.com/
  小丁的个人博客: https://tding.top/
  Moorez: http://shenzekun.cn/
  橘子味雪糕: https://www.liuxianl.com/

# 侧边栏目录
toc:
  enable: fasle
  # 自动添加列表号到toc.
  number: false
  # 标题过长换行.
  wrap: false
  # 所有目录全部显示.
  expand_all: false
  # 最大标题深度.
  max_depth: 6

添加「打赏」和「字数统计」

字数统计功能依赖于 https://github.com/theme-next/hexo-symbols-count-time

1
npm install hexo-symbols-count-time

编辑 主题配置文件 _config.yml(复制到**next.yml**,方法2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
# ---------------------------------------------------------------
# 站点设置
# ---------------------------------------------------------------

# 自动摘录描述在主页作为序言文本.
excerpt_description: true

# 显示阅读全文.
read_more_btn: true

# 文章数据显示
post_meta:
  item_text: true # 标题显示
  created_at: true # 创建时间
  updated_at: # 更新时间
    enable: true
    another_day: true
  categories: true # 分类显示

# 字数统计
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true

# 标签,使用图标代替符号#
tag_icon: true

# 打赏
reward_settings:
  enable: true
  animation: false
  #comment: 赞赏一杯咖啡

reward:
  alipay: /uploads/alipay.jpg
  wechatpay: /uploads/wechatpay.jpg
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

# 通过Telegram Channel、Twitter等订阅
# 格式: `Key: permalink || icon` (Font Awesome)
follow_me:
  #Twitter: https://twitter.com/username || fab fa-twitter
  #Telegram: https://t.me/channel_name || fab fa-telegram
  WeChat:  /uploads/wechat-qcode.jpg || fab fa-weixin
  #RSS: /atom.xml || fa fa-rss

# 相关热门文章链接
related_posts:
  enable: false
  title: # Custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 5
    #PPMixingRate: 0.0
    #isDate: false
    #isImage: false
    #isExcerpt: false

# 文章编辑
post_edit:
  enable: true
  url: https://github.com/Liuzh25/Liuzh25.github.io/tree/source # 查看源链接
  #url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name # 编辑链接分支

# 显示前一篇文章和下一篇文章
post_navigation: left
#post_navigation: right
#post_navigation: false

设置「谷歌日历」和「标签云」

谷歌日历设置失败

编辑 主题配置文件 _config.yml(复制到**next.yml**,方法2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# ---------------------------------------------------------------
# 自定义页面设置
# ---------------------------------------------------------------

# 标签页标签云设置.
tagcloud:
  min: 12 # 字体最小 in px
  max: 30 # 字体最大 in px
  start: "#ccc" # 开始颜色 (hex, rgba, hsla or color keywords)
  end: "#111" # 结束颜色 (hex, rgba, hsla or color keywords)
  amount: 200 # 标签最大数量

# 谷歌日历
calendar:
  calendar_id: # liuzhgq1995@gmail.com
  api_key: # bGl1emhncTE5OTVAZ21haWwuY29t
  orderBy: startTime
  offsetMax: 24 # Time Range
  offsetMin: 4 # Time Range
  showDeleted: false
  singleEvents: true
  maxResults: 250

自定义「logo,代码块,阅读进度条,书签」等

编辑 主题配置文件 _config.yml(复制到**next.yml**,方法2)

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

# 设置文章/页面的文本对齐方式.
text_align:
  # 取值: start | end | left | right | center | justify | justify-all | match-parent
  desktop: justify
  mobile: justify

# 缩小设备上的padding / margin缩进.
mobile_layout_economy: false

# Android Chrome header panel color ($brand-bg / $headband-bg => $black-deep).
android_chrome_color: "#222"

# 自定义Logo (不支持 scheme Mist)
custom_logo: /uploads/custom-logo.jpg

codeblock:
  # 代码高亮主题
  # 取值范围: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  highlight_theme: normal
  # 代码块复制按钮
  copy_button:
    enable: true
    # 显示文本复制结果.
    show_result: true
    # 取值: default | flat | mac
    style: mac

back2top:
  enable: true
  # 在侧边栏显示返回顶部.
  sidebar: false
  # 返回顶部箭头显示百分比.
  scrollpercent: true

# 阅读进度条
reading_progress:
  enable: true
  # 取值: top | bottom
  position: top
  color: "#FD6C6C"
  height: 3px

# 书签支持
bookmark:
  enable: true
  # 自定义书签的颜色.
  color: "#64CEAA"
  # If auto, 关闭页面或单击书签图标时保存阅读进度.
  # If manual, 只需点击书签图标来保存.
  save: auto

# GitHub corner.
github_banner:
  enable: true
  permalink: https://github.com/Liuzh25
  title: 欢迎访问我的GitHub主页

设置「字符间空格,图片缩放」

编辑 主题配置文件 _config.yml(复制到**next.yml**,方法2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# ---------------------------------------------------------------
# 第三方插件和服务设置
# ---------------------------------------------------------------

# 盘古支持,自动在中文和英文、数字、符号之间添加空格.
# For more information: https://github.com/vinta/pangu.js
pangu: true

# 图片缩放.
# For more information: https://github.com/francoischalifour/medium-zoom
mediumzoom: true

# 懒加载图像.
# For more information: https://github.com/ApoorvSaxena/lozad.js
lazyload: true

# 快速加载页面.
# Dependencies: https://github.com/theme-next/theme-next-pjax
pjax: true

添加「评论」

多评论支持在设置多个评论系统为true时启动

不推荐gittalk评论系统,仅说下如何设置

github设置内开发人员设置OAuth Apps

Application name： 应用名称，随意
Homepage URL： 网站URL，对应自己博客地址
Application description ：描述，随意
Authorization callback URL：# 网站URL，博客地址就好
点击注册，页面会出现其中Client ID和Client Secret在后面的配置中需要用到，到时复制粘贴即可：

编辑 主题配置文件 _config.yml(复制到**next.yml**,方法2)

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

# 多评论系统支持
comments:
  # 取值: tabs | buttons
  style: tabs
  # 选择默认显示的评论系统.
  # 取值: changyan | disqus | disqusjs | gitalk | livere | valine
  active: gitalk
  # If true, 记住访客选择的评论系统.
  storage: true
  # 懒加载所有评论系统.
  lazyload: true
  # 修改文本或命令的任何navs.
  nav:
    #disqus:
    #  text: Load Disqus
    #  order: -1
    #gitalk:
    #  order: -2
    
# 畅言
changyan:
  enable: false
  appid: cyvs0PiIk
  appkey: a868a79f4480491e7870339ebcbcd8b7
  #post_meta_order: 0

# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
  enable: false
  appid: S0ExOBWoQQYlRlqOT9dAhkTP-gzGzoHsz
  appkey: 7EKLluWPKYoO83sAWtUnwu0H
  notify: false # 邮件通知
  verify: false # 验证码
  placeholder: Just go go # 评论框占位符
  avatar: mm # 个人风格
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: true # 文章阅读统计
  comment_count: true # If false, 评论计数将只显示在发布页面，而不是主页
  recordIP: true # 是否记录评论者IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0
  
# Gitalk评论系统
# For more information: https://gitalk.github.io, https://github.com/gitalk/gitalk
gitalk:
  enable: true
  github_id: Liuzh25 # GitHub用户名
  repo: Liuzh25.github.io # 仓库名
  client_id: 415feb380f28706a3d9e # GitHub Application Client ID
  client_secret: 8e23474fec2292126310cebde51d90df21869e9e # GitHub Application Client Secret
  admin_user: Liuzh25 # GitHub的回购所有者和合作者，只有这些人可以初始化GitHub问题
  distraction_free_mode: true # 专注模式
  # Gitalk的显示语言取决于用户的浏览器或系统环境
  # 如果你想让每个访问你网站的人都看到统一的语言，你可以设置一个强制语言值
  # 取值: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN

参考:

  1. GitTalk评论配置_Madridcrls7的博客-CSDN博客

设置「百度统计分析」

  1. 登录 百度统计,以站长身份注册,进入管理-代码管理-代码获取页面
  2. 复制 hm.js? 后面那串统计脚本 id.

baidu_analytics

编辑 主题配置文件 _config.yml(复制到**next.yml**,方法2)

1
2
3
4
5
6
# ---------------------------------------------------------------
# 统计和分析
# ---------------------------------------------------------------

# Baidu Analytics
baidu_analytics: 2f80625c255f4d995edcdcf2ad0a5201

参考:

  1. 百度统计——领先的中文网站分析平台 (baidu.com)

添加「本地搜索」

编辑 主题配置文件 _config.yml(复制到**next.yml**,方法2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# ---------------------------------------------------------------
# 搜索服务
# ---------------------------------------------------------------

# 本地搜索
local_search:
  enable: true
  # If auto, 则通过更改输入触发搜索.
  # If manual, 按下输入键或搜索按钮触发搜索.
  trigger: auto
  # 每篇文章显示前n个结果，设置为-1显示所有结果
  top_n_per_article: 1
  # 将html字符串转换为可读字符串.
  unescape: false
  # P在页面加载时预加载搜索数据.
  preload: false

设置「动画」

设置顶部加载动画

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

设置背景动画

1
git clone https://github.com/theme-next/theme-next-three source/lib/three

编辑 主题配置文件 _config.yml(复制到**next.yml**,方法2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# ---------------------------------------------------------------
# 动画设置
# ---------------------------------------------------------------

# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
# For more information: https://github.com/HubSpot/pace
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: bounce
  
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: false
  three_waves: true
  canvas_lines: false
  canvas_sphere: false

博客配置进阶

添加「页面」

  1. 新建页面

    在Hexo 站点目录下。使用 hexo new page 新建一个页面，命名,例如

    1
    hexo new page link

  2. 设置页面类型

    在index.md中添加一行type,例如

    1
    2
    3
    4
    5
    6
    ---
    title: link
    date: 2021-04-27 09:57:29
    type: "link"
    comments: false
    ---

  3. 修改菜单项

    编辑 主题配置文件 _config.yml,在菜单中添加链接.(复制到**next.yml**,方法2)

  4. 为 categories,archives,tags,about,commonweal等菜单添加页面

设置「腾讯公益404页面」

腾讯公益404页面，寻找丢失儿童，让大家一起关注此项公益事业！

新建 404.html 页面，放到 /myblog/source 目录下，内容如下：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>404</title>
    <link rel="alternate" href="/atom.xml" title="机械细胞" type="application/atom+xml">
</head>
    <body>
        <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="返回"></script> 
    </body>
</html>

实现「鼠标点击效果」和添加「鼠标跟随粒子特效」

编辑 主题配置文件 _config.yml,添加动态配置项,并取消 body-end.swig 的注释(复制到**next.yml**,方法2)

我将其放在了动画效果下面

1
2
3
4
5
# 鼠标点击效果
cursor_effect:
  enabled: true
  type: fireworks  # fireworks：礼花 | explosion：爆炸 | love：浮出爱心 | text：浮出文字
  fairyDustCursor: true  # 鼠标跟随粒子特效

新建body-end.swig ,添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{# 鼠标点击特效 #}
{% if theme.cursor_effect.enabled and not is_index %}
  {% if theme.cursor_effect.fairyDustCursor %}
	<script src="/js/cursor/fairyDustCursor.js"></script>
  {% endif %}
  {% if theme.cursor_effect.type == "fireworks" %}
    <script src="/js/cursor/fireworks.js"></script>
  {% elseif theme.cursor_effect.type == "explosion" %}
    <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
    <script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
    <script src="/js/cursor/explosion.min.js"></script>
  {% elseif theme.cursor_effect.type == "love" %}
    <script src="/js/cursor/love.min.js"></script>
  {% elseif theme.cursor_effect.type == "text" %}
    <script src="/js/cursor/text.js"></script>
  {% endif %}
{% endif %}

将以下5个 JS 文件复制到目录 **/myblog/source/js/cursor/ **下

fireworks.js

explosion.min.js

love.min.js

text.js

fairyDustCursor.js

若http://localhost:4000/无效果,关闭本地预览, hexo clean ,hexo s.

参考:

  1. 给Hexo(next主题)博客加上stackexchange愚人节鼠标跟随特效
  2. Hexo博客+Next主题鼠标点击特效

修改「文章内链接文本样式」

编辑/myblog/source/_data/styles.styl,添加

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
if hexo-config("post_body_a.enable")
  .post-body
    a{
      color: convert(hexo-config("post_body_a.normal_color"));
      border-bottom: none;
      &:hover {
        color: convert(hexo-config("post_body_a.hover_color"));
        text-decoration: underline;
		}
    }

编辑 主题配置文件 _config.yml,添加动态配置项(复制到**next.yml**,方法2)

1
2
3
4
5
# 文章内链接文本样式  
post_body_a:
  enable: true
  normal_color: "#0593d3"
  hover_color: "#0477ab"

参考:

  1. 修改文章内链接样式 ｜ hexo_好好编程的博客-CSDN博客

修改「小代码块自定义样式」

编辑/myblog/source/_data/styles.styl,添加.

1
2
3
4
5
6
7
8
9
// 小代码块的自定义样式	
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
.highlight, code {
    border: 1px solid #d6d6d6;
}

添加「文章加密访问」

编辑 主题配置文件 _config.yml,取消 head.swig 的注释(复制到**next.yml**,方法2)

新建head.swig文件,填入下列代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    (function () {
        if ('{{ page.password }}') {
            if (prompt('请输入文章密码') !== '{{ page.password }}') {
                alert('密码错误！');
                if (history.length === 1) {
                    location.replace("http://www.jxxb.top"); // 这里替换成你的首页
                } else {
                    history.back();
                }
            }
        }
    })();
</script>

在文章标题添加password,如下

1
2
3
4
5
6
7
8
title: Hexo 搭配 GitHub 建立博客, 选用 nexT 主题
date: 2021-04-26 19:21:20
categories:
- [兴趣, 网站, 博客]
tags:
- Hexo
- Git
password: 123

设置「文章置顶」

修改 hero-generator-index 插件，把文件：node_modules/hexo-generator-index/lib/generator.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
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

在文章标题添加top,如下

1
2
3
4
5
6
7
8
9
title: Hexo 搭配 GitHub 建立博客, 选用 nexT 主题
date: 2021-04-26 19:21:20
categories:
- [兴趣, 网站, 博客]
tags:
- Hexo
- Git
password:
top: 100

添加「侧栏已运行时间」

编辑 主题配置文件 _config.yml,取消 sidebar.swig 的注释(复制到**next.yml**,方法2)

新建sidebar.swig文件,填入下列代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="days"></div>
    <script>
    function show_date_time(){
        window.setTimeout("show_date_time()", 1000);
        BirthDay=new Date("04/23/2021 23:24:52");
        today=new Date();
        timeold=(today.getTime()-BirthDay.getTime());
        sectimeold=timeold/1000
        secondsold=Math.floor(sectimeold);
        msPerDay=24*60*60*1000
        e_daysold=timeold/msPerDay
        daysold=Math.floor(e_daysold);
        e_hrsold=(e_daysold-daysold)*24;
        hrsold=setzero(Math.floor(e_hrsold));
        e_minsold=(e_hrsold-hrsold)*60;
        minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
        seconds=setzero(Math.floor((e_minsold-minsold)*60));
        document.getElementById('days').innerHTML="已运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
    }
function setzero(i){
    if (i<10)
    {i="0" + i};
    return i;
}
show_date_time();
</script>

在_data/styles.styl中添加

1
2
3
4
5
6
7
// 自定义的侧栏时间样式
#days {
    display: block;
    color: #19caad;
    font-size: 14px;
    margin-left: 15px;
}

最后,修改BirthDay=new Date("01/10/2017 12:34:56");, color: #fffa74;, margin-top: 15px;等等

添加「萌萌的宠物」

在git bash输入

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

在 hexo 的 _config.yml中添加参数(必须是站点配置文件)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-wanko
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

添加「“本文结束”标记」

编辑 主题配置文件 _config.yml,添加动态配置项,并取消 post-body-end.swig 的注释(复制到**next.yml**,方法2)

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

新建post-body-end.swig文件,填入下列代码

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

添加「APlayer音乐播放器」

download

点击访问Aplayer源码：GitHub Aplayer。下载到本地，解压后将dist文件夹复制到/mybolg/source文件夹下并重命名为aplayer。

music.js

新建/mybolg/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
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    listFolded: false,
    listMaxHeight: 90,
    lrcType: 3,
    audio: [
      {
        name: "暗涌",
        artist: '王菲',
        url: 'http://www.ytmp3.cn/down/52980.mp3',
        cover: 'http://p1.music.126.net/w8RFsMH8VJfPsBmVudYGsA==/109951163020569833.jpg?param=130y130',
		lrc: 'lrc.lrc'
      },
      {
        name: 'Wonderful U',
        artist: 'AGA',
        url: 'http://www.ytmp3.cn/down/51181.mp3',
        cover: 'http://p1.music.126.net/Blb_Gi0AJTWIEBLr189F4A==/18791753232142320.jpg?param=130y130',
      },
      {
        name: '浮夸',
        artist: '陈奕迅',
        url: 'http://www.ytmp3.cn/down/49639.mp3',
        cover: 'http://p1.music.126.net/Bl1hEdJbMSj5YJsTqUjr-w==/109951163520311175.jpg?param=130y130',
      }
    ]
});

源码参数解释APlayer 中文文档

audio对应的便是音频文件，所以音乐播放器需要播放的音乐是需要自己进行相关信息（如歌曲链接、歌词、封面等）的配置。这里放一个mp3音乐外链网站：http://up.mcyt.net/ ，搜索对应的音乐，然后复制url和右击封面图片链接粘贴到对应的位置上就行了。

编辑body-end.swig,将下列代码填入

1
2
3
4
<link rel="stylesheet" href="/aplayer/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/aplayer/APlayer.min.js"></script>
<script type="text/javascript" src="/aplayer/music.js"></script>

进阶修改

编辑body-end.swig,更改代码为

1
2
3
4
5
6
{# 音乐播放器 #}
<link rel="stylesheet" href="/aplayer/APlayer.min.css">
<div id="aplayer" class="aplayer"  data-id="2673736708" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>

<script type="text/javascript" src="/aplayer/APlayer.min.js"></script>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>

###参考:

  1. hexo4.0 - Next7.2.4 主题优化配置_xiaohu的博客-CSDN博客
  2. APlayer 中文文档
  3. 博客园 添加 aplayer - 游侠舒迟 - 博客园 (cnblogs.com)

使用tags-aplayer

编辑站点配置文件,添加

1
2
aplayer:
  meting: true

在文章中添加

1
{% meting "2673736708" "netease" "playlist" "theme:#FF0000" "mode:circulation" "mutex:true" "listmaxheight:800px" "preload:auto" %}

参考

  1. 官方文档
  2. Hexo添加Aplayer播放器

引用jquery

发现动态标签页没法使用了,查了一下,需要引用jquery.

编辑body-end.swig,在首行添加代码

1
2
{# 引用JQ #} 
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>

动态标签页

新建/myblog/source/js/src/dytitle.js,填入下列代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        $('[rel="shortcut icon"]').attr('href', "/TEP.png");
        document.title = '程序已暂停';
        clearTimeout(titleTime);
    }
    else {
        $('[rel="shortcut icon"]').attr('href', "/favicon.png");
        document.title = '程序运行中 ' + OriginTitile;
        titleTime = setTimeout(function () {
            document.title = OriginTitile;
        }, 2000);
    }
});

编辑body-end.swig,追加代码

1
<script type="text/javascript" src="/js/src/dytitle.js"></script>

雪花特效

编辑 主题配置文件 _config.yml,添加动态配置项(复制到**next.yml**,方法2)

1
2
3
4
5
6
# 雪花飘落特效
snow:
  enabled: true
  #type: hexo
  #type: circle
  type: sakura

编辑body-end.swig,添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 雪花飘落特效 -->
{% if theme.snow.enabled and not is_index %}
  {% if theme.snow.type == "hexo" %}
	<script type="text/javascript">
	  var windowWidth = $(window).width();
	  if (windowWidth > 480) {
		document.write('<script type="text/javascript" src="/js/src/hexo.js"><\/script>');
	  }
	</script>
  {% elseif theme.snow.type == "circle" %}}
	<script type="text/javascript">
	  var windowWidth = $(window).width();
	  if (windowWidth > 480) {
		document.write('<script type="text/javascript" src="/js/src/circle.js"><\/script>');
	  }
	</script>
  {% elseif theme.snow.type == "sakura" %}}
    <script type="text/javascript" src="/js/src/sakura.js"><\/script>
  {% endif %}
{% endif %}

在/myblog/source/js/src文件夹新建.js文件

hexo.js

circle.js

sakura.js

参考:

  1. Hexo中NexT主题添加雪花飘落效果_DonLex 的博客-CSDN博客
  2. html从零开始——为网页加入樱花飘落效果_不会java不改名的博客-CSDN博客_html樱花飘落代码复制

心知天气插件

  1. 注册心知天气

  2. 控制台-产品管理-添加产品(免费版)

  3. 新版插件-选择产品

  4. 配置插件-获取代码-将代码填入head.swig,填到其他位置也行

  5. 为插件配置动态加载项,如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!-- 心知天气 -->
    {% if theme.weather_widget.enabled and not is_index %}
    	<div id="tp-weather-widget"></div>
    	  <script>
    		(function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[f].q=a[f].q||[]).push(arguments)});a[f].l=+new Date();if(a.attachEvent){a.attachEvent("onload",b)}else{a.addEventListener("load",b,false)}}(window,document,"script","SeniverseWeatherWidget","//cdn.sencdn.com/widget2/static/js/bundle.js?t="+parseInt((new Date().getTime() / 100000000).toString(),10)));
    		window.SeniverseWeatherWidget('show', {
    		  flavor: "bubble",
    		  location: "WM7B0X53DZW2",
    		  geolocation: true,
    		  language: "zh-Hans",
    		  unit: "c",
    		  theme: "auto",
    		  token: "6f2b0ab7-4bda-4cbe-8ee0-50d827246f1c",
    		  hover: "enabled",
    		  container: "tp-weather-widget"
    		})
    	  </script>
    {% endif %}

  6. 编辑 主题配置文件 _config.yml,添加动态配置项(复制到**next.yml**,方法2)

    1
    2
    3
    #心知天气
    weather_widget:
      enabled: true

参考:

  1. 站点配置更新 | Don Lex
  2. 心知天气

打字特效

编辑 主题配置文件 _config.yml,添加动态配置项(复制到**next.yml**,方法2)

1
2
3
4
5
# 打字特效
typing_effect:
  enabled: true
  colorful: true  # 礼花特效
  shake: true  # 震动特效

编辑head.swig ,添加如下代码：

1
2
3
4
5
6
7
8
9
<!-- 打字特效 -->
{% if theme.typing_effect.enabled and not is_index %}
  <script src="/js/src/activate-power-mode.min.js"></script>
  <script>
    POWERMODE.colorful = {{ theme.typing_effect.colorful }};
    POWERMODE.shake = {{ theme.typing_effect.shake }};
    document.body.addEventListener('input', POWERMODE);
  </script>
{% endif %}

新建/myblog/source/js/src/activate-power-mode.min.js,添加下列代码

参考

  1. activate-power-mode

新建文章后自动打开

新建/myblog/scripts文件夹,在文件夹里新建任意名称.js文件,填入下列代码

1
2
3
4
5
6
var spawn = require('child_process').exec;

// Hexo 3 用户复制这段
hexo.on('new', function(data){
  spawn('start  "D:\Typora\Typora.exe" ' + data.path);
});

参考

  1. Hexo 添加文章时自动打开编辑器 | 苏寅 Blog (suyin-blog.club)
  2. Open markdown file after running hexo new? · Issue #1007 · hexojs/hexo (github.com)

标签云

使用命令行进行安装

1
npm install hexo-tag-cloud@^2.0.* --save

编辑/_data/sidebar.swig,在合适的位置填入代码 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--标签云 -->
{% if site.tags.length > 1 and theme.tag_cloud.enabled and not is_index %}
<script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
<script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script>
<div class="widget-wrap">
	<!--<div style="font-family: 'comic sans ms', courier; font-size: 16px;">Tag Cloud</div>-->
    <div id="myCanvasContainer" class="widget tagcloud">
        <canvas width="250" height="250" id="resCanvas" style="width:100%">
            {{ list_tags() }}
        </canvas>
    </div>
</div>
{% endif %}

编辑 主题配置文件 _config.yml,添加动态配置项(复制到**next.yml**,方法2)

1
2
3
4
5
6
7
8
9
# 标签云
tag_cloud:
  enabled: true
  textFont: Trebuchet MS, Helvetica
  textColor: '#333'
  textHeight: 25
  outlineColor: '#E2E1D1'
  maxSpeed: 0.5
  pauseOnSelected: true # true 意味着当选中对应 tag 时,停止转动

参考

  1. 站点配置更新 | Don Lex
  2. Hexo博客Next主题建立标签云hexo-tag-cloud及效果展示_AomanHao的博客-CSDN博客
  3. hexo-tag-cloud中文文档

自动备份 Hexo 博客源文件

同样,在 Hexo 根目录的 scripts 文件夹下新建一个 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
require('shelljs/global');

try {
	hexo.on('deployAfter', function() {//当deploy完成后执行备份
		run();
	});
} catch (e) {
	console.log("产生了一个错误<(￣3￣)> !，错误详情为：" + e.toString());
}

function run() {
	if (!which('git')) {
		echo('Sorry, this script requires git');
		exit(1);
	} else {
		echo("======================Auto Backup Begin===========================");
		cd('D:/Code/MyBlog');    //此处修改为Hexo根目录路径
		if (exec('git add --all').code !== 0) {
			echo('Error: Git add failed');
			exit(1);

		}
		if (exec('git commit -am "Form auto backup script\'s commit"').code !== 0) {
			echo('Error: Git commit failed');
			exit(1);

		}
		if (exec('git push origin source').code !== 0) {
			echo('Error: Git push failed');
			exit(1);

		}
		echo("==================Auto Backup Complete============================")
	}
}

注意,修改代码Hexo根目录路径与分支名

接着,在命令行输入,安装 shelljs 模块

1
npm install --save shelljs

关闭畅言统计

看着不爽

找到changyan.js,找到if post.comments,更改为if post.comments and theme.changyan.comment

随后编辑 主题配置文件 _config.yml(复制到**next.yml**,方法2)

1
2
3
4
5
6
7
# 畅言
changyan:
  enable: true
  appid: cyvs0PiIk
  appkey: a868a79f4480491e7870339ebcbcd8b7
  comment: false
  #post_meta_order: 0

其实不加也行

Tag Plugins

世间所有的相遇，都是久别重逢

世间所有的相遇，都是久别重逢

参考

  1. Tag Plugins | Hexo
  2. 内置标签 - NexT 使用文档 (iissnan.com)
  3. Hexo-NexT Tag 插件的使用 | 小丁的个人博客 (tding.top)

首字下沉

编辑style.styl,添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 首字下沉
.post-body>p:first-child::first-letter{
  float: left;
/* height: 32px;*/
  margin-top: 14px;
  margin-right: 6px;
  color: #555;
  font-size: 42px;
  line-height: 28px;
  font-style: normal;
  font-weight: 400;
  +mobile(){
    margin-top: 10px;
    margin-right: 4px;
    font-size: 26px;
    line-height: 20px;
  }
}

总结

  1. /myblog/source文件
    1. js文件
    2. pace three
  3. 编辑themes/next/languages/zh-CN.yml
  4. 站点配置文件 _config.yml
  5. 编辑changyan.js
    1. 设置「文章置顶」
  7. npm install hexo-symbols-count-time
  8. npm install -save hexo-helper-live2d
  9. npm install –save live2d-widget-model-wanko
  10. npm install –save shelljs
  11. npm install hexo-tag-cloud@^2.0.* –save
  12. spoiler插件文件夹
  13. npm install hexo-sliding-spoiler –save

参考

  1. img 403的解决办法
  2. 又见苍岚
  3. Hexo -13- 利用 Markdown 语法画 flowchart 流程图 | 又见苍岚 (zywvvd.com)
  4. Hexo -10- 使用PicGo配合七牛云图床实现Markdown图像无痛管理 | 又见苍岚 (zywvvd.com)
  5. Hexo-NexT 增加 canvas 粒子时钟 | 小丁的个人博客 (tding.top)
  6. HTML5 Canvas实现会跳舞的时间动画 | HTML5资源教程 (html5tricks.com)
  7. Hexo 加入豆瓣读书页面 | 小丁的个人博客 (tding.top)
  8. Hexo-NexT 实现相册 | 小丁的个人博客 (tding.top)
  9. Hexo NexT主题美化2.0 | Leaface (liaofuzhan.com)
  10. hexo史上最全搭建教程_Fangzh的技术博客-CSDN博客_hexo
  11. Archive | ookamiAntD’s Blog (yangbingdong.com)
  12. 【搜索优化】Hexo-next百度和谷歌搜索优化 | Ehcoo
  13. 打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化 | reuixiy (io-oi.me)
  14. Setting Up Image Storage | imgix Documentation

问题

  1. 无法更换天气位置

  2. 在文章标题下添加热门链接

  3. 侧栏的滚动条隐藏

  4. 长代码折叠

    使用**<details><summary></summary></details>**隐藏,如下例

    1
    2
    3
    4
    5
    6
    7
    <details>
    	<summary><strong>示例代码</strong></summary>
    	```python
    	//这里是示例代码
    	print("hello world")
    	```
    </details>

    效果展示

    示例代码 
    1
    2
    //这里是示例代码
    print("hello world")
  1. 启用谷歌日历
  2. 无法更换音乐位置
  3. 无法隐藏歌词
  4. 为博客添加一个首页
  5. .styl注释/*图标的引用*/
  6. .swig注释{# 雪花飘落特效 #}
  7. 所有的hexo/source内的js文件移到theme/source
  8. lib文件夹也一样移到theme/source
-------------本文结束感谢您的阅读-------------

欢迎关注我的其它发布渠道

}