优化next(V7.7.1)博客主题

最新推荐文章于 2025-04-07 22:20:05 发布

枫叶表哥

最新推荐文章于 2025-04-07 22:20:05 发布

阅读量1.7k

点赞数 1

本文链接：https://blog.youkuaiyun.com/Later_001/article/details/106973486

版权

next版本更新，有很多设置和原来不一样了，我用的是next (v7.7.1)，下面的设置应该相当全面了，我还在不断地更新中。。。可以先看看优化后的博客页面，个人博客：枫叶苑

完整的搭建个人博客可以看：从零开始搭建个人博客

文章目录

1. 设置菜单

打开主题配置文件即themes/next下的_config.yml，查找menu，将前面的#删除就行了：

menu:
  home: / || home                      #首页
  archives: /archives/ || archive      #归档
  categories: /categories/ || th       #分类
  tags: /tags/ || tags                 #标签
  about: /about/ || user               #关于
  resources: /resources/ || download   #资源
  #schedule: /schedule/ || calendar    #日历
  #sitemap: /sitemap.xml || sitemap    #站点地图，供搜索引擎爬取
  #commonweal: /404/ || heartbeat      #腾讯公益404

“||”前面的是目标链接，后面的是图标名称，next使用的图标全是图标库 - Font Awesome 中文网这一网站的，有想用的图标直接在fontawesome上面找图标的名称就行。resources是我自己添加的。

新添加的菜单需要翻译对应的中文，打开theme/next/languages/zh-CN.yml，在menu下设置：

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  resources: 资源
  search: 搜索

在根目录下打开Git Bash，输入如下代码：

hexo new page "categories"
hexo new page "tags"
hexo new page "about"
hexo new page "resources"

此时在根目录的sources文件夹下会生成categories、tags、about、resources四个文件，每个文件中有一个index.md文件，修改内容分别如下：

---
title: 分类
date: 2020-02-10 22:07:08
type: "categories"
comments: false
---

---
title: 标签
date: 2020-02-10 22:07:08
type: "tags"
comments: false
---

---
title: 关于
date: 2020-02-10 22:07:08
type: "about"
comments: false
---

---
title: 资源
date: 2020-02-10 22:07:08
type: "resources"
comments: false
---

注：如果有启用评论，默认页面带有评论。需要关闭的话，添加字段comments并将值设置为false。

2. 设置建站时间

打开主题配置文件即themes/next下的_config.yml，查找since：

footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2020-02   #建站时间

3. 设置头像

打开主题配置文件即themes/next下的_config.yml，查找avatar，url后是图片的链接地址：

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.gif   #图片的位置，也可以是http://xxx.com/avatar.png
  # If true, the avatar will be dispalyed in circle.
  rounded: true   #头像展示在圈里
  # If true, the avatar will be rotated with the cursor.
  rotated: false  #头像随光标旋转

然后将你要的头像图片复制到themes/next/source/images里，重命名为avatar.png。

4. 网站图标设置

我是在这个网站找的图标，免费的图标素材网站：Easyicon

下载16x16和32x32的图标后，打开主题配置文件，查找favicon，只要修改small和medium为你的图标路径：

favicon:
  small: /images/favicon-16x16.png
  medium: /images/favicon-32x32.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

5. 设置动态背景

5.1 canvas nest 风格

效果图：
在这里插入图片描述
在themes/next目录下打开Git Bash，输入：

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

打开主题配置文件即themes/next下的_config.yml，找到canvas-nest，将enable：false改为true：

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# For more information: https://github.com/hustcc/canvas-nest.js
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

5.2 JavaScript 3D library风格

在themes/next目录下打开Git Bash，输入：

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

打开主题配置文件即themes/next下的_config.yml，找到three，这里有三种风格，可以试一下看看喜欢哪种风格，直接将false改为true就行了，我已经选了canvas-nest，就没有选这种风格：

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: true
  three_waves: false
  canvas_lines: false
  canvas_sphere: false

6. 设置背景图片

打开主题配置文件即themes/next下的_config.yml，将 style: source/_data/styles.styl 取消注释：

custom_file_path:
  style: source/_data/styles.styl

打开根目录Blog/source创建文件_data/styles.styl，添加以下内容：

// 添加背景图片
body {
      background: url(images/background.png);//自己喜欢的图片地址
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 50% 50%;
}

7. 主页文章添加阴影效果

