Dragon Add - 欢迎使用代理访问本站 - Hexo

我的常用Hexo指令

dragonadd — Mon, 26 Jul 2021 22:36:00 +0800

既然是基于Hexo搭建的博客，那么就必须要用到Hexo的指令啦！

以下是分享我认识的以及我常用的指令

hexo 命令：

hexo new "postName" #新建文章

hexo new page "pageName" #新建页面

hexo generate #生成静态页面至public目录

hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）

hexo deploy #部署到GitHub

hexo help # 查看帮助

hexo version #查看Hexo的版本

缩写：

hexo n = hexo new

hexo g = hexo generate

hexo s = hexo server

hexo d = hexo deploy

在Hexo里面：

复制，ctrl+ins
粘贴，shift+ins

我的常用Hexo指令

新开文章：

hexo new "我的常用Hexo指令"

一般发布文章或者修改博客后需要这些操作：清除缓存>生成静态文件>启动服务器，测试没问题后再部署。因此我们可以输入以下命令：

hexo clean && hexo g && hexo s

最后部署到GitHub:

hexo d

最后，还有一个指令也用得很多，我懒得打都是直接复制，那就是在Next主题下，给文章添加"阅读全文"的指令：

把它插入你文章指定的位置，那么指令前面的文字就会显示在文章预览那里，可以起到前言的作用，读者点阅读全文进入文章主页就可以对整篇文章进行阅读了。

————

关于原博客next主题的优化与定制(不再更新)

dragonadd — Mon, 26 Jul 2021 22:16:00 +0800

[scode type="red"]注意，此文适合版本8.0以上Next主题，不再更新，博主已弃坑，由 Hexo 转为 Typcho[/scode]

这篇文章并不是教程分享向的博文，写得不是很详细，文字排版也没有完全美化、没有参考图片。对于找到这里的你，我要说声抱歉。

本文纯是博主对于自己博客美化所作的步骤顺序，出发点是为了在优化过程中若出现错误可以撤销上一步的操作。博主自己每做一步就hexo clean && hexo g && hexo s本地预览一下，如果没有出现错误就上传，否则就撤销操作。

所以我做了什么？

1.我做了tag ，我创建了关于，分类.

2.我修改了社交

打开主题配置文件，找到social字段，修改

3.添加了本地搜索

首先输入指令下载：

npm install hexo-generator-searchdb --save

修改站点配置文件，添加代码：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

然后打开主题配置文件，搜索 local_search，修改 enable 为 true

4. 添加红心特效

如何创建一个JS文件(建立一个txt文件更改后缀名为js，建立完成.)，用记事本打开.swig文件。(OS:记事本真是永远的神)。修改了，好像没有作用。（我学会了，我懒得改序号了，教程见第28点

5. 显示busuanzi博客访客/访问次数统计/Github标识

Github标识：在 GitHub Corners 选择自己喜欢的按钮样式并复制代码，将https://your-url换成自己的链接，将改好的代码粘贴到themes/next/layout/_layout.swig文件中

下面一行。（OS:但我在文件中没有找到我的GitHub，我之前用了其他方法，这个方法是后来总结。）

6. 隐藏网页底部 powered By Hexo / 强力驱动

打开 themes/next/layout/_partials/footer.swig，找到：div class="powered-by，把这段代码首尾分别加上：，或者直接删除.

(后续我了解到，最新版next可以在next文件中的其他文件打开开关就行)

7. 显示当前浏览进度

打开主题配置文件，找到back2top:，把 scrollpercent: 的false 改为 true

8. 打开阅读进度条

打开主题配置文件，找到reading_progress:，把false 改为 true

9. 文章置顶功能

1. 卸载原插件和安装置顶插件，执行下面两行命令：

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top –save

2. 然后在需要置顶的文章的Front-matter中加上top: true

3. 设置置顶标志：

打开：/themes/next/layout/_macro目录下的post.swig文件，定位到

标签下，插入如下代码：

{% if post.top %}
    
    置顶
    |
{% endif %}

3.1 如果你置顶了多篇，怎么控制顺序呢？设置top的值（大的在前面），比如：

title: a
top: 1

10. 文章字数统计和阅读时长估计

根目录输入指令下载插件：

npm install hexo-symbols-count-time

11. 头像放左右Pisces或Gemini方案，

打开themes/next/下的_config.yml，查找sidebar，将想要的方案打开。

