因为 next 主题的升级,导致网上很多 next 主题添加友链的教程中路径出现变动,在此记录一下我查看大量教程后基于 next 主题v8.2.2
配置自定义友链页面的方法。
本文基于hexo-v5.4.0
,next-v8.2.2
在/_config.next.yml
(详细请查看此处)文件中找到styles.styl
去处“#”进行启用。
1 2
| custom_file_path: style: source/_data/styles.styl
|
找到Menu Settings
添加友链: /links || fas fa-link
1 2 3 4 5 6 7 8 9 10 11 12
| menu: home: / || fa fa-home tags: /tags/ || fa fa-tags categories: /categories/ || fa fa-th archives: /archives/ || fa fa-archive about: default: /about/ || fa fa-user 友链: /links || fas fa-link 收藏夹: https://docs.myql.xyz/ || far fa-folder-open
|
按照source/_data/styles.styl
路径新建styles.styl
文件后,在styles.styl
中添加以下内容:
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
| #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; }
|
按source/about/links/index.md
路径新建index.md
,这里强调一下,因为我将友链页面放在了about
页面下,所以才是这样的路径,如果你需要直接在侧边栏添加,请去除路径中的about
打开刚刚新建的source/about/links/index.md
,添加以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| --- title: 友链 type: links ---
<div class="links-content"> <div class="no-icon note warning"><div class="link-info">😁欢迎与我交换友链</div></div> <div class="link-navigation"> {% for link in site.data.links.defaultlinks %} <div class="card"> <img class="ava nomediumzoom" src="{{ link.avatar }}"/> <div class="card-header"> <div><a href="{{ link.site }}" target="_blank"> {{ link.name }}</a> </div> <div class="info">{{ link.info }}</div> </div> </div> {% endfor %} </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
| --- title: 友链 type: links ---

<div class="links-content"> <div class="no-icon note warning"><div class="link-info">😁欢迎与我交换友链</div></div> <div class="link-navigation"> {% for link in site.data.links.defaultlinks %} <div class="card"> <img class="ava nomediumzoom" src="{{ link.avatar }}"/> <div class="card-header"> <div><a href="{{ link.site }}" target="_blank"> {{ link.name }}</a> </div> <div class="info">{{ link.info }}</div> </div> </div> {% endfor %} </div>
------
<div style="text-align:center;"><span class="with-love" id="animate1"> <i class="fa fa-heart"></i> </span>留言添加友链<span class="with-love" id="animate2"> <i class="fa fa-heart"></i> </span></div>
------
{% note success %}
**友链格式:**
- 网站名称:暮雨千泷 - 网站地址:https://www.myql.xyz - 网站描述:青天白日梦神仙 - 网站Logo/头像:https://cdn.jsdelivr.net/gh/leicancun/img@main/images/avatar.webp
{% endnote %}
|
在source/_data/
下新建links.yml
并添加以下内容
1 2 3 4 5
| defaultlinks: - name: 暮雨千泷 site: https://www.myql.xyz info: 青天白日梦神仙 avatar: https://cdn.jsdelivr.net/gh/leicancun/img@main/images/avatar.webp
|
参考文章: