Next主题进阶配置
Next主题友链及其他配置

最近比较忙,一方面刚开学,另一方面是因为butterfly加载速度太慢,转向next主题,很多东西需要重新配置;这篇文章与其说是教程,不如说是一篇记录

Next主题

🎉 Elegant and powerful theme for Hexo.

一个黑白为主色调的主题,很多人使用,却没有一个完整的中文教程;你能在Github上搜到三个next

我推荐使用第一个,也就是hexo-theme/hex-theme-next 因为讨论的人多,版本也是最新的 目前next还没有一个统一的教程,网上也有三篇不同的教程

  • Hexo-Next优点是支持中文,比较完善,缺点是没有官方内容多
  • Next使用文档同样支持中文,但是覆盖和内容没有上一个全
  • Next应该是官方文档,覆盖最全,但不支持中文

以上三个文档建议第一和第三混合看,第二个因为有点过时可以不看

评论

一个好的博客必定不能缺少评论系统,目前有许多解决方案可供选择,但我认为最方便,快捷的还是utterances

utterances

A lightweight comments widget built on GitHub issues.

  • 以下以utt来代替utterances

作者尝试在butterfly主题中使用valine,但最终以失败告终,尝试gitalk同样因token被墙而失败,最后发现了这个宝藏评论系统

  1. 要使用utt,我们首先要创建一个仓库,必须要是公开的,然后我们需要安装 utterances app到我们的仓库
  2. 然后到了选择Blog Post ↔️ Issue Mapping 推荐Issue title contains page title 不容易混淆
  3. 最后编辑Next的_config.yml中的utterances
1
2
3
4
5
6
7
utterances:
  enable: true   #将false改为true
  repo: user-name/repo-name # 填入自己的仓库
  # Available values: pathname | url | title | og:title
  issue_term: title  #设置为title
  # Available values: github-light | github-dark | preferred-color-scheme | github-dark-orange | icy-dark | dark-blue | photon-dark | boxy-light
  theme: github-light

完成后,使用hexo s --debug本地预览博客,看是否出现评论框

文章关闭评论

设置完后默认会在所有page开启评论,如果想关闭分类或关于里的评论,可以在index.md中设定comments: false即可关闭

友链

Next主题自带的友链位于侧边栏,但人数一旦多起来便会拥挤不堪,于是参考浮生若梦的教程 在他的基础上删去了过期和推荐 大佬更新了配置,现在可以直接从yml读取配置

又更新了 之前要看 html 代码、改源代码,太麻烦了。 仿照 butterfly 的友链书写方式做成变量都从 yml 中读取了

  1. 首先在你Next文件夹/layout中创建一个名为links.njk的文件,写入以下内容
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
    {##################}
    {### LINKS BLOCK ###}
    {##################}

<style>
    @media (min-width: 768px) {
        .link-card {
            width: 50%;
            float: left;
        }
    }
    .link-card{
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        box-sizing: border-box;
    }
    .link-user-list{
        margin-bottom: 5px;
        border-radius: 3px;
        padding: 15px;
        display: block;
        box-shadow: 0 2px 6px rgba(0,0,0,.1);
        position: relative;
    }
    .link-user-list:hover{
        background-color: #f6f8f8;
        text-decoration: none;
    }
    #link-container a{
        border: none;
    }
    .user-avatar img{
        border: 2px solid #fff;
        height: auto;
        vertical-align: middle;
        width: 100%;
        border-radius: 20%;
        max-width: 100%!important;
        margin: 0px !important;
    }
    .clearfix:after{
        content: ' '; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }
    .text-ellipsis{
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 13px;
    }
    .user-message{
        display: block;
        overflow: hidden;
    }
    .user-description{
        color: #a0a0a0;
    }
    .user-avatar{
        display: inline-block;
        width: 52px;
        height: auto;
        float: left !important;
        margin-right: 15px;
        position: relative;
        white-space: nowrap;
    }
</style>
<div id="link-container">
    {% for link_config in site.data.links %}
    {% if link_config.class_name %}
    <h2 id="{{ link_config.class_name }}">
        <a href="#{{ link_config.class_name }}" class="headerlink" title="{{ link_config.class_name }}" data-pjax-state></a>
        {{ link_config.class_name }}
    </h2>
    {% else %}
    <hr>
    {% endif %}
    <div class="clearfix">
    {% for link in link_config.link_list %}
    <div class="link-card">
        <a href="{{ link.site }}" target="_blank" class="link-user-list">
            <span class="user-avatar">
                <img src="{{ link.avatar }}" class="nofancybox">
            </span>
            <span class="user-message">
                <span class="text-ellipsis">{{ link.nickname }}</span>
                <span class="user-description text-ellipsis">{{ link.info }}</span>
            </span>
        </a>
    </div>
    {% endfor %}
    </div>
    {% endfor %}

    <div>
    {{ page.content }}
    </div>
</div>
    {######################}
    {### END LINKS BLOCK ###}
    {######################}

然后再打开Next文件夹/layout/page.njk ,在block title区域中的{{- __('title.schedule') + page_title_suffix }}后面添加上两行

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{% block title %}
  {%- set page_title_suffix = ' | ' + title %}

  {%- if page.type === 'categories' and not page.title %}
    {{- __('title.category') + page_title_suffix }}
  {%- elif page.type === 'tags' and not page.title %}
    {{- __('title.tag') + page_title_suffix }}
  {%- elif page.type === 'schedule' and not page.title %}
    {{- __('title.schedule') + page_title_suffix }}
+  {%- elif page.type === 'links' and not page.title %}
+    {{- __('title.links') + page_title_suffix }}
  {%- else %}
    {{- page.title + page_title_suffix }}
  {%- endif %}
{% endblock %}

接下来在下面的PAGE BODY中添加

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{### PAGE BODY ###}
      {#################}
      <div class="post-body{% if page.direction and page.direction.toLowerCase() === 'rtl' %} rtl{% endif %}">
        {%- if page.type === 'tags' %}
          {%- include '_partials/page/tags.njk' -%}
        {% elif page.type === 'categories' %}
          {%- include '_partials/page/categories.njk' -%}
        {% elif page.type === 'schedule' %}
          {%- include '_partials/page/schedule.njk' -%}
+        {% elif page.type === 'links' %}
+          {%- include 'links.njk' -%}
        {% else %}
          {{ page.content }}
        {%- endif %}
      </div>
      {#####################}
      {### END PAGE BODY ###}
      {#####################}

接下来和创建tags、about页一样,使用hexo new page links创建一个新页面,修改index.md添加申请信息和其他你想写在友链里的,设置type为links

最后在hexo/source/创建一个目录_data,里面再创建一个links.yml文件并填入以下内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# 参数说明
# class_name 选填,可以理解为友链组的名字,如果不填则会在顶部生成一个分割线
# nickname 博客名称
# site 博客地址
# info 博客简介
# avatar 博客logo
# 填写时注意缩进!

- class_name:
  link_list:
    - nickname:
      site:
      info:
      avatar:
    - nickname:
      site:
      info:
      avatar:

- class_name:
  link_list:
    - nickname:
      site:
      info:
      avatar:
    - nickname:
      site:
      info:
      avatar:

然后找到Menu区域,按照格式增加一个友链页面;完成后找到languages/zh-CN.yml,在Menu区域中添加友链的汉化

1
links: 友链

即可完成配置,以后想增加友链只需要在_config.yml中增添信息即可

随笔

有时我们可能想说点什么,但太短了成不了文章,于是我打算创建一个随笔页,专门记录短篇的文章

  1. 使用hexo new page essay创建一个随笔页
  2. 修改source/essay/index.md里的内容,修改标题并添加上type: essay
  3. 在主题配置文件中的Menu区域添加上随笔页
  4. languages/zh-CN.yml中添加友链的翻译即可

之后我们就可以在index.md中写文章了,但是看空想大佬的说说比我要好看,大佬没公布教程,我也没敢直接要,只能用折中的办法了

域名绑定

因为.xyz续费太贵,本身对这个域名也不是很满意,于是,一天前,我重新注册了一个新的域名inuya.ltd,并将他与我的博客绑定

  1. 要绑定域名,我们首先设置一个CNAME解析,将它指向原本的博客链接,再设置一个AAAA,通过ping username.github.io获取ipv6地址
  2. 然后在你博客的source目录创建一个名为CNAME的文件,填入你的域名
  3. 在你的设置中找到page/Custom domain,填入你的域名,点击save即可

设置完后使用原本的username.github.io会重定向到你的网站;尝试用你的域名访问,看能否访问成功

Google收录

因为next的配置里带有收录的配置,所以我们只要选择HTML标记 content=后面的内容复制到主题_config.yml中的google_site_verification:

然后再使用hexo clean && hexo g hexo d部署到Github即可完成验证,bing同理

参考|引用


Last modified on 2023-09-17