【Hexo + Next】左侧栏友链一行多个显示

前言

  Next主题的友链默认排版是一行一个,如图1所示。
图1 友链每行单个示意图

一旦友链数量过多,那么一行一个的页面排版就不怎么美观了,下面笔者教大家如何一行多个地显示友链。

教程步骤

  打开你的博客文件夹下的themes/next/layout/_macro/sidebar.swig,sidebar即侧边栏,顾名思义在sidebar.swig文件中我们可以对侧边栏的页面排版进行设置。打开sidebar.swig,搜索关键字blogroll,发现如下代码段:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{# Blogroll #}
{% if theme.links %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
<div class="links-of-blogroll-title">
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
{{ theme.links_title }}
</div>
<ul class="links-of-blogroll-list">
{% for blogrollText, blogrollURL in theme.links %}
<li class="links-of-blogroll-item">
{{ next_url(blogrollURL, blogrollText, {title: blogrollURL}) }}
</li>
{% endfor %}
</ul>
</div>
{% endif %}

这段代码就是对侧边栏友链的排版定义,其中的:

1
2
3
4
<div class="links-of-blogroll-title">
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
{{ theme.links_title }}
</div>

定义的是友链标题和图标,不能缺少;接下来对代码块:

1
2
3
4
5
6
7
<ul class="links-of-blogroll-list">
{% for blogrollText, blogrollURL in theme.links %}
<li class="links-of-blogroll-item">
{{ next_url(blogrollURL, blogrollText, {title: blogrollURL}) }}
</li>
{% endfor %}
</ul>

进行修改,去掉ul和li,加入span,修改后代码为:

1
2
3
4
5
{% for blogrollText, blogrollURL in theme.links %}
<span class="links-of-blogroll-item">
{{ next_url(blogrollURL, blogrollText, {title: blogrollURL}) }}
</span>
{% endfor %}

  最终修改完成的Blogroll代码块为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{# Blogroll #}
{% if theme.links %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
<div class="links-of-blogroll-title">
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
{{ theme.links_title }}
</div>
{% for blogrollText, blogrollURL in theme.links %}
<span class="links-of-blogroll-item">
{{ next_url(blogrollURL, blogrollText, {title: blogrollURL}) }}
</span>
{% endfor %}
</div>
{% endif %}

将以上代码替换到themes/next/layout/_macro/sidebar.swig的相应位置,然后hexo cl && hexo g && hexo d更新博客,你将惊奇地发现多个友链排在一行当中,如图2所示。
图2 友链一行多个示意图

  完结撒花~

推荐阅读

【Next 7.2.0版权声明大改动】仅需一步!开启内置版权声明(跟繁琐的自定义版权声明说拜拜~)

【Hexo + Next】侧边栏添加自定义文件夹(如友链)

【Hexo + Next 优化之坑】百度、谷歌收录sitemap站点地图

————————— 本文结束 感谢您的阅读 —————————
谢谢你请我喝咖啡ლↂ‿‿ↂლ(支付宝扫一扫即可领红包, 消费时可抵现! 你省钱, 我赚钱, 多谢支持~)