新增Links页面

命令创建

$ hexo new page links

然后根目录下/source就新增了一个links文件夹，里面还有一个index.md文件

在文件中写入type: "links"，如果还想禁止评论的话就再写一个comments: false

创建友链栏

在blog\themes\next\_config.yml里找到menu，在其中添加

links: /links/|| link

在blog\themes\next\languages\zh-Hans.yml的menu里添加中文描述

links: 友链

增加友链页面样式

在blog\themes\next\layout创建links.swig，内容如下

{% 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 %}

修改blog\themes\next\layout\page.swig页面

在block title内部插入

<!-- 友情链接-->
#}{% elif page.type === 'links' and not page.title %}{##}{{ __('title.links') + page_title_suffix }}{#

在同页面的PAGE BODY内部引入page.swig

<!-- 友情链接-->
{% elif page.type === 'links' %}{% include 'links.swig' %}

配置友链

在blog\themes\next\_config.yml里的末尾处新增mylinks，这里就是做友情链接的地方

mylinks:- nickname: 尘埃's blogavatar: https://dustca.xyz/image/avatar.jpegsite: https://Mint-Bh.github.ioinfo: 一个搞安全的咸鱼

_config.yml`里的末尾处新增mylinks，这里就是做友情链接的地方

mylinks:- nickname: 尘埃's blogavatar: https://dustca.xyz/image/avatar.jpegsite: https://Mint-Bh.github.ioinfo: 一个搞安全的咸鱼

1.hexo+next友情链接页面搭建相关推荐

WordPress制作圆形头像友情链接页面的方法
网上看见过很多种友情链接页面,我比较喜欢的是圆形头像的这种,先看看效果吧:传送门就是这种上面是圆形的友链用户头像,下面是友链用户网站名,然后鼠标移上去头像会旋转,怎么实现这种效果呢?我在网上找了很多 ...
wordpress友联_Wordpress 友情链接页面终极版 – Fatesinger
之前写过一篇带头像的友情链接页面,当时有朋友说怎么能支持分类,我让他仿照以前不带头像的旧方法修改下,以前旧方法是用SQL语句获取的分类,其实完全可以通过Wordpress 自带的函数来实现,原因你懂的 ...
一个简单的blog系统（十二）增加友情链接页面
一个简单的blog系统(十二) 增加友情链接页面 1.首先,我们打开header.ejs,在其中添加一行代码,并作出响应修改: <li><a href="/links&qu ...
favicon自动获取_wordpress网站友情链接页面使用DNSPod自动获取网站favicon图标教程...
在网站的友情链接页面,经常可以看到网站的图标增加美感.在以前,有些是直接使用favicon.ico地址读取,但是确有弊端那就是很多网站首页并没有favicon.ico,就不可靠.还有一部分人采用的是谷 ...
wordpress友联_WordPress 友情链接页面终极版
之前写过一篇带头像的友情链接页面,当时有朋友说怎么能支持分类,我让他仿照以前不带头像的旧方法修改下,以前旧方法是用SQL语句获取的分类,其实完全可以通过WordPress 自带的函数来实现,原因你懂的 ...
wordpress友联_为你的wordpress添加独立的友情链接页面吧
刚刚研究WordPress,发现很多功能都不会,例如添加友情链接.经过查资料,实验,终于弄出来了.现在分享给大家. 1.新建友情链接模板复制主题下single.php,并改名为links.php.打 ...
Hexo+next主题自定义友情链接页面
最新hexo教程请移步我的博客:www.heson10.com 本文地址:https://www.heson10.com/posts/51572.html 新增links页面 hexo new pag ...
wordpress友联_WordPress制作独立的友情链接（Links）页面
默认情况下WordPress的友情链接只显示在首页,怎样可以让它显示在一个独立的页面呢? 第一步: 将你的页面模板 single.php 复制一份,命名为 links.php,放入主题文件夹下 4.9 ...
案例三：网站友情链接显示页面
知识点笔记-列表标签与超链接标签需求: 在网站的友情链接页面显示网站的所有的友情链接. 分析: 技术分析: [HTML的列表标签]  有序列表 <ol><li></l ...
dedecms友情链接plus/flink.php页面出错,织梦DedeCMS默认友情链接等页面的安全隐患...
织梦DedeCMS的好处什么的就不说了,今天主要讲一下织梦默认的设置里面一些可能会暴露网站模板路径的安全隐患.有人会说织梦模板的路径暴露了有什么的,当然这个路径是非常重要的了,如果你的系统未进行一些相 ...

1.hexo+next友情链接页面搭建

新增Links页面

创建友链栏

增加友链页面样式

配置友链

1.hexo+next友情链接页面搭建相关推荐

最新文章

热门文章