博客优化之创建友链界面

曾经终败给现在 2021-09-04 10:30 475阅读 0赞

Next 的友链，默认是在主题配置文件中 **links** 下添加，当链接变多以后，侧栏页面的排版很不美观，这时候就需要给友链新增一个单独的页面了，下面说一下具体步骤。

## 1. 新增 links 页面 ##

在控制台使用命令创建：

hexo new page links

也可在博客根目录 /source 下手动创建 links 文件夹和里边的 index.md 文件

然后在博客根目录 /source 下会生成一个 links 文件夹，打开其中的 index.md 文件，在头部写入 `type = “links”，如下：`

title: 友情链接
    date: 2019-08-11 15:34:16
    type: "links"

如果需要关闭这个页面的评论的话，可以设置如下：

---
    title: 友情链接
    date: 2019-08-11 15:34:16
    type: "links"
    comments: false
    ---

## 2. 配置 menu ##

主题配置文件中`menu`下添加：

links: /links/|| link

在 `/themes/next/languages/zh-Hans.yml` 文件中 `menu` 下增加中文描述

links: 友链

做完这些工作，接下来就是要增加友链页面的样式了

## 3. 新增 links.swig 页 ##

在 `/themes/next/layout/` 新建 `links.swig`，内容如下：

{% block content %}
     {######################}
     {### LINKS BLOCK ###}
     {######################}
    
     <div id="links">
     <style>
    
     #links{ 
     margin-top: 5rem;
     }
    
     .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>
     <a href="{ { link.site }}" target="_blank"><span class="focus-links">关注</span></a>
     </div>
     <div class="info">{ { link.info }}</div>
     </div>
     </div>
    
     {% endfor %}
    
     </div>
     { { page.content }}
     </div>
     </div>
    
     {##########################}
     {### END LINKS BLOCK ###}
     {##########################}
    {% endblock %}

## 4. 修改 page.swig ##

修改 `/themes/next/layout/page.swig` 文件，在开头的 `block title` 内部

#}{% elif page.type === "tags" and not page.title %}{#
     #}{ { __('title.tag') + page_title_suffix }}{#

这个位置下添加代码：

#}{% elif page.type === 'links' and not page.title %}{#
     #}{ { __('title.links') + page_title_suffix }}{#

效果如下：

[![img][]][img 1]

## 5. 引入 links.swig ##

接着在 `/themes/next/layout/page.swig` 中 `PAGE BODY` 内部，引入刚才新建的 `page.swig` :

{% elif page.type === 'links' %}
     {% include 'links.swig' %}

比如我是在

{% elif page.type === 'categories' %}

这个`if`下追加的：

[![n1MvPe.png][]][n1MvPe.png 1]

到这里就完成页面样式的配置了。

## 6. 配置友链 ##

接下来，在 `/themes/next/_config.yml` 文件中配置友链，末尾处新增 `mylinks` ，如下

mylinks:
    
    - nickname: Leaf's Blog
     avatar: https://www.liaofuzhan.com/images/beichen.png
     site: https://www.liaofuzhan.com
     info: 因心造境，风云由我！
     
    - nickname: Jomeswang's Blog
     avatar: https://s2.ax1x.com/2020/01/01/lJeqtP.jp
     site: http://kjtpeh.coding-pages.com/
     info: 万物归一

这里是配置了两个友链，多个的配置方式相同。

[img]: /images/20210813/8d072006e54a4e4c9a3ecf07e4d35eb5.png
[img 1]: https://s2.ax1x.com/2019/09/07/n1Q6RH.png
[n1MvPe.png]: /images/20210813/f4469c0bddb441f9a734203672e451df.png
[n1MvPe.png 1]: https://s2.ax1x.com/2019/09/07/n1MvPe.png