发表于
字数统计 587 字 | 阅读时长 2 分钟

7、新建文章设置点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
# ！！！！！！！！！！
# 每一项的 : 后面均有一个空格
# 且 : 为英文符号
# ！！！！！！！！！！

title:
# 文章标题，可以为中文

date:
# 建立日期，如果自己手动添加，请按固定格式
# 就算不写，页面每篇文章顶部的发表于……也能显示
# 只要在主题配置文件中，配置了 created_at 就行
# 那为什么还要自己加上？
# 自定义文章发布的时间

updated:
# 更新日期，其它与上面的建立日期类似
# 不过在页面每篇文章顶部，是更新于……
# 在主题配置文件中，是 updated_at

permalink:
# 若站点配置文件下的 permalink 配置了 title
# 则可以替换文章 URL 里面的 title（文章标题）

categories:
# 分类，支持多级，比如：
# - technology
# - computer
# - computer-aided-art
# 则为 technology/computer/computer-aided-art
# （不适用于 layout: page）

tags:
# 标签
# 多个可以这样写 [标签1,标签2,标签3]
# （不适用于 layout: page）

description:
# 文章的描述，在每篇文章标题下方显示
# 并且作为网页的 description 元数据
# 如果不写，则自动取 <!-- more -->
# 之前的文字作为网页的 description 元数据

keywords:
# 关键字，并且作为网页的 keywords 元数据
# 如果不写，则自动取 tags 里的项
# 作为网页的 keywords 元数据

comments:
# 是否开启评论
# 默认值是 true
# 要关闭写 false

layout:
# 页面布局，默认值是 post，默认值可以在
# 站点配置文件中修改 default_layout
# 另：404 页面可能用到，将其值改为 false

type:
# categories，目录页面
# tags，标签页面
# picture，用来生成 group-pictures
# quote？
# https://io-oi.me/tech/hello-world/

photos:
# Gallery support，用来支持画廊╱相册，用法如下：
# - photo_url_1
# - photo_url_2
# - photo_url_3
# https://io-oi.me/tech/hello-world/

link:
# 文章的外部链接
# https://io-oi.me/tech/hello-world/

image:
# 自定义的文章摘要图片，只在页面展示，文章内消失
# 此项只有参考本文 5.14 节配置好，否则请勿添加！

sticky:
# 文章置顶
# 此项只有参考本文 5.15 节配置好，否则请勿添加！

password:
# 文章密码，此项只有参考教程：
# http://shenzekun.cn/hexo的next主题个性化配置教程.html
# 第 24 节，配置好，否则请勿添加！
# 发现还是有 bug 的，就是右键在新标签中打开
# 然后无论是否输入密码，都能看到内容

发表于 | 分类于
字数统计 266 字 | 阅读时长 1 分钟

创建文章(图文并茂的), 注意点: 要创建图文并文章需要修改Hexo下的_config.yml文件和安装一个组件。

1、修改_config.yml文件

修改参数为：true, 具体如下所示：

1
post_asset_folder: true

2、安装组件(hexo-asset-image)：

使用如下命令安装：

1
npm install https://github.com/xcodebuild/hexo-asset-image --save

必须要用github的全路径安装，否则会有问题。

3、创建文章

通过命令或者是在_post中直接创建md文件和文件夹

方式一：

1
hexo new blog-install

会生成一个blog-install文件夹和blog-install.md的文件

方式二:
直接通过手动创建文件和文件夹

4、编辑文章并且插入图片

-w1010

在通过命令发布，在浏览器上访问

1
2
3
hexo clean
hexo g 
hexo d

浏览器上访问可以看到成功了
-w1083

到此创建图文文章就完成了

5、个人推荐工具结合使用

建议本地写文章直接使用MWeb进行编写， 在导出md，在将其直接放到hexo的source/_ports目录下

发表于 | 分类于
字数统计 230 字 | 阅读时长 1 分钟

1、注册账号和安装

​官网地址：https://www.livere.com/ 是韩国人的，首先是注册一个账号。 登录成功后选择 ：安装
​ -w898
点击现在安装，在填写域名和用途就可以了

现在安装，立刻会跳转到代码生成页面，提供给嵌入到不同页面的代码，代码里含有data-uid
-w980

