前端 on nayun blog

LearnHugo250804

Mon, 04 Aug 2025 17:11:01 +0800

设置code-header.language-label点击折叠
#

设置悬停spacing扩展效果

</>
css


 1.language-brackets {
 2 /* 全属性切换过渡动画效果 */
 3 transition: all 0.3s ease;
 4}
 5/* 悬停间距扩展，颜色高亮 */
 6.language-label:hover .language-brackets {
 7 letter-spacing: 3px;
 8 color: var(--code-header-hover-color);
 9}
10.language-label:hover .language-name {
11 color: var(--code-header-hover-color);
12}

js设置点击label切换chroma.collapsed

</>
javascript


document.querySelectorAll('.language-label').forEach(button => {
button.addEventListener('click', () => {
const codeBlock = button.closest('.code-block-wrapper');
const chroma = codeBlock?.querySelector('pre.chroma');
if (chroma) {
chroma.classList.toggle('collapsed');
}
else console.error('chroma折叠失败');
});
});

设置pre.chroma.collapsed折叠样式

</>
css


1pre.chroma.collapsed{
2 /* 折叠方法：设置高度为0 */
3 max-height: 0 !important;
4 /* 去除溢出拖动条 */
5 overflow: hidden !important;
6 /* 去除顽固padding */
7 padding: 0 !important;
8}

设置代码块换行按钮功能
#

核心样式方案：把ln设置固定宽度，cl设置为block，固定左侧间距

</>
css


 1pre.chroma .ln {
 2 float: left;
 3 /* 设置行号区域的宽度 */
 4 width: 20px;
 5 text-align: right;
 6 margin-right: 10px;
 7 user-select: none; /* 禁止行号被选中 */
 8}
 9
10pre.chroma .cl {
11 display: block;
12 margin-left: 30px; /* 与行号宽度一致 */
13}
14
15pre.chroma.wrap-lines .cl {
16 display: block;
17 margin-left: 30px; /* 与行号宽度一致 */
18 white-space: pre-wrap !important;
19}

js代码

</>
javascript


document.querySelectorAll('.code-block-wrapper').forEach(wrapper => {
// 为每个代码块创建换行状态存储
const preElement = wrapper.querySelector('pre.chroma');
if (preElement) {
// 默认从 localStorage 读取用户偏好
const wrapEnabled = localStorage.getItem('codeWrapEnabled') === 'true';
if (wrapEnabled) {
preElement.classList.add('wrap-lines');
const wrapButton = wrapper.querySelector('.wrap-button');
if (wrapButton) {
wrapButton.classList.add('active');
const span = wrapButton.querySelector('span');
if (span) span.textContent = '不换行';
}
}
}
});
// 换行按钮功能
document.addEventListener('click', function(e) {
if (e.target.closest('.wrap-button')) {
const button = e.target.closest('.wrap-button');
const codeBlock = button.closest('.code-block-wrapper');
const preElement = codeBlock.querySelector('pre.chroma');
24
if (preElement) {
preElement.classList.toggle('wrap-lines');
button.classList.toggle('active');
28
// 保存用户偏好
const isNowWrapped = preElement.classList.contains('wrap-lines');
localStorage.setItem('codeWrapEnabled', isNowWrapped.toString());
32
// 更新按钮文本
const span = button.querySelector('span');
if (span) {
span.textContent = isNowWrapped ? '换行' : '不换行';
}
}
}
});

Hugo学习250728

Mon, 28 Jul 2025 15:33:17 +0800

1. 可折叠列表 HTML5 标签，折叠内容无法支持原生markdown语法
#

config.yaml中配置，允许渲染 HTML 标签

</>
yaml


1markup:
2 goldmark:
3 renderer:
4 unsafe: true

使用原生html5 details标签

</>
html