打开themes/next/source/css/_common/conponents/post/post.styl，修改.post-block，如下：

.use-motion {
  if (hexo-config('motion.transition.post_block')) {
    .post-block {
      opacity: 0;
      margin-top: 60px;
      margin-bottom: 60px;
      padding: 25px;
      background:rgba(255,255,255,0.9) none repeat scroll !important;
      -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
      -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);

    }
    .pagination, .comments{
      opacity: 0;
    }
  }

还有一种方法打开Blog/source/_date/style.styl文件，添加以下代码：

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

8. 添加顶部加载条

在themes/next目录下打开Git Bash，输入：

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

打开主题配置文件即themes/next下的_config.yml，找到pace，将enable：false改为true，你还可以选择类型（theme）：

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: minimal

9. 设置预览摘要

next（v7.7.1）已经没有如下代码：

auto_excerpt:
  enable: true
  length: 150

所以不需要设置，只要我们在文章中插入 ，该标签之上的是摘要，之后的内容不可见，需点击全文阅读按钮：

 <!-- more -->

10. 设置侧边栏显示效果

打开主题配置文件即themes/next下的_config.yml，找到Sidebar Settings，设置：

sidebar:
  # Sidebar Position. #设置侧边栏位置
  position: left
  #position: right

  #  - post    默认显示模式
  #  - always  一直显示
  #  - hide    初始隐藏
  #  - remove  移除侧边栏
  display: post

11. 侧边栏推荐阅读

打开主题配置文件即themes/next下的_config.yml，搜索links（里面写你想要的链接）：

links_settings:
  icon: link
  title: 链接网站  #修改名称

links:
  #Title: http://yoursite.com
  百度: https://baidu.com
  鱼C论坛: https://fishc.com.cn

12. 添加社交链接

打开主题配置文件即themes/next下的_config.yml，搜索social：

social:
  GitHub: https://github.com/fengye97 || github
  E-Mail: mailto:yinhongfei1018@163.com || envelope
  知乎: https://www.zhihu.com/people/mai-nv-hai-de-xiao-huo-chai-35-19 || gratipay
  优快云: https://https://blog.csdn.net/Later_001 || codiepie

“||”前面的是链接，后面的是 FontAwesome图标名称。

13. 设置博文内链接为蓝色

打开themes/next/source/css/_common/components/post/post.styl文件，将下面的代码复制到文件最后：

.post-body p a{
     color: #0593d3;
     border-bottom: none;
     &:hover {
       color: #0477ab;
       text-decoration: underline;
     }
   }

重新部署一下后，效果如下图：
在这里插入图片描述

14. 显示文章字数和阅读时长

从根目录Blog打开Git Bash，执行下面的命令，安装插件：

npm install hexo-wordcount --save

然后打开站点配置文件，在文件末尾加上下面的代码：

symbols_count_time:
  symbols: true                # 文章字数统计
  time: true                   # 文章阅读时长
  total_symbols: true          # 站点总字数统计
  total_time: true             # 站点总阅读时长
  exclude_codeblock: false     # 排除代码字数统计

效果如下图：
在这里插入图片描述

15. 显示站点文章总字数（另一种统计站点总字数的方法）

从根目录Blog打开Git Bash，执行下面的命令，安装插件：

npm install hexo-wordcount --save

然后在/themes/next/layout/_partials/footer.swig文件尾部加上：

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

16. 设置文章末尾”本文结束”标记

在路径/themes/next/layout/_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

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

接着打开/themes/next/layout/_macro/post.swig文件，在post-footer前添加代码：

 {% if not is_index and theme.passage_end_tag.enabled %}
   <div>
     {% include 'passage-end-tag.swig' %}
   </div>
 {% endif %}

具体位置如下图：
在这里插入图片描述
然后打开主题配置文件（_config.yml)，在末尾添加：

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

完成以上设置之后，在每篇文章之后都会添加如下效果图的样子：
在这里插入图片描述

17. 文章末尾添加版权说明

查找主题配置文件themes/next/_config.yml中的creative_commons：

creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true  # 将false改为true即可显示版权信息
  language:

效果图：
在这里插入图片描述

18. 添加访问量统计

打开主题配置文件即themes/next下的_config.yml，找到busuanzi_count，改为true：

busuanzi_count:
  enable: true

打开/themes/next/layout/_partials/footer.swig，在最后添加如下内容：

