給hexo博客添加上一篇下一篇功能

給hexo博客添加上一篇下一篇功能

前言

發現其他主題有上一篇下一篇的功能,於是就給自己用的主題也加了一個。就是這樣子~喵

實現

廢話不多說,直接開始實現。

第一步 copy代碼

當然是去有的博客上面去抄代碼啊(抄作業什麼的最擅長了)

找了個用next的友鏈博客,嗯…可以去我友鏈看

給hexo博客添加上一篇下一篇功能

隨便打開一片文章,按F12打開開發者工具。使用左上角的指針工具選擇到上一篇下一篇元素的代碼,右鍵copy代碼

給hexo博客添加上一篇下一篇功能

得到的代碼如下:

給hexo博客添加上一篇下一篇功能

第二步 修改代碼

根據自己主題修改成模板的ejs代碼如下:

給hexo博客添加上一篇下一篇功能

插入到渲染文章的模板中,作者hojun的是在themes\jsimple\layout_widget\common-article.ejs這個文件裡。

第三步 增加樣式

繼續使用F12來抄css,從父級抄到子級(有些不需要的看情況)

給hexo博客添加上一篇下一篇功能

稍微改了一下:

給hexo博客添加上一篇下一篇功能

第四步 oooooook了

查看效果:

給hexo博客添加上一篇下一篇功能


分享到:


相關文章: