常规的友链展示
在next主题的配置文件next_config.yml
中添加友链
1 2 3 4 5 6 7 8
| # Blog rolls links_icon: link links_title: Links # links_layout: block links_layout: inline links: Hui-Shao's Blog: https: 博采众长: https:
|
next友链,默认是在主题配置文件中 links 下添加,但是当链接变多以后,全部把其放置在侧边栏着实不是一件美事。所以这时候应该来个自定义的友链页面(朋友圈)
具体操作
1.在控制页面里新加一个page
这个其实与之前添加的标签等相似
当然也可以在 /source
手动创建md文件
然后在博客根目录 /source
下会生成一个 links 文件夹,打开其中的 index.md 文件,在头部写入 type =
“links”,这个一定要写,如下:
1 2 3
| title: 朋友圈 date: 2022-08-29 14:13:17 type: "links"
|
1 2 3 4 5 6 7 8
| menu: home: / || fa fa-home about: /about/ || fa fa-user tags: /tags/ || fa fa-tags categories: /categories/ || fa fa-th archives: /archives/ || fa fa-archive schedule: /schedule/ || fa fa-calendar links: /links/ || fa fa-link
|
如果你不想要这个侧边栏里的各个图标,可以把 fa fa-删除
在 themes\next\languages\zh-CN.yml
文件中的menu
下添加
做完这些之后,就可以配置下友链页面的样式了
效果图:
3.新增 links.njk 文件 !!注意保存位置、路径书写
在 \blog\themes\next\layout\_partials\page
下新建links.njk
,下面是前端的代码
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 %}
|
4.修改 page.njk
修改 /themes/next/layout/page.njk
文件,可能因为配置的版本不一,但是是兼容的也可以在swig这样的后缀文件中做同样的修改
1 2 3 4 5
| {%- 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 }}
|
2.swig的修改形式
1 2
| #}{% elif page.type === "tags" and not page.title %}{# #}{{ __('title.tag') + page_title_suffix }}{#
|
5.引入 links.njk
仍然是在page.njk
文件中配置,这次的目的是引入刚刚新建的links
1 2 3 4
| {% elif page.type === 'categories' %} {%- include '_partials/page/categories.njk' -%}#作为位置参考 {% elif page.type === 'links' %} {% include '_partials/page/links.njk' %}
|
注意不要引入多余的空格,中文记得加注释,有报错的话,可以先检查下再求助
这边的话也是我注意小心被摆,网上有部分博客没有注意文件路径的修改,导致友链页面报错
1
| {% include '_partials/page/links.njk' %}
|
这也是前面在新建links.njk
时为什么要强调文件路径的问题,如果代码格式不同,可以参照自己前面categories等的书写
最后就是欢乐地书写友链
在_config.next.yml
文件中完成最后配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| mylinks: # 友链交换 已经添加贵站 # 名称:Kvein's Blog # 地址:https://www.kevinly.com.cn # 描述:perseverance # 头像:https://HY-Kevin.github.io/images/avatar.jpg
- nickname: Hui-Shao's Blog #友链名称 site: https://hui-shao.cn #友链地址 info: Just do it... #友链说明 avatar: https://hui-shao.cn/images/avatar.jpg #友链头像 - nickname: AnFrank #友链名称 site: https://enfangzhong.github.io/ #友链地址 info: 既可以早九晚五又可以浪迹天涯。 #友链说明 avatar: https://enfangzhong.github.io/images/avatar.jpg #友链头像
|
在配置过程中最好先在本地部署康康情况,再部署到github上,不然网站有时候经不起错误代码的袭击。