Hexo4.0+Next7.2.4主题优化配置

末蓝、 2023-06-15 09:43 13阅读 0赞

### 前言 ###

本文主要介绍的是Next主题7.4版本的安装，优化，进阶配置。Next 是 Hexo 框架中最为流行的主题之一。精于心，简于形。Next 支持多种常见第三方服务，使用 第三方服务 来扩展站点的功能 。 由 [Hexo][] 强力驱动 v4.0.0 |主题 – [NexT.Gemini][] v7.4.1

## Next主题的安装 ##

**注意：**

**blog/\_config.yml**：站点配置文件，一些全局配置

**blog/themes/next/\_config.**：主题配置文件，关于当前Next主题的配置

首先进入到自己的博客目录，安装好Hexo，接着打开git，从远程download Next主题下来，进行Git Clone。

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

编辑站点配置文件**blog/\_config.yml**，配置如下：：

theme: next

## Next主题优化基础配置 ##

### Next主题风格 ###

Next主题提供了四种主题风格，可以在主题配置文件**themes/next/\_config.yml**文件中进行选择，分别是`Muse`，`Mist`，`Pisces`，`Gemini`，如下设置：

# Schemes主题风格
    #scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    scheme: Gemini

编辑主题配置文件**theme/next/\_config.yml**，配置如下：

menu:
      home: / || home # 首页
      about: /about/ || user # 关于
      tags: /tags/ || tags # 标签
      categories: /categories/ || th # 分类
      archives: /archives/ || archive # 归档
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      commonweal: /404/ || heartbeat #页面不存在的时候404
    
    # Enable / Disable menu icons / item badges.
    menu_settings:
      icons: true # 是否显示各个页面的图标
      badges: true # 是否显示分类/标签/归档页的内容量

### 添加博客自定义图标 ###

选择或者创建相应大小的图标文件， 放置在blog/themes/next/sources/images目录下，并在主题配置文件**themes/next/\_config.yml**中进行如下配置，只需要设置small和medium两个就可以，图标可以 [阿里图标库][Link 1]去进行选择下载，设置如下：

# 博客图标
    favicon:
      small: /images/java-16x16.png
      medium: /images/java-32x32.png
      apple_touch_icon: /images/apple-touch-icon-next.png
      safari_pinned_tab: /images/logo.svg

### 添加动态背景： ###

**next/layout/\_layout.swig**：在`</body>`之前添加代码（注意不要放在`</head>`的后面）

{ % if theme.canvas_nest %}
    <script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
    { % endif %}

编辑主题配置文件**theme/next/\_config.yml**，配置如下：

canvas_nest: # 网络背景
      enable: true
      onmobile: true # Display on mobile or not
      color: "0,0,0" # RGB values, use `,` to separate
      opacity: 0.5 # The opacity of line: 0~1
      zIndex: -1 # z-index property of the background
      count: 150 # The number of lines

### 鼠标点击特效 ###

