Saffrex.

dum spiro,spero.

Next主题美化记录

发表于 更新于 分类于 ， ，

主要记录比较难查找的细节的更改和调整

文章结束语

  • 添加模板文件
    在主题目录下\layout\_macro中新建 passage-end-tag.swig文件,并添加以下内容：
    1
    2
    3
    4
    5
    6
    7
    <div>
        {% if not is_index %}
            <div style="text-align:center;color: #ccc;font-size:14px;">
                  -------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------
            </div>
        {% endif %}
    </div>
  • 导入模板文件
    在\layout\_macro\post.swig文件中，找到：
    1
    2
    3
    {#####################}
    {### END POST BODY ###}
    {#####################}
    在上面代码之前添加：
    1
    2
    3
    4
    5
    <div>
          {% if not is_index %}
              {% include 'passage-end-tag.swig' %}
          {% endif %}
    </div>
  • 配置
    在主题配置文件中添加：
    1
    2
    3
    # 文章末尾添加“本文结束”标记
    passage_end_tag:
      enabled: true

点击头像跳转到关于页面

打开 themes\next\layout_partials\sidebar\site-overview. Swig 文件，将文件最开始的这一段改成以下：

1
2
3
4
5
6
7
8
9
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
  {# 点击头像跳转 #}
  <a href="/about">
  <img class="site-author-image" itemprop="image" alt=" {{ author }} "
    src=" {{ url_for(theme.avatar.url or theme.images + '/avatar.gif') }} ">
  </a>
  <p class="site-author-name" itemprop="name"> {{ author }} </p>
  <div class="site-description" itemprop="description"> {{ description }} </div>
</div>

其中负责跳转的是以下：

1
2
{# 点击头像跳转 #}
<a href="/about">

文章段落折叠

对段落或者代码很长的内容，可能有折叠需求，Markdown语言支持自动折叠的功能。

段落/代码折叠示例 
1
2
3
4
5
<details>  
   <summary>Title</summary>  
  
    Content!!! 注意 summary 与该内容之间要空一行，部分编辑器可能不支持此功能。  
</details>

标签插件🏷

note 和 tab 的用法

语法：

1
2
3
4
5
6
7
{% note [class] [no-icon] [summary] %}
Any content (support inline tags too).
class 是note的级别，可以是info, warning, danger, success, default
no-icon 是是否显示图标，如果不写，就显示图标，如果写了，就不显示图标
summary 是note的标题
{% endnote %}

这是 info 界面

这是 warning 界面

这是 danger 界面

这是 success 界面

这是 default 界面

链接卡片 - linkgrid

用法：

1
2
{% linkgrid [image] [delimiter] [comment] %}
{% endlinkgrid %}

或者

1
2
{% lg [image] [delimiter] [comment] %}
{% endlg %}
  • [image]: Optional parameter. Default image URL.
  • [delimiter]: Optional parameter. If the optional delimiter parameter is given, it is interpreted as the delimiter of items in each line.
  • [comment]: Optional parameter. If the optional comment parameter is given, it is interpreted as the symbol to comment out a line.

举例

1
2
3
4
5
6
7
{% linkgrid %}
Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /images/apple-touch-icon-next.png
Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /images/apple-touch-icon-next.png
Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /images/apple-touch-icon-next.png
Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /images/apple-touch-icon-next.png
% Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /images/apple-touch-icon-next.png
{% endlinkgrid %}
../images/dairy. Jpg

小元宵 | https://theme-next.js.org/ | 6 个月的时候的照片 | ../images/dairy. Jpg

按钮 - Button

使用方法

1
{% button url, text, icon [class], [title] %}
  • url : 绝对或相对 URL
  • text : 按钮文字，如果未指定图标则为必须
  • icon : FontAwesome 图标名称（开头没有’fa-‘）。如果未指定文本，则为必需
  • [class] : FontAwesome 类：fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5X，可选参数。
  • [title] : 鼠标悬停时的工具提示，可选参数。

注意：最好添加 <div> 标签，测试时没加 div，下面显示不完全，加上非常美观。

示例

单个按钮显示

1
<div>{% button https://tding.top/ ,首页,home fa-fw,这是小丁的个人博客首页%}</div>

显示效果：

多个按钮居中显示：

1
<div class="text-center"><div>{% button https://tding.top/ ,首页,home fa-fw,这是小丁的个人博客首页%} {% button https://tding.top/movies/ ,观影,film fa-fw,豆瓣电影%} {% button https://tding.top/books/ ,阅读,book fa-fw,豆瓣读书%}</div></div>

显示效果：

实现博客订阅

参考资料

  1. 标签插件官方文档
  2. hexo next tag note tabs 使用笔记
  3. Mailchimp 实现订阅功能
-------------本文结束，感谢您的阅读-------------
您的支持是我最大动力~