一直默默地在网上冲浪，今天抽空把友链页面搞一下，这样可以记录好多新的朋友，一起遨游于主流的互联网大厂之外自由而又荒芜的时空。
NexT 主题自带的并没有友链页面，在网上查了很久，找到了解决方案：直接markdown中内嵌友链css和html，之前也有经验直接开搞，顺便mark一下
修改主题配置文件
修改主题配置文件_config.hexo-theme-next.yml，我这个比较特殊，大家找到自己的那个就行,放开下方代码的注释，开启自定样式的功能
custom_file_path: style: source/_data/styles.styl
查看有没有source\_data\styles.styl这个文件，没有就新建一个即可
添加以下格式：
#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; }
然后 找到Menu Settings添加links: /links || fas fa-link
links: /links || fas fa-link
再修改themes\hexo-theme-next\languages\zh-CN.yml 语言转化文件,添加links: 朋友们
menu: home: 首页 archives: 归档 categories: 分类 tags: 标签 about: 关于 links: 朋友们
创建友链页面
使用 hexo new page links 可以新建一个 link 页面，我们将其作为友链页面
--- 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 %} <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> ------ {% note success %} **友链申请条件：** - 网站内容以原创为主，技术性博客优先，内容不限, 但必须网站内容符合中国大陆法律 - 已开启HTTPS，且至少有3篇博客，一年多多少少能更新几篇文章 - 最好提供站点RSS，方便后续网站升级（将全面重写网站，主动拉取各位大佬的文章） **友链格式：** ``` - name: 小牛呼噜噜 info: 专心|专注|专研 site: https://www.xiaoniuhululu.com avatar: https://www.xiaoniuhululu.com/images/zj/head-portrait-image.png rss: https://www.xiaoniuhululu.com/atom.xml ``` {% endnote %}
其中：site.data 就是 source/_data 目录，后面的 links 就是等会要创建的 links.yml 友链文件
如果觉得文章对你有帮助，欢迎关注微信公众号：小牛呼噜噜
添加友链
在 source/_data/ 目录下新建 links.yml 文件，写入以下内容：
- name: 小牛呼噜噜 info: 专心|专注|专研 site: https://www.xiaoniuhululu.com avatar: https://www.xiaoniuhululu.com/images/zj/head-portrait-image.png rss: https://www.xiaoniuhululu.com/atom.xml
后续的友链继续往下写即可
部署Hexo
hexo clean;hexo g;hexo s //本地调试，查看效果 hexo clean;hexo g;hexo d//发布
最终效果：
参考： https://www.litcu.cn/posts/9f2deaa1
