给博客添加上一篇下一篇功能
前言
发现其他主题有上一篇下一篇的功能,于是就给自己用的主题也加了一个。就是这样子~喵
实现
废话不多说,直接开始实现。
第一步 copy代码
当然是去有的博客上面去抄代码啊(抄作业什么的最擅长了)
找了个用next的友链博客,嗯…可以去我友链看
随便打开一片文章,按F12打开开发者工具。使用左上角的指针工具选择到上一篇下一篇元素的代码,右键copy代码
得到的代码如下:
1 | <div class="post-nav"> |
第二步 修改代码
根据自己主题修改成模板的ejs代码如下:
1 | <div class="post-nav"> |
插入到渲染文章的模板中,作者hojun的是在themes\jsimple\layout_widget\common-article.ejs这个文件里。
第三步 增加样式
继续使用F12来抄css,从父级抄到子级(有些不需要的看情况)
稍微改了一下:
1 | .post-nav{ |
把css加到页面中即可
第四步 oooooook了
查看效果:
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦
您的喜欢是作者写作最大的动力
QQ群和公众号
hexo折腾-系列文章:
给博客添加个人域名
给hexo的jsimple主题添加代码高亮
给博客添加网易云跟帖评论
给博客添加https支持
博客添加gitment评论
给博客添加APlayer音乐播放器^-^
hexo 使用说明
Lozad.js学习使用
snowfall.jquery.js实现樱花飘落效果
Hexo博客备份—妈妈再也不用担心你使用hexo写博客
github博客迁移至coding并提交百度收录
博客小人
live2d-看板娘小埋
使用disqus评论
anime.js实现logo动画
OwO-可爱的js表情符号插件
给博客添加图集展示
评论系统之来必力
添加系列文章功能
给Hexo博客添加Mathjax数学公式支持
给博客添加上一篇下一篇功能
给博客添加文章目录
hexo评论系统之valine快速使用
快速开发属于自己的APP-FusionApp
miccall主题及html5up站点推荐
CSS+SVG路径描边特效
网页看板娘-Live2d蕾姆
还没好图床的小伙伴看过来,微博是个好图床!