（在这里出现了一些问题。不知所以然就改好了。但是我被惊出了一身汗，因为我没有备份配置文件就立刻改了，而且我还是在改了12点后预览才发现无法配置。于是我在11、12两点反复改动。我下次改一次之前必备份一次，并且只改一点，绝不多改。太可怕了。后果很严重，严重到关站大吉。）

12. 显示版权信息

打开themes/next/下的_config.yml，查找creative_commons，将post的false改为true即可显示版权信息

13. 为博客加上看板娘

Git输入下方代码：

npm install -save hexo-helper-live2d

然后在根目录的配置文件 _config.yml中添加参数：

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-<你喜欢的模型名字>
  display:
    position: right
    width: 150
    height: 300
  mobile:
show: true

（预览图）
在站点目录下建文件夹live2d_models，再在live2d_models下建文件夹<你喜欢的模型名字>,
再在<你喜欢的模型名字>下建json文件，文件名为：<你喜欢的模型名字>.model.json
安装模型。在命令行（即Git Bash）运行以下命令即可：
npm install --save live2d-widget-model-<你喜欢的模型名字>
OS:1. 在写名字的时候，记得把<>删掉

想看预览图来这里看：https://blog.csdn.net/as480133937/article/details/100138838 (自己找到那个为博客添加妹子的位置。)

14. 使博客底部的爱心跳动

打开主题配置文件，搜索animated:，把false改为true

15. tag 样式# 改为带图标

打开主题配置文件，找到tag_icon:，把false改为true

16. 文章结束语标语

打开 themes/next/layout/_macro/post.swig 文件，找到文章结束语标语END POST BODY位置，复制以下代码，将其插入。


    {% if not is_index %}
        
            ----- 本文结束  感谢您的阅读 -----
            
    {% endif %}

17. 主题样式调色，

打开\themes\next\source\css\_variables\base.styl，找到colors for use across theme.，可以参考以下一位博主的修改，该主题为紫色。

// Colors
// colors for use across theme.
// --------------------------------------------------
$whitesmoke   = #daa5ff; // 菜单栏当前菜单，归档线条
$gainsboro    = #e3c6f0; // 菜单栏头像边框，分割线。单行代码块
$gray-lighter = #cccedd; // 菜单栏子标题
$grey-light   = #ab2acc; // 菜单栏文章计数器
$grey         = #6a2dbb; // 时间节点
$grey-dark    = #67439a; // 菜单栏博主卡片区文字【描述|日志|分类|标签】
$grey-dim     = #9059bf;
$black-light  = #3d155a;  // 文章正文颜色
$black-dim    = #5b2293;
$black-deep   = #6947bb;  // 菜单栏背景

补充: 以上#数字字母为RGB的16进制

18. 背景动画，

Canvas-nest风格、JavaScript 3D library风格、Canvas-ribbon风格。

我终于知道这是怎么弄的！！网上很多教程都没有更新。我走了很多弯路。原来我所用的next版本都没有下载这些动画包。需要自己下载。链接就在注释中``# Dependencies 项后面。

例如我下载第一种，即选择Canvas-nest风格，在主目录执行：

git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

然后打开themes/next/下的_config.yml文件，搜索Canvas-nest，将canvas_nest的中enable值改为true即可。如果没有这段代码，需要自行添加：

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
  enable: true
  onmobile: true # display on mobile or not
  color: "0,0,255" # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # the number of lines

同理，其他两种动画包也要自行下载，下载指令为：
Git clone 动画链接 themes/next/source/lib/(动画链接后面next-后面的名称)
请自行领悟参考我下载Canvas-nest风格的指令
(至2021.7.17，我的博客用了两个动画，nest和ribbon

19. 去掉文章目录标题的自动编号。

我们自己写文章的时候一般都会自己带上标题编号，但是默认的主题会给我们带上编号，很是别扭，如何去掉呢？

在主题配置文件中找到toc属性，将其中的number属性设置成false，如下：

toc:
  enable: true
  number: false
  wrap: false

20. 加头像

把你要加的头像复制粘贴到\themes\next\source\images文件下，名称为avatar.gif（后缀可为jpg，自己变通），在主题配置文件_config.yml里面找到avatar，以下：

avatar:
  url: /images/avatar.jpg  # 设置头像资源的位置
  rounded: true            # 开启圆形头像
  opacity: 1               # 不透明的比例：0就是完全透明
  rotated: false           # 不开启旋转

21. 不蒜子统计与live2D看板娘冲突问题

使用next新的主题时，在hexo中添加live2D看板娘后next原生自带的不蒜子统计会失效，解决方法：

1). 卸载live2d可以解决问题：