在next/source/js/src下新建文件clicklove.js，接着把下面的代码copy过去，7.4版本没有src文件夹，先新建文件夹在新建文件即可，`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);

在next/layout/\_layout.swig文件末添加内容：

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

### 设置头像 ###

在**theme/next/\_config.xml**主题配置文件中设置头像，图标路径为next/source/images/中，rounded是否设置成圆形，rotated是否设置成可旋转的。 配置如下：

avatar:
      # In theme directory (source/images): /images/avatar.gif
      # In site directory (source/uploads): /uploads/avatar.gif
      # You can also use other linking images.
      url: /images/author.jpg # 头像放在sources中的images
      # If true, the avatar would be dispalyed in circle.
      rounded: true #鼠标放在头像上时是否旋转
      opacity: 1 #头像放缩指数
      rotated: true #头像为圆形

### 设置RSS订阅 ###

博客一般是需要Rss订阅的，如果需要开启RSS订阅，需要通过node.js安装插件， 安装完成之后，站点会自动生成 RSS Feed 文件，安装命令如下：

npm install hexo-generator-feed --save

编辑站点配置文件**blog/\_config.yml**，配置如下：

plugins: hexo-generate-feed

然后编辑主题配置文件**theme/next/\_config.yml**，配置如下：

# Set rss to false to disable feed link.
    # Leave rss as empty to use site's feed link.
    # Set rss to specific value if you have burned your feed already.
    rss: /atom.xml # 设置RSS订阅

### 侧边栏设置社交小图标 ###

编辑主题配置文件**theme/next/\_config.yml**，配置如下：

# Social Links
    # Usage: `Key: permalink || icon`
    # Key is the link label showing to end users.
    # Value before `||` delimiter is the target permalink.
    # Value after `||` delimiter is the name of Font Awesome icon. If icon (with or without delimiter) is not specified, globe icon will be loaded.
    social:
      GitHub: https://github.com/TateTang?tab=repositories || github 
      CSDN: https://blog.csdn.net/qq_39031310 || crosshairs
      #简书: https://www.jianshu.com/u/559ac1797b1b || heartbeat

### 支持数学公式 ###

可能在一些情况下我们需要写一个公式，Markdown是支持的，Next也支持。

Next 主题提供了两个渲染引擎，分别是 mathjax 和katex，后者相对前者来说渲染速度更快，而且不需要 JavaScript 的额外支持，但后者支持的功能现在还不如前者丰富，具体的对比可以看[官方文档][Link 2]，我们这里通过选择mathjax，通过安装插件即可启用，命令如下：

npm install hexo-renderer-kramed --save

编辑主题配置文件**theme/next/\_config.yml**，配置如下：

mathjax:
        enable: false #是否开启mathjax
        # See: https://mhchem.github.io/MathJax-mhchem/
        mhchem: false

### Tag标签前图标修改 ###

文章设置标签后默认显示的是“\#”号，可以通过设置将\#替换成图标，在主题配置文件中配置即可，编辑主题配置文件**theme/next/\_config.yml**，配置如下：

# Use icon instead of the symbol # to indicate the tag at the bottom of the post
    tag_icon: true

### 访问量统计 ###

访问量统计使用的busuanzi统计功能，编辑主题配置文件**theme/next/\_config.yml**，配置如下：

# Show Views / Visitors of the website / page with busuanzi.
    # Get more information on http://ibruce.info/2015/04/04/busuanzi
    busuanzi_count:
      enable: true #是否开启busuanzi统计功能
      total_visitors: true #是否统计总访客数
      total_visitors_icon: user #访客数图标为人像
      total_views: true #是否统计总访问数
      total_views_icon: eye #访问数图标为眼睛
      post_views: false #是否统计文章访问数
      post_views_icon: eye #访问数图标为眼睛

当前版本的NexT集成的不蒜子，总访问人数和人次只是分别用icon来表示，故取消显示，自行修改，打开next/layout/\_partials/footer.swig，在最后添加如下内容：

<span id="busuanzi_container_site_uv">
      本站访问次数：<span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
    </span>

### 实现文章统计功能 ###

统计文章字数和阅读分钟数，安装插件命令如下：

npm install hexo-symbols-count-time --save

在站点配置文件**blog/\_config.yml**中配置如下：

#博客文字统计
    symbols_count_time:
      symbols: true # 是否启用
       time: true # 估计阅读时间
       total_symbols: true # 页脚部分中所有帖子字数
       total_time: true # 页脚部分中所有帖子的估计阅读时间
      exclude_codeblock: false

在主题配置文件**theme/next/\_config.yml**中配置如下：

symbols_count_time:
      separated_meta: true #分隔符|
      item_text_post: true #是否统计站点总字数
      item_text_total: false #是否统计文章总字数
      awl: 4 #平均每个字符的长度
      wpm: 275 #words per minute

具体使用可查看[官方文档][Link 3]，效果图如下：

### 添加网页顶部进度加载条 ###

首先需要安装插件，如下，在Hexo根目录，从GitHub clone插件即可

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

编辑主题配置文件**theme/next/\_config.yml**，配置如下：

### 添加站内搜索 ###

在目录下可以进行站内搜索功能，安装 hexo-generator-search

sudo npm install hexo-generator-search --save

安装 hexo-generator-searchdb

sudo npm install hexo-generator-searchdb --save

编辑站点配置文件**blog/\_config.yml**，配置如下：

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

编辑主题配置文件**theme/next/\_config.yml**，配置如下：

local_search:
      enable: true
      # If auto, trigger search by changing input.
      # If manual, trigger search by pressing enter key or search button.
      trigger: auto
      # Show top n results per article, show all results by setting to -1
      top_n_per_article: 1 #每篇文章中显示的搜索数量
      # Unescape html strings to the readable one.
      unescape: false
      # Preload the search data when the page loads.
      preload: false

### 在文章底部增加版权信息 ###

编辑主题配置文件**theme/next/\_config.yml**，但是在侧边栏社交小图标下面回家时by-nc-sa的图标，如果介意，可以不开启博客版权功，配置如下：

creative_commons: # 开启博客版权功能
      license: by-nc-sa
      sidebar: true
      post: true
      language:

在文章 .md 文件中的上部，添加 copyright: true。 即可开启文章版权，copyright: false取消文章版权。

### Footer/页脚设置 ###

编辑主题配置文件**theme/next/\_config.yml**，配置如下：

footer:
      # Specify the date when the site was setup. If not defined, current year will be used.
      since: 2019 #建站时间
      # Icon between year and copyright info.
      icon:
        # Icon name in Font Awesome. See: https://fontawesome.com/v4.7.0/icons/
        # `heart` is recommended with animation in red (#ff0000).
        name: heart   #作者图标 默认是author人像
        # If you want to animate the icon, set it to true.
        animated: true #是否闪动
        # Change the color of icon, using Hex Code.
        color: "#ff0000"
      #字体
      # If not defined, `author` from Hexo `_config.yml` will be used.
      copyright: TateTang #别填bool型，最后显示的东西是copyright || author，即左边没有设置的话就显示作者
    
      powered:
        # Hexo link (Powered by Hexo).
        enable: false #是否显示 powerdby hexo
        # Version info of Hexo after Hexo link (vX.X.X).
        version: false #是否显示hexo版本
    
      theme:
        # Theme & scheme info link (Theme - NexT.scheme).
        enable: false #是否显示主题信息
        # Version info of NexT after scheme info (vX.X.X).
        version: false #是否显示主题版本
    
      # Beian ICP and gongan information for Chinese users. See: http://www.beian.miit.gov.cn, http://www.beian.gov.cn
      beian:
        enable: false #是否显示网站备案信息
        icp:
        # The digit in the num of gongan beian.
        gongan_id:
        # The full num of gongan beian.
        gongan_num:
        # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
        gongan_icon_url:

### 设置阅读全文 ###

编辑主题配置文件**theme/next/\_config.yml**，配置如下：

auto_excerpt:
      enable: true #自动截取一定程度的摘要
      length: 100 #长度

在.md文章中加入``即可隐藏掉不显示的内容

### 文章末尾统一添加“本文结束”标记 ###

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

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

接着打开next/layout/\_macro/post.swig文件，引入passage-end-tag.swig文件，在`<footer class="post-footer">`标签之前添加代码，添加内容如下：

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

然后编辑主题配置文件**theme/next/\_config.yml**，配置如下：

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

### 开启文章目录 ###

编辑主题配置文件**theme/next/\_config.yml**，配置如下：

toc: #侧栏中的目录
      enable: true #是否自动生成目录
      # Automatically add list number to toc.
      number: true #目录是否自动产生编号
      # If true, all words will placed on next lines if header width longer then sidebar width.
      wrap: true #标题过长是否换行
      # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
      expand_all: false
      # Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` in Front-matter.
      max_depth: 6 #最大标题长度

