最新hexo教程请移步我的博客:www.heson10.com
本文地址:https://www.heson10.com/posts/51572.html

新增links页面

hexo new page links

打开在/source/links里面刚生成的index.md文件,在头部加上type: "links"

代码如下:

---
title: 朋友圈
date: 2020-07-19 22:28:52
type: "links"
---

配置menu

在主题配置文件menu下添加:

 links: /links/ || fa fa-link

\themes\next\languages\zh-CN.yml文件中menu下增加中文描述

links: 朋友圈

新增links.swig页面

\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="no-icon note warning"><div class="link-info">												

Hexo+next主题自定义友情链接页面相关推荐

  1. wordpress友联_Wordpress 友情链接页面终极版 – Fatesinger

    之前写过一篇带头像的友情链接页面,当时有朋友说怎么能支持分类,我让他仿照以前不带头像的旧方法修改下,以前旧方法是用SQL语句获取的分类,其实完全可以通过Wordpress 自带的函数来实现,原因你懂的 ...

  2. favicon自动获取_wordpress网站友情链接页面使用DNSPod自动获取网站favicon图标教程...

    在网站的友情链接页面,经常可以看到网站的图标增加美感.在以前,有些是直接使用favicon.ico地址读取,但是确有弊端那就是很多网站首页并没有favicon.ico,就不可靠.还有一部分人采用的是谷 ...

  3. wordpress友联_WordPress 友情链接页面终极版

    之前写过一篇带头像的友情链接页面,当时有朋友说怎么能支持分类,我让他仿照以前不带头像的旧方法修改下,以前旧方法是用SQL语句获取的分类,其实完全可以通过WordPress 自带的函数来实现,原因你懂的 ...

  4. wordpress友联_为你的wordpress添加独立的友情链接页面吧

    刚刚研究WordPress,发现很多功能都不会,例如添加友情链接.经过查资料,实验,终于弄出来了.现在分享给大家. 1.新建友情链接模板 复制主题下single.php,并改名为links.php.打 ...

  5. WordPress制作圆形头像友情链接页面的方法

    网上看见过很多种友情链接页面,我比较喜欢的是圆形头像的这种,先看看效果吧:传送门 就是这种上面是圆形的友链用户头像,下面是友链用户网站名,然后鼠标移上去头像会旋转,怎么实现这种效果呢?我在网上找了很多 ...

  6. 一个简单的blog系统(十二) 增加友情链接页面

    一个简单的blog系统(十二) 增加友情链接页面 1.首先,我们打开header.ejs,在其中添加一行代码,并作出响应修改: <li><a href="/links&qu ...

  7. 友情链接php模板,自定义友情链接页面模板

    重要的事情只说一遍:这是本站首个自制的模板-友情墙,使用 wpdb 自定义去查询友情数据表,设计 CSS,首次弄这些,时间花得挺多呀,不熟悉 WP 的手册就是头痛的回事.要使用这种风格的友情链接,只需 ...

  8. Hexo更换主题后,启动页面报错

    Hexo更改主题后启动服务器,界面显如下字符: Hexo启动页面显示extends includes/layout.pug block content include includes/recent- ...

  9. hexo博客kaze主题自定义社交链接

    主题自带的icon图标 # 社交链接 about:description: descriptionsocial_links:- { icon: icon-sina, link: https://wei ...

最新文章

  1. LeetCode简单题之学生分数的最小差值
  2. 浏览器缓存详解:expires,cache-control,last-modified,etag详细说明
  3. Spring MVC 的xml一些配置
  4. Spring---------ThreadLocal(线程变量副本)
  5. 多线程 java 实例_Java多线程实例学习
  6. 如何通过Windows Server 2008 R2建立NFS存储
  7. Mybatis解决jdbc编程的问题以及mybatis与hibernate的不同
  8. 厉害了,自己手写一个Java热加载!
  9. Kylin, Mondrian, Saiku系统的整合
  10. 作为外包,你有过不甘吗?| 畅言
  11. netty实现mtqq_Netty实现高性能IOT服务器(Groza)之手撕MQTT协议篇上
  12. 一个B站下载视频的网站
  13. OneNote for win10 登录不了
  14. C语言:链表(动态)创建之头插法和尾插法
  15. 设置TreeViewer的前景色和背景色
  16. 【Atlas 200 DK】(一)简介 Atlas 200 DK 开发者套件(型号:3000)
  17. kubeadm创建k8s集群(1.14.2版本)
  18. android 自定义侧边栏,android界面设计(一)侧边栏的两种实现方式
  19. QT Create OCI方式连接达梦数据库
  20. C#技巧与解析(部分)

热门文章

  1. PPL 和AMP并行编程
  2. Android的Activity生命周期以及模式
  3. intellij idea 使用Tomcat部署的项目在哪里,为什么不在Tomcat的webapps目录下面
  4. maven项目本地手动导包
  5. Android USB Accessory分析
  6. Vmware Converter (P2V在线迁移)
  7. Vector3.Angle
  8. MPC使用介绍(三)
  9. AI在棒球联盟赛运用·棒球1号位
  10. CMake 手册详解(四)