给BearBlog主题加一个基于前端的文章分页
前言
记得hugo是有官方的文章分页的，但是我这个主题没有，我也不想去研究怎么使用，直接自己造一个，折腾一下！改!
之前我改过很多次了，直接找到目录，MyBlog\themes\bearblog\layouts。
目录下的文件就是网页的框架（模板。
hugo是go开发的所以是go模板(go html template)。
我对go不太熟悉，然后问了好多次GPT，也学到了不少关于go的东西。
下面直接说我的思路吧。
问题思考
本来的主题是直接一个ul列表，我需要按指定数量给分页。
本来是想要在hugo生成静态文件的时候，10个一页，然后给每一页生成一个html文件，
比如/blog/1.html和/blog/2.html 分别代表第一页目录和第二页目录，然后点下一页的时候跳转，但是这样有些丑陋。还有就是我不会...
看了看别人的博客案例，大概都是hugo在生成静态文件的时候，为每一页专门分一个目录，比如 /page/1/文章xxx /page/2/文章xxx
大概率和主题有关，我的网站目录结构默认不是这样的( 如果是这样可能就有分页功能了，
我的博客文章的链接直接就是/blog/xxx。
在简の单的思考了之后，✨一个想法在我脑中浮现，
生成出所有目录页，都放在一个页面，然后根据css display:none 来隐藏和显示某一个目录页。
比如我有10个文章，3个分一页 我能分4页。 本来网站上只有一个ul来显示目录，现在我3个文章生成一个目录。 ---- <ul>目录</ul> ---- --- <ul>目录1</ul> 显示 <ul>目录2</ul> 隐藏 <ul>目录3</ul> 隐藏 <ul>目录4</ul> 隐藏 ---
然后轮流隐藏显示。
代码
用VSCode读代码找到了\themes\bearblog\layouts\_default\list.html这个文件是目录模板文件，
原来的目录生成代码如下
<ul class="blog-posts">
{{ range .Pages }}
<li>
<span>
<i>
<time datetime='{{ .Date.Format "2006-01-02" }}' pubdate>
{{ .Date.Format (default "02 Jan, 2006" .Site.Params.dateFormat) }}
</time>
</i>
</span>
<a href="{{ .Permalink }}">{{ .Title }}</a>
</li>
{{ else }}
<li>
No posts yet
</li>
{{ end }}
</ul>
原来是直接遍历Pages来生成一个列表。我就需要在这里进行魔改。
直接上代码！
<!--每页文章数 和 总文章数-->
{{ $postsPerPage := 13 }}
{{ $totalPosts := len .Pages }}
<!--求总页数 不足一页按照一页算-->
{{ $numPages := div $totalPosts $postsPerPage }}
{{ $remainder := mod $totalPosts $postsPerPage }}
{{ if ne $remainder 0 }}
{{ $numPages = add $numPages 1 }}
{{ end }}
<!--先存储文章，不然在循环的时候.Pages被当做循环变量的属性,
.Pages只是blog下面的pages
.Site.Pages 还包含其他的页面包括主页，友链页
-->
{{ $allPages := .Pages }}
<!--记录循环的时候当前页码，主要是好区分-->
{{ $currentPage := 0}}
<!--循环生成每个目录页-->
{{range seq $numPages}}
<div class="list-block"><!--list-block包裹目录便于加其他元素和隐藏-->
<ul class="blog-posts">
{{ $start := mul $currentPage $postsPerPage}}
{{ $end := add $start $postsPerPage }}
{{ $end = sub $end 1 }}
{{range seq $start $end }}
{{$index := .}}
<!--因为在遍历的时候我是直接按每页数量遍历，不足一页的也会遍历，防止越界，写一个判断-->
{{if le $index (sub $totalPosts 1)}}
<!--Pages数组下序号为$index的文章-->
{{$c_e := index $allPages $index }}
<li>
<span>
<i>
<time datetime='{{$c_e.Date.Format "2006-01-02" }}' pubdate>
{{$c_e.Date.Format (default "2006-01-02")}}
</time>
</i>
</span>
<a href="{{$c_e.Permalink}}">{{ $c_e.Title }}</a>
</li>
{{end}}
{{end}}
</ul>
<!-- 下面是翻页按钮 直接调用js来实现display的修改 -->
{{ if eq $currentPage 0 }}
{{ if gt $numPages 1 }}
<!-- 第一页，显示下一页链接 -->
<!-- 下一页链接代码 -->
<a href="javascript:showPage({{add $currentPage 1}})">下一页</a>
{{ end }}
{{ else }}
{{ if eq $currentPage (sub $numPages 1) }}
<!-- 尾页，显示上一页链接 -->
<!-- 上一页链接代码 -->
<a href="javascript:showPage({{sub $currentPage 1}})">上一页</a>
{{ else }}
<!-- 中间页，显示上一页和下一页链接 -->
<!-- 上一页链接代码 -->
<!-- 下一页链接代码 -->
<a href="javascript:showPage({{sub $currentPage 1}})">上一页</a>
<a href="javascript:showPage({{add $currentPage 1}})">下一页</a>
{{ end }}
{{ end }}
页码:{{add $currentPage 1}}/{{$numPages}}
</div>
<!-- 自增 1-->
{{ $currentPage = add $currentPage 1}}
{{end}}
<!--js部分，实现全部隐藏和显示某一个-->
<script>
function hideAllList()
{
let ll=document.getElementsByClassName("list-block");
for(let i=0;i<ll.length;i++)
{
ll[i].style.display="none";
}
}
function showPage(i){
hideAllList();
let ll=document.getElementsByClassName("list-block");
ll[i].style.display="";
}
showPage(0);
</script>
(不知道怎么解释书写代码的过程了，直接贴上注释！)
！完工，上效果
评论区
评论加载中...