2、hexo进行配置

在next主题的_config.yml文件中找到如下的配置
-w769
启动you uid改成你申请的即可。

3、本地部署验证：

本地发布执行hexo s 部署
-w679

4、注意点：

来得力这个评论系统隔段时间就会出现韩国广告，需要进行隐藏，具体操作如下：
博客根目录/themes/layout/_scripts/third-party/comments/目录中找到livere.swig文件添加如下代码

1
2
3
<style>
        #taboola-livere { display: none;}
</style>

详细截图如下：
-w770

发表于 | 分类于
字数统计 159 字 | 阅读时长 1 分钟

github不支持密码改为token设置操作

1）clone 仓库提示不支持密码：

1
2
3
4
5
6
7
192:blog zhongzunfa$ git clone https://github.com/zhongzunfa/Hexo.git
Cloning into 'Hexo'...
Username for 'https://github.com': zhongzunfa
Password for 'https://zhongzunfa@github.com':
remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.
remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information.
fatal: Authentication failed for 'https://github.com/zhongzunfa/Hexo.git/'

-w915

  1. 解决方案一：
    在github中， 找到setting，滑到最后找到Developer settings
    在选择Personal access tokens
    -w971
    创建完成后，在clone代码后，提示输入密码时，就输入生成的token即可.

3）解决方案二:

未完成。

发表于 | 分类于
字数统计 252 字 | 阅读时长 1 分钟

1、执行hexo -v出现如下错误：

Solve Error: Console expects a writable stream instance
是因为版本不匹配导致，必须升级到大于要在10.0版本以上

解决方案：
更新node版本，首先是安装n模块

1
npm install -g n

安装最新的稳定版本

1
n stable

上述的更新方式特别卡，推荐使用地址下载， 推荐使用迅雷辅助下载最好。
https://nodejs.org/zh-cn/
-w767
下载完成安装，查看版本是否已经生效
-w253

2、切换主题出现问题

首先是进入站点目录：

1
2
cd /Users/zhongzunfa/study/blog/Hexo
git clone https://github.com/iissnan/hexo-theme-next themes/next

切换到稳定的tag上，这里切换到

1
git checkout tags/v5.1.0

修改主目录下的_config.yml文件的主题为：

1
theme: next

重新启动后出如下图所示
-w1330

主要原因是因为在hexo在5.0之后把swig给删除了需要自己手动安装。
重新安装解决：

1
npm i hexo-renderer-swig

重新部署hexo s –debug

-w1071

发表于 | 分类于
字数统计 1.5k 字 | 阅读时长 7 分钟

主题设置

1、创建分类和标签

在站点文件夹下执行命令创建分类：

1
hexo n page categories

修改source\categories文件夹下index.md文件（必须要修改）

1
2
3
4
5
6
---
title: categories
date: 2022-05-29 23:44:15
type: categories
layout: categories
---

在站点文件夹执行命令创建标签：

1
hexo n page tags

修改source\categories文件夹下index.md文件(必须要修改)

1
2
3
4
5
6
---
title: tags
date: 2022-05-29 23:42:54
type: tags
layout: tags
---

2、本地搜索设置

首先在站点根目录，先安装hexo-generator-search插件， 在进行配置

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
# 本地搜索，需要安装 hexo-generator-search
# 站点根目录执行：npm install hexo-generator-searchdb --save
local_search:
  enable: true
  search button
  # auto表示改变输入就自动触发搜索
  # manual表示按下回车键或搜索按钮才触发搜索
  trigger: auto
  # 这里的数字n表示显示每篇文章搜索到的n个结果
  # -1表示显示每篇文章搜索到的全部结果(不建议)
  top_n_per_article: 1

3、文章启用字数统计和阅读时长

在站点根目录安装hexo-wordcount插件

1
npm i --save hexo-wordcount

接下来进行配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
# 文章字数展示设置
post_wordcount:
  # 文本显示
  item_text: true
  # 文章字数统计
  wordcount: true
  # 阅读时长
  min2read: true
  # 站点总字数统计
  totalcount: false
  # 该post_wordcount的所有设置另起一行显示
  separated_meta: true

