hexo配置next主题

发表于 更新于 分类于 ， ， 阅读次数： Changyan： 本文字数： 2.5k 阅读时长 ≈ 9 分钟

next主页

https://github.com/theme-next/hexo-theme-next

image-20200424100945802.png

下载安装

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

修改hexo项目根目录下的_config.yml文件

1
2
# theme: landscape
theme: next

命令行执行

1
2
3
D:\myblog>hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

配置标签和分类

  1. 生成标签页

    1
    hexo new page tags

    打开目录 myblog->source->tage 下的index.md

    在title下面添加属性

    1
    type: tags

  2. 生成分类页

    1
    hexo new page categories

    打开目录 myblog->source->categories下的index.md

    在title下面添加属性

    1
    type: categories

  3. 配置

    在next主题的配置文件 _config.yml 中修改

    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu:
      home: / || fa fa-home
      #about: /about/ || fa fa-user
      tags: /tags/ || fa fa-tags
      categories: /categories/ || fa fa-th
      archives: /archives/ || fa fa-archive
      # schedule: /schedule/ || fa fa-calendar
      # sitemap: /sitemap.xml || fa fa-sitemap
      #commonweal: /404/ || fa fa-heartbeat

  4. 预览效果

    image-20200424102317862.png

    image-20200424102336933.png

配置本地搜索

  • 在站点目录执行：
1
npm install hexo-generator-search --save
  • 站点配置文件：没有就添加节点
1
2
3
4
5
6
# Search 
search:
  path: ./public/search.xml
  field: post
  format: html
  limit: 10000
  • next 主题配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
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
  • 效果

image-20200519082834340

image-20200519082808111

配置评论

valine

  1. 进入 https://www.leancloud.cn/ 网站注册一个账号（建议选国际版的开发版）

  2. 然后通过邮箱与手机验证

  3. 再创建一个应用（应用名称随便填写）

  4. 进入应用实例的控制界面配置下博客域名

    image-20200424103031055.png

    然后在点击

    应用keys

    image-20200424103153599.png

  5. 打开next的配置修改配置

1
2
valine:
  enable: true

填写相应的 appid 和 appkey

image-20200424103256162.png

  1. 重新发布预览

    image-20200424103640801.png

changyan

为什么上边 有 valine 评论了 这里还要写 changyan 评论系统呢？因为我爱学习？才不是嘞。

我电脑重置了，但有一天要写点东西记录下。又来折腾 hexo 了。一套环境安装一通后发现 valine 评论不能用了。后来找到 next 官方说明

image-20230805215405021

于是就来搞 changyan 了。那为什么 是 changyan 而不是其它评论系统呢？因为其它的 大部分要翻墙，麻烦。changyan 好歹也是国内大厂做的，因该没那么容易被搞吧。哎！

拉回正轨

第一步：

https://changyan.kuaizhan.com/guide/index 官网注册下。

按照提示 填写信息

image-20230805212838554

image-20230805214111610

这里获取配置信息 appid 与 conf

image-20230805214339711

找到 next 主题的配置文件。设置评论系统为 changyan

image-20230805214446697

把前面获取的 appid 和 conf 填写在这里。 对应 appid 和 appkey

并打开开关 enable true

image-20230805214536101

本地 运行 hexo 预览，就可以看到评论系统了

image-20230805220244094

配置文章访问统计

在前面配置评论的基础上登录LeanCloud

选择应用实例后->存储->结构化数据->创建class

class 名填写 Counter

image-20200502164821552.png

打开next主题的配置文件 找到 leancloud_visitors 节点

image-20200502164821552.png

把enable 设置成true .

appid 和 appkey 参照前面的 配置评论。填写LeanCloud里的 id 和 key 。

效果：

image-20200502164821552.png

过了很多天 更新：

访问统计数全部为 0 了

image-20200515190437877

创建函数-选择 hook

image-20200515190633339

