都2020了,带你开发hexo主题(四)
添加分页
上篇教程已经把首页内容给填充上去了,接下来继续给首页添加上分页。在文档辅助函数里有关如下
直接复制这段代码到index.ejs最下面:
1 | <div class="paginator"> |
为了看到效果将根目录下config中的per_page改为三,表示每页三篇文章,这样我们八篇文章就会有三页了
1 | index_generator: |
hexo s后的效果如下:
样式有点不能忍受,用f12工具查看其html代码如下:
1 | <div class="paginator"> |
为了方便直接在index.ejs中写css如下:(最终效果如下图)
1 | <style> |
添加文章详情页
首先在_partial下新建article.ejs,里面代码如下:(story居然没有文章页的模板233,果然好模板都被人用了)
1 | <article> |
然后在index.ejs中的a标签中加入文章超链接:
1 | <div class="content"> |
那么怎样让文章页能更根据我们的article.ejs页生成呢?回到一开始的模板介绍:
按照hexo的文档来,post是用来显示文章的,我们在layout目录下新建这几个ejs(post、page、archive、category、tag),然后暂且把article中的内容复制到post.ejs下,hexo s预览下效果:
已经是能渲染出来了,但是md里面还没有内容,这里我直接把这篇文章的md复制到测试的md中
样式又差不行不行,这个留到下篇教程再美化,现在把之前留下的问题解决,乍一看article.ejs是无用武之地了,不过考虑到page这个单页面的渲染和post差不多一致,所以我们要把文章部分抽离到article.ejs中,这样就可以复用代码了。抽离在教程二中就已经讲到,用局部模版(Partial),代码如下:
1 | <%- partial('_partial/article', {post: page}) %> |
后面的{post: page}表示把page变量存到post中传递给了article,所以article中的代码就要改为:
1 | <article> |
代码同步上传在github仓库和百度云上,回复story004获取。
未完待续 To be continued……
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦
您的喜欢是作者写作最大的动力
QQ群和公众号