同时调整一下显示格式：
在themes/next/layout/_macro/post.swig中修改具体如下：
直接搜索post.wordcount、post.min2read

1
2
3
4
5
6
7
<span title="{{ __('post.wordcount') }}">
    {{ wordcount(post.content) }} 字
</span>

<span title="{{ __('post.min2read') }}" }}">
  {{ min2read(post.content) }} 分钟
</span>

4、设置左侧的头像显示

编辑主题的_config.yml，新增字段 avatar，值设置成头像的链接地址。

完整的互联网URL例如：https://avatars1.githubusercontent.com/u/32269?v=3&s=460

站点内的地址例如：
/uploads/avatar.jpg 需要将你的头像图片放置在 站点的 source/uploads/（可能需要新建uploads目录）
/images/avatar.jpg 需要将你的头像图片放置在 主题的 source/images/ 目录下。

具体配置如下(这里我用的是一个全的互联网地址)：

1
2
3
4
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
avatar: https://avatars.githubusercontent.com/u/14095698?s=400&u=f11b97c018052a2af38bb56bbd81471c057003f4&v=4

5、设置社交和社交图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
social:
  GitHub: https://github.com/zhongzunfa
  微信: https://www.yourname.com/weixin
  CSDN: https://blog.csdn.net/zhongzunfa


# Social Links Icons
# Icon Mapping:
#   Map a menu item to a specific FontAwesome icon name.
#   Key is the name of the item and value is the name of FontAwesome icon. Key is case-senstive.
#   When an globe mask icon presenting up means that the item has no mapping icon.
social_icons:
  enable: true
  # Icon Mappings.
  # KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome
  GitHub: github
  CSDN: leaf

注意点：在这个地址https://fontawesome.com/v5/cheatsheet 中的图标都可以，直接写上名称即可， 但是发现一个问题，有些写上还是不行具体的原因未知， csdn的就是，使用了自定义的，从地址上找的一个
-w768

6、设置打赏公共能：

1
2
3
4
# reward
reward_comment: 如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg

将微信和支付宝的收款码, 放到images目录下
-w490

7、设置访问人数、总数等

首先找到如下位置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: 访客数
  site_uv_footer: 人
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: 总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i> 阅读数
  page_pv_footer:

将enbale的配置项改成true, 同时修改对应的标题等，具体如上所示。
此外还需要修改不算子的地址, 找到/theme/next/layout/_scripts/_third-party/analytics/busuanzi-counter.swig文件
-w1205
修改成下述地址

1
https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js

但是经过实验发现该js下载很慢，于是决定将js下载放在

注意点， 在本地显示的是一个乱序的数字，发布后显示就正常了。

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

打开 themes/next/layout/_partials/footer.swig ,具体如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="copyright" >
  {% set current = date(Date.now(), "YYYY") %}
  &copy; {% if theme.since and theme.since != current %} {{ theme.since }} - {% endif %}
  <span itemprop="copyrightYear">{{ current }}</span>
  <span class="with-love">
    <i class="fa fa-{{ theme.authoricon }}"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">{{ config.author }}</span>
</div>

{% if theme.copyright %}
<div class="powered-by">
  {{ __('footer.powered', '<a class="theme-link" href="https://hexo.io">Hexo</a>') }}
</div>

<div class="theme-info">
  {{ __('footer.theme') }} -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.{{ theme.scheme }}
  </a>
</div>

-w859
删除红框框住部分。

9、浏览页面显示当前浏览进度

编辑next主题下的_config.yml，搜索关键字scrollpercent将值改为 true。具体如下

1
2
 # Scroll percent label in b2t button
scrollpercent: true

10、分享功能

编辑next主题下的_config.yml，搜索关键字needmoreshare2 修改为下面设置，具体如下：

占时搁置。

11、配置首页显示摘要

1）写描述，如下所示:

1
2
3
4
5
6
---
title: zzf
date: 2022-06-05 12:16:32
tags:
description: 首次创建文章显示。
---

主要是加上了description这个值。
效果：
-w676

2）通过设置标签:
在需要进行显示阅读全文的地方写上more标签
-w500
效果
-w655

发表于 | 分类于
字数统计 741 字 | 阅读时长 2 分钟

1、创建仓库

