原生调用友情链接

笔者开发网站十几年了，还是习惯把友情链接放在网站首页底部位置
Butterfly主题虽然有友情链接页面，但是属于二级页面，总感觉怪怪的

经过查看Butterfly主题flink代码，决定把读取_data/link.yml友链文件的代码插入到网站首页底部
_data/link.yml的链接属性里增加一个index: 1的参数
这个参数用来判断链接是否需要调用到首页，具体代码如下所示

1
2
3
4
5
6
7
8
- class_name: 友情链接
  class_desc: 申请友情链接请到链接界面留言
  link_list:
  - name: 码农浅知
      link: https://mnqz.com/
      avatar: /img/favicon.png
      descr: 码农编程笔记
      index: 1

具体方法如下
打开模版目录下layout/includes/layout.pug文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
        main#content-inner.layout(class=hideAside)
          if body
            div!= body
          else
            block content
            if theme.aside.enable && page.aside !== false
              include widget/index.pug
````````````````在如下位置插入代码``````````````````
        - var footerBg = theme.footer_bg
        if (footerBg)
          if (footerBg === true)
            - var footer_bg = bg_img
          else
            - var footer_bg = isImgOrUrl(theme.footer_bg) ? `background-image: url('${url_for(footerBg)}')` : `background: ${footerBg}`
        else
          - var footer_bg = ''

        footer#footer(style=footer_bg)
          !=partial('includes/footer', {}, {cache: true})

找到第30行左右，在- var footerBg = theme.footer_bg上方插入
将如下代码插入

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
if is_home()
  if site.data.link
    - let result = ""
    each i in site.data.link
      - let className = i.class_name ? markdown(`## ${i.class_name}`) : ""
      - let classDesc = i.class_desc ? `<div class="flink-desc">${i.class_desc}</div>` : ""

      - let listResult = ""

      each j in i.link_list
        if j.index
          -
            listResult += `
              <div class="flink-list-item">
                <a href="${j.link}" title="${j.name}" target="_blank">
                  <div class="flink-item-icon">
                    <img class="no-lightbox" src="${j.avatar}" onerror='this.onerror=null;this.src="${url_for(theme.error_img.flink)}"' alt="${j.name}" />
                  </div>
                  <div class="flink-item-name">${j.name}</div>
                  <div class="flink-item-desc" title="${j.descr}">${j.descr}</div>
                </a>
              </div>`
          -
      if listResult
        #article-container.layout!= `<div class="flink" style="width:100%;padding:15px 40px;color: blueviolet;font-size: 1.2em;"> ${classDesc} <div class="flink-list">${listResult}</div></div>`

最终效果如下,注意代码缩进层次要完全一致

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
main#content-inner.layout(class=hideAside)
  if body
    div!= body
  else
    block content
    if theme.aside.enable && page.aside !== false
      include widget/index.pug

if is_home()
  if site.data.link
    - let result = ""
    each i in site.data.link
      - let className = i.class_name ? markdown(`## ${i.class_name}`) : ""
      - let classDesc = i.class_desc ? `<div class="flink-desc">${i.class_desc}</div>` : ""

      - let listResult = ""

      each j in i.link_list
        if j.index
          -
            listResult += `
              <div class="flink-list-item">
                <a href="${j.link}" title="${j.name}" target="_blank">
                  <div class="flink-item-icon">
                    <img class="no-lightbox" src="${j.avatar}" onerror='this.onerror=null;this.src="${url_for(theme.error_img.flink)}"' alt="${j.name}" />
                  </div>
                  <div class="flink-item-name">${j.name}</div>
                  <div class="flink-item-desc" title="${j.descr}">${j.descr}</div>
                </a>
              </div>`
          -
      if listResult
        #article-container.layout!= `<div class="flink" style="width:100%;padding:15px 40px;color: blueviolet;font-size: 1.2em;"> ${classDesc} <div class="flink-list">${listResult}</div></div>`

- var footerBg = theme.footer_bg
if (footerBg)
  if (footerBg === true)
    - var footer_bg = bg_img
  else
    - var footer_bg = isImgOrUrl(theme.footer_bg) ? `background-image: url('${url_for(footerBg)}')` : `background: ${footerBg}`
else
  - var footer_bg = ''

footer#footer(style=footer_bg)
  !=partial('includes/footer', {}, {cache: true})

然后老三样

1
2
3
hexo cl
hexo g
hexo s

刷新首页看下效果吧

码农浅知-Hexo博客Butterfly主题首页底部增加友情链接