npm uninstall --save hexo-helper-live2d

2). 看板娘怎么可以卸载？？？？？绝对不能接受！！！

a. 关闭next原生不蒜子

打开主题配置文件，搜索busuanzi_count:，把false改为true

b. 修复主页总数统计

在Hexo根目录/themes/next/layout/_partials/文件夹中修改 footer.swig，在最后一行前加入代码：


 
         
 
           
                 
           
           总访客  人
        |
           
                 
           
        访问总量  次
        {{- next_inject('footer') }}

c. 修复文章统计

开启主题配置文件 - valine 评论中的 visitor 开关来替代不蒜子的统计功能。

22. 修改文字模板

在根目录下，找到scaffolds/post.md，将其修改为你需要的模式，新建文章就是模板的形式了,可以参考我的:

title: {{ title }}
date: {{ date }}
categories: 
tags: 
top:

23. 增加赞赏功能

在微信、支付宝中拿到赞赏码、付款码图片，放入themes/next/source/images文件夹中。比如我的是 wechatpay.jpg和alipay.jpg，修改主题配置文件，找到reward_settings:，打开enbale，填写comment，在下面的reward:，填写图片路径。

如果你不喜欢Donate、 Wechat Pay 和 Alipay这样的字眼，可以在 themes/next/languages/zh-CN.yml 中自行翻译。

24. 啊啊啊啊啊，我终于搞定圆角和阴影了

1) 圆角

首先把主题配置文件，取消 variables.styl 的注释（即去掉#），然后在根目录source创立_data文件夹，然后创建记事本variables.styl，在里面输入以下代码：

// 圆角设置
$border-radius-inner     = 20px 20px 20px 20px;
$border-radius           = 20px;

2) 阴影

在根目录source的 _data文件夹创建记事本style.styl，在里面输入以下代码：

 // 主页文章添加阴影效果