1
2
3
4
5
6
7
8
var query = new AV.Query("Counter");
if (request.object.updatedKeys.indexOf('time') !== -1) {
    return query.get(request.object.id).then(function (obj) {
        if (obj.get("time") + 1 !== request.object.get("time")) {
            throw new AV.Cloud.Error('Invalid update!');
        }
    })
}

部署到生产环境：

image-20200515190848917

在 next 主题配置文件中 把 security 设置成 true：

1
2
3
4
5
6
7
8
leancloud_visitors:
  enable: true
  # Required for apps from CN region
  server_url: # <your server url>
  # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
  # If you don't care about security in leancloud counter and just want to use it directly
  # (without hexo-leancloud-counter-security plugin), set `security` to `false`.
  security: true

在站点目录安装插件：

1
2
3
npm install hexo-leancloud-counter-security --save
# 成功后
hexo lc-counter register WuZhiYongBlog wzy95537551

hexo 站点配置文件：

1
2
3
4
5
6
leancloud_counter_security:
  enable_sync: true
  app_id: jOjNqcMeMLL4ntoMdf13veTb-MdYXbMMI   # 同前文的id
  app_key: v50rUeYs7yeT6hECN7XAhYYM  # 同前文的key
  username: WuZhiYongBlog
  password: wzy95537551

image-20200515191817312

复制 id

image-20200515192302588

编辑 counter 的权限

image-20200515192852917

依然没有效果！！！！！

最后通过调试代码发现。

1
2
3
4
function leancloudSelector(url) {
      url = encodeURI(url);
      return document.getElementById(url).querySelector('.leancloud-visitors-count');
    }

在渲染访问量的时候，会通过 encodeURI(url) 进行转码。中文的 url 。这里转过之后就变成 unicode 码了。实际上 节点里的 浏览器已经自动变成中文了。所以这里匹配不到，也就会提示 querySelector 为 null。那么就没办法赋值。 把这段转码的代码 找到后注释掉就可以了。

代码位置在：

1
2
3
4
5
6
D:\myblog\themes\next\layout\_third-party\statistics\lean-analytics.swig:
    3    (function() {
    4      function leancloudSelector(url) {
    5:       url = encodeURI(url);
    6        return document.getElementById(url).querySelector('.leancloud-visitors-count');
    7      }

配置打赏

1
2
3
4
5
reward:
  wechatpay: https://pic.wu-zy.com/img/微信图片_20200501220918.png #/images/wechatpay.png
  alipay: https://pic.wu-zy.com/img/微信图片_20200501220907.jpg #/images/alipay.png
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

找到reward 节点 配置上对应的支付二维码的图片即可

配置首页文章显示摘要

很多博客说是这样配置：（自动生成一定长度的摘要）

1
2
3
4
5
# Automatically Excerpt (Not recommend).
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 150

找到auto_excerpt节点（没有就自己加上） 把 enable 设置成true 。 length表示文章摘要的长度。

但是！！！ 我配置的没有效果

后来在其它的博客中说到得在文章中手动截取摘要就是在 文章中写上more标记

image-20200502164821552.png

这中方式成功了！！！！

效果：

image-20200502164821552.png

配置分享

  • add_this 分享
1
2
3
# AddThis Share. See: https://www.addthis.com
# Go to https://www.addthis.com/dashboard to customize your tools.
add_this_id: your id

打开 https://www.addthis.com 进行注册

第一步：注册完后会有个界面让你选择工具类型 Select a Tool

这里我选择的是分享按钮

第二部：接下来会引导你配置（英文的没有关系，可用谷歌浏览器右键翻译网页）

image-20200503111330975

  1. 配置分享到哪些第三方
  2. 配置分享按钮的颜色
  3. 配置分享按钮的位置
  4. 配置哪些页面显示，哪些页面不显示
  5. 6 切换电脑端和手机端预览效果

第三步：上面配置好后会到这里

image-20200503111451300

点击代码试图。看到下面的安装代码。可以看到代码中的 pubid

这个id 也可以在这里看到。

image-20200503111709010

然后把 自己的 id 填写到 上面的配置文件的 add_this_id 后面。

hexo 重新生成并部署博客。（本地 localhost:4000 是看不到效果的）

我的gitee 博客效果如下：

image-20200503112057114

参考：

http://tding.top/archives/7696c13f.html

配置浏览进度

在主题配置文件中搜索 scrollpercent

把 scrollpercent 的值改成 true

image-20200506015947127

给文章配置加密访问

方法一

找到next主题下的文件head.swig：

next\layout_partials\head\head.swig

加入 script 代码保存

1
2
3
4
5
6
7
8
9
10
11
12
13
<meta name="generator" content="Hexo {{ hexo_version }}">
//省略。。。。  
<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入密码') !== '{{ page.password }}'){
                alert('密码错误');
                history.back();
            }
        }
    })();