### Follow me on GitHub ###

编辑主题配置文件**theme/next/\_config.yml**，配置如下：

# #添加右上角github绑定
    github_banner:
      enable: true
      permalink: https://github.com/TateTang?tab=repositories
      title: Follow me on GitHub

### 阅读书签 ###

Bookmark是一个插件，允许用户保存他们的阅读进度。用户只需单击页面左上角的书签图标即可保存滚动位置。当他们下次访问您的博客时，他们可以自动恢复每个页面的最后滚动位置。 编辑主题配置文件**theme/next/\_config.yml**，配置如下：

bookmark:	
      enable: true
      # Customize the color of the bookmark. 
      color: "#222"	
      # If auto, save the reading progress when closing the page or clicking the bookmark-icon. 
      # If manual, only save it by clicking the bookmark-icon. 
      save: auto

### 阅读进度 ###

Next支持页面滚动阅读进度指示器。

编辑主题配置文件**theme/next/\_config.yml**，配置如下：

reading_progress:
      enable: true
      color: "#37c6c0"
      height: 2px

### 图标懒加载 ###

对于图片进行延迟加载，访问到图片位置时才去请求图片资源，这样可以提高博客的访问速度，节省流量。 命令如下：

git clone https://github.com/theme-next/theme-next-jquery-lazyload source/lib/jquery_lazyload

