在Hexo中使用fexo主题并添加分页(hexo分类页面)

在Hexo中使用fexo主题并添加分页(hexo分类页面)

编码文章call10242025-05-10 20:35:321A+A-

使用fexo主题并添加分页功能

基于Hexo的博客已经发布到github上,并使用了自己的域名zhangzirui.com,于是我又陷入了当时用jekyll搭博客后的同一个烦恼--选主题。

当时的jekyll用的是Gaohaoyang创作的主题当时找了好久才确定。现在用了Hexo却很快找到了想要的主题fexo。

样式如下图







运行

$ cd my-blog

$ git clone git@github.com:forsigner/fexo.git themes/fexo

下载到theme目录下,然后在配置文件中写下

# Extensions

## Plugins: https://hexo.io/plugins/

## Themes: https://hexo.io/themes/

theme: fexo

再次运行Hexo博客

$hexo server

发现博客已经改天换地一般。

然而看了一会却发现,文章内部没有加上分页,于是决定自己写一个。

在theme的layout文件夹的_partial/component内创建pagination.ejs,

代码如下:

<% if (page.prev || page.next){ %>

<div class="post__pagination">

<nav class="post__nav">

<div class="post__prev tl">

<% if (page.prev){ %>

<a href="<%- config.root %><%- page.prev.path %>" title="<%= page.prev.title %>">

<strong>上一篇:</strong>

<span>

<% if (page.prev.title){ %><%= page.prev.title %><% } else { %>(no title)<% } %></span>

</a>

<% } else {%>

<a href="<%- config.root %><%- page.next.path %>" title="<%= page.next.title %>">

<strong>第一篇:</strong>点击到下一篇

</a>

<%}%>

</div>

<div class="post__home tc">

<a href="/archives">

<strong>目录</strong>

</a>

</div>

<div class="pot__next tl">

<% if (page.next){ %>

<a href="<%- config.root %><%- page.next.path %>" title="<%= page.next.title %>">

<strong>下一篇:</strong>

<span><% if (page.next.title){ %><%= page.next.title %><% } else { %>(no title)<% } %>

</span>

</a>

<%} else {%>

<a href="/archives">

<strong>最后一篇:</strong>点击返回目录

</a>

<% }%>

</div>

</nav>

</div>

<% } %>

之后在post.ejs中加上

<%- partial('_partial/component/paginationPost') %>

Hexo中创建分页还是很方便的,直接调用他封装好的函数就行。

做了些微小的工作,谢谢大家。

点击这里复制本文地址 以上内容由文彬编程网整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!
qrcode

文彬编程网 © All Rights Reserved.  蜀ICP备2024111239号-4