{% if theme.busuanzi_count.enable %}
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

    <span id="busuanzi_container_site_pv">总访问量<span id="busuanzi_value_site_pv"></span>次</span>
    <span class="post-meta-divider">|</span>
    <span id="busuanzi_container_site_uv">总访客数<span id="busuanzi_value_site_uv"></span>人</span>
    <span class="post-meta-divider">|</span>
<!-- 不蒜子计数初始值纠正 -->
<script>
$(document).ready(function() {

    var int = setInterval(fixCount, 50);  // 50ms周期检测函数
    var countOffset = 20000;  // 初始化首次数据

    function fixCount() {            
       if (document.getElementById("busuanzi_container_site_pv").style.display != "none")
        {
            $("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + countOffset); 
            clearInterval(int);
        }                  
        if ($("#busuanzi_container_site_pv").css("display") != "none")
        {
            $("#busuanzi_value_site_uv").html(parseInt($("#busuanzi_value_site_uv").html()) + countOffset); // 加上初始数据 
            clearInterval(int); // 停止检测
        }  
    }
       	
});
</script> 
{% endif %}

19. 添加评论功能

19.1 注册安装

我采用的是来必力，具体过程很简单，打开官网：Welcome to LiveRe.com

注册账号：
在这里插入图片描述
然后发送邮箱验证码，输入验证码验证，完成注册后点击上方安装：

选择免费的现在安装，会弹出一个框让你填网站的信息：

然后获取代码：

将data-uid后的代码复制，然后打开主题配置文件_config.yml，找到livere_uid，将代码复制到其后即可：

livere_uid: "你的代码"

19.2 设置提醒

当有新评论出现时，通过邮箱提醒，点击右上角->管理页面->评论提醒：
在这里插入图片描述
完成后效果如图：

20. 添加Fork me on Github

有两种，分别是：
在这里插入图片描述

选择你喜欢的类型，打开小猫或者字，复制代码添加到themes/next/layout/_layout.swig文件中，放在<div class="headband"></div>后面：

<div class="headband"></div>
    <a href="https://github.com/fengye97" class="github-corner" aria-label="View source on GitHub"><s

21. 安装Markdown编译器

可以看这篇文章然后选一个适合的文本编译器：几款主流好用的markdown编辑器介绍

我是用的Windows系统，所以我用的是MarkdownPad2，下载地址：The Markdown Editor for Windows，默认安装就行

如果是win10系统还需要安装一个组件 awesomium_v1.6.6_sdk_win，下载链接：链接：https://pan.baidu.com/s/1UJRtOBF8vj19ikOq4452sQ 提取码：yd8k

下载完awesomium_v1.6.6_sdk_win默认安装就行

22. 安装RSS插件

为什么要安装RSS插件呢？不了解的可以看看这篇文章：rss订阅是什么意思?为什么要使用RSS?简单来说，RSS是一种协议，允许网站将其内容或其部分内容提供给其他网站或应用程序。通过使用RSS，可以节省宝贵的时间，并将各个站点提供的新闻和信息组织到一个中心点进行查看，也可以通过从使用RSS联合其内容的其他站点导入新闻来向你的站点添加新闻。

（1）安装hexo-generator-feed插件
RSS需要有一个Feed链接，而这个链接需要靠hexo-generator-feed插件来生成，所以第一步需要添加插件，在Blog根目录打开Git Bash执行安装指令：

npm install hexo-generator-feed --save

（2）配置feed信息
在站点配置文件末尾加上如下代码：

feed:
  type: rss2
  path: rss2.xml
  limit: 10
  hub:
  content: 'true'

（3）配置rss
打开主题配置文件，搜索rss，将前面的#去掉：

follow_me:
  #Twitter: https://twitter.com/username || twitter
  #Telegram: https://t.me/channel_name || telegram
  微信: /images/wechat_channel.jpg || wechat
  RSS: /atom.xml || rss

效果如图：
在这里插入图片描述

23. 项目主页添加README

在建立Github上建立自己的博客仓库的时候，没有生成README文件，这样使得其他人无法知道我们这个仓库是做什么，即我们的这个仓库缺少一个说明文件；但是如果直接使用命令hexo n README，再部署至远程的时候，hexo会将它解析为html文件，这不是我们想要的。

因此，解决方式是在路径Blog\source下手动新建README.md注意这里的后缀是.mdown，Mardownpad2可以将文件保存为.mdown后缀文件；然后再在这个新建文件中写README即可。再之后hexo g会把它复制到public文件夹，而不会被解析成html文件，发布在博客中。

也可以参考第24项，在根目录Blog/source 目录下添加一个 README.md 文件，修改站点配置文件 _config.yml ，将 skip_render 参数的值设置为:

skip_render: README.md

24. 忽略要编译的文件

搜索引擎确认网站所有权时往往会提供一个html文件来进行验证，要是这个文件被渲染了，验证自然就会失败了。或者，有时候会有一些文件不希望Hexo渲染的，因此有必要针对某个文件或者目录进行排除。Hexo的配置文件中提供了配置项skip_render。只有source目录下的文件才会发布到public（能够在网络上访问到），因此Hexo只渲染source目录下的文件。skip_render参数设置的路径是相对于source目录的路径。

skip_render:   #部署时不包含的文件

#单个文件
skip_render: hello.html

#单个文件夹下全部文件
skip_render: test/* 

#单个文件夹下指定类型文件
skip_render: test/*.md  

#单个文件夹下全部文件以及子目录
skip_render: test/**  

#跳过多个目录，或者多个文件
skip_render: ['*.html', demo/**, test/*]

25. 代码块样式自定义

打开根目录Blog/source/_data/styles.styl，添加以下内容：

// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

效果图：
在这里插入图片描述

26. 支持mathjax公式

打开主题配置文件，搜索mathjax：

mathjax:
    enable: true   #将false改为true
    mhchem: false  #用来写化学方程式

27. 图床网站

推荐七牛云，免费网站，快速，方便，或者可以看看这篇文章选一个合适的网站：软件小编：盘点一下免费好用的图床

网站：七牛云，后面我再写一篇关于如何注册使用七牛云存储图片的文章吧，我先研究研究。

28. 本地搜索

打开cmd安装插件：

npm install hexo-generator-search

查找主题配置文件themes/next/_config.yml中的local_search ：

local_search:
  enable: true
  trigger: manual   #手动，按回车键或搜索按钮触发搜索

29. Hexo博客提交百度和Google收录

这篇文章写得很详细：Hexo博客提交百度和Google收录

30. 博文置顶

（1）安装插件
在根目录Blog打开Git Bash，执行下面的命令：

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

（2）设置置顶标志
打开blog/themes/next/layout/_macro目录下的post.swig文件，定位到<div class="post-meta">标签下，插入如下代码：

{% if post.top %}
  <i class="fa fa-thumb-tack"></i>
  <font color=7D26CD>置顶</font>
  <span class="post-meta-divider">|</span>
{% endif %}

（3）在文章中添加top
然后在需要置顶的文章的Front-matter中加上top: true即可，如下：

---
title: Hello World

top: true

---

效果如图：
在这里插入图片描述

31. 添加打赏

next（v7.7.1）已经有打赏功能，只要准备好微信和支付宝二维码，具体操作：制作微信二维码收款，很简单我就不详细说了。

打开主题配置文件，查找reward：

reward_settings:
  enable: true   #改为true
  animation: false
  comment: 原创技术分享，您的支持将鼓励我继续创作


reward:
  wechatpay: /images/wechatpay.png   #将前面的#去掉
  alipay: /images/alipay.png         #将前面的#去掉
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

将制作好的二维码图片放入themes/next/source/images文件里，并命名为wechatpay.png和alipay.png。

32. 添加分享（未完成）

原来的 jiathis share和baidushare 已经没有了，现在的是 addthis，但是我注册不了addthis账号 AddThis官网

不知道什么原因，我用Firefox不行，下次用Chrome试试，先放着吧！

33. 图片可点击放大查看，放大后可关闭（fancybox可能有点问题，暂时未实现）

打开主题配置文件_config.yml，搜索fancybox，设置其值为true：

fancybox: true

进入到theme/next文件夹下，打开Git Bash，输入如下代码：

git clone theme-next/theme-next-fancybox3 source/lib/fancybox

主要参考文献：
Hexo搭建的GitHub博客之优化大全
 Hexo的next主题个性化配置教程
 Hexo框架下用NexT(v7.0+)主题美化博客

写这篇文章的目的只是为了记录总结我的学习过程，如果能够给别人一些帮助那当然更好了。我正在黑暗中摸索着前行，唯有一盏烛火给我光亮，向哪走都是前方。