.post {
   margin-top: 60px;
   padding: 20px;
   margin-bottom: 60px;
   -webkit-box-shadow: 0 0 5px rgba(120, 128, 114, 1.5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

25. 添加背景图片

把想设置的背景放入/themes/next/source/images中，命名为background.jpg。在根目录的source文件夹下的_data/styles.styl，输入以下代码：

body {
              background:url(/images/background.jpg);
              background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:100% 100%;
}

(记得在主题_config.yml文件中打开styles.styl的注释。

26. 博客内容透明化

在根目录的source文件夹下的_data/styles.styl，输入以下代码：

//博客内容透明化
//文章内容的透明度设置
.content-wrap {
  opacity: 0.9;
}

//侧边框的透明度设置
.sidebar {
  opacity: 0.9;
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.9;
}

27. 修改文章链接样式为蓝色高亮显示

找到文件 themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css样式，：

// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

28. 啊啊啊啊我终于学会了添加鼠标点击特效了！！

1) 第一个是烟花特效：

a. 首先创建文件，写代码

在themes/next/source/js/src (如果没有src那就去创建一个啊！)里面建一个叫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

`b. 继续写代码`

然后打开themes/next/layout/_layout.swig,在上面写下如下代码：

{% if theme.fireworks %}

   

   

   

{% endif %}

`c. 最后打开开关`

打开主题配置文件，在里面最后写下：

# Fireworks
fireworks: true

`2) 另外一个爱心特效：`

`a. 首先创建文件，写代码`

在/themes/next/source/js/src下新建文件 clicklove.js ，接着把下面的代码拷贝粘贴到 clicklove.js 文件中：

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e

`b. 添加注释`

然后在\themes\next\layout\_layout.swig文件末尾添加：

OS: 记住！！！这两种特效可以同时选，如果要只选爱心，要把烟花fireworks的true改为false。

(目前没有做过如何把爱心关掉)

`29. 侧边栏推荐阅读`

打开主题配置文件修改成这样就行了 (links 里面写你想要的链接)：

（参考我的）

# Blog rolls
links_settings:
  icon: fa fa-link
  title: 推荐阅读
  # Available values: block | inline
  layout: block

links:
  提问的智慧: https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

`31. 关于主页分页问题`

等到我文章足够多的时候来看看：

https://blog.csdn.net/weixin_43941364/article/details/104166967

`32. 优化文章永久链接为数字编号`

`1) 在博客根目录（执行hexo命令的地方）安装插件：`

npm install hexo-abbrlink –save

`2) 打开博客根目录下的站点配置文件_config.yml，修改如下配置：`

#permalink: :year/:month/:day/:title/
#permalink_defaults:
permalink: posts/:abbrlink/
abbrlink:
  alg: crc32 #support crc16(default) and crc32
  rep: dec   #support dec(default) and hex

不同算法和进制生成不同的格式，以下为说明：

crc16 & hex
https://post.zz173.com/posts/66c8.html

crc16 & dec
https://post.zz173.com/posts/65535.html
 
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

crc32 & dec
https://post.zz173.com/posts/1690090958.html

`3) 使用hexo clean && hexo g重新生成博客，该插件会在每篇文章的开头增加内容：`

abbrlink: （随机生成你选择的格式）

这个字符串就是这篇文章的唯一标识，无论修改标题还是发布文章都不会改变。

`33. 主动被谷歌搜索引擎收录`

我终于搞定了。在我拥有自己的域名后。

看篇文章吧。这位博主写得真的太棒了。《Hexo 博客主流搜索引擎收录详细指南》

`1) 首先安装插件：`

npm install hexo-generator-sitemap --save

安装插件以后，执行 hexo g 命令，即可在 public 文件夹下找到新生成的 sitemap.xml 文件。

`2) 验证域名`

登陆 Google Search Console 可以看到有两种资源类型，因为现在我已经有自己的域名了，是没有任何前缀的裸域名，所以我选择「网域验证」。（还没有自己的域名的，很抱歉，建议继续谷歌其他的教程。

进行「网域验证」，则需要通过 DNS 记录来验证域名所有权。复制这一步中出现的 TXT 记录值，然后进到域名解析服务商的管理界面，比如我的是阿里云云解析DNS/域名解析/解析设置，添加记录—记录类型为TXT，主机记录为@，解析线路为境外。添加解析成功后，回到Google Search Console，点击「验证」按钮，即可完成验证。

`3) 提交站点地图`

验证域名所有权之后，进入 GSC 后台管理界面，输入 sitemap 地址并点击提交即可（参考我的https://自己的域名/sitemap.xml）。谷歌的收录是比较快速的，两天左右就能够在谷歌通过 site:博客网址的方式检索到收录结果了。

`34. 我成功把博客部署到 Coding上，可以不用买域名。`

`35. ...(未完待续)`

`99. 警醒自己`

“博客的意义还是在于不断创作内容，而不是折腾博客框架与配置。”

`那些我在学习过程中遇到的开拓者`

......



基于Hexo + Github Pages 免费搭建博客
dragonadd — Mon, 26 Jul 2021 12:09:00 +0800

title: 基于Hexo + Github Pages 免费搭建博客
category: 博客
tags:
Hexo
博客
abbrlink: 4022353000
date: 2021-07-19 13:42:57
"当你不知道该写什么的时候就写如何搭建博客"
前言：博客有非常多的第三方平台，比较早的有博客园、CSDN，现有简书、掘金、知乎专栏 以及微信公众号等等。我们可以直接在上面发表内容，交互人性化，能够被搜索引擎检索到。
但是这总归是别人的平台，写作内容或多或少会受限，这时候就希望能有自己的博客。于是鄙人经过不停谷歌，最终采用了 Hexo + Github Pages 的方式搭建自己的博客。
此方法全过程需要有一定的动手能力与时间、耐心，工具仅仅需要一台能够科学上网的电脑即可。
Github Page 是 Github 提供的一种免费的静态网页托管服务可以用来托管博客、项目官网等静态网页。
参考大佬：
【效率为王】超详细 Hexo + Github Pages 博客搭建教程
超详细Hexo+Github Page搭建技术博客教程：
hexo搭建个人博客
Windows下，Hexo+GitHub搭建博客
从零开始搭建个人博客（超详细）
韦阳的博客
技术拆解官
总结
注意！！此总结并不是教程分享向的博文，写得不是很详细，文字排版也没有完全美化、没有参考图片。强烈建议你参考推荐的大佬链接
一. 先注册一个GitHub账号，并且按照格式要求创建你的仓库。
确保你的仓库是public。
仓库名一定要是：用户名.github.io
二. 下载git。
参考：https://www.huaweicloud.com/articles/a309afc2a9bcf498763ab43770993587.html
三. 配置git与其他工作。
1. 桌面右键打开 Git Bash，分别输入以下指令，将git与GitHub账号绑定。
git config --global user.name "github 用户名"
git config --global user.email "github 注册邮箱" 
2. 接着继续输入以下指令，从而生成 ssh 密钥文件，输入如下命令后直接三次回车即可。
ssh-keygen -t rsa -C "github 注册邮箱" 
3. 在完成2后
会在C盘用户路径生成.ssh的文件，里面有id_rsa和id_rsa.pub两个文件，前者是我们私有的，而后者则是对外开放的。用记事本或其他合适的软件打开id_rsa.pub文件，复制里面的密钥。
4. 然后打开GitHub——头像——Settings——SSH and GPG Keys页面
创建一个新的 SSH key，填写Title和Key，Title可以随意，而Key的内容则是我们刚才复制的id_rsa.pub中的内容，最后点击Add SSH key即可；
5. 去官网下载最新的稳定版Node.JS.
6. 鼠标右键任意地方，选择Git Bash，使用以下命令安装hexo.
npm install hexo-cli -g
npm install hexo-deployer-git --save
7. 找一个磁盘新建一个文件夹用于存放你的博客，然后进入该文件夹，鼠标右键选择“Git Bash”，分别输入以下命令。
hexo init
npm install
hexo g
hexo s
此时会在本地开启一个http服务，监听4000端口，我们可以在浏览器访问http://127.0.0.1:4000
可以通过键盘快捷键 Ctrl+C 停止服务。
(说一下：笔记本的insert键为粘贴，方向键向上为上一段指令，向下为下一段指令，继续向下为虚无.
8. 在完成第4步的基础上.
首次使用还需要确认并添加主机到本机SSH可信列表。若返回 Hi xxx! You've successfully authenticated, but GitHub does not provide shell access. 内容，则证明添加成功任意位置右键打开Git Bash，输入以下命令，使用私人密钥与GitHub进行认证和通信。
ssh -T git@github.com
9. 打开第7步你创建的博客文件
找到根目录的_config.yml这个文件，用合适的编辑器打开它（记事本等），拉到最后，输入以下格式内容后，保存退出。
type: git
 repository: git@github.com:*********/*********.github.io.git
 branch: master
备注：
(1)hexo的配置文件中任何一个“：”后面都是带一个空格的。
(2)repository后面的内容是你第一步创建库的时候生成的SSH地址。
10. 最后,在你的博客文件位置右键打开Git Bash，输入以下指令。
hexo g
hexo d
大功告成。这时可以登陆Github查看代码是否已经上传到你对应的Repository，在浏览器访问：用户名.github.io就能看到自己的博客了。第一次访问地址可能访问不了，您可以在几分钟后进行访问，一般不超过10分钟。
11. 博客主题美化
基于Hexo搭建的博客有着非常多的主题，在此博主搭配的是Next主题。
在这里分享几个大佬教程。
羽毛工作室教程
超详细，超全面(两万字)
hexo史上最全搭建教程
从零开始搭建个人博客（超详细）
不才陈某技术博客
（下一篇会总结自己博客主题美化过程。）
博客真正的意义在于不断创作内容，而不是折腾博客框架与配置。开始发表你的第一篇博文吧！
答疑
在认真学习网上很多教程的时候，应用在自己的网站上总会出现一些问题。以下是遇到的一些问题。
1. 选择博客Next四个主题那里出现的问题。（在后续主题美化时候我会总结出来）
2. 标题：解决hexo本地与部署不一致问题。
hexo博客在本地可以正常预览,部署到github上后为什么无法显示样式,只有内容呢？
请修改_config.yml的url的值为你的网站主URL（如：https://xxx.github.io）。
如何不在家，也能隨時隨地寫文章？
 Hexo 博客备份与恢复
在Github上备份Hexo博客
那些在学习过程中遇到的开拓者
认识我的hexo
易百教程
苦心孤诣
十佳评测
万书涛的个人博客
青山绿水
幼稚园园长
GitHub 汉化插件
...
...

Dragon Add - 欢迎使用代理访问本站 - Hexo

我的常用Hexo指令

关于原博客next主题的优化与定制(不再更新)

1.我做了tag ，我创建了关于，分类.

2.我修改了社交

3.添加了本地搜索

4. 添加红心特效

5. 显示busuanzi博客访客/访问次数统计/Github标识

6. 隐藏网页底部 powered By Hexo / 强力驱动

7. 显示当前浏览进度

8. 打开阅读进度条

9. 文章置顶功能

1. 卸载原插件和安装置顶插件，执行下面两行命令：

2. 然后在需要置顶的文章的Front-matter中加上top: true

3. 设置置顶标志：

3.1 如果你置顶了多篇，怎么控制顺序呢？设置top的值（大的在前面），比如：

10. 文章字数统计和阅读时长估计

11. 头像放左右Pisces或Gemini方案，

12. 显示版权信息

13. 为博客加上看板娘

14. 使博客底部的爱心跳动

15. tag 样式# 改为带图标

16. 文章结束语标语

17. 主题样式调色，

18. 背景动画，

19. 去掉文章目录标题的自动编号。

20. 加头像

21. 不蒜子统计与live2D看板娘冲突问题

1). 卸载live2d可以解决问题：

2). 看板娘怎么可以卸载？？？？？ 绝对不能接受！！！

a. 关闭next原生不蒜子

b. 修复主页总数统计

c. 修复文章统计

22. 修改文字模板

23. 增加赞赏功能

24. 啊啊啊啊啊，我终于搞定圆角和阴影了

1) 圆角

2) 阴影

25. 添加背景图片

26. 博客内容透明化

27. 修改文章链接样式为蓝色高亮显示

28. 啊啊啊啊我终于学会了添加鼠标点击特效了！！

1) 第一个是烟花特效：

a. 首先创建文件，写代码

b. 继续写代码

c. 最后打开开关

2) 另外一个爱心特效：

a. 首先创建文件，写代码

b. 添加注释

29. 侧边栏推荐阅读

31. 关于主页分页问题

32. 优化文章永久链接为数字编号

1) 在博客根目录（执行hexo命令的地方）安装插件：

2) 打开博客根目录下的站点配置文件_config.yml，修改如下配置：

3) 使用hexo clean && hexo g重新生成博客，该插件会在每篇文章的开头增加内容：

33. 主动被谷歌搜索引擎收录

1) 首先安装插件：

2) 验证域名

3) 提交站点地图

34. 我成功把博客部署到 Coding上，可以不用买域名。

35. ...(未完待续)

99. 警醒自己

那些我在学习过程中遇到的开拓者

基于Hexo + Github Pages 免费搭建博客

总结

一. 先注册一个GitHub账号，并且按照格式要求创建你的仓库。

二. 下载git。

三. 配置git与其他工作。

1. 桌面右键打开 Git Bash，分别输入以下指令，将git与GitHub账号绑定。

2. 接着继续输入以下指令，从而生成 ssh 密钥文件，输入如下命令后直接三次回车即可。

3. 在完成2后

4. 然后打开GitHub——头像——Settings——SSH and GPG Keys页面

5. 去官网下载最新的稳定版Node.JS.

6. 鼠标右键任意地方，选择Git Bash，使用以下命令安装hexo.

7. 找一个磁盘新建一个文件夹用于存放你的博客，然后进入该文件夹，鼠标右键选择“Git Bash”，分别输入以下命令。

8. 在完成第4步的基础上.

9. 打开第7步你创建的博客文件

10. 最后,在你的博客文件位置右键打开Git Bash，输入以下指令。

11. 博客主题美化

答疑

2). 看板娘怎么可以卸载？？？？？绝对不能接受！！！

`b. 继续写代码`

`c. 最后打开开关`

`2) 另外一个爱心特效：`

`a. 首先创建文件，写代码`

`b. 添加注释`

`29. 侧边栏推荐阅读`

`31. 关于主页分页问题`

`32. 优化文章永久链接为数字编号`

`1) 在博客根目录（执行hexo命令的地方）安装插件：`

`2) 打开博客根目录下的站点配置文件_config.yml，修改如下配置：`

`3) 使用hexo clean && hexo g重新生成博客，该插件会在每篇文章的开头增加内容：`

`33. 主动被谷歌搜索引擎收录`

`1) 首先安装插件：`

`2) 验证域名`

`3) 提交站点地图`

`34. 我成功把博客部署到 Coding上，可以不用买域名。`

`35. ...(未完待续)`

`99. 警醒自己`

`那些我在学习过程中遇到的开拓者`