编辑主题配置文件**theme/next/\_config.yml**，配置如下：

# Vanilla JavaScript plugin for lazyloading images.
    # For more information: https://github.com/ApoorvSaxena/lozad.js
    lazyload: true

### 代码复制 ###

编辑主题配置文件**theme/next/\_config.yml**，配置如下：

# Add copy button on codeblock
    copy_button:
      enable: true

### DaoVoice在线联系功能 ###

添加DaoVoice在线联系功能：[参考地址][Link 4]

### SEO支持 ###

SEO(Search Engine Optimization)意为搜索引擎优化,利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

安装站点地图(sitemap)插件，命令如下：

npm install hexo-generator-sitemap --save
    npm install hexo-generator-baidu-sitemap --save

编辑站点配置文件**blog/\_config.xml**，配置如下：

# SEO 
    sitemap: 
      path: sitemap.xml
    baidusitemap:
      path: baidusitemap.xml

启用百度推送功能，博客会自动将网址推送到百度，这对搜索引擎优化非常有帮助。  
编辑主题配置文件**theme/next/\_config.yml**，配置如下：

baidu_push: true

### 显示当前浏览进度 ###

右下角显示文章当前浏览进度，提供意见置顶功能，编辑主题配置文件**theme/next/\_config.yml**，配置如下：

back2top:
      enable: true #是否提供一键置顶 
      # Back to top in sidebar.
      sidebar: false
      # Scroll percent label in b2t button.
      scrollpercent: true # 是否显示当前阅读进度

## Next主题优化进阶配置 ##

### 网页标题搞怪特效 ###

在theme/next/source/js/src中创建activetitle.js，内容如下：

在themes/next/layout/\_layout.swig文件末尾添加内容：

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

### 背景动画 ###

Next主题支持多种背景动画，导入插件并且修改主题配置文件即可，根据GitHub上面的教程即可简单的完成背景动画的配置。

顶部加载栏: [pace][]  
3D库: [three][]  
流动线条: [canvas\_nest][canvas_nest]  
彩带: [canvas\_ribbon][canvas_ribbon]

### 文章阅读次数统计 ###

配置 leancloud [官方使用文档][Link 5] 来进行文章阅读次数统计，具体配置[参考][Link 6]

修复Next的LeanCloud计数器的安装插件

插件安装

npm install hexo-leancloud-counter-security --save

编辑主题配置文件**blog/\_config.yml**，配置如下：

leancloud_counter_security:
      enable_sync: true
      app_id: <<your app id>>
      app_key: <<your app key>>
      username: <<your username>> # 部署时会询问是否留空
      password: <<your password>> # 建议留空。部署时会询问是否留空

