title: 1.hexo+next友情链接页面搭建
date: 2020-08-02 22:36:47
categories:

• 3.系统运维
• 3.hexo相关
• 1.hexo美化

安装next模板的初始设置，友情链接是直接放在侧边栏里的，少还好，一旦友情链接多了，就会显得侧边栏特别的杂乱，所以就打算专门做个页面来存放友链

新增Links页面

命令创建

$ hexo new page links

然后根目录下/source就新增了一个links文件夹，里面还有一个index.md文件

在文件中写入type: "links"，如果还想禁止评论的话就再写一个comments: false

创建友链栏

在blog\themes\next\_config.yml里找到menu，在其中添加

links: /links/|| link

在blog\themes\next\languages\zh-Hans.yml的menu里添加中文描述

links: 友链

增加友链页面样式

在blog\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 %}

修改blog\themes\next\layout\page.swig页面

在block title内部插入

<!-- 友情链接-->
#}{% elif page.type === 'links' and not page.title %}{#
  #}{{ __('title.links') + page_title_suffix }}{#

在同页面的PAGE BODY内部引入page.swig

<!-- 友情链接-->
{% elif page.type === 'links' %}
    {% include 'links.swig' %}

配置友链

在blog\themes\next\_config.yml里的末尾处新增mylinks，这里就是做友情链接的地方

mylinks:

- nickname: 尘埃's blog
  avatar: https://dustca.xyz/image/avatar.jpeg
  site: https://Mint-Bh.github.io
  info: 一个搞安全的咸鱼

_config.yml`里的末尾处新增mylinks，这里就是做友情链接的地方

mylinks:

- nickname: 尘埃's blog
  avatar: https://dustca.xyz/image/avatar.jpeg
  site: https://Mint-Bh.github.io
  info: 一个搞安全的咸鱼