</script>
//省略。。。。

然后在typora 中的文章头部添加

password: yourpassword

保存后发布服务。再次访问该文章有

image-20200507102729827

缺点：界面不好看。本地效果正常，发布到gitee 后无效。

方法二

进入 hexo 根目录

执行：

1
npm install --save hexo-blog-encrypt

在hexo 配置文件中加入：encrypt

1
2
3
theme: next
encrypt: 
  enable: true

文章头部添加：

1
2
3
password: pwd
message: 输入密码界面提示说明
abstract: 文章界面介绍

访问文章提示：

image-20200507104409453

配置验证

百度网站验证

访问地址：https://ziyuan.baidu.com/site（没有百度账号就注册一个）

填写自己的网站地址 点击下一步

image-20200507204315434

选择三个标签 点击下一步

image-20200507204524855

这里我选择的是 验证

image-20200507204700445

把域名添加一条解析

image-20200507204919243

点击百度页面的 完成验证：

image-20200507205205010

失败了。我点了重新认证

image-20200507205401220

what??? 要一天！！！

过了半小时 刷新页面 发现ok了.用了两天发现我通过域名访问很卡不好用，怀疑可能是这里的问题。就把百度的解析删除键了。用了下面的 htm 标签认证的方式。

image-20200508144441101

Bing网站验证

网站地图

  • 安装插件

    1
    2
    3
    npm install hexo-generator-sitemap --save
    或
    npm install hexo-generator-baidu-sitemap --save

  • 配置站点地图开启 sitemap

    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu:
      home: / || fa fa-home
      #about: /about/ || fa fa-user
      tags: /tags/ || fa fa-tags
      categories: /categories/ || fa fa-th
      archives: /archives/ || fa fa-archive
      # schedule: /schedule/ || fa fa-calendar
      sitemap: /sitemap.xml || fa fa-sitemap
      #commonweal: /404/ || fa fa-heartbeat

    public 文件下会生成 sitemap 文件

    image-20230206173953095

    效果预览：

    image-20230206174147298

    image-20230206174212575

博客图片点击放大

在主题配置文件中找到：fancybox 并设置成 true 重新发布即可

1
2
3
# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox
fancybox: true

如果想要自定义 第三方 依赖的版本 请参考官方文档：

http://theme-next.iissnan.com/advanced-settings.html

配置文字统计和阅读时长

安装插件：

1
$ npm install hexo-symbols-count-time

image-20200511181259182

hexo 站点配置文件

没有就添加：

1
2
3
4
5
6
7
8
9
10
11
#配置文章字数统计和时长 
#依赖于：https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  symbols: true #文章字数统计
  time: true #阅读时长
  total_symbols: true #站点总字数统计
  total_time: true #站点总阅读时长
  exclude_codeblock: false #排除代码字数统计
  awl: 4 #平均字长 这里表示 以4个字符 作为一个字
  wpm: 275 #设定每分钟阅读多少字
  suffix: "mins." #如果读取时间少于60分钟，请添加后缀作为字符串参数。 如果未定义，则为分钟。将用作默认值。

next 主题配置文件找到该节点 默认的可以不用改

1
2
3
4
5
6
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false

都改好后 保存

执行 hexo clean 一定要 clean

再 hexo g hexo s

效果如下：

image-20200511183648884

参考：

野猿新一的博客

hexo-symbols-count-time官网

Eden的博客

参考：next 官方文档