在NexT主题下设置友链的一种高效方法

发表于 更新于 分类于 阅读次数： Waline： 本文字数： 839 阅读时长 ≈ 3 分钟

简洁、高效、快速！无需插件，无需编辑主题代码！

写在前面

本人使用的NexT版本是 8.14.0 。请留意您的NexT版本是否支持文章中的方法。

网页效果预览

本Blog的友链页面(点我直达)

图片预览效果

Preview

实现方式

效果的实现参考了NexT的 官方文档 (点我直达)


准备工作

  • 在Blog根目录的source文件夹，已经生成了包含index.md的文件夹。并且在index.md文件开头输入

    1
    2
    3
    4
    5
    6
    7
    ---
    title: 是友链哒❤~ # 可替换
    date: # 格式：YYYY-MM-DD hh:mm:ss 
    type: "friends" # 可替换
    categories: 
    tags:
    ---

  • 在NexT主题根目录的_config.yml配置文件中已经配置好了在导航栏(menu)的友链。（我的是这样的：

    1
    friends: /friends/ || fa fa-users  # 命名需与包含index.md的文件夹名称对应

使用方式

! 请直接在index.md文件中编写

有2种格式可以应用，都是在你想要插入友链的位置直接编写。


Format A

1
2
3
{% linkgrid %}
[网站标题Name] | [网站链接Link] | [网站简介Bio] | [网站图片icon]
{% endlinkgrid %}

! 注意

  • [网站图片icon] 需存放在本地，位置为 \Your-Blog\themes\next\source\images
  • 网站图片建议压缩为(180*180)大小，否则图片加载会较慢
  • 尽管格式类似于Markdown表格，但是单行开头和结尾并没有 “ | ” 符号

实操A

以我的Blog为例

1
2
3
4
{% linkgrid %}
木屐落在水洼了 | https://mjt.asia/ | その人の声を 聞くだけで 失神しそうな | /images/icon-blog-Me.png
木屐落在水洼了 | https://mjt.asia/ | その人の声を 聞くだけで 失神しそうな | /images/icon-blog-Me.png
{% endlinkgrid %}

呈现效果A

木屐落在水洼了

その人の声を 聞くだけで 失神しそうな

木屐落在水洼了

その人の声を 聞くだけで 失神しそうな


Format B

1
2
3
{% lg %}
[网站标题Name] , [网站链接Link] , [网站简介Bio] , [网站图片icon]
{% endlg %}

! 注意

  • 基本同上
  • [网站图片icon] 需存放在本地，位置为 \Your-Blog\themes\next\source\images
  • 网站图片建议压缩为(180*180)大小，否则图片加载会较慢

实操B

以我的Blog为例

1
2
3
4
{% lg %}
木屐落在水洼了 , https://mjt.asia/ , その人の声を 聞くだけで 失神しそうな , /images/icon-blog-Me.png
木屐落在水洼了 , https://mjt.asia/ , その人の声を 聞くだけで 失神しそうな , /images/icon-blog-Me.png
{% endlg %}

呈现效果B

木屐落在水洼了

その人の声を 聞くだけで 失神しそうな

木屐落在水洼了

その人の声を 聞くだけで 失神しそうな

总结

这种方法的优势

  • 简洁、高效、快速、人人可用
  • 无需插件，无需编辑主题代码

有待改进的

  • 对NexT版本可能有一定的依赖性（？
  • 友链一多，图片加载就会慢
  • 介于网站图片保存在本地，就不能以在Github上发起Pull Request的方式添加友链(23.05.26 其实是可以的…)

欢迎评论交流加友链嗷~👀

都读到这儿了，不留个评论再走吗？ QAQ