编辑主题配置文件**theme/next/\_config.yml**，配置如下：

leancloud_visitors:
       enable: true
       app_id: <<your app id>>
       app_key: <<your app key>>
       security: true
       betterPerformance: false

控制台命令：在Leancloud数据库中注册用户以进行权限控制

hexo lc-counter register <<username>> <<password>>

[参考][Link 6]

### 相关热门帖子 ###

Next主题使用LeanCloud添加热度排行，首先需要配置好LeanCloud，记录相关的`APPID`和`KEY`

在博客终端输入命令，建立page top

hexo new page top

打开生成的source/top/index.md文件，内容如下：

---
    title: 文章热度排行
    comments: false
    ---
    <div id="top"></div>
    <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
    <script>AV.initialize("n8GGQ6GcEiBjctFbtvfLswbn-gzGzoHsz", "CbONq8NhdsHuf2QFLynGjoyj");</script>
    <script type="text/javascript">
      var time=0
      var title=""
      var url=""
      var query = new AV.Query('Counter');
      query.notEqualTo('id',0);
      query.descending('time');
      query.limit(1000);
      query.find().then(function (todo) { 
        for (var i=0;i<1000;i++){ 
          var result=todo[i].attributes;
          time=result.time;
          title=result.title;
          url=result.url;
          var content="<span class='post-time'><span class='post-temp'>"+"热度</span>"+time+"℃</span>"
          +"<a href='"+"http://localhost:4000"+url+"'>"+title+"</a>"+"<br />";
          document.getElementById("top").innerHTML+=content
        }
      }, function (error) { 
        console.log("error");
      });
    </script>
    
    <style>.post-description {  display: none; }</style>

其中，`App-ID` 以及 `App-Key` 换成自己的 `AppID` 以及 `AppKey`即可，将自定义的样式加入，编辑主题配置文件**theme/next/\_config.yml**，配置如下：

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

然后在source/\_data/文件夹下面新建或者修改styles.styl文件，内容如下：

//设置热度排行的标签样式 .post-time { 
      padding: 5px 5px 5px 0;
      background-color: #fc6423;
      color: #fff;
      margin-right: 10px;
      border-radius: 5px;
    }
    .post-temp { 
      padding: 5px;
      margin-right: 5px;
      background-color: #5e85d1;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }

打开主题配置文件，找到 `leancloud_visitors` 字段：

# Show number of visitors to each article.
    # You can visit https://leancloud.cn get AppID and AppKey.
    leancloud_visitors:
      enable: true
      app_id: <App ID>
      app_key: <App Key>

添加自己的 `AppID` 以及 `AppKey` 。

然后找到 `menu` 字段，新增 `top` 页面：

menu:
      home: / || home
      ...
      top: /top/ || signal

打开 `next/languages/zh-CN.yml` 文件，找到 `menu` 字段，在最后添加

top: 热度排行

### 文章加密 ###

编辑主题配置文件**theme/next/\_config.yml**，配置如下：

custom_file_path:
      head: source/_data/head.swig

在/source/\_data下创建或者修改head.swig文件，内容如下：

[Hexo]: https://hexo.io/
[NexT.Gemini]: https://theme-next.org/
[Link 1]: https://www.iconfont.cn/
[Link 2]: https://theme-next.org/docs/third-party-services/math-equations%E3%80%82
[Link 3]: https://github.com/theme-next/hexo-symbols-count-time
[Link 4]: https://asdfv1929.github.io/2018/01/21/daovoice/
[pace]: https://github.com/theme-next/theme-next-pace
[three]: https://github.com/theme-next/theme-next-three
[canvas_nest]: https://github.com/theme-next/theme-next-canvas-nest
[canvas_ribbon]: https://github.com/theme-next/theme-next-canvas-ribbon
[Link 5]: https://leancloud.cn/dashboard/applist.html#/apps
[Link 6]: https://yunhao.space/2018/06/27/hexo-leancloud-plugin-installation-tutor/