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

博主： dragonadd
发布时间：2021 年 07 月 26 日
491 次浏览
暂无评论
9439字数
分类：博客辛酸

注意，此文适合版本8.0以上Next主题，不再更新，博主已弃坑，由 Hexo 转为 Typcho

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

本文纯是博主对于自己博客美化所作的步骤顺序，出发点是为了在优化过程中若出现错误可以撤销上一步的操作。博主自己每做一步就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文件，定位到<div class="post-meta">标签下，插入如下代码：

{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color="RED">置顶</font>
    <span class="post-meta-divider">|</span>
{% 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位置，复制以下代码，将其插入。

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">
            ----- 本文结束 <i class="fa fa-heart-o"></i> 感谢您的阅读 -----
            </div>
    {% endif %}
</div>

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，在最后一行前加入代码：

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
 <span><br></span>         
 
           <span class="post-meta-item-icon">
                 <i class="fa fa-group"></i>
           </span>
           <span>总访客&nbsp<span id="busuanzi_value_site_uv"></span>&nbsp人</span>
        <span class="post-meta-divider">|</span>
           <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
           </span>
        <span>访问总量&nbsp<span id="busuanzi_value_site_pv"></span>&nbsp次</span>
        {{- 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<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)};

b. 继续写代码

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

{% if theme.fireworks %}

  <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 

   <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>

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

{% 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<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

b. 添加注释

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

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

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. 警醒自己

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

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

......

END

本文作者： dragonadd
文章标题：关于原博客next主题的优化与定制(不再更新)
本文地址：https://blog.dragonadd.xyz/archives/12/
版权说明：若无注明，本文皆由“Dragon Add - 欢迎使用代理访问本站”原创所作，转载请保留文章出处。

最后修改：2022 年 09 月 04 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

潜心学习的打工人
右下角的猫咪是怎么实现的呀？
云志
加油！
胖虎同学
新年快乐啊
胖虎同学
我也想买相机📷，但是穷
zeruns
那个微信markdown编辑器我也在用，还挺好用的

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. 警醒自己

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

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

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

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

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款