Hugo博客个性化主题开发踩坑记录（一）

个性化博客主题开坑记录，哎嘿(๑•̀ㅂ•́)و✧

博文分类，分页面进行展示

新建空白主题

 

主题下，模板分类存放

文件夹下再分类

 创建文章

 设置博文归属

---
title: "blog1"
date: 2022-01-06T15:44:53+08:00
draft: false
series: blog
   
---

列表页模板对应博文文件夹名称

 单页文章模板使用默认名称

Config.Toml里主页路径配置

[menu]
name="首页"
url="/"
weight="1"
[[menu.main]]
name="工作"
url="/work/"
weight="2"
[[menu.main]]
name="博文"
url="/blog/"
weight="3"

 分类配置

# Project series
  [params.project]

# MMD series
  [params.mmd]

# blog series
  [params.blog]

输出

[outputs]
  home = ["HTML", "RSS", "JSON"]

主页

检索blog相关文件夹下内容，并跳转

<h1> Page </h1>
        {{ range where .Pages "Section" "blog" }}
        
        <div>
         
            <a href="{{.Permalink}}">{{.Title}}</a>
        </div>
        {{ end }}

列表页

建立盒子

<div>
        <div id="blog-workarea-hidden">
        <div id="blog-workarea">
            <!-- 隐藏滑动栏并在字数过多时允许滑动 -->

            {{ $paginator := .Paginate  (where .Data.Pages "Params.series" "blog") }}
<!-- 检索blog分类下文章展示 -->

            {{ range $paginator.Pages }}
            
        <div id="blog-apart">
            <a href="{{.Permalink}}"><img  id="blog-img" src="../../../image/icon/blog-img.png" >
         <div id="blog-text">
             <div id="blog-title">
                {{.Title}}
                <!-- 输出标题 -->

             </div>
             <div id="blog-content">
                {{  .Content | safeHTML | truncate 100 }}
<!-- 输出内容，限制100字以内 -->

             </div>
         </div>

         
        </a>
        </div>
        {{ end }}

 
        </div>
    </div>
    </div>

返回上级功能

function back(){
        window.location.href = "../";
    }  

内容页

文章缓慢滑动返回顶部

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!-- 引入jQuery -->

 var top = document.getElementById("blog-detail-top");
    top.onclick = function (){
        $(document).ready(function(){
        $(".blog-text").animate({scrollTop:0},500);
    });
};