Hexo修改友链样式

三水非冰

February 26, 2019

173views

关闭评论

3971字数

IT相关 Hexo

前言

关于本站友链的修改，一是随着友链的增加导致侧边栏的臃肿，影响美观，二是由于某些特殊原因主页无法添加外链，故另建一页专门放置我可爱的邻居们，但因为我不怎么会搞网页设计，故请教大佬，遂有了以下关于友链页面的美化内容，以作记录。

修改

以下友链的样式采自YuYe大佬，这里对他表示感谢。

在themes/Next/layout/新建一个文件links.swig，其内容为以下代码：

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

修改themes/next/layout/page.swig，在

#}{{ __('title.schedule') + page_title_suffix }}{#

下方添加两行代码：

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

修改themes/next/layout/page.swig，在

{% include 'schedule.swig' %}

下方添加两行代码：

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

在主题配置文件themes/_config.yml末尾处添加友链：

mylinks:
  - nickname: 三水非冰博客  #友链名称
    avatar: https://www.sanshuifeibing.com/usr/images/avatar2.jpg  #友链头像
    site: https://www.sanshuifeibing.com  #友链地址
    info: 一个菜鸟的博客，爱文学、爱电脑、更爱生活。  #友链说明