1<details>
2 <summary>点击展开查看详情</summary>
3
4 这里是隐藏的内容，支持 **Markdown** 格式：
5
6 - 列表项1
7 - 列表项2
8 - [链接](https://example.com)
9</details>

效果：

这里是隐藏的内容，支持 Markdown 格式：

列表项1
列表项2
链接

本质是隐藏细节

嵌套

一级折叠标题

这是一级内容…

二级折叠标题

<details>
<summary>三级折叠标题</summary>
- 这是三级列表
- 支持 Markdown
- 可以无限嵌套（但建议不超过3-4层）
</details>

一级内容中的普通列表
也可以混合使用

似乎只能嵌套两层

词云实践流程

Thu, 24 Jul 2025 17:15:11 +0800

1. 通过deepseek生成词云`html、js、css`代码
#

</>
prompt参考


1我在做hugo页面，帮我生成标签词云的代码，我会在首页index.html中导入，词云内容为tag，点击跳转对应url，每个tag样式为圆形，大小只和tag字符关联，无旋转，排序权值使用tag文章数量，权值越高越靠中间，分成html css js三个文件实现，tag在html中使用.Site.Taxonomies.tags生成
2让词云标签贴合，至少行对齐（居中、等分对齐），有一定的对齐的美感

</>
生成


1tag-cloud.html
2tag-cloud.css
3tag-cloud.js

2. tag-cloud绑定在baseURL/tags/url上
#

原理：

</>
路由机制


1Hugo 会自动将 layouts/taxonomy/tag.terms.html 映射到 /tags/ URL
2这是 Hugo 分类系统（Taxonomy）的标准行为

流程：

- 1. 创建layouts/taxonomy/tag.terms.html
#

- 2. 在tag.terms.html中直接调用tag-cloud.html
#

</>
tag.terms.html


1{{ define "main" }}
2{{ partial "tag-cloud.html" . }}
3{{ end }}

- 3. 导入css、js文件
#

为了方便，直接在tag-cloud.html中嵌入了css、js的导入（缺点，页面会动态加载js）

hugo学习250723

Wed, 23 Jul 2025 15:01:34 +0800

hugo工作流程
#

url route -> 确定页面类型

hugo页面类型推断
#

(1) 文件系统结构
#

Hugo 会扫描 content/ 目录下的内容文件（如 .md 或 .html），根据文件的位置和命名规则自动推断页面类型：

</>
text


1_index.md → 列表页（kind: "section" 或 kind: "home"）
2
3普通内容文件（如 post.md） → 单页（kind: "page" 或 kind: "single"）
4
5分类/标签页 → 分类列表（kind: "taxonomy" 或 kind: "term"）

(2) 页面 Front Matter
#

通过 Front Matter 中的 type 或 layout 字段可手动指定类型（覆盖自动推断）：

Hugo理解

Wed, 09 Jul 2025 14:07:34 +0800

hugo工作流程
#

导入主题后，完成自定义配置和资源

</>
markdown


 1- config yaml/toml/json
 2- assets
- css
- js
- images
 6- layouts
- 404.html : 404错误页面模板
- _default/ : 默认模板
- baseof.html : 基础模板框架
- list.html : 列表页模板（如分类、标签页）
- single.html : 单内容页模板（如文章页）
- terms.html : 分类列表模板（如所有标签的列表）
- partials/ : 可重用部分模板
- header.html : 页头部分
- footer.html : 页脚部分
- head.html : <head>部分
- ... : 其他部分模板
- shortcodes/ : 短代码模板
- figure.html : 图片短代码
- ... : 其他短代码
- index.html : 首页模板
- section/ : 分区模板（如博客、文档等）
- blog.html : 博客分区模板
- ... : 其他分区模板
- taxonomy/ : 分类法模板
- category.html : 分类页面模板
- tag.html : 标签页面模板
- ... : 其他自定义模板

所有layouts模板均可

Hugo博客搭建记录

Tue, 08 Jul 2025 10:18:41 +0800

环境准备
#

设备：ubuntu
github地址：https://github.com/gohugoio/hugo
安装：

</>
shell


1wget https://github.com/gohugoio/hugo/releases/download/v0.147.9/hugo_extended_0.147.9_Linux-64bit.tar.gz
2tar -xvzf hugo_extended_0.147.9_Linux-64bit.tar.gz
3sudo su
4mv hugo /usr/bin

Start!
#

1. 基础
#

1. 创建新博客
#

</> shell

1hugo new site siteproducer

2. 重要配置&配置逻辑链
#

2. 使用stack主题
#

</> shell

1git submodule add https://github.com/CaiJimmy/hugo-theme-stack themes/hugo-theme-stack

Hugo Tricks
#

1. 自定义样式
#

1. 样式覆盖规则：后引入覆盖前引入
#

params.yaml配置中指定自定义custom_css

</>
yaml


1custom_css: ["scss/custom.scss"]

assets/custom.scss中

</>
scss


1// 引入主题样式
2@import "general";
3// 引入你的自定义覆盖
4@import "custom-markdown"; // 无下划线、无扩展名

2. 自定义鸿蒙字体
#

下载鸿蒙字体
解压到siteproducer/assets/fonts目录
在assets/scss/中创建_fonts.scss，并在scss/custom.scss中引用

font.scss

前端 on nayun blog

LearnHugo250804

设置code-header.language-label点击折叠 #

设置代码块换行按钮功能 #

Hugo学习250728

1. 可折叠列表 HTML5 标签，折叠内容无法支持原生markdown语法 #

词云实践流程

1. 通过deepseek生成词云html、js、css代码 #

2. tag-cloud绑定在baseURL/tags/url上 #

- 1. 创建layouts/taxonomy/tag.terms.html #

- 2. 在tag.terms.html中直接调用tag-cloud.html #

- 3. 导入css、js文件 #

hugo学习250723

hugo工作流程 #

hugo页面类型推断 #

(1) 文件系统结构 #

(2) 页面 Front Matter #

Hugo理解

hugo工作流程 #

Hugo博客搭建记录

环境准备 #

Start! #

1. 基础 #

1. 创建新博客 #

2. 重要配置&配置逻辑链 #

2. 使用stack主题 #

Hugo Tricks #

1. 自定义样式 #

1. 样式覆盖规则：后引入覆盖前引入 #

2. 自定义鸿蒙字体 #

设置code-header.language-label点击折叠
#

设置代码块换行按钮功能
#

1. 可折叠列表 HTML5 标签，折叠内容无法支持原生markdown语法
#

1. 通过deepseek生成词云`html、js、css`代码
#

2. tag-cloud绑定在baseURL/tags/url上
#

- 1. 创建layouts/taxonomy/tag.terms.html
#

- 2. 在tag.terms.html中直接调用tag-cloud.html
#

- 3. 导入css、js文件
#

hugo工作流程
#

hugo页面类型推断
#

(1) 文件系统结构
#

(2) 页面 Front Matter
#

hugo工作流程
#

环境准备
#

Start!
#

1. 基础
#

1. 创建新博客
#

2. 重要配置&配置逻辑链
#

2. 使用stack主题
#

Hugo Tricks
#

1. 自定义样式
#

1. 样式覆盖规则：后引入覆盖前引入
#

2. 自定义鸿蒙字体
#