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

关注

原创最新推荐文章于 2026-03-14 00:30:12 发布 1k 阅读 AI 写同款· GEO 优化 ›

Hugo 踩坑记录最近想把hexo换成hugo,在部署过程中出现了一些问题，想记录一下。我选择的主题是http://nodejh.com/，hugo-theme-cactus-plus一个十分简洁的皮肤主题，然后我部署过去了，出现了一点意外。访问的时候我找了一下作者的博客，看了一下，这个问题它的演示网站上也有。我查了一下，可能和浏览器有关，当然暂时没找到解决的办法。 ie浏览器... 阅读详情

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

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

新建空白主题

主题下，模板分类存放

文件夹下再分类

创建文章

设置博文归属

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