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);
    });
};