都2020了,带你开发hexo主题(八)
继续完善文章详情页
现在的页面右边留空太多了,整体看上去不够居中。所以调下css:
1 | article.wrapper.style1 > .inner { |
接着图片和代码块超出了范围:
1 | article.wrapper.style1 > .inner img { |
hexo-helper-tocbot添加文章目录t
如果觉得目录有需要的继续往下看,这里直接安利我之前开发的hexo插件hexo-helper-tocbot及教程hexo-helper-tocbot插件使用教程。
安装
在cmd中使用npm或cnpm安装:
1 | npm i hexo-helper-tocbot --save |
配置
安装好后在主题下的config中添加教程中的配置:
1 | tocbot: |
其中headingsOffset和scrollSmoothOffset要和你主题的头部高度相对应。含义详见API
最后在article.ejs中添下如下代码(注意,这里要把content用
包起来才能识别)
添加返回首页按钮
网上找了个svg按钮,放上去,然后把a的href改为javascript:history.back(-1)就行,修改后代码如下:(可自由发挥,找更棒的)
1 | <article class="wrapper style1 align-left"> |
css:
1 | /* 返回按钮 */ |
代码同步上传在github仓库和百度云上,关注回复story008获取。
未完待续 To be continued……
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦
您的喜欢是作者写作最大的动力
QQ群和公众号