关于如何给 NexT 主题添加友链页面,在网上能够搜到很多,但是基本上都已经过时了。
要么是没有把数据文件和主题分离,还在修改主题中的文件(而且是旧版的文件,新版的主题结构和内容都有变化);要么是给出的代码还依赖 jQuery。
而新版的 NexT 主题除了 Fancybox 外,其它功能都已经不再依赖 jQuery 了。由于 Fancybox 和我的 WebP 检测代码冲突,所以我切换到了 medium-zoom,这样就不再引入 jQuery 了。
因此,网上找到的代码就不能拿过来直接用了。
这里主要需要修改的是 link.js
文件。
1. 涉及到的文件
1 2 3 4 5 6 7 8 9 10 11 12 . ├── _config.next.yml └── source ├── _data │ └── body-end.njk ├── css │ └── link.css ├── js │ └── link.js └── links ├── index.md └── linklist.json
2. 步骤
2.1. 建立页面
运行
这会创建 source/links/index.md
文件。
文件示例:
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 --- title: 友情链接 type: links toc: enable: false --- <link rel ="stylesheet" href ="/css/link.css" > {% note info %} 排名不分先后,每次刷新会随机排列。 {% endnote %} <div > <div class ="links-content" > <div class="link-navigation" id="links1"></div> </div> </div> ------ <div style ="text-align:center;" > <span class ="with-love" id ="animate1" > <i class ="fa fa-heart" > </i > </span > 留言互换友链 o ((>ω<)) o <span class ="with-love" id ="animate2" > <i class ="fa fa-heart" > </i > </span > </div > ------ {% note success %} ## 友链格式 - 名称:如鱼饮水,冷暖自知- 网址:[https://wangjiezhe.com ](https://wangjiezhe.com )- 头像:[https://gravatar.loli.net/avatar/e09cf54e933e5a690716e68961ff3b1c?s=512 ](https://gravatar.loli.net//avatar/e09cf54e933e5a690716e68961ff3b1c?s=512 ){% endnote %}
注意在 Front-Matter 里一定要有 type: links
。
这里我还关闭了侧边栏的目录。
2.2. 存储数据
所有友链的数据都放在 source/links/linklist.json
里,其格式为:
1 2 3 4 5 6 7 8 9 10 11 12 [ { "name" : "" , "site" : "" , "avatar" : "" } , { "name" : "" , "site" : "" , "avatar" : "" } ]
其中 name
为网站的名字,site
为网址,avatar
为头像。
头像可以使用 Gravatar,这样可以保证始终可用的。
2.3. 渲染页面
在 source/_data/body-end.njk
中,引入 link.js
:
1 2 3 {% if page.type === 'links' %} {{- next_js('link.js' , true) }} {% endif %}
其中 source/js/link.js
的内容为
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 function shuffle (arr ) { let i = arr.length ; while (i) { let j = Math .floor (Math .random () * i--); [arr[j], arr[i]] = [arr[i], arr[j]]; } } function renderlink (data ) { var name, avatar, site, li = "" ; shuffle (data); for (var i = 0 ; i < data.length ; i++) { name = data[i].name ; avatar = data[i].avatar ; site = data[i].site ; li += '<div class="card">' + '<a href="' + site + '" target="_blank">' + '<div class="thumb" style="background: url( ' + avatar + ');">' + '</div>' + '</a>' + '<div class="card-header">' + '<div><a href="' + site + '" target="_blank">' + name + '</a></div>' + '</div>' + '</div>' ; } document .querySelector (".link-navigation" ).innerHTML = li; } fetch ('/links/linklist.json' ) .then (response => response.json ()) .then (res => renderlink (res));
2.4. 创建样式
创建 source/css/link.css
,其内容为(这个文件完全来自于网络):
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 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 .links-content { margin-top : 1rem } .link-navigation ::after { content : " " ; display : block; clear : both } .card { width : 130px ; font-size : 1rem ; padding : 0 ; border-radius : 4px ; transition-duration : .15s ; margin-bottom : 1rem ; display : block; float : left; box-shadow : 0 2px 6px 0 rgba (0 ,0 ,0 ,.12 ); background : #f5f5f5 } .card { margin-left : 16px } @media (max-width:567px) { .card { margin-left : 16px ; width : calc ((100% - 16px )/2 ) } .card :nth-child (2 n+1 ) { margin-left : 0 } .card :not (:nth-child (2 n+1 )) { margin-left : 16px } } @media (min-width:567px) { .card { margin-left : 16px ; width : calc ((100% - 32px )/3 ) } .card :nth-child (3 n+1 ) { margin-left : 0 } .card :not (:nth-child (3 n+1 )) { margin-left : 16px } } @media (min-width:768px) { .card { margin-left : 16px ; width : calc ((100% - 48px )/4 ) } .card :nth-child (4 n+1 ) { margin-left : 0 } .card :not (:nth-child (4 n+1 )) { margin-left : 16px } } @media (min-width:1200px) { .card { margin-left : 16px ; width : calc ((100% - 64px )/5 ) } .card :nth-child (5 n+1 ) { margin-left : 0 } .card :not (:nth-child (5 n+1 )) { margin-left : 16px } } .card :hover { transform : scale (1.1 ); box-shadow : 0 2px 6px 0 rgba (0 ,0 ,0 ,.12 ),0 0 6px 0 rgba (0 ,0 ,0 ,.04 ) } .card .thumb { width : 100% ; height : 0 ; padding-bottom : 100% ; background-size : 100% 100% !important } .posts-expand .post-body img { margin : 0 ; padding : 0 ; border : 0 } .card .card-header { display : block; text-align : center; padding : 1rem .25rem ; font-weight : 500 ; color : #333 ; white-space : normal } .card .card-header a { font-style : normal; color : #2bbc8a ; font-weight : 700 ; text-decoration : none; border : 0 } .card .card-header a :hover { color : #d480aa ; text-decoration : none; border : 0 }
2.5. 添加侧栏
在主题的配置文件(目前默认为 _config.next.yml
)中,添加
1 2 3 4 5 6 menu: home: / || fa fa-home tags: /tags/ || fa fa-tags categories: /categories/ || fa fa-th archives: /archives/ || fa fa-archive + links: /links/ || fa fa-link
大功告成!
参考:
Hexo-NexT 新增友链
You (Might) Don't Need jQuery