↓Skip to main content

🐻‍❄️给Bear主题加一个文章分页

·341 words
Javascript 前端
Yalois
Author
Yalois
freedom
Table of Contents

前言
#

记得hugo是有官方的文章分页的，但是我这个主题没有，我也不想去研究怎么使用，直接自己造一个，折腾一下！改!

之前我改过很多次了，直接找到目录，MyBlog\themes\bearblog\layouts。

目录下的文件就是网页的框架（模板。

image-20240701182332692

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>

(不知道怎么解释书写代码的过程了，直接贴上注释！)

！完工，上效果

image-20240701191818645

image-20240701191826188