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

前言

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

图1 友链每行单个示意图

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

教程步骤

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

{# 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 %}

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

<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>

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

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

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

{# 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 友链一行多个示意图

完结撒花~

【Hexo + Next主题】左侧栏友链一行多个显示相关推荐

织梦后台添加友链，前台不显示|修改友情链接的显示行数
在我们建设网站的过程中有一个程序是我们经常用到的,那就是织梦CMS信息管理系统,这是一个很强大的开源程序,企业站.门户站都可以用他做,但是当我们的织梦程序网站在跟别人换友情链接的时候,我们奇怪的发现当 ...
【Hexo + Next】侧边栏添加自定义文件夹（如友链）
前言如果你刚刚完成博客的搭建,会发现Next主题的侧边栏默认文件夹很少,不过你可以通过配置主题配置文件_config.yml,增加标签.分类.关于等等文件夹,具体教程可参考官方帮助文档,网上亦有 ...
建站教程WordPress新手入门十友链管理
在SEO里面,一直强调的内链为王,外链为皇,友情链接就是皇,用于展示与其他网站交换的链接,可以相互导流.重不重要?自己判断!反正营销值得学一般不轻易跟人换友链,要换的也是知根知底的. 上一篇营销值得学 ...
基于hexo的友链朋友圈 Beta1.4（已适配Butterfly和Matery主题）
https://zfe.space/post/friend-link-circle.html 什么是友链朋友圈? 你是否经常烦恼于友链过多但没有时间浏览?那么友链朋友圈将解决这一痛点.你可以随时获取友 ...
为Hexo博客next主题添加友链
为Hexo博客next主题添加友链 20230427153826|left
Hexo+gitee：30分钟搭建一个自己的个人博客网站欢迎友链呀＜(▰˘◡˘▰)
Hexo + Gitee 部署自己的个人博客目前市场上比较火的一些博客框架: Hexo.jekyll.Solo.Halo .gohugo.VuePress.wordpress 等等 ,这些都是开 ...
Hexo + yilia 主题 +githubpages博客添加友言评论功能
前言 Hexo博客的Yilia主题中评论系统只提供了畅言.网易云跟帖.多说和Disqus. 由于多说评论.网易云跟帖已经关闭系统,畅言需要域名备案,而github是国外的,没有备案,所以尝试了其他第三 ...
静态博客 Hexo material 主题安装
静态博客 Hexo material 主题安装注意,这里介绍的 Material 主题是 1.5.2 的版本如果你还没有安装 Hexo,并且对它有兴趣,请前往 EasyHexo 这里将提供 Hex ...
css 友情链接效果,友链样式与位置很重要！
友链交换,是我们SEOER的日常工作.那么,关于友链的样式和位置,你又了解多少呢?下面就和小编一起来看看吧! 一.友链意味着什么? 友情链接,就是双方网站有一定相关性的前提下,互相在自己的网站上推荐对 ...

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

前言

教程步骤

推荐阅读

【Hexo + Next主题】左侧栏友链一行多个显示相关推荐

最新文章

热门文章