0%

如何给hexo的next模版增加友情链接单页

起源

习惯了有一个页面单独设置友情链接。

如何创建友情链接页面

  1. 在模版配置文件中menu下面增加一行 link: /link
  2. 在模版配置文件中menu_icons下面增加一行 link: globe
  3. 在模版配置文件中links下面增加一个新的属性 links_chage,内部格式与links相同,并在links_chage下增加数个友情链接
  4. 在模版语言文件中menu下面增加一行 links: 链接 这里如果你要用多语言,你所用的集中语言都要添加啊。
  5. 打开模版文件/themes/next/layout/page.swig
    1. 更改第19行代码
      1
      {% include '_partials/page-header.swig' %}
      改为
      1
      2
      3
      {% if page.type !=='link' %}
      {% include '_partials/page-header.swig' %}
      {% endif %}
    2. 更改第41行代码
      1
      {% else %}
      改为
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      {% elif page.type === 'link' %}
      <div class="links-all-page motion-element {{ 'links-of-page-' + theme.links_layout | default('inline') }}">
      <div class="links-all-page-title">
      <i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
      {{ theme.links_title }}
      </div>
      <ul class="links-all-page-list">
      {% for name, link in theme.links %}
      <li class="links-all-page-item">
      <a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
      </li>
      {% endfor %}
      </ul>
      </div>
      {% else %}
  6. css文件/themes/next/source/css/_custom/custom.styl中增加
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .links-all-page,.use-motion .links-all-page{
    opacity :1;
    }
    .links-all-page-list{
    display :inline-flex;
    }
    .links-all-page-item{
    display :flex;
    flex-direction :column;
    margin: 3px 5px;
    }

新建页面

使用命令hexo new page link创建link页面,并编辑Front-matter区域为一下内容

1
2
3
4
5
---
title: 友情链接
date: 2017-01-14 21:21:21
type: "link"
---

测试

执行命令 hexo s,打开浏览器查看 链接http://localhost:4000/link 可看到类似一下的效果

over

  • Post author: hainuo
  • Post link: hexo-next-linkpage
  • Copyright Notice: All articles in this blog are licensed under BY-NC-ND unless stating additionally.