配置说明
一、hugo.yaml文件
在hugo根目录下新建hugo.yaml文件，并删掉原hugo.toml文件。
yaml
# -------------------------------------------------------------------------
# 核心修正：指定本地主题文件夹，而不是用 module 远程加载
# -------------------------------------------------------------------------
theme: "hextra"
# -------------------------------------------------------------------------
baseURL: "http://localhost:1313/"
title: "我的 Hextra 站点"
enableRobotsTXT: true
enableGitInfo: true
hasCJKLanguage: true
outputs:
home: [html]
page: [html]
section: [html, rss]
# 默认语言
defaultContentLanguage: zh-cn
languages:
# === 现有的中文配置 ===
zh-cn:
languageName: 简体中文
languageCode: zh-CN
weight: 1
title: "我的 Hextra 站点"
contentDir: content # 默认内容目录
# === 👇 新增：英文配置 ===
en:
languageName: English
languageCode: en-US
weight: 2
title: "My Hextra Site"
contentDir: content # 如果你使用文件名后缀区分语言（推荐），这里也填 content
# 注意：module 模块已被删除，以防止报错
markup:
highlight:
noClasses: false
goldmark:
renderer:
unsafe: true
extensions:
passthrough:
delimiters:
block: [['\[', '\]'], ['$$', '$$']]
inline: [['\(', '\)']]
enable: true
menu:
main:
- name: 文档
pageRef: /docs
weight: 1
- name: 博客
pageRef: /blog
weight: 2
- name: 搜索
weight: 3
params:
type: search
- name: GitHub
weight: 4
url: "https://github.com/hxjxtwg/hxjxtwg.github.io"
params:
icon: github
- name: Email
url: "mailto:xuhxjxhk@mail.com"
weight: 5
params:
icon: mail # 或者是 at-symbol
params:
description: "xxsky的个人网站，记录学习笔记与生活点滴。"
navbar:
displayTitle: true
displayLogo: true
logo:
path: images/logo.svg
dark: images/logo-dark.svg
link: /
width: 40
height: 40
# 搜索设置
search:
enable: true
type: flexsearch
flexsearch:
index: content
tokenize: forward
footer:
enable: true
displayPoweredBy: false # 隐藏 "由 Hextra 驱动"
displayCopyright: true # 显示版权信息
# 👇 支持 HTML 写法，把链接换成你的
width: normal
page:
width: normal
# 博客列表设置
blog:
list:
displayTags: true
sortBy: date
sortOrder: desc
pagerSize: 20
#评论系统
comments:
enable: true
type: "giscus"
giscus:
repo: "hxjxtwg/hxjxtwg.github.io" # 你的仓库名
repoId: "R_kgDOQhrNHw" # 你的仓库 ID
category: "Announcements" # 分类名
categoryId: "DIC_kwDOQhrNH84CzbsH" # 分类 ID
mapping: "pathname" # 映射方式
loading: "lazy" # 懒加载
lang: "zh-CN" # 语言
二、添加加载动画
1. 复制hugo\themes\hextra\layouts_partials\navbar.html
至hugo\layouts_partials目录下
2. 打开navbar.html，在顶部第1行开始添加如下代码：
加载动画
<div id="halo-racer-loader">
<div class="racer-container">
<div class="bar p1"></div>
<div class="bar p2"></div>
<div class="bar red"></div>
</div>
</div>
<style>
#halo-racer-loader {
position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
width: 100% !important; height: 100% !important;
z-index: 999999999 !important;
background: #ffffff;
display: flex !important; justify-content: center !important; align-items: center !important;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
html.dark #halo-racer-loader { background: #1a1a1a; }
#halo-racer-loader.hidden { opacity: 0; visibility: hidden; }
.racer-container { position: relative; width: 80px; height: 20px; }
.bar { position: absolute; top: 0; left: 0; width: 12px; height: 20px; border-radius: 0; }
.p1 { background: rgba(255,71,87,0.2); z-index:1; animation: run 1.5s cubic-bezier(.4,0,.2,1) infinite 0.15s; }
.p2 { background: rgba(255,71,87,0.5); z-index:2; animation: run 1.5s cubic-bezier(.4,0,.2,1) infinite 0.08s; }
.red { background: #ff4757; z-index:10; animation: run 1.5s cubic-bezier(.4,0,.2,1) infinite 0s; }
@keyframes run { 0%{left:0} 30%{left:68px} 50%{left:68px} 80%{left:0} 100%{left:0} }
</style>
<script>
window.addEventListener('load', function() {
const loader = document.getElementById('halo-racer-loader');
if (loader) {
setTimeout(() => {
loader.style.opacity = '0';
loader.style.pointerEvents = 'none';
setTimeout(() => { loader.style.display = 'none'; }, 300);
}, 800);
}
});
// 超时兜底
setTimeout(() => {
const loader = document.getElementById('halo-racer-loader');
if (loader) {
loader.style.display = 'none';
loader.style.pointerEvents = 'none';
}
}, 5000);
</script>三、底部版权信息
复制hugo\temes\i18n\zh-cn.yaml至hugo\i18n
修改zh-cn.yaml文件
四、站点图标
与主题static目录下位置名称相对应替换
五、文档博客
1. content文件夹
1.1 索引文件_index.md,也就是首页
首页索引
---
title: Welcome to the xxsky website
---
<h1
class="not-prose hx:text-4xl hx:font-bold hx:leading-none hx:tracking-tighter hx:md:text-5xl hx:py-2 hx:bg-clip-text hx:text-transparent hx:bg-gradient-to-r hx:from-gray-900 hx:to-gray-600 hx:dark:from-gray-100 hx:dark:to-gray-400"
>
<h1>探索我的数字花园 🌿</h1><p>这里记录技术文档、生活随笔和个人项目。
<br>
<small style="font-size: 0.5em; font-weight: normal; opacity: 0.7;">简洁 · 高效 · 现代</small></p>
</h1>
<div
class="hextra-feature-grid hx:grid hx:sm:max-lg:grid-cols-2 hx:max-sm:grid-cols-1 hx:gap-4 hx:w-full not-prose"
style="--hextra-feature-grid-cols: 3; "
>
<a
href="/docs"
class=" hextra-feature-card not-prose hx:block hx:relative hx:overflow-hidden hx:rounded-3xl hx:border hx:border-gray-200 hx:hover:border-gray-300 hx:dark:border-neutral-800 hx:dark:hover:border-neutral-700 hx:before:pointer-events-none hx:before:absolute hx:before:inset-0 hx:before:bg-glass-gradient"
>
<div class="hx:relative hx:w-full hx:p-6">
<h3 class="hx:text-2xl hx:font-medium hx:leading-6 hx:mb-2 hx:flex hx:items-center">
<span class="hx:pr-2"><svg height=1.5rem xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg></span>
<span>查阅文档</span>
</h3>
<p class="hx:text-gray-500 hx:dark:text-gray-400 hx:text-sm hx:leading-6">查看我的学习笔记和技术手册</p>
</div></a>
<a
href="/blog"
class=" hextra-feature-card not-prose hx:block hx:relative hx:overflow-hidden hx:rounded-3xl hx:border hx:border-gray-200 hx:hover:border-gray-300 hx:dark:border-neutral-800 hx:dark:hover:border-neutral-700 hx:before:pointer-events-none hx:before:absolute hx:before:inset-0 hx:before:bg-glass-gradient"
>
<div class="hx:relative hx:w-full hx:p-6">
<h3 class="hx:text-2xl hx:font-medium hx:leading-6 hx:mb-2 hx:flex hx:items-center">
<span class="hx:pr-2"><svg height=1.5rem xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg></span>
<span>最新博客</span>
</h3>
<p class="hx:text-gray-500 hx:dark:text-gray-400 hx:text-sm hx:leading-6">分享我的思考、教程和动态</p>
</div></a>
<a
href="/about"
class=" hextra-feature-card not-prose hx:block hx:relative hx:overflow-hidden hx:rounded-3xl hx:border hx:border-gray-200 hx:hover:border-gray-300 hx:dark:border-neutral-800 hx:dark:hover:border-neutral-700 hx:before:pointer-events-none hx:before:absolute hx:before:inset-0 hx:before:bg-glass-gradient"
>
<div class="hx:relative hx:w-full hx:p-6">
<h3 class="hx:text-2xl hx:font-medium hx:leading-6 hx:mb-2 hx:flex hx:items-center">
<span class="hx:pr-2"><svg height=1.5rem xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></span>
<span>关于我</span>
</h3>
<p class="hx:text-gray-500 hx:dark:text-gray-400 hx:text-sm hx:leading-6">了解更多关于作者的信息</p>
</div></a>
<a
href="https://github.com/hxjxtwg" target="_blank" rel="noreferrer"
class=" hextra-feature-card not-prose hx:block hx:relative hx:overflow-hidden hx:rounded-3xl hx:border hx:border-gray-200 hx:hover:border-gray-300 hx:dark:border-neutral-800 hx:dark:hover:border-neutral-700 hx:before:pointer-events-none hx:before:absolute hx:before:inset-0 hx:before:bg-glass-gradient"
>
<div class="hx:relative hx:w-full hx:p-6">
<h3 class="hx:text-2xl hx:font-medium hx:leading-6 hx:mb-2 hx:flex hx:items-center">
<span class="hx:pr-2"><svg height=1.5rem fill="currentColor" viewBox="3 3 18 18">
<path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path>
</svg>
</span>
<span>开源项目</span>
</h3>
<p class="hx:text-gray-500 hx:dark:text-gray-400 hx:text-sm hx:leading-6">访问我的 GitHub 仓库</p>
</div></a>
</div>
---
### 🌟 最近更新
hugo-hextra安装配置文档1.2 关于about.md
关于页面
---
title: "关于我"
date: 2025-12-05
layout: "standard" # 使用标准布局
# 👇 关键：隐藏左侧边栏，让内容居中显示，更像个人主页
sidebar:
enable: false
# 👇 关键：自动把它加到顶部导航栏
menu:
main:
weight: 50 # 数字越大越靠右
params:
icon: user # 给菜单加个小图标 (可选)
# 👇 如果不想让关于页面显示评论，设为 false
comments: false
---
### hello xxsky
记录生活
专注世界
---
<div class="hx:overflow-x-auto hx:mt-6 hx:flex hx:rounded-lg hx:border hx:py-2 hx:ltr:pr-4 hx:rtl:pl-4 hx:contrast-more:border-current hx:contrast-more:dark:border-current hx:border-blue-200 hx:bg-blue-100 hx:text-blue-900 hx:dark:border-blue-200/30 hx:dark:bg-blue-900/30 hx:dark:text-blue-200">
<div class="hx:ltr:pl-3 hx:ltr:pr-2 hx:rtl:pr-3 hx:rtl:pl-2"><div class="hx:select-none hx:text-xl" style="font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">🛠️</div></div>
<div class="hx:w-full hx:min-w-0 hx:leading-7">
<div class="hx:mt-6 hx:leading-7 hx:first:mt-0"><p><strong>我的技术栈：</strong></p>
<ul>
<li><strong>前端：</strong> HTML, CSS, Hugo</li>
<li><strong>后端：</strong> Python, Go</li>
</ul></div>
</div>
</div>
---
### 我的经历
-------
<div class="hextra-steps hx:ml-4 hx:mb-12 hx:ltr:border-l hx:rtl:border-r hx:border-gray-200 hx:ltr:pl-6 hx:rtl:pr-6 hx:dark:border-neutral-800 [counter-reset:step]">
2025.12建立了hugo站点-----------------------------------------------------------------
2025.08建立了tpyecheo-----------------------------------------------------------------
2025.06建立了hexo博客-----------------------------------------------------------------
-------
</div>
---
### 联系我
<div class="hextra-cards hx:mt-4 hx:gap-4 hx:grid not-prose" style="--hextra-cards-grid-cols: 3;">
<a
class="hextra-card hx:group hx:flex hx:flex-col hx:justify-start hx:overflow-hidden hx:rounded-lg hx:border hx:border-gray-200 hx:text-current hx:no-underline hx:dark:shadow-none hx:hover:shadow-gray-100 hx:dark:hover:shadow-none hx:shadow-gray-100 hx:active:shadow-sm hx:active:shadow-gray-200 hx:transition-all hx:duration-200 hx:hover:border-gray-300 hx:bg-transparent hx:shadow-xs hx:dark:border-neutral-800 hx:hover:bg-slate-50 hx:hover:shadow-md hx:dark:hover:border-neutral-700 hx:dark:hover:bg-neutral-900"href="https://github.com/xuhxjx"
target="_blank" rel="noreferrer"><span class="hextra-card-icon hx:flex hx:font-semibold hx:items-start hx:gap-2 hx:p-4 hx:text-gray-700 hx:hover:text-gray-900 hx:dark:text-neutral-200 hx:dark:hover:text-neutral-50"><svg fill="currentColor" viewBox="3 3 18 18">
<path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path>
</svg>
GitHub</span></a>
<a
class="hextra-card hx:group hx:flex hx:flex-col hx:justify-start hx:overflow-hidden hx:rounded-lg hx:border hx:border-gray-200 hx:text-current hx:no-underline hx:dark:shadow-none hx:hover:shadow-gray-100 hx:dark:hover:shadow-none hx:shadow-gray-100 hx:active:shadow-sm hx:active:shadow-gray-200 hx:transition-all hx:duration-200 hx:hover:border-gray-300 hx:bg-transparent hx:shadow-xs hx:dark:border-neutral-800 hx:hover:bg-slate-50 hx:hover:shadow-md hx:dark:hover:border-neutral-700 hx:dark:hover:bg-neutral-900"href="mailto:hxjxtw@gmail.com"
><span class="hextra-card-icon hx:flex hx:font-semibold hx:items-start hx:gap-2 hx:p-4 hx:text-gray-700 hx:hover:text-gray-900 hx:dark:text-neutral-200 hx:dark:hover:text-neutral-50"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>Email</span></a>
</div>1.3 新建docs与bolg文件 分别是文档与博客的文件夹
2. 博客
2.1 blog索引
---
title: xxsky blog
type: blog # 关键：告诉主题这是一个博客板块
cascade:
type: blog # 让下面所有的文章都继承这个属性
sidebar:
enable: true # 博客通常保留右侧目录比较方便，或者设为 false 看你喜好
---2.2 博客首页卡片显示
在hugo\layouts\blog\list.html
博客卡片列表
{{ define "main" }}
<div class="custom-blog-container">
<h1 class="blog-page-title">{{ .Title }}</h1>
<div class="blog-grid">
{{ range .Pages }}
<a href="{{ .RelPermalink }}" class="blog-card">
<div class="card-body">
{{ with .Params.tags }}
<div class="card-tags">
{{ range first 3 . }}
<span class="tag">#{{ . }}</span>
{{ end }}
</div>
{{ end }}
<h2 class="card-title">{{ .Title }}</h2>
<p class="card-summary">
{{ .Summary | plainify | truncate 80 }}
</p>
</div>
<div class="card-footer">
<span class="card-date">{{ .Date.Format "2006-01-02" }}</span>
<span class="card-link">阅读全文 →</span>
</div>
</a>
{{ end }}
</div>
</div>
<style>
/* 容器布局 */
.custom-blog-container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
.blog-page-title {
text-align: center;
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 40px;
color: inherit;
}
/* 网格布局：自动适应，每列最少300px宽 */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}
/* 卡片样式 */
.blog-card {
display: flex;
flex-direction: column;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
text-decoration: none !important; /* 去掉下划线 */
color: inherit !important;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
/* 鼠标悬停效果 */
.blog-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
border-color: #3b82f6; /* 蓝色边框 */
}
.card-body {
padding: 24px;
flex: 1; /* 让内容区撑满 */
}
/* 标签样式 */
.card-tags {
margin-bottom: 12px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
font-size: 0.75rem;
background-color: #eff6ff;
color: #3b82f6;
padding: 2px 8px;
border-radius: 999px;
}
/* 标题样式 */
.card-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 12px;
line-height: 1.4;
color: #111827;
}
/* 摘要样式 */
.card-summary {
font-size: 0.95rem;
color: #6b7280;
line-height: 1.6;
margin: 0;
}
/* 底部样式 */
.card-footer {
padding: 16px 24px;
background-color: #f9fafb;
border-top: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
color: #6b7280;
}
.card-link {
color: #3b82f6;
font-weight: 600;
}
/* === 深色模式适配 (Dark Mode) === */
html.dark .blog-card {
background-color: #1a1a1a;
border-color: #333;
}
html.dark .card-title { color: #f3f4f6; }
html.dark .card-summary { color: #9ca3af; }
html.dark .card-footer {
background-color: #262626;
border-color: #333;
}
html.dark .tag {
background-color: rgba(59, 130, 246, 0.2);
color: #93c5fd;
}
</style>
{{ end }}
2.2 博文显示日期 在hugo\layouts\blog\single.html 复制主题single.html到相应目录下并替换下面相同段
{{- with $date := .Date }}<span class="hx:mr-1">{{ $date.Format "2006-01-02" }}</span>{{ end -}}3. 文档
3.1 文档主索引
title: 文档中心
cascade:
type: docs
---
欢迎来到文档中心！请在左侧选择你感兴趣的章节。3.2 每个文件夹索引
---
title: "hugo-hextra搭建教程"
weight: 1
---3.3 其它语法 查看官方文档：https://imfing.github.io/hextra/zh-cn/docs/guide/organize-files/