首先打开github, 点击new创建一个git仓库，需要注意点是仓库的前置必须要和用户名一致，例如我的用户名是zhongzunfa, 那么创建的仓库必须是
zhongzunfa.github.io ，具体如下所示

创建完成，创建文件index.html输出如下内容：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zzf</title>
</head>
<body>
    <h1>hello</h1>
    <p>hello world</p>
</body>
</html>

在点击setting文件，在点击pages可以看到

1
Your site is published at https://zhongzunfa.github.io/

说明已经发布创建个人站点的git仓库已经创建完成，接下来在浏览器上进行验证， 直接用上面的地址访问可以看hello world显示。
-w381

2、仓库中创建CNAME并且进行绑定

  1. 首先是配置腾讯云的绑定信息
    -w1157
    注意点：配置是为zhongzunfa.github.io（配置自己对应的即可）

2）配置github相关的信息
进入github博客仓库，点击setting，在左侧菜单中找到Pages点击，
先是选择/root，接着在Custom domain中写入对应的应
-w1080
等待显示，DNS check successful成功即可。

3）接下来访问域名
-w708

3、hexo和github中的仓库进行绑定

先配置发布信息:

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

接下来安装插件：

1
npm install hexo-deployer-git --save

在执行命令：

1
2
3
4
hexo clean && hexo g

// 注意如果提示密码问题需要去github上设置token
hexo d

发布完看一下是否将之前存在的CNAME给覆盖替换掉了，如果不在需要重新新建，为了保证不被替换，在source目录下创建一个CNAME文件，
并且输入域名即可。
-w742

4、github最新创新点(不一定要和用户名一样才能映射)

可以配置多个自定义域名的映射，在不同的仓库中，比如我就做了两个映射
具体如下图所示：
-w1207
it-space仓库

-w1047
zhongzunfa.github.io仓库
通过上述的配置后， 两个仓库都可以进行访问。

注意点1：是在custom domain中添加域名后，需要删除仓库中默认自动创建的CNAME文件，在重新创建CNAME文件， 在添次添加域名才会生效，具体不是很清楚是什么问题。

注意点2: 是在域名解析的时候配置的cname对应的值都是zhongzunfa.github.io, 具体如下图所示
-w1027

-w1071

5、创建一个新的仓库存放源代码

创建一个Hexo仓库，将数据提提交到上面就可以的。
-w970

如果之前存在了文件夹内容， 就先将其打包一下，删除文件夹， 在clone 仓库下来，在重新解压进去，在提交到GitHub即可

-w556

注意点 : 存储放源代码和发布的仓库是不冲突的可以同时存在的。

发表于 | 分类于
字数统计 101 字 | 阅读时长 1 分钟

next主题安装

首先进入站点目录：例如

1
/Users/zhongzunfa/xxx/blog/Hexo

在执行如下命令：

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

在站点配置文件 _config.yml 中修改主题名称

1
2
## Themes: https://hexo.io/themes/
theme: next

重启一下,重新访问：

1
hexo s -debug

到此主题安装就完成了。 主题详细配置请看next主题配置。

发表于 | 分类于
字数统计 266 字 | 阅读时长 1 分钟

1、安装git

首先是安装git, mac参照文档进行操作即可。
https://git-scm.com/download/mac

2、下载安装node.js

接下来是node.js的安装，打开官网下载相关版本安装即可。
https://nodejs.org/en/

下载安装即可。

3、环境测试和验证

node.js的检查

1
node -v

npm的检查

1
npm -v

Git的检查

1
git --version

上述中显示相关的版本信息，说明都已经安装成功了

4、hexo的安装

进入站点目录进行安装(注意)

1）使用npm安装Hexo-cli
在命令行中执行下面命令

1
npm install -g hexo-cli

执行可能会看到WARN，直接忽略就可以了。

2）在使用npm安装Hexo
在命令行中执行

1
npm install hexo --save

在使用命令检查是否安装成功

1
hexo -v


说明安装成功了。

3）初始化Hexo
在终端中输入：

1
hexo init

接着在输入：

1
npm install
  1. 体验Hexo
1
hexo g

进行部署和调试：

1
hexo s -debug

5）打开浏览器输入：
http://localhost:4000/

到此基本上就安装完了。

0%