croyoux's blog

Next主题进阶配置

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

Next主题

🎉 Elegant and powerful theme for Hexo.

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

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

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

评论

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

utterances

A lightweight comments widget built on GitHub issues.

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

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

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

文章关闭评论

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

友链

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

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

  1. 首先在你Next文件夹/layout中创建一个名为links.njk的文件，写入以下内容
  1    {##################}
  2    {### LINKS BLOCK ###}
  3    {##################}
  4
  5<style>
  6    @media (min-width: 768px) {
  7        .link-card {
  8            width: 50%;
  9            float: left;
 10        }
 11    }
 12    .link-card{
 13        position: relative;
 14        min-height: 1px;
 15        padding-right: 15px;
 16        padding-left: 15px;
 17        box-sizing: border-box;
 18    }
 19    .link-user-list{
 20        margin-bottom: 5px;
 21        border-radius: 3px;
 22        padding: 15px;
 23        display: block;
 24        box-shadow: 0 2px 6px rgba(0,0,0,.1);
 25        position: relative;
 26    }
 27    .link-user-list:hover{
 28        background-color: #f6f8f8;
 29        text-decoration: none;
 30    }
 31    #link-container a{
 32        border: none;
 33    }
 34    .user-avatar img{
 35        border: 2px solid #fff;
 36        height: auto;
 37        vertical-align: middle;
 38        width: 100%;
 39        border-radius: 20%;
 40        max-width: 100%!important;
 41        margin: 0px !important;
 42    }
 43    .clearfix:after{
 44        content: ' '; 
 45        display: block; 
 46        height: 0; 
 47        clear: both; 
 48        visibility: hidden;
 49    }
 50    .text-ellipsis{
 51        display: block;
 52        text-overflow: ellipsis;
 53        overflow: hidden;
 54        white-space: nowrap;
 55        font-size: 13px;
 56    }
 57    .user-message{
 58        display: block;
 59        overflow: hidden;
 60    }
 61    .user-description{
 62        color: #a0a0a0;
 63    }
 64    .user-avatar{
 65        display: inline-block;
 66        width: 52px;
 67        height: auto;
 68        float: left !important;
 69        margin-right: 15px;
 70        position: relative;
 71        white-space: nowrap;
 72    }
 73</style>
 74<div id="link-container">
 75    {% for link_config in site.data.links %}
 76    {% if link_config.class_name %}
 77    <h2 id="{{ link_config.class_name }}">
 78        <a href="#{{ link_config.class_name }}" class="headerlink" title="{{ link_config.class_name }}" data-pjax-state></a>
 79        {{ link_config.class_name }}
 80    </h2>
 81    {% else %}
 82    <hr>
 83    {% endif %}
 84    <div class="clearfix">
 85    {% for link in link_config.link_list %}
 86    <div class="link-card">
 87        <a href="{{ link.site }}" target="_blank" class="link-user-list">
 88            <span class="user-avatar">
 89                <img src="{{ link.avatar }}" class="nofancybox">
 90            </span>
 91            <span class="user-message">
 92                <span class="text-ellipsis">{{ link.nickname }}</span>
 93                <span class="user-description text-ellipsis">{{ link.info }}</span>
 94            </span>
 95        </a>
 96    </div>
 97    {% endfor %}
 98    </div>
 99    {% endfor %}
100
101    <div>
102    {{ page.content }}
103    </div>
104</div>
105    {######################}
106    {### END LINKS BLOCK ###}
107    {######################}

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

 1{% block title %}
 2  {%- set page_title_suffix = ' | ' + title %}
 3
 4  {%- if page.type === 'categories' and not page.title %}
 5    {{- __('title.category') + page_title_suffix }}
 6  {%- elif page.type === 'tags' and not page.title %}
 7    {{- __('title.tag') + page_title_suffix }}
 8  {%- elif page.type === 'schedule' and not page.title %}
 9    {{- __('title.schedule') + page_title_suffix }}
10+  {%- elif page.type === 'links' and not page.title %}
11+    {{- __('title.links') + page_title_suffix }}
12  {%- else %}
13    {{- page.title + page_title_suffix }}
14  {%- endif %}
15{% endblock %}

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

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

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

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

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

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

1links: 友链

即可完成配置，以后想增加友链只需要在_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同理

参考|引用

Tags: