0%

博客自定义友链页面

hexo博客主题默认是在主题配置文件_config.yml中links下添加友链,当链接变多以后侧栏页面的排版很不美观。

一、步骤

  1. 新增links页面hexo new page links

    • 在博客根目录/source下会生成一个links文件夹,打开其中的index.md文件,在头部写入type: links,这个一定要写
  2. 主题配置文件中menu下添加:links: /links/ || link

  3. /themes/next/languages/zh-Hans.yml文件中menu下增加中文描述links: 友链,即把英文转为中文

  4. 修改模板

    • /themes/next/layout/新建links.swig,内容如下:
    • mac下样式还行,Window大屏幕下有点儿变形,修改width: 300px;width: 30%;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
      {% 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 %}
    • 修改/themes/next/layout/page.swig文件

      • block title部分加入以下代码:
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      {% block title %}
      {%- set page_title_suffix = ' | ' + title %}
      {%- if page.type === 'categories' and not page.title %}
      {{- __('title.category') + page_title_suffix }}
      {%- 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 }}
      {%- elif page.type === 'schedule' and not page.title %}
      {{- __('title.schedule') + page_title_suffix }}
      {%- else %}
      {{- page.title + page_title_suffix }}
      {%- endif %}
      {% endblock %}
      • PAGE BODY
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      {% elif page.type === 'categories' %}
      <div class="category-all-page">
      <div class="category-all-title">
      {{ _p('counter.categories', site.categories.length) }}
      </div>
      <div class="category-all">
      {{ list_categories() }}
      </div>
      </div>

      {% elif page.type === 'links' %}
      {% include 'links.swig' %}
  5. 在主题的配置文件_config.yml下配置友链,如:

1
2
3
4
5
mylinks:
- nickname: AnFrank #友链名称
site: https://enfangzhong.github.io/ #友链地址
info: 既可以早九晚五又可以浪迹天涯。 #友链说明
avatar: https://enfangzhong.github.io/images/avatar.jpg #友链头像

二、参考

  1. 参考一
  2. fontawesome