NexT主题自带的友链模块放在侧边栏下面,视觉上比较臃肿。
本文介绍两种修改友链样式的方法以及具体的步骤。其中第一种方法需要修改 NexT 主题文件,第二种则不需要。
第一种友链样式
新建links.swig
文件
在themes/Next/layout/
新建一个文件links.swig
,添加如下代码:
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
| {% block content %} {######################} {### LINKS BLOCK ###} {######################} <div id="links"> <style> .links-content{ margin-top:1rem; } .link-navigation::after { content: " "; display: block; clear: both; } .card { width: 300px; font-size: 1rem; padding: 10px 20px; border-radius: 4px; transition-duration: 0.15s; margin-bottom: 1rem; display:flex; } .card:nth-child(odd) { float: left; } .card:nth-child(even) { float: right; } .card:hover { transform: scale(1.1); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); } .card a { border:none; } .card .ava { width: 3rem!important; height: 3rem!important; margin:0!important; margin-right: 1em!important; border-radius:4px; } .card .card-header { font-style: italic; overflow: hidden; width: 236px; } .card .card-header a { font-style: normal; color: #2bbc8a; font-weight: bold; text-decoration: none; } .card .card-header a:hover { color: #d480aa; text-decoration: none; } .card .card-header .info { font-style:normal; color:#a3a3a3; font-size:14px; min-width: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } </style> <div class="links-content"> <div class="link-navigation">
{% for link in theme.mylinks %} <div class="card"> <img class="ava" src="{{ link.avatar }}"/> <div class="card-header"> <div><a href="{{ link.site }}" target="_blank">@ {{ link.nickname }}</a></div> <div class="info">{{ link.info }}</div> </div> </div> {% endfor %}
</div> {{ page.content }} </div> </div> {##########################} {### END LINKS BLOCK ###} {##########################} {% endblock %}
|
修改page.swig
文件
然后我们修改themes/next/layout/page.swig
,在下面这个位置添加两行代码:
1 2 3 4 5 6 7 8 9 10 11
| #}{% if page.type #}{{ __('title.category') + page_title_suffix }}{# #}{% elif page.type #}{{ __('title.tag') + page_title_suffix }}{# #}{% elif page.type #}{{ __('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 %}{#
|
然后在如下位置添加两行代码:
1 2 3 4 5 6 7
| {% elif page.type {% include 'schedule.swig' %} + {% elif page.type === 'links' %} + {% include 'links.swig' %} {% else %} {{ page.content }} {% endif %}
|
修改主题配置文件_config.yml
在主题配置文件themes/_config.yml
末尾处添加友链:
1 2 3 4 5
| mylinks: - nickname: 小丁的个人博客 avatar: https://tding.top/images/avatar.webp site: https://tding.top info: 世间所有的相遇,都是久别重逢
|
第二种友链样式——瀑布流友链实现
基本原理:新建md页面,渲染出一个html页面,其中包含一个class是.link-navigation
的网页元素。同时加载links.js
,下载json文件,渲染到这个网页元素中。
新建links页面
新建 links 页面,输入放置友链的 html 元素:
这样会在 /source/
下创建 links/index.md
。在文档的 front matter
添加 type: links
,编辑好自己需要的友链页面内容,然后输入放置友链的 html 元素。示例:
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
| --- title: 友链 type: links ---
<style>.links-content{margin-top:1rem}.link-navigation::after{content:" ";display:block;clear:both}.card{width:130px;font-size:1rem;padding:0;border-radius:4px;transition-duration:.15s;margin-bottom:1rem;display:block;float:left;box-shadow:0 2px 6px 0 rgba(0,0,0,.12);background:#f5f5f5}.card{margin-left:16px}@media(max-width:567px){.card{margin-left:16px;width:calc((100% - 16px)/2)}.card:nth-child(2n+1){margin-left:0}.card:not(:nth-child(2n+1)){margin-left:16px}}@media(min-width:567px){.card{margin-left:16px;width:calc((100% - 32px)/3)}.card:nth-child(3n+1){margin-left:0}.card:not(:nth-child(3n+1)){margin-left:16px}}@media(min-width:768px){.card{margin-left:16px;width:calc((100% - 48px)/4)}.card:nth-child(4n+1){margin-left:0}.card:not(:nth-child(4n+1)){margin-left:16px}}@media(min-width:1200px){.card{margin-left:16px;width:calc((100% - 64px)/5)}.card:nth-child(5n+1){margin-left:0}.card:not(:nth-child(5n+1)){margin-left:16px}}.card:hover{transform:scale(1.1);box-shadow:0 2px 6px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.card .thumb{width:100%;height:0;padding-bottom:100%;background-size:100% 100%!important}.posts-expand .post-body img{margin:0;padding:0;border:0}.card .card-header{display:block;text-align:center;padding:1rem .25rem;font-weight:500;color:#333;white-space:normal}.card .card-header a{font-style:normal;color:#2bbc8a;font-weight:700;text-decoration:none;border:0}.card .card-header a:hover{color:#d480aa;text-decoration:none;border:0}</style><div><div class="links-content"><div class="link-navigation" id="links1"></div></div></div>
------
<div style="text-align:center;"><span class="with-love" id="animate1"> <i class="fa fa-heart"></i> </span>留言添加友链<span class="with-love" id="animate2"> <i class="fa fa-heart"></i> </span></div> ------
{% note success %}
## 友链格式
- 网站名称:小丁的个人博客 - 网站地址:[https://tding.top](https://tding.top) - 网站描述:世间所有的相遇,都是久别重逢 - 网站Logo/头像:[https://tding.top/images/avatar.webp](https://tding.top/images/avatar.webp)
{% endnote %}
|
侧边栏添加友链页面链接
主题配置文件_config.yml
中添加:
1 2 3 4 5 6
| menu: home: / || home categories: /categories/ || th tags: /tags/ || tags archives: /archives/ || archive + links: /links || link
|
添加友链的 json 文件
在页面目录 /source/links/
中添加 linklist.json
,示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| [{ "nickname": "三水非冰博客", "avatar": "https://www.sanshuifeibing.com/usr/images/avatar2.jpg", "site": "https://www.sanshuifeibing.com" }, { "nickname": "北宸", "avatar": "https://leafjame.github.io/images/beichen.png", "site": "https://leafjame.github.io" }, { "nickname": "千灵夙赋", "avatar": "https://qianling.pw/images/avatar.png", "site": "https://qianling.pw/" } ]
|
加载 link.js
在自定义文件body-end.swig
中添加:
1 2 3 4 5 6
| {# 友链设置 #} {% if page.type === 'links' %} <script src="/js/link.js"></script> {% else %}
{% endif %}
|
link.js
内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| link = { init: function() { var that = this; $.getJSON("/links/linklist.json", function(data) { that.render(data); }); }, render: function(data) { var html, nickname, avatar, site, li = ""; for (var i = 0; i < data.length; i++) { nickname = data[i].nickname; avatar = data[i].avatar; site = data[i].site; li += '<div class="card">' + '<a href="' + site + '" target="_blank">' + '<div class="thumb" style="background: url( ' + avatar + ');">' + '</div>' + '</a>' + '<div class="card-header">' + '<div><a href="' + site + '" target="_blank">' + nickname + '</a></div>' + '</div>' + '</div>';
} $(".link-navigation").append(li); } } link.init();
|
问题排查
- 浏览器F12查看页面源码,是否有一个class是
.link-navigation
的网页元素。
- 查看
link.js
是否正常加载了,json文件是否正常加载了。
如果加载js文件的/source/_data/body-end.swig
不起作用,我们也可以把link.js
内容放到/source/links/index.md
中,效果是一样的。
参考