[{"content":"\n写在前面 本文分享一个个人技术项目：PaperUI —— 基于 Hugo 社区主题 PaperMod 进行的二次开发实践。项目针对个人中文博客的使用场景，添加了一些自用的功能和调整。\nPaperMod 是 Hugo 生态中非常优秀的主题，作者 Aditya Telange 和社区贡献者做了大量出色的工作。PaperUI 只是在 PaperMod 的基础上做了一些个人化的补充，并非替代或竞争关系。\n一、为什么选择基于 PaperMod 二次开发 1.1 PaperMod 的优势 选择 PaperMod 作为基础，主要看中以下几点：\n零外部依赖，性能表现出色 CSS 变量驱动的主题系统，便于定制和覆盖 完善的 SEO 支持（Open Graph、Twitter Cards、JSON-LD） 多语言支持，内置 46 种语言翻译 社区成熟，文档完善，问题排查方便 1.2 二次开发的出发点 在使用过程中，个人有一些额外的需求：\n首页希望有更丰富的内容展示形式 想增加侧边栏放置分类、标签等导航元素 移动端导航体验想做一些调整 部分 UI 文字想适配中文语境 这些需求属于个人偏好，并非 PaperMod 的不足。PaperMod 面向全球用户，设计上追求简洁通用，这是它的设计选择。\n1.3 开发原则 保持兼容：PaperMod 用户的配置文件切换到 PaperUI 后应基本可用 性能优先：新功能不显著增加页面加载体积 增量修改：尽可能通过参数控制，不破坏原有功能 可回退：新功能都是可选的，不配置就不启用 二、主要功能的技术实现 2.1 首页轮播布局 在首页增加了一个三栏展示区，通过 Hugo 模板和 CSS Grid 实现：\n┌──────────────────────┬──────────┬──────┐ │ │ Square │ │ │ Hero Carousel ├──────────┤Port. │ │ (16:9) │ Square │(3:4) │ │ │ │ │ └──────────────────────┴──────────┴──────┘ 配置参数：\n[params.homeCarousel] slides = [ { image = \u0026#39;/images/hero-1.webp\u0026#39;, url = \u0026#39;/posts/post-1/\u0026#39;, alt = \u0026#39;描述\u0026#39; }, ] middle = [ { image = \u0026#39;/images/square-1.webp\u0026#39;, url = \u0026#39;/posts/post-2/\u0026#39;, alt = \u0026#39;描述\u0026#39; }, ] right = { image = \u0026#39;/images/portrait-1.webp\u0026#39;, url = \u0026#39;/about/\u0026#39;, alt = \u0026#39;关于\u0026#39; } 如果不配置 homeCarousel，首页使用 PaperMod 原有的 homeInfoParams 文字模式，互不冲突。\n2.2 侧边栏组件 在文章页和列表页增加了固定侧边栏，位置在内容区域左侧。侧边栏包含分类列表和标签云两个小组件，数据来自 Hugo 的 site.Taxonomies。\n移动端通过 CSS display: none 自动隐藏侧边栏，不影响小屏阅读。\n侧边栏的样式复用了主题的 CSS 变量，与整体风格保持一致。\n2.3 彩色标签 为标签增加了 8 色循环配色，使用 CSS nth-child 实现：\n.sidebar-tag:nth-child(8n+1) { background: var(--tag-bg-1); color: var(--tag-1); } .sidebar-tag:nth-child(8n+2) { background: var(--tag-bg-2); color: var(--tag-2); } 颜色值定义在 CSS 变量中，用户可以在 assets/css/extended/ 下建文件覆盖。\n2.4 搜索功能调整 在保留 PaperMod 原有搜索页面的基础上，增加了两个搜索入口：\n首页侧边栏搜索框：方便在首页快速查找 模态框搜索：点击搜索图标或 Ctrl+K / Cmd+K 唤出 搜索仍使用 Fuse.js 在客户端完成，没有引入新的依赖。\n2.5 移动端导航 增加了汉堡菜单按钮，点击后从右侧滑出导航面板。实现方式：\n.mobile-menu { position: fixed; top: 0; right: 0; width: min(280px, 80vw); transform: translateX(100%); transition: transform 0.3s; } .mobile-menu.active { transform: translateX(0); } 同时增加了遮罩层，点击遮罩或按 Escape 键关闭菜单。\n2.6 LLM 支持 增加了 llms.txt 输出模板。这是一个社区提议的标准（llmstxt.org），用于向 AI 搜索引擎提供站点内容索引。需在配置中启用：\n[outputFormats.LLMS] mediaType = \u0026#39;text/plain\u0026#39; baseName = \u0026#39;llms\u0026#39; [outputs] home = [\u0026#39;HTML\u0026#39;, \u0026#39;RSS\u0026#39;, \u0026#39;JSON\u0026#39;, \u0026#39;LLMS\u0026#39;] 三、性能表现 以本博客（paperui.newmt.fun）为例，构建产物体积如下：\n资源 大小 CSS（源文件 17 个，合并压缩后） ~49 KB Go 模板（49 个文件） ~262 KB JavaScript（Fuse.js + 功能代码） ~34 KB 页面图片（6 张 WebP） ~126 KB Lighthouse 评分保持在 95-100 之间。\n四、项目结构 themes/PaperUI/ ├── assets/ │ ├── css/ │ │ ├── core/ # 基础样式（reset、变量、响应式） │ │ ├── common/ # 组件样式（11 个文件） │ │ ├── extended/ # 扩展样式（用户可覆盖） │ │ └── includes/ # Chroma 代码高亮 │ └── js/ # 搜索、轮播等脚本 ├── layouts/ │ ├── _partials/ # 模板片段（24 个） │ ├── _shortcodes/ # 短代码（8 个） │ └── ... # 页面模板 └── i18n/ # 语言翻译（46 种） 五、快速体验 有两种方式可以体验 PaperUI：\n方式一：直接使用示例博客 一个可运行的完整博客示例：github.com/scenlinx/NewMT-hugo\ngit clone https://github.com/scenlinx/NewMT-hugo.git cd NewMT-hugo hugo server -D 访问 http://localhost:1313/ 即可看到效果。该仓库包含完整的配置、示例文章和部署配置，可作为博客模板使用。\n方式二：安装到现有 Hugo 站点 cd your-hugo-site git submodule add https://github.com/scenlinx/PaperUI.git themes/PaperUI 然后修改 hugo.toml：\ntheme = \u0026#39;PaperUI\u0026#39; 完整配置参考 baseURL = \u0026#39;https://yourdomain.com/\u0026#39; title = \u0026#39;站点标题\u0026#39; theme = \u0026#39;PaperUI\u0026#39; defaultContentLanguage = \u0026#39;zh-cn\u0026#39; [params] env = \u0026#39;production\u0026#39; defaultTheme = \u0026#39;auto\u0026#39; ShowToc = true ShowCodeCopyButtons = true homePostCount = 8 六、部署 使用 GitHub Actions 自动部署到 Cloudflare Pages 或 GitHub Pages：\n# .github/workflows/deploy.yml name: Deploy on: push: branches: [main] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: peaceiris/actions-hugo@v3 with: hugo-version: \u0026#39;0.162.1\u0026#39; extended: true - run: hugo # 部署到目标平台 七、与 PaperMod 的差异一览 以下列出 PaperUI 在 PaperMod 基础上增加或修改的部分，供参考：\n方面 说明 首页布局 增加了可选的轮播三栏布局，不配置时保持原有样式 侧边栏 增加了固定侧边栏，放置分类、标签等组件 标签颜色 增加了 8 色循环配色 搜索入口 增加了模态框和侧边栏搜索入口 移动端导航 增加了汉堡菜单和侧滑面板 中文 UI 调整了部分 UI 文字为中文 LLM 支持 增加了 llms.txt 输出 以上功能均为可选项，不配置不影响原有功能。\n八、开源 主题仓库：github.com/scenlinx/PaperUI 示例博客：github.com/scenlinx/NewMT-hugo 在线 Demo：paperui.newmt.fun 协议：MIT 欢迎 Star、Issue 和 PR。\n相关资源：\nPaperUI 配置参数说明 Hugo 配置文件逐行详解 PaperMod 原项目 本文发布于 paperui.newmt.fun。\n","permalink":"https://paperui.newmt.fun/posts/paperui-csdn-intro/","summary":"\u003cp\u003e\u003cimg alt=\"PaperUI 主题预览\" loading=\"lazy\" src=\"https://paperui.newmt.fun/images/image.png\"\u003e\u003c/p\u003e\n\u003ch2 id=\"写在前面\"\u003e写在前面\u003c/h2\u003e\n\u003cp\u003e本文分享一个个人技术项目：\u003ca href=\"https://github.com/scenlinx/PaperUI\"\u003ePaperUI\u003c/a\u003e —— 基于 Hugo 社区主题 PaperMod 进行的二次开发实践。项目针对个人中文博客的使用场景，添加了一些自用的功能和调整。\u003c/p\u003e\n\u003cp\u003ePaperMod 是 Hugo 生态中非常优秀的主题，作者 Aditya Telange 和社区贡献者做了大量出色的工作。PaperUI 只是在 PaperMod 的基础上做了一些个人化的补充，并非替代或竞争关系。\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"一为什么选择基于-papermod-二次开发\"\u003e一、为什么选择基于 PaperMod 二次开发\u003c/h2\u003e\n\u003ch3 id=\"11-papermod-的优势\"\u003e1.1 PaperMod 的优势\u003c/h3\u003e\n\u003cp\u003e选择 PaperMod 作为基础，主要看中以下几点：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e零外部依赖\u003c/strong\u003e，性能表现出色\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCSS 变量驱动的主题系统\u003c/strong\u003e，便于定制和覆盖\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e完善的 SEO 支持\u003c/strong\u003e（Open Graph、Twitter Cards、JSON-LD）\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e多语言支持\u003c/strong\u003e，内置 46 种语言翻译\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e社区成熟\u003c/strong\u003e，文档完善，问题排查方便\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"12-二次开发的出发点\"\u003e1.2 二次开发的出发点\u003c/h3\u003e\n\u003cp\u003e在使用过程中，个人有一些额外的需求：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e首页希望有更丰富的内容展示形式\u003c/li\u003e\n\u003cli\u003e想增加侧边栏放置分类、标签等导航元素\u003c/li\u003e\n\u003cli\u003e移动端导航体验想做一些调整\u003c/li\u003e\n\u003cli\u003e部分 UI 文字想适配中文语境\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e这些需求属于个人偏好，并非 PaperMod 的不足。PaperMod 面向全球用户，设计上追求简洁通用，这是它的设计选择。\u003c/p\u003e\n\u003ch3 id=\"13-开发原则\"\u003e1.3 开发原则\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003e保持兼容\u003c/strong\u003e：PaperMod 用户的配置文件切换到 PaperUI 后应基本可用\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e性能优先\u003c/strong\u003e：新功能不显著增加页面加载体积\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e增量修改\u003c/strong\u003e：尽可能通过参数控制，不破坏原有功能\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e可回退\u003c/strong\u003e：新功能都是可选的，不配置就不启用\u003c/li\u003e\n\u003c/ol\u003e\n\u003chr\u003e\n\u003ch2 id=\"二主要功能的技术实现\"\u003e二、主要功能的技术实现\u003c/h2\u003e\n\u003ch3 id=\"21-首页轮播布局\"\u003e2.1 首页轮播布局\u003c/h3\u003e\n\u003cp\u003e在首页增加了一个三栏展示区，通过 Hugo 模板和 CSS Grid 实现：\u003c/p\u003e","title":"基于 Hugo PaperMod 的二次开发实践：PaperUI 主题的技术实现分享"},{"content":"在现代软件开发中，高效的工作流（Workflow）是提高团队开发效率和保证代码质量的关键。本文将分享一套完整的现代开发工作流实践，涵盖从本地开发到生产部署的各个环节。\n1. 版本控制工作流 1.1 分支策略 我推荐使用 Git Flow 的简化版本，适合大多数团队：\n# 主要功能分支 main # 生产环境代码 staging # 预发布环境 feature/* # 功能开发分支 hotfix/* # 紧急修复分支 # 日常开发流程 git checkout -b feature/user-authentication # 创建功能分支 # ... 开发代码 ... git add . git commit -m \u0026#34;feat(auth): 添加用户认证功能\u0026#34; git push origin feature/user-authentication 1.2 提交信息规范 采用 Conventional Commits 规范，让提交信息更加结构化：\n\u0026lt;类型\u0026gt;(\u0026lt;可选范围\u0026gt;): \u0026lt;描述\u0026gt; [可选正文] [可选结尾] # 示例 type可选值: - feat: 新功能 - fix: 修复 - docs: 文档 - style: 格式调整 - refactor: 重构 - test: 测试相关 - chore: 构建过程或辅助工具的变动 2. 本地开发环境 2.1 Docker 统一开发环境 使用 Docker 确保开发环境一致性：\n# Dockerfile.dev FROM node:18-alpine WORKDIR /app # 安装依赖 COPY package*.json ./ RUN npm ci --only=development # 复制源代码 COPY . . # 开发模式启动 CMD [\u0026#34;npm\u0026#34;, \u0026#34;run\u0026#34;, \u0026#34;dev\u0026#34;] # docker-compose.yml development: build: context: . dockerfile: Dockerfile.dev ports: - \u0026#34;3000:3000\u0026#34; volumes: - .:/app - /app/node_modules environment: - NODE_ENV=development 2.2 代码质量工具链 建立一个完整的代码质量工具链：\n{ \u0026#34;scripts\u0026#34;: { \u0026#34;lint\u0026#34;: \u0026#34;eslint . --ext .js,.jsx,.ts,.tsx\u0026#34;, \u0026#34;format\u0026#34;: \u0026#34;prettier --write .\u0026#34;, \u0026#34;test\u0026#34;: \u0026#34;jest\u0026#34;, \u0026#34;test:watch\u0026#34;: \u0026#34;jest --watch\u0026#34;, \u0026#34;test:coverage\u0026#34;: \u0026#34;jest --coverage\u0026#34;, \u0026#34;prepare\u0026#34;: \u0026#34;husky install\u0026#34; } } 使用 Husky 和 lint-staged 来强制代码质量：\n{ \u0026#34;lint-staged\u0026#34;: { \u0026#34;*.{js,jsx,ts,tsx}\u0026#34;: [ \u0026#34;eslint --fix\u0026#34;, \u0026#34;prettier --write\u0026#34; ], \u0026#34;*.{json,md,css}\u0026#34;: [ \u0026#34;prettier --write\u0026#34; ] } } # 安装并配置 Husky npx husky-init \u0026amp;\u0026amp; npm install npx husky add .husky/pre-commit \u0026#34;npx lint-staged\u0026#34; 3. 自动化测试 3.1 测试金字塔实践 // 单元测试示例 import { render, screen } from \u0026#39;@testing-library/react\u0026#39;; import userEvent from \u0026#39;@testing-library/user-event\u0026#39;; import LoginForm from \u0026#39;./LoginForm\u0026#39;; describe(\u0026#39;LoginForm\u0026#39;, () =\u0026gt; { test(\u0026#39;用户登录成功后跳转到仪表盘\u0026#39;, async () =\u0026gt; { const user = userEvent.setup(); render(\u0026lt;LoginForm /\u0026gt;); await user.type(screen.getByLabelText(/用户名/i), \u0026#39;testuser\u0026#39;); await user.type(screen.getByLabelText(/密码/i), \u0026#39;password123\u0026#39;); await user.click(screen.getByRole(\u0026#39;button\u0026#39;, { name: /登录/i })); expect(window.location.pathname).toBe(\u0026#39;/dashboard\u0026#39;); }); }); 3.2 集成测试 // Cypress 集成测试 describe(\u0026#39;用户注册流程\u0026#39;, () =\u0026gt; { it(\u0026#39;完成新用户注册\u0026#39;, () =\u0026gt; { cy.visit(\u0026#39;/register\u0026#39;); cy.get(\u0026#39;[data-cy=\u0026#34;username\u0026#34;]\u0026#39;).type(\u0026#39;newuser\u0026#39;); cy.get(\u0026#39;[data-cy=\u0026#34;email\u0026#34;]\u0026#39;).type(\u0026#39;newuser@example.com\u0026#39;); cy.get(\u0026#39;[data-cy=\u0026#34;password\u0026#34;]\u0026#39;).type(\u0026#39;StrongPass123!\u0026#39;); cy.get(\u0026#39;[data-cy=\u0026#34;confirm-password\u0026#34;]\u0026#39;).type(\u0026#39;StrongPass123!\u0026#39;); cy.get(\u0026#39;[data-cy=\u0026#34;register-button\u0026#34;]\u0026#39;).click(); cy.url().should(\u0026#39;include\u0026#39;, \u0026#39;/dashboard\u0026#39;); cy.get(\u0026#39;[data-cy=\u0026#34;welcome-message\u0026#34;]\u0026#39;).should(\u0026#39;contain\u0026#39;, \u0026#39;欢迎 newuser\u0026#39;); }); }); 4. 持续集成/持续部署 (CI/CD) 4.1 GitHub Actions 配置 # .github/workflows/ci-cd.yml name: CI/CD Pipeline on: push: branches: [main, staging] pull_request: branches: [main] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Setup Node.js uses: actions/setup-node@v3 with: node-version: \u0026#39;18\u0026#39; cache: \u0026#39;npm\u0026#39; - name: Install dependencies run: npm ci - name: Run linter run: npm run lint - name: Run tests run: npm test - name: Upload coverage uses: codecov/codecov-action@v3 build-and-deploy: needs: test if: github.ref == \u0026#39;refs/heads/main\u0026#39; runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Build run: | npm ci npm run build - name: Deploy to production uses: appleboy/ssh-action@v0.1.8 with: host: ${{ secrets.HOST }} username: ${{ secrets.USERNAME }} key: ${{ secrets.SSH_KEY }} script: | cd /var/www/myapp ./deploy.sh 4.2 自动化部署脚本 #!/bin/bash # deploy.sh set -e echo \u0026#34;🚀 开始部署应用...\u0026#34; # 备份当前版本 TIMESTAMP=$(date +%Y%m%d_%H%M%S) cp -r /var/www/myapp /var/www/myapp_backup_$TIMESTAMP # 解压新版本 tar -xzf /tmp/myapp.tar.gz -C /var/www/myapp_new # 安装依赖 cd /var/www/myapp_new npm ci --only=production # 运行数据库迁移 npm run migrate # 切换版本 mv /var/www/myapp /var/www/myapp_old_$TIMESTAMP mv /var/www/myapp_new /var/www/myapp # 重启服务 pm2 restart myapp || pm2 start server.js --name myapp # 清理旧版本 find /var/www -name \u0026#34;myapp_old_*\u0026#34; -mtime +7 -exec rm -rf {} \\; find /var/www -name \u0026#34;myapp_backup_*\u0026#34; -mtime +3 -exec rm -rf {} \\; echo \u0026#34;✅ 部署完成！\u0026#34; 5. 代码审查流程 5.1 Pull Request 模板 \u0026lt;!-- .github/PULL_REQUEST_TEMPLATE.md --\u0026gt; ## 描述 简要描述这个 PR 的目的和所做的更改。 ## 变更类型 - [ ] 修复 bug - [ ] 新功能 - [ ] 重构 - [ ] 文档更新 - [ ] 其他： ## 测试 - [ ] 添加了单元测试 - [ ] 添加了集成测试 - [ ] 手动测试完成 ## 截图（如适用） ## 相关 Issue Fixes # 5.2 代码审查清单 功能性审查：\n代码是否实现了预期的功能？ 是否有明显的逻辑错误？ 错误处理是否完整？ 代码质量审查：\n代码是否符合项目编码规范？ 变量和函数命名是否清晰？ 是否有重复代码需要重构？ 注释是否清晰准确？ 安全性审查：\n是否存在 SQL 注入风险？ 是否正确处理用户输入？ 敏感信息是否得到保护？ 性能审查：\n是否有潜在的性能问题？ 数据库查询是否优化？ 是否有内存泄漏风险？ 6. 监控和日志 6.1 应用监控 // 使用 Winston 进行日志记录 const winston = require(\u0026#39;winston\u0026#39;); const { combine, timestamp, printf, colorize } = winston.format; const logFormat = printf(({ level, message, timestamp, ...metadata }) =\u0026gt; { let msg = `${timestamp} [${level}] ${message}`; if (metadata \u0026amp;\u0026amp; Object.keys(metadata).length \u0026gt; 0) { msg += ` ${JSON.stringify(metadata)}`; } return msg; }); const logger = winston.createLogger({ level: process.env.LOG_LEVEL || \u0026#39;info\u0026#39;, format: combine( colorize(), timestamp({ format: \u0026#39;YYYY-MM-DD HH:mm:ss\u0026#39; }), logFormat ), transports: [ new winston.transports.Console(), new winston.transports.File({ filename: \u0026#39;logs/error.log\u0026#39;, level: \u0026#39;error\u0026#39; }), new winston.transports.File({ filename: \u0026#39;logs/combined.log\u0026#39; }) ] }); 6.2 性能监控 // 简单的性能监控中间件 const performanceMonitor = (req, res, next) =\u0026gt; { const start = Date.now(); res.on(\u0026#39;finish\u0026#39;, () =\u0026gt; { const duration = Date.now() - start; logger.info(\u0026#39;请求处理完成\u0026#39;, { method: req.method, url: req.url, statusCode: res.statusCode, duration: `${duration}ms` }); // 如果响应时间超过 1 秒，记录为警告 if (duration \u0026gt; 1000) { logger.warn(\u0026#39;慢请求警告\u0026#39;, { url: req.url, duration: `${duration}ms` }); } }); next(); }; app.use(performanceMonitor); 总结 一个完整的现代开发工作流应该包括以下关键要素：\n标准化：统一的代码风格、提交规范和分支策略 自动化：自动化的测试、构建和部署流程 质量控制：代码审查、质量检查和性能监控 持续改进：定期回顾工作流程，寻找改进机会 通过实施这套工作流，开发团队可以：\n✅ 提高开发效率和代码质量 ✅ 减少人为错误和生产事故 ✅ 实现快速迭代和可靠部署 ✅ 建立可扩展和可维护的代码库 记住，工具和规范都是为了提升团队效率，而不是增加负担。根据团队规模和技术栈进行适当调整，找到最适合自己的工作流程。\n","permalink":"https://paperui.newmt.fun/posts/modern-development-workflow/","summary":"\u003cp\u003e在现代软件开发中，高效的工作流（Workflow）是提高团队开发效率和保证代码质量的关键。本文将分享一套完整的现代开发工作流实践，涵盖从本地开发到生产部署的各个环节。\u003c/p\u003e\n\u003ch2 id=\"1-版本控制工作流\"\u003e1. 版本控制工作流\u003c/h2\u003e\n\u003ch3 id=\"11-分支策略\"\u003e1.1 分支策略\u003c/h3\u003e\n\u003cp\u003e我推荐使用 \u003cstrong\u003eGit Flow\u003c/strong\u003e 的简化版本，适合大多数团队：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 主要功能分支\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003emain        \u003cspan style=\"color:#75715e\"\u003e# 生产环境代码\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003estaging     \u003cspan style=\"color:#75715e\"\u003e# 预发布环境\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003efeature/*   \u003cspan style=\"color:#75715e\"\u003e# 功能开发分支\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ehotfix/*    \u003cspan style=\"color:#75715e\"\u003e# 紧急修复分支\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 日常开发流程\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit checkout -b feature/user-authentication  \u003cspan style=\"color:#75715e\"\u003e# 创建功能分支\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# ... 开发代码 ...\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit add .\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit commit -m \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;feat(auth): 添加用户认证功能\u0026#34;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit push origin feature/user-authentication\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch3 id=\"12-提交信息规范\"\u003e1.2 提交信息规范\u003c/h3\u003e\n\u003cp\u003e采用 \u003cstrong\u003eConventional Commits\u003c/strong\u003e 规范，让提交信息更加结构化：\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e\u0026lt;类型\u0026gt;(\u0026lt;可选范围\u0026gt;): \u0026lt;描述\u0026gt;\n\n[可选正文]\n\n[可选结尾]\n\n# 示例\ntype可选值:\n- feat: 新功能\n- fix: 修复\n- docs: 文档\n- style: 格式调整\n- refactor: 重构\n- test: 测试相关\n- chore: 构建过程或辅助工具的变动\n\u003c/code\u003e\u003c/pre\u003e\u003ch2 id=\"2-本地开发环境\"\u003e2. 本地开发环境\u003c/h2\u003e\n\u003ch3 id=\"21-docker-统一开发环境\"\u003e2.1 Docker 统一开发环境\u003c/h3\u003e\n\u003cp\u003e使用 Docker 确保开发环境一致性：\u003c/p\u003e","title":"现代软件开发完整工作流"},{"content":"hugo.toml 是 Hugo 站点的核心配置文件。本文以本博客当前使用的配置为基础，结合 PaperUI 主题的模板源码，逐段说明每个配置项的实际作用。\n如果你只需要快速查阅所有配置参数，推荐先看 PaperUI 完整配置指南与参数说明，那是更紧凑的参考手册。\n站点基础 baseURL = \u0026#39;https://paperui.newmt.fun/\u0026#39; title = \u0026#39;新墨韬\u0026#39; theme = \u0026#39;PaperUI\u0026#39; defaultContentLanguage = \u0026#39;zh-cn\u0026#39; enableRobotsTXT = true enableEmoji = true 参数 说明 baseURL 站点域名，上线前必须改成真实域名。末尾 / 不要漏。影响所有链接、RSS、sitemap title 站点标题，出现在浏览器标签页、RSS 标题、OG 标签中 theme 主题文件夹名，对应 themes/PaperUI/ defaultContentLanguage 默认语言代码，需与下方 [languages.zh-cn] 的 key 一致 enableRobotsTXT true 自动生成 /robots.txt enableEmoji true 允许 Markdown 中使用 :smile: 等 Emoji 短码 输出格式 [outputs] home = [\u0026#39;HTML\u0026#39;, \u0026#39;RSS\u0026#39;, \u0026#39;JSON\u0026#39;] HTML：网页 RSS：订阅源（/index.xml） JSON：搜索索引，PaperUI 的搜索功能依赖此项，不要删 [params] 主题参数 环境与 SEO [params] env = \u0026#39;production\u0026#39; description = \u0026#39;新墨韬 - 个人技术博客\u0026#39; keywords = [\u0026#39;博客\u0026#39;, \u0026#39;Hugo\u0026#39;, \u0026#39;PaperMod\u0026#39;, \u0026#39;技术\u0026#39;] 参数 说明 env production 启用 CSS/JS 压缩；本地开发临时改 development description 站点描述，出现在 \u0026lt;meta name=\u0026quot;description\u0026quot;\u0026gt; 和搜索结果摘要中 keywords 全局关键词，对现代搜索引擎权重不高但仍有参考意义 外观控制 defaultTheme = \u0026#39;auto\u0026#39; disableThemeToggle = false disableScrollToTop = false 参数 值 说明 defaultTheme auto 跟随系统偏好，也可设为 light 或 dark disableThemeToggle false 保留深色/浅色切换按钮 disableScrollToTop false 保留\u0026quot;回到顶部\u0026quot;按钮 文章显示开关 ShowReadingTime = true ShowWordCount = true ShowShareButtons = false ShowPostNavLinks = true ShowBreadCrumbs = false ShowCodeCopyButtons = true ShowToc = true 参数 推荐 说明 ShowReadingTime true 估算阅读时间 ShowWordCount true 显示字数统计 ShowCodeCopyButtons true 技术博客强烈推荐，代码块右上角复制按钮 ShowToc true 文章右侧目录，长文章导航 ShowPostNavLinks true 文章底部\u0026quot;上一篇/下一篇\u0026quot; ShowShareButtons false 社交分享按钮，不需要就关 ShowBreadCrumbs false 面包屑导航，扁平博客结构意义不大 列表与分页 ShowPageNums = true ShowRssButtonInSectionTermList = true ShowAllPagesInArchive = false ShowFullTextinRSS = false homePostCount = 8 参数 说明 ShowPageNums 分页显示页码 ShowRssButtonInSectionTermList 分类/标签页显示 RSS 订阅按钮 ShowAllPagesInArchive false 归档页只显示文章；true 会包含所有页面 ShowFullTextinRSS false RSS 只输出摘要；true 输出全文 homePostCount 首页显示的文章数量，建议 8~10 首页展示：homeInfoParams + homeCarousel 这是 PaperUI 首页最核心的配置，也是最容易理解错的地方。先看模板源码：\nlist.html 第 7 行：\n{{- if and .IsHome site.Params.homeInfoParams }} {{- partial \u0026#34;home_info.html\u0026#34; . }} {{- end }} 入口条件是 homeInfoParams 存在。只有它存在，home_info.html 才会被调用。\nhome_info.html 内部逻辑：\n{{- with site.Params.homeCarousel }} ...渲染轮播图... {{- else }} {{- with site.Params.homeInfoParams }} ...渲染欢迎文字... {{- end }} {{- end }} 进入后先检查 homeCarousel：有就渲染轮播图，没有就用 homeInfoParams 渲染欢迎文字。\n结论：\nhomeInfoParams 是入口开关，不能删 homeCarousel 是模式选择器，有它就走轮播图 两者都配置 → 轮播图生效，欢迎文字不显示 只有 homeInfoParams → 显示欢迎文字 当前配置 [params.homeInfoParams] Title = \u0026#39;新墨韬\u0026#39; Content = \u0026#39;分享编程、开源与技术的个人博客\u0026#39; [params.homeCarousel] slides = [ { image = \u0026#39;/images/hero-1.webp\u0026#39;, url = \u0026#39;/posts/paperui-introduction/\u0026#39; }, { image = \u0026#39;/images/hero-2.webp\u0026#39;, url = \u0026#39;/posts/papermod-advantages/\u0026#39; }, { image = \u0026#39;/images/hero-3.webp\u0026#39;, url = \u0026#39;/posts/git-guide/\u0026#39; }, ] middle = [ { image = \u0026#39;/images/square-1.webp\u0026#39;, url = \u0026#39;/posts/python-tips/\u0026#39; }, { image = \u0026#39;/images/square-2.webp\u0026#39;, url = \u0026#39;/posts/linux-commands/\u0026#39; }, ] right = { image = \u0026#39;/images/portrait-1.webp\u0026#39;, url = \u0026#39;/about/\u0026#39; } 轮播图布局分三个区域：\nslides：顶部 16:9 轮播大图，3 张自动切换，点击跳转文章 middle：中间两个方形卡片 right：右侧竖图 图片放在 static/images/ 下，路径以 /images/ 开头。url 指向的文章必须存在。\n最佳实践：\n轮播图建议 1200×675，体积 \u0026lt; 200KB 同时准备 .webp 版本，浏览器自动选用 url 尾部带 /，指向文章 slug 如果只用欢迎信息 删掉 [params.homeCarousel] 整个段，首页顶部会显示 homeInfoParams 中的文字：\n[params.homeInfoParams] Title = \u0026#39;欢迎来到我的博客\u0026#39; Content = \u0026#39;这里分享编程、开源和生活中的思考。\u0026#39; 站点图标 [params.assets] favicon = \u0026#39;/favicon.svg\u0026#39; favicon16x16 = \u0026#39;/favicon.svg\u0026#39; favicon32x32 = \u0026#39;/favicon.svg\u0026#39; PaperUI 支持 SVG favicon，放在 static/ 目录即可。SVG 在所有分辨率下都清晰。\nGiscus 评论系统 [params.giscus] repo = \u0026#39;\u0026#39; repoId = \u0026#39;\u0026#39; category = \u0026#39;Announcements\u0026#39; categoryId = \u0026#39;\u0026#39; mapping = \u0026#39;pathname\u0026#39; lang = \u0026#39;zh-CN\u0026#39; PaperUI 在 comments.html 中集成了 Giscus。配置留空时评论功能不激活，填入信息后自动在每篇文章底部显示评论区。\n启用步骤：\n确保 GitHub 仓库公开且开启了 Discussions 安装 Giscus App 访问 giscus.app 获取配置参数 填入 repo、repoId、categoryId 参数 说明 repo 用户名/仓库名 repoId giscus.app 生成的仓库 ID category Discussions 分类，建议 Announcements categoryId 分类 ID mapping pathname 按页面路径关联评论 lang 界面语言，zh-CN 页脚 [params.footer] hideCopyright = false 设为 true 隐藏页脚版权信息。\n语言与导航菜单 [languages.zh-cn] locale = \u0026#39;zh-CN\u0026#39; label = \u0026#39;中文\u0026#39; title = \u0026#39;新墨韬\u0026#39; weight = 1 locale 影响日期格式和界面翻译。中文站用 zh-CN。\n导航菜单 [[languages.zh-cn.menu.main]] name = \u0026#39;首页\u0026#39; url = \u0026#39;/\u0026#39; weight = 1 [[languages.zh-cn.menu.main]] name = \u0026#39;文章\u0026#39; url = \u0026#39;/posts/\u0026#39; weight = 2 [[languages.zh-cn.menu.main]] name = \u0026#39;分类\u0026#39; url = \u0026#39;/categories/\u0026#39; weight = 3 [[languages.zh-cn.menu.main]] name = \u0026#39;归档\u0026#39; url = \u0026#39;/archives/\u0026#39; weight = 4 [[languages.zh-cn.menu.main]] name = \u0026#39;关于\u0026#39; url = \u0026#39;/about/\u0026#39; weight = 5 每个菜单项用独立的 [[...]] 块：\n字段 说明 name 导航栏显示的文字 url 跳转地址，/ 开头为站内路径 weight 排序权重，数字越小越靠左 添加新菜单项只需追加一个块，比如搜索页：\n[[languages.zh-cn.menu.main]] name = \u0026#39;搜索\u0026#39; url = \u0026#39;/search/\u0026#39; weight = 6 外部链接同样支持：\n[[languages.zh-cn.menu.main]] name = \u0026#39;GitHub\u0026#39; url = \u0026#39;https://github.com/scenlinx\u0026#39; weight = 10 常见配置问题 现象 原因 解决 首页轮播图不显示 删了 homeInfoParams 保留 [params.homeInfoParams]，它是入口开关 搜索不可用 缺少 JSON 输出 [outputs] 中加 'JSON' 文章不出现 date 是未来日期 改过去，或 hugo server -F 修改配置不生效 缓存 重启 hugo server 评论不显示 giscus 配置为空 填入完整 repo/repoId/categoryId 分类页为空 文章没写 categories Front Matter 加分类 轮播图链接 404 文章被删除 确保 url 指向存在的文章 快速上手模板 复制以下骨架，改三项即可拥有自己的博客：\nbaseURL = \u0026#39;https://你的域名.com/\u0026#39; # ← 改这里 title = \u0026#39;你的博客名\u0026#39; # ← 改这里 theme = \u0026#39;PaperUI\u0026#39; defaultContentLanguage = \u0026#39;zh-cn\u0026#39; enableRobotsTXT = true [outputs] home = [\u0026#39;HTML\u0026#39;, \u0026#39;RSS\u0026#39;, \u0026#39;JSON\u0026#39;] [params] env = \u0026#39;production\u0026#39; description = \u0026#39;你的站点描述\u0026#39; homePostCount = 8 defaultTheme = \u0026#39;auto\u0026#39; ShowReadingTime = true ShowCodeCopyButtons = true ShowToc = true ShowPostNavLinks = true [params.homeInfoParams] Title = \u0026#39;你的博客名\u0026#39; Content = \u0026#39;一句话介绍你的博客\u0026#39; [params.giscus] repo = \u0026#39;\u0026#39; # ← 改这里（或用 Giscus 后填入） repoId = \u0026#39;\u0026#39; category = \u0026#39;Announcements\u0026#39; categoryId = \u0026#39;\u0026#39; mapping = \u0026#39;pathname\u0026#39; lang = \u0026#39;zh-CN\u0026#39; [languages.zh-cn] locale = \u0026#39;zh-CN\u0026#39; title = \u0026#39;你的博客名\u0026#39; weight = 1 [[languages.zh-cn.menu.main]] name = \u0026#39;首页\u0026#39; url = \u0026#39;/\u0026#39; weight = 1 [[languages.zh-cn.menu.main]] name = \u0026#39;文章\u0026#39; url = \u0026#39;/posts/\u0026#39; weight = 2 [[languages.zh-cn.menu.main]] name = \u0026#39;归档\u0026#39; url = \u0026#39;/archives/\u0026#39; weight = 3 [[languages.zh-cn.menu.main]] name = \u0026#39;关于\u0026#39; url = \u0026#39;/about/\u0026#39; weight = 4 ","permalink":"https://paperui.newmt.fun/posts/hugo-toml-config-guide/","summary":"\u003cp\u003e\u003ccode\u003ehugo.toml\u003c/code\u003e 是 Hugo 站点的核心配置文件。本文以本博客当前使用的配置为基础，结合 PaperUI 主题的模板源码，逐段说明每个配置项的实际作用。\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e如果你只需要\u003cstrong\u003e快速查阅所有配置参数\u003c/strong\u003e，推荐先看 \u003ca href=\"/posts/paperui-config-guide/\"\u003ePaperUI 完整配置指南与参数说明\u003c/a\u003e，那是更紧凑的参考手册。\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003ch2 id=\"站点基础\"\u003e站点基础\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003ebaseURL\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;https://paperui.newmt.fun/\u0026#39;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003etitle\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;新墨韬\u0026#39;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003etheme\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;PaperUI\u0026#39;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003edefaultContentLanguage\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;zh-cn\u0026#39;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eenableRobotsTXT\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eenableEmoji\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003cth\u003e参数\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003e说明\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003ebaseURL\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e站点域名，\u003cstrong\u003e上线前必须改成真实域名\u003c/strong\u003e。末尾 \u003ccode\u003e/\u003c/code\u003e 不要漏。影响所有链接、RSS、sitemap\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003etitle\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e站点标题，出现在浏览器标签页、RSS 标题、OG 标签中\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003etheme\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e主题文件夹名，对应 \u003ccode\u003ethemes/PaperUI/\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003edefaultContentLanguage\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e默认语言代码，需与下方 \u003ccode\u003e[languages.zh-cn]\u003c/code\u003e 的 key 一致\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003eenableRobotsTXT\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e 自动生成 \u003ccode\u003e/robots.txt\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003eenableEmoji\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e 允许 Markdown 中使用 \u003ccode\u003e:smile:\u003c/code\u003e 等 Emoji 短码\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\u003chr\u003e\n\u003ch2 id=\"输出格式\"\u003e输出格式\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e[\u003cspan style=\"color:#a6e22e\"\u003eoutputs\u003c/span\u003e]\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003ehome\u003c/span\u003e = [\u003cspan style=\"color:#e6db74\"\u003e\u0026#39;HTML\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;RSS\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;JSON\u0026#39;\u003c/span\u003e]\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cul\u003e\n\u003cli\u003e\u003ccode\u003eHTML\u003c/code\u003e：网页\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eRSS\u003c/code\u003e：订阅源（\u003ccode\u003e/index.xml\u003c/code\u003e）\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eJSON\u003c/code\u003e：\u003cstrong\u003e搜索索引，PaperUI 的搜索功能依赖此项\u003c/strong\u003e，不要删\u003c/li\u003e\n\u003c/ul\u003e\n\u003chr\u003e\n\u003ch2 id=\"params-主题参数\"\u003e[params] 主题参数\u003c/h2\u003e\n\u003ch3 id=\"环境与-seo\"\u003e环境与 SEO\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e[\u003cspan style=\"color:#a6e22e\"\u003eparams\u003c/span\u003e]\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eenv\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;production\u0026#39;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003edescription\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;新墨韬 - 个人技术博客\u0026#39;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003ekeywords\u003c/span\u003e = [\u003cspan style=\"color:#e6db74\"\u003e\u0026#39;博客\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;Hugo\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;PaperMod\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;技术\u0026#39;\u003c/span\u003e]\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003cth\u003e参数\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003e说明\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003eenv\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003eproduction\u003c/code\u003e 启用 CSS/JS 压缩；本地开发临时改 \u003ccode\u003edevelopment\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003edescription\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e站点描述，出现在 \u003ccode\u003e\u0026lt;meta name=\u0026quot;description\u0026quot;\u0026gt;\u003c/code\u003e 和搜索结果摘要中\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003ekeywords\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e全局关键词，对现代搜索引擎权重不高但仍有参考意义\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\u003ch3 id=\"外观控制\"\u003e外观控制\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003edefaultTheme\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;auto\u0026#39;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003edisableThemeToggle\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003efalse\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003edisableScrollToTop\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003efalse\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003cth\u003e参数\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003e值\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003e说明\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003edefaultTheme\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003eauto\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e跟随系统偏好，也可设为 \u003ccode\u003elight\u003c/code\u003e 或 \u003ccode\u003edark\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003edisableThemeToggle\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e保留深色/浅色切换按钮\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003edisableScrollToTop\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e保留\u0026quot;回到顶部\u0026quot;按钮\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\u003ch3 id=\"文章显示开关\"\u003e文章显示开关\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowReadingTime\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowWordCount\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowShareButtons\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003efalse\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowPostNavLinks\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowBreadCrumbs\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003efalse\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowCodeCopyButtons\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowToc\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003cth\u003e参数\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003e推荐\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003e说明\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003eShowReadingTime\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e估算阅读时间\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003eShowWordCount\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e显示字数统计\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003eShowCodeCopyButtons\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003cstrong\u003e技术博客强烈推荐\u003c/strong\u003e，代码块右上角复制按钮\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003eShowToc\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e文章右侧目录，长文章导航\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003eShowPostNavLinks\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e文章底部\u0026quot;上一篇/下一篇\u0026quot;\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003eShowShareButtons\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e社交分享按钮，不需要就关\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003eShowBreadCrumbs\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e面包屑导航，扁平博客结构意义不大\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\u003ch3 id=\"列表与分页\"\u003e列表与分页\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowPageNums\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowRssButtonInSectionTermList\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowAllPagesInArchive\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003efalse\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowFullTextinRSS\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003efalse\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003ehomePostCount\u003c/span\u003e = \u003cspan style=\"color:#ae81ff\"\u003e8\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003cth\u003e参数\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003e说明\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003eShowPageNums\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e分页显示页码\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003eShowRssButtonInSectionTermList\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e分类/标签页显示 RSS 订阅按钮\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003eShowAllPagesInArchive\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e 归档页只显示文章；\u003ccode\u003etrue\u003c/code\u003e 会包含所有页面\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003eShowFullTextinRSS\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e RSS 只输出摘要；\u003ccode\u003etrue\u003c/code\u003e 输出全文\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003ehomePostCount\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e首页显示的文章数量，建议 8~10\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\u003chr\u003e\n\u003ch2 id=\"首页展示homeinfoparams--homecarousel\"\u003e首页展示：homeInfoParams + homeCarousel\u003c/h2\u003e\n\u003cp\u003e这是 PaperUI 首页最核心的配置，也是最容易理解错的地方。先看模板源码：\u003c/p\u003e","title":"Hugo + PaperUI 配置文件逐行详解"},{"content":"如果你正在使用 Hugo 搭建个人博客，一定听说过 PaperMod —— 它是 Hugo 生态中最受欢迎的主题之一，GitHub 上拥有超过 15,000 个 Star。PaperMod 以简洁、快速、轻量著称，但它的设计偏向英文博客场景，对中文用户来说还有一些可以改进的空间。\nPaperUI 正是在 PaperMod 的基础上，针对中文博客的实际需求进行深度定制的优化版本。它不是重新造轮子，而是站在巨人的肩膀上，让轮子滚得更顺畅。\nPaperUI 的定位 PaperUI 保留了 PaperMod 的全部核心优势 —— 极快的构建速度、完善的 SEO 支持、响应式布局、深色/浅色模式切换 —— 同时增加了以下特性：\n首页轮播系统：支持 16:9 主轮播图 + 正方形卡片 + 竖版图片的三栏展示 双栏布局：首页和内页均可启用侧边栏，展示分类、标签、搜索等小部件 彩色标签系统：8 色循环配色，让标签和分类视觉更丰富 搜索增强：首页侧边栏搜索框 + 搜索模态框 + Ctrl+K 快捷键 移动端优化：汉堡菜单 + 侧滑导航，移动端自动隐藏侧边栏 中文深度本地化：面包屑、页脚、存档格式等全部中文化 LLM 友好：内置 llms.txt 模板，方便 AI 搜索引擎索引 为什么叫 PaperUI？ Paper 代表它源自 PaperMod 的设计基因 —— 像纸张一样干净、纯粹；UI 则强调在用户界面和交互体验上的改进。两个词合在一起，表达了在保持简洁本质的同时，追求更好的用户界面体验。\n技术栈 PaperUI 基于 Hugo v0.146.0+ 开发，前端使用纯 CSS 变量实现主题定制，JavaScript 仅用于必要的交互（搜索、轮播、主题切换），不引入任何第三方前端框架。构建后的页面体积极小，首屏加载速度飞快。\n开源地址 你可以在 GitHub 上找到 PaperUI 的完整源代码：github.com/scenlinx/PaperUI\n接下来的系列文章，我们将深入探讨 PaperMod 为什么好、PaperUI 做了哪些改进、以及如何快速上手使用。\n","permalink":"https://paperui.newmt.fun/posts/paperui-introduction/","summary":"\u003cp\u003e如果你正在使用 Hugo 搭建个人博客，一定听说过 \u003cstrong\u003ePaperMod\u003c/strong\u003e —— 它是 Hugo 生态中最受欢迎的主题之一，GitHub 上拥有超过 15,000 个 Star。PaperMod 以简洁、快速、轻量著称，但它的设计偏向英文博客场景，对中文用户来说还有一些可以改进的空间。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003ePaperUI\u003c/strong\u003e 正是在 PaperMod 的基础上，针对中文博客的实际需求进行深度定制的优化版本。它不是重新造轮子，而是站在巨人的肩膀上，让轮子滚得更顺畅。\u003c/p\u003e\n\u003ch2 id=\"paperui-的定位\"\u003ePaperUI 的定位\u003c/h2\u003e\n\u003cp\u003ePaperUI 保留了 PaperMod 的全部核心优势 —— 极快的构建速度、完善的 SEO 支持、响应式布局、深色/浅色模式切换 —— 同时增加了以下特性：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e首页轮播系统\u003c/strong\u003e：支持 16:9 主轮播图 + 正方形卡片 + 竖版图片的三栏展示\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e双栏布局\u003c/strong\u003e：首页和内页均可启用侧边栏，展示分类、标签、搜索等小部件\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e彩色标签系统\u003c/strong\u003e：8 色循环配色，让标签和分类视觉更丰富\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e搜索增强\u003c/strong\u003e：首页侧边栏搜索框 + 搜索模态框 + Ctrl+K 快捷键\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e移动端优化\u003c/strong\u003e：汉堡菜单 + 侧滑导航，移动端自动隐藏侧边栏\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e中文深度本地化\u003c/strong\u003e：面包屑、页脚、存档格式等全部中文化\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eLLM 友好\u003c/strong\u003e：内置 \u003ccode\u003ellms.txt\u003c/code\u003e 模板，方便 AI 搜索引擎索引\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"为什么叫-paperui\"\u003e为什么叫 PaperUI？\u003c/h2\u003e\n\u003cp\u003ePaper 代表它源自 PaperMod 的设计基因 —— 像纸张一样干净、纯粹；UI 则强调在用户界面和交互体验上的改进。两个词合在一起，表达了在保持简洁本质的同时，追求更好的用户界面体验。\u003c/p\u003e\n\u003ch2 id=\"技术栈\"\u003e技术栈\u003c/h2\u003e\n\u003cp\u003ePaperUI 基于 Hugo v0.146.0+ 开发，前端使用纯 CSS 变量实现主题定制，JavaScript 仅用于必要的交互（搜索、轮播、主题切换），不引入任何第三方前端框架。构建后的页面体积极小，首屏加载速度飞快。\u003c/p\u003e","title":"PaperUI：一个更懂中文博客的 Hugo 主题"},{"content":"在 Hugo 官方主题库中，PaperMod 长期占据着最受欢迎的位置。截至 2026 年，它在 GitHub 上的 Star 数超过 15,000，被数万个个人博客和文档站点使用。这篇文章来分析它为什么能获得如此广泛认可。\n设计哲学：做减法而非加法 PaperMod 的核心设计理念是\u0026quot;克制\u0026quot;。它不追求功能的大而全，而是专注于把博客最核心的需求做好：\n阅读体验优先：单栏布局，宽窄适中的内容区域（约 720px），配合合适的字体大小和行高，让长文阅读不疲劳 视觉噪音最小化：没有花哨的动画、没有多余的装饰元素，让读者的注意力集中在内容上 主题切换自然：支持自动跟随系统、手动切换浅色/深色模式，过渡平滑 性能：快得几乎无感 PaperMod 在性能方面做了大量细致的工作：\n零外部依赖：不引入任何第三方 CSS 框架或 JS 库（搜索功能可选 fuse.js） CSS 变量驱动：主题色、间距、字体等全部使用 CSS 变量，方便定制且不会产生冗余样式 按需加载：搜索 JS、评论系统等仅在需要时加载 资源最小化：Hugo 内置的 asset pipeline 自动压缩和指纹化静态资源 实际测试中，PaperMod 构建的站点 Lighthouse 得分通常在 95-100 分之间。\nSEO：开箱即用的搜索引擎优化 PaperMod 内置了完善的 SEO 支持：Open Graph、Twitter Cards、JSON-LD 结构化数据、Canonical URL、robots.txt、RSS 等。PaperUI 完全继承了这些能力。\n详细的 SEO 优化实践请参考 PaperUI 的 SEO 优化实践指南。\n多语言支持 PaperMod 内置了 46 种语言的翻译文件，从英语、中文到阿拉伯语（RTL）都有覆盖。多语言站点的切换体验流畅自然。\n开发者友好 配置驱动：几乎所有功能都通过 hugo.toml 参数控制，不需要修改模板代码 扩展点丰富：extend_head.html、extend_footer.html 等扩展模板，可以无侵入地添加自定义代码 完善的文档：官方 Wiki 覆盖了从安装到高级定制的方方面面 活跃的社区 PaperMod 的 GitHub Issues 和 Discussions 非常活跃，作者 Aditya Telange 响应迅速。大量用户贡献了使用案例、配置技巧和问题解答，形成了良好的社区生态。\n不足之处 客观地说，PaperMod 也有一些局限：\n首页信息密度较低：标准模式首页只有一个简单的欢迎信息和文章列表 缺少侧边栏：没有分类、标签等导航小部件 移动端体验一般：没有针对移动端的专门导航优化 中文场景适配不足：部分 UI 文案、日期格式等不够本地化 这些正是 PaperUI 要解决的问题。下一篇我们将详细讨论，为什么要基于 PaperMod 做二次开发，以及 PaperUI 具体做了哪些改进。\n","permalink":"https://paperui.newmt.fun/posts/papermod-advantages/","summary":"\u003cp\u003e在 Hugo 官方主题库中，PaperMod 长期占据着最受欢迎的位置。截至 2026 年，它在 GitHub 上的 Star 数超过 15,000，被数万个个人博客和文档站点使用。这篇文章来分析它为什么能获得如此广泛认可。\u003c/p\u003e\n\u003ch2 id=\"设计哲学做减法而非加法\"\u003e设计哲学：做减法而非加法\u003c/h2\u003e\n\u003cp\u003ePaperMod 的核心设计理念是\u0026quot;克制\u0026quot;。它不追求功能的大而全，而是专注于把博客最核心的需求做好：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e阅读体验优先\u003c/strong\u003e：单栏布局，宽窄适中的内容区域（约 720px），配合合适的字体大小和行高，让长文阅读不疲劳\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e视觉噪音最小化\u003c/strong\u003e：没有花哨的动画、没有多余的装饰元素，让读者的注意力集中在内容上\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e主题切换自然\u003c/strong\u003e：支持自动跟随系统、手动切换浅色/深色模式，过渡平滑\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"性能快得几乎无感\"\u003e性能：快得几乎无感\u003c/h2\u003e\n\u003cp\u003ePaperMod 在性能方面做了大量细致的工作：\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003e零外部依赖\u003c/strong\u003e：不引入任何第三方 CSS 框架或 JS 库（搜索功能可选 fuse.js）\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCSS 变量驱动\u003c/strong\u003e：主题色、间距、字体等全部使用 CSS 变量，方便定制且不会产生冗余样式\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e按需加载\u003c/strong\u003e：搜索 JS、评论系统等仅在需要时加载\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e资源最小化\u003c/strong\u003e：Hugo 内置的 asset pipeline 自动压缩和指纹化静态资源\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e实际测试中，PaperMod 构建的站点 Lighthouse 得分通常在 95-100 分之间。\u003c/p\u003e\n\u003ch2 id=\"seo开箱即用的搜索引擎优化\"\u003eSEO：开箱即用的搜索引擎优化\u003c/h2\u003e\n\u003cp\u003ePaperMod 内置了完善的 SEO 支持：Open Graph、Twitter Cards、JSON-LD 结构化数据、Canonical URL、robots.txt、RSS 等。PaperUI 完全继承了这些能力。\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e详细的 SEO 优化实践请参考 \u003ca href=\"/posts/paperui-seo/\"\u003ePaperUI 的 SEO 优化实践指南\u003c/a\u003e。\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003ch2 id=\"多语言支持\"\u003e多语言支持\u003c/h2\u003e\n\u003cp\u003ePaperMod 内置了 46 种语言的翻译文件，从英语、中文到阿拉伯语（RTL）都有覆盖。多语言站点的切换体验流畅自然。\u003c/p\u003e\n\u003ch2 id=\"开发者友好\"\u003e开发者友好\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e配置驱动\u003c/strong\u003e：几乎所有功能都通过 \u003ccode\u003ehugo.toml\u003c/code\u003e 参数控制，不需要修改模板代码\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e扩展点丰富\u003c/strong\u003e：\u003ccode\u003eextend_head.html\u003c/code\u003e、\u003ccode\u003eextend_footer.html\u003c/code\u003e 等扩展模板，可以无侵入地添加自定义代码\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e完善的文档\u003c/strong\u003e：官方 Wiki 覆盖了从安装到高级定制的方方面面\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"活跃的社区\"\u003e活跃的社区\u003c/h2\u003e\n\u003cp\u003ePaperMod 的 GitHub Issues 和 Discussions 非常活跃，作者 Aditya Telange 响应迅速。大量用户贡献了使用案例、配置技巧和问题解答，形成了良好的社区生态。\u003c/p\u003e","title":"PaperMod 为什么是 Hugo 社区最受欢迎的主题"},{"content":"很多朋友问我：PaperMod 已经很优秀了，为什么要再做二次开发？这篇文章聊聊我的思考过程和技术决策。\n出发点：解决实际痛点 在使用 PaperMod 搭建中文博客的过程中，我遇到了几个实际的问题：\n1. 首页太\u0026quot;空\u0026quot;了 PaperMod 的首页默认只有标题、简介和一列文章列表。对于内容型博客来说，首页是流量入口，需要承载更多导航和发现功能。\n2. 内容发现路径单一 在标准 PaperMod 中，读者找到感兴趣内容的路径基本只有两条：按时间线浏览文章列表，或者使用搜索。缺少按分类浏览、按标签筛选、随机推荐等发现方式。\n3. 中文适配不够精细 这不是 PaperMod 的问题 —— 它面向全球用户，不可能为每种语言做深度优化。但作为中文博客，我需要页脚文案中文化、存档月份显示\u0026quot;1月\u0026quot;而非\u0026quot;January\u0026quot;、面包屑导航的中文语义等细节。\n4. 移动端体验可以更好 PaperMod 在桌面端体验很好，但移动端的导航和布局还有优化空间。\n技术决策：为什么是\u0026quot;改进\u0026quot;而非\u0026quot;重写\u0026quot; 面对这些问题，我有两个选择：\n从零写一个新主题：完全自由，但需要重新实现 PaperMod 已经做得很好的部分（SEO、多语言、性能优化等），工作量大且容易遗漏 在 PaperMod 基础上定制：继承其核心优势，专注做增量改进 我选择了后者，原因很简单：\n不要重新发明轮子，除非你确定能做出更好的轮子。\nPaperMod 在性能、SEO、可访问性方面的积累是经过数千个站点验证的。在这些基础上做增量优化，比从零开始更有价值。\n开发原则 在开发过程中，我遵循了几个原则：\n不破坏原有配置：PaperMod 用户迁移到 PaperUI，只需改 theme = 'PaperUI' 并添加新参数即可 性能不退化：新增功能不能显著增加页面体积和加载时间 渐进增强：新功能都是可选的，不配置就不加载相关代码 保持可升级性：目录结构与 PaperMod 保持一致，方便合并上游更新 PaperUI 新增了哪些功能 关于 PaperUI 具体增加了哪些功能模块、做了哪些中文化改进，请参见：\nPaperUI：一个更懂中文博客的 Hugo 主题\n开源与合作 PaperUI 在 GitHub 上以 MIT 协议开源（与 PaperMod 保持一致），欢迎所有人使用、修改和贡献。项目地址：\ngithub.com/scenlinx/PaperUI\n","permalink":"https://paperui.newmt.fun/posts/why-paperui/","summary":"\u003cp\u003e很多朋友问我：PaperMod 已经很优秀了，为什么要再做二次开发？这篇文章聊聊我的思考过程和技术决策。\u003c/p\u003e\n\u003ch2 id=\"出发点解决实际痛点\"\u003e出发点：解决实际痛点\u003c/h2\u003e\n\u003cp\u003e在使用 PaperMod 搭建中文博客的过程中，我遇到了几个实际的问题：\u003c/p\u003e\n\u003ch3 id=\"1-首页太空了\"\u003e1. 首页太\u0026quot;空\u0026quot;了\u003c/h3\u003e\n\u003cp\u003ePaperMod 的首页默认只有标题、简介和一列文章列表。对于内容型博客来说，首页是流量入口，需要承载更多导航和发现功能。\u003c/p\u003e\n\u003ch3 id=\"2-内容发现路径单一\"\u003e2. 内容发现路径单一\u003c/h3\u003e\n\u003cp\u003e在标准 PaperMod 中，读者找到感兴趣内容的路径基本只有两条：按时间线浏览文章列表，或者使用搜索。缺少按分类浏览、按标签筛选、随机推荐等发现方式。\u003c/p\u003e\n\u003ch3 id=\"3-中文适配不够精细\"\u003e3. 中文适配不够精细\u003c/h3\u003e\n\u003cp\u003e这不是 PaperMod 的问题 —— 它面向全球用户，不可能为每种语言做深度优化。但作为中文博客，我需要页脚文案中文化、存档月份显示\u0026quot;1月\u0026quot;而非\u0026quot;January\u0026quot;、面包屑导航的中文语义等细节。\u003c/p\u003e\n\u003ch3 id=\"4-移动端体验可以更好\"\u003e4. 移动端体验可以更好\u003c/h3\u003e\n\u003cp\u003ePaperMod 在桌面端体验很好，但移动端的导航和布局还有优化空间。\u003c/p\u003e\n\u003ch2 id=\"技术决策为什么是改进而非重写\"\u003e技术决策：为什么是\u0026quot;改进\u0026quot;而非\u0026quot;重写\u0026quot;\u003c/h2\u003e\n\u003cp\u003e面对这些问题，我有两个选择：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e从零写一个新主题\u003c/strong\u003e：完全自由，但需要重新实现 PaperMod 已经做得很好的部分（SEO、多语言、性能优化等），工作量大且容易遗漏\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e在 PaperMod 基础上定制\u003c/strong\u003e：继承其核心优势，专注做增量改进\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e我选择了后者，原因很简单：\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e不要重新发明轮子，除非你确定能做出更好的轮子。\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp\u003ePaperMod 在性能、SEO、可访问性方面的积累是经过数千个站点验证的。在这些基础上做增量优化，比从零开始更有价值。\u003c/p\u003e\n\u003ch2 id=\"开发原则\"\u003e开发原则\u003c/h2\u003e\n\u003cp\u003e在开发过程中，我遵循了几个原则：\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003e不破坏原有配置\u003c/strong\u003e：PaperMod 用户迁移到 PaperUI，只需改 \u003ccode\u003etheme = 'PaperUI'\u003c/code\u003e 并添加新参数即可\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e性能不退化\u003c/strong\u003e：新增功能不能显著增加页面体积和加载时间\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e渐进增强\u003c/strong\u003e：新功能都是可选的，不配置就不加载相关代码\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e保持可升级性\u003c/strong\u003e：目录结构与 PaperMod 保持一致，方便合并上游更新\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch2 id=\"paperui-新增了哪些功能\"\u003ePaperUI 新增了哪些功能\u003c/h2\u003e\n\u003cp\u003e关于 PaperUI 具体增加了哪些功能模块、做了哪些中文化改进，请参见：\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e\u003ca href=\"/posts/paperui-introduction/\"\u003ePaperUI：一个更懂中文博客的 Hugo 主题\u003c/a\u003e\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003ch2 id=\"开源与合作\"\u003e开源与合作\u003c/h2\u003e\n\u003cp\u003ePaperUI 在 GitHub 上以 MIT 协议开源（与 PaperMod 保持一致），欢迎所有人使用、修改和贡献。项目地址：\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e\u003ca href=\"https://github.com/scenlinx/PaperUI\"\u003egithub.com/scenlinx/PaperUI\u003c/a\u003e\u003c/p\u003e","title":"为什么我选择在 PaperMod 基础上开发 PaperUI"},{"content":"上一篇文章聊了为什么要做 PaperUI，这篇我们逐一看看每个新增功能的设计思路和使用效果。\n1. 首页轮播系统 功能说明 PaperUI 新增了 homeCarousel 配置项，可以在首页展示三栏图片导航：\n[params.homeCarousel] slides = [ { image = \u0026#39;/images/hero-1.webp\u0026#39;, url = \u0026#39;/posts/paperui-introduction/\u0026#39; }, { image = \u0026#39;/images/hero-2.webp\u0026#39;, url = \u0026#39;/posts/papermod-advantages/\u0026#39; }, { image = \u0026#39;/images/hero-3.webp\u0026#39;, url = \u0026#39;/posts/git-guide/\u0026#39; }, ] middle = [ { image = \u0026#39;/images/square-1.webp\u0026#39;, url = \u0026#39;/posts/python-tips/\u0026#39; }, { image = \u0026#39;/images/square-2.webp\u0026#39;, url = \u0026#39;/posts/linux-commands/\u0026#39; }, ] right = { image = \u0026#39;/images/portrait-1.webp\u0026#39;, url = \u0026#39;/about/\u0026#39; } 设计细节 左侧主轮播：16:9 比例，自动播放（4 秒间隔），支持前后导航按钮和指示点 中部卡片：1:1 正方形图片，适合展示方形封面 右侧竖图：3:4 比例，适合展示竖版图片或头像 交互细节：鼠标悬停暂停轮播，焦点状态可访问，所有图片点击跳转到对应链接 响应式：移动端自动切换为单列堆叠布局 这个设计灵感来自传统杂志的封面排版 —— 大图吸引注意力，小图提供更多入口。\n2. 双栏布局系统 首页双栏 首页采用 home-layout 双栏布局：\n左侧（主内容区）：文章列表 右侧（侧边栏）：搜索框、分类列表、标签云、随机文章、近期文章 [params] # 首页显示文章数量 homePostCount = 8 侧边栏的每个小部件都有明确的用途：\n搜索框：方便读者直接搜索感兴趣的内容 分类列表：按分类浏览文章 标签云：彩色标签，点击跳转到对应标签页 随机文章：增加内容曝光，降低跳出率 近期文章：最新发布的几篇文章 内页侧边栏 分类页、标签页也采用侧边栏布局，左侧显示分类/标签的层级结构，右侧展示对应文章列表。\n3. 彩色标签系统 PaperUI 引入了 8 色循环的标签配色方案：\n8 种颜色通过 CSS nth-child(8n+X) 自动循环分配 深色/浅色模式各有独立的颜色映射，使用 CSS color-mix 混合背景色 标签云中的标签大小根据文章数量动态调整 分类和标签页面都有彩色标签展示 这个设计让标签不再千篇一律，视觉上更容易区分和记忆。\n4. 搜索增强 PaperUI 在 PaperMod 的 fuse.js 搜索基础上做了三项增强：\n搜索模态框 点击导航栏的搜索图标或按 Ctrl+K，弹出居中的搜索模态框，输入关键词即时显示结果。\n首页侧边栏搜索 首页侧边栏的搜索框输入关键词后，自动跳转到搜索模态框并执行搜索，减少操作步骤。\n快捷键 Ctrl+K / Cmd+K：打开搜索 Esc：关闭搜索 5. 移动端优化 汉堡菜单 移动端导航栏收缩为汉堡图标，点击展开侧滑菜单面板。\n侧滑面板 菜单从屏幕左侧滑入，包含导航链接和主题切换、语言切换按钮。半透明遮罩层防止误触。\n侧边栏隐藏 移动端屏幕空间有限，所有侧边栏（首页侧边栏、内页侧边栏）在移动端自动隐藏，内容区占满屏幕。\n6. 顶部装饰条 页面顶部 2px 的彩色装饰条（.header-top-bar），颜色跟随主题 accent 色。这是一个微小的视觉细节，但能让页面看起来更精致。\n7. Sticky Header 毛玻璃效果 页面滚动时，header 固定到顶部并产生半透明毛玻璃效果（backdrop-filter: blur），既保持了导航可见性，又不遮挡内容。\n8. LLM 友好 新增 llms.txt 模板，按照 llmstxt 规范生成站点地图，方便 AI 搜索引擎和 LLM 工具索引博客内容。\n小结 PaperUI 新增的每一项功能都来自实际使用中的需求，没有为了炫技而添加的功能。如果你正在使用 PaperMod，迁移到 PaperUI 几乎零成本 —— 下一篇我们来介绍具体的安装和配置方法。\n","permalink":"https://paperui.newmt.fun/posts/paperui-features/","summary":"\u003cp\u003e上一篇文章聊了为什么要做 PaperUI，这篇我们逐一看看每个新增功能的设计思路和使用效果。\u003c/p\u003e\n\u003ch2 id=\"1-首页轮播系统\"\u003e1. 首页轮播系统\u003c/h2\u003e\n\u003ch3 id=\"功能说明\"\u003e功能说明\u003c/h3\u003e\n\u003cp\u003ePaperUI 新增了 \u003ccode\u003ehomeCarousel\u003c/code\u003e 配置项，可以在首页展示三栏图片导航：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e[\u003cspan style=\"color:#a6e22e\"\u003eparams\u003c/span\u003e.\u003cspan style=\"color:#a6e22e\"\u003ehomeCarousel\u003c/span\u003e]\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eslides\u003c/span\u003e = [\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  { \u003cspan style=\"color:#a6e22e\"\u003eimage\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/images/hero-1.webp\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#a6e22e\"\u003eurl\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/posts/paperui-introduction/\u0026#39;\u003c/span\u003e },\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  { \u003cspan style=\"color:#a6e22e\"\u003eimage\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/images/hero-2.webp\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#a6e22e\"\u003eurl\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/posts/papermod-advantages/\u0026#39;\u003c/span\u003e },\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  { \u003cspan style=\"color:#a6e22e\"\u003eimage\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/images/hero-3.webp\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#a6e22e\"\u003eurl\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/posts/git-guide/\u0026#39;\u003c/span\u003e },\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e]\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003emiddle\u003c/span\u003e = [\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  { \u003cspan style=\"color:#a6e22e\"\u003eimage\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/images/square-1.webp\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#a6e22e\"\u003eurl\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/posts/python-tips/\u0026#39;\u003c/span\u003e },\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  { \u003cspan style=\"color:#a6e22e\"\u003eimage\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/images/square-2.webp\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#a6e22e\"\u003eurl\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/posts/linux-commands/\u0026#39;\u003c/span\u003e },\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e]\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eright\u003c/span\u003e = { \u003cspan style=\"color:#a6e22e\"\u003eimage\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/images/portrait-1.webp\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#a6e22e\"\u003eurl\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/about/\u0026#39;\u003c/span\u003e }\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch3 id=\"设计细节\"\u003e设计细节\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e左侧主轮播\u003c/strong\u003e：16:9 比例，自动播放（4 秒间隔），支持前后导航按钮和指示点\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e中部卡片\u003c/strong\u003e：1:1 正方形图片，适合展示方形封面\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e右侧竖图\u003c/strong\u003e：3:4 比例，适合展示竖版图片或头像\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e交互细节\u003c/strong\u003e：鼠标悬停暂停轮播，焦点状态可访问，所有图片点击跳转到对应链接\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e响应式\u003c/strong\u003e：移动端自动切换为单列堆叠布局\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e这个设计灵感来自传统杂志的封面排版 —— 大图吸引注意力，小图提供更多入口。\u003c/p\u003e\n\u003ch2 id=\"2-双栏布局系统\"\u003e2. 双栏布局系统\u003c/h2\u003e\n\u003ch3 id=\"首页双栏\"\u003e首页双栏\u003c/h3\u003e\n\u003cp\u003e首页采用 \u003ccode\u003ehome-layout\u003c/code\u003e 双栏布局：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e左侧（主内容区）\u003c/strong\u003e：文章列表\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e右侧（侧边栏）\u003c/strong\u003e：搜索框、分类列表、标签云、随机文章、近期文章\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e[\u003cspan style=\"color:#a6e22e\"\u003eparams\u003c/span\u003e]\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 首页显示文章数量\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003ehomePostCount\u003c/span\u003e = \u003cspan style=\"color:#ae81ff\"\u003e8\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e侧边栏的每个小部件都有明确的用途：\u003c/p\u003e","title":"PaperUI 新增功能全面解析"},{"content":"这篇文章将带你从零开始，在 5 分钟内完成 PaperUI 的安装和基础配置。\n前置要求 Hugo v0.146.0 或更高版本（推荐使用最新版） Git（用于主题安装） 基础的命令行操作能力 检查 Hugo 版本：\nhugo version # 应显示: hugo v0.146.0 或更高版本 方式一：Git Submodule 安装（推荐） 这是最传统的安装方式，适合大多数用户：\n# 1. 创建新站点 hugo new site my-blog cd my-blog # 2. 初始化 Git 仓库 git init # 3. 添加 PaperUI 主题作为子模块 git submodule add https://github.com/scenlinx/PaperUI.git themes/PaperUI # 4. 在配置文件中启用主题 echo \u0026#34;theme = \u0026#39;PaperUI\u0026#39;\u0026#34; \u0026gt;\u0026gt; hugo.toml 方式二：Hugo Modules 安装 如果你使用 Hugo Modules 管理依赖：\n# 1. 初始化 Hugo Modules hugo mod init my-blog # 2. 在 hugo.toml 中配置 # theme = \u0026#39;PaperUI\u0026#39; # 删除或注释掉这行 # 3. 编辑 go.mod 或使用 hugo mod get # 具体配置参见 Hugo Modules 文档 目前推荐使用 Git Submodule 方式，更简单直观。\n基础配置 创建或编辑 hugo.toml，填入以下最小配置：\nbaseURL = \u0026#39;https://你的域名.com/\u0026#39; title = \u0026#39;我的博客\u0026#39; theme = \u0026#39;PaperUI\u0026#39; defaultContentLanguage = \u0026#39;zh-cn\u0026#39; [params] env = \u0026#39;production\u0026#39; description = \u0026#39;个人技术博客\u0026#39; defaultTheme = \u0026#39;auto\u0026#39; ShowReadingTime = true ShowWordCount = true ShowCodeCopyButtons = true ShowToc = true homePostCount = 8 [params.homeInfoParams] Title = \u0026#39;欢迎来到我的博客\u0026#39; Content = \u0026#39;分享技术和思考\u0026#39; # 导航菜单 [[languages.zh-cn.menu.main]] name = \u0026#39;首页\u0026#39; url = \u0026#39;/\u0026#39; weight = 1 [[languages.zh-cn.menu.main]] name = \u0026#39;文章\u0026#39; url = \u0026#39;/posts/\u0026#39; weight = 2 [[languages.zh-cn.menu.main]] name = \u0026#39;分类\u0026#39; url = \u0026#39;/categories/\u0026#39; weight = 3 [[languages.zh-cn.menu.main]] name = \u0026#39;归档\u0026#39; url = \u0026#39;/archives/\u0026#39; weight = 4 [[languages.zh-cn.menu.main]] name = \u0026#39;关于\u0026#39; url = \u0026#39;/about/\u0026#39; weight = 5 创建内容页面 创建必要的内容目录和文件：\n# 创建关于页面 hugo new about/index.md # 创建文章 hugo new posts/hello-world.md # 创建分类页面 mkdir -p content/categories echo \u0026#39;---\\ntitle: \u0026#34;分类\u0026#34;\\n---\u0026#39; \u0026gt; content/categories/_index.md # 创建归档页面 mkdir -p content/archives echo \u0026#39;---\\ntitle: \u0026#34;归档\u0026#34;\\nlayout: \u0026#34;archives\u0026#34;\\n---\u0026#39; \u0026gt; content/archives/index.md # 创建搜索页面 mkdir -p content/search echo \u0026#39;---\\ntitle: \u0026#34;搜索\u0026#34;\\nlayout: \u0026#34;search\u0026#34;\\n---\u0026#39; \u0026gt; content/search/index.md # 创建标签页面 mkdir -p content/tags echo \u0026#39;---\\ntitle: \u0026#34;标签\u0026#34;\\n---\u0026#39; \u0026gt; content/tags/_index.md 添加图片资源 将轮播图和 favicon 放入 static/ 目录：\nstatic/ ├── favicon.svg └── images/ ├── hero-1.webp ├── hero-2.webp ├── hero-3.webp ├── square-1.webp ├── square-2.webp └── portrait-1.webp 启动开发服务器 hugo server -D 打开浏览器访问 http://localhost:1313，你应该能看到完整的博客页面了。\n配置首页轮播（可选） 在 hugo.toml 中添加轮播配置：\n[params.homeCarousel] slides = [ { image = \u0026#39;/images/hero-1.webp\u0026#39;, url = \u0026#39;/posts/your-post-1/\u0026#39; }, { image = \u0026#39;/images/hero-2.webp\u0026#39;, url = \u0026#39;/posts/your-post-2/\u0026#39; }, { image = \u0026#39;/images/hero-3.webp\u0026#39;, url = \u0026#39;/posts/your-post-3/\u0026#39; }, ] middle = [ { image = \u0026#39;/images/square-1.webp\u0026#39;, url = \u0026#39;/posts/your-post-4/\u0026#39; }, { image = \u0026#39;/images/square-2.webp\u0026#39;, url = \u0026#39;/posts/your-post-5/\u0026#39; }, ] right = { image = \u0026#39;/images/portrait-1.webp\u0026#39;, url = \u0026#39;/about/\u0026#39; } 不配置轮播也不会报错，首页会回退到标准的 homeInfoParams 模式。\n下一步 阅读下一篇《PaperUI 配置指南》，了解所有可配置参数 学习如何自定义主题颜色和样式 了解如何部署到生产环境 如果你在安装过程中遇到问题，欢迎在 GitHub Issues 提交反馈。\n","permalink":"https://paperui.newmt.fun/posts/paperui-quickstart/","summary":"\u003cp\u003e这篇文章将带你从零开始，在 5 分钟内完成 PaperUI 的安装和基础配置。\u003c/p\u003e\n\u003ch2 id=\"前置要求\"\u003e前置要求\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eHugo\u003c/strong\u003e v0.146.0 或更高版本（推荐使用最新版）\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eGit\u003c/strong\u003e（用于主题安装）\u003c/li\u003e\n\u003cli\u003e基础的命令行操作能力\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e检查 Hugo 版本：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ehugo version\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 应显示: hugo v0.146.0 或更高版本\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch2 id=\"方式一git-submodule-安装推荐\"\u003e方式一：Git Submodule 安装（推荐）\u003c/h2\u003e\n\u003cp\u003e这是最传统的安装方式，适合大多数用户：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 1. 创建新站点\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ehugo new site my-blog\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ecd my-blog\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 2. 初始化 Git 仓库\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit init\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 3. 添加 PaperUI 主题作为子模块\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit submodule add https://github.com/scenlinx/PaperUI.git themes/PaperUI\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 4. 在配置文件中启用主题\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003eecho \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;theme = \u0026#39;PaperUI\u0026#39;\u0026#34;\u003c/span\u003e \u0026gt;\u0026gt; hugo.toml\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch2 id=\"方式二hugo-modules-安装\"\u003e方式二：Hugo Modules 安装\u003c/h2\u003e\n\u003cp\u003e如果你使用 Hugo Modules 管理依赖：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 1. 初始化 Hugo Modules\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ehugo mod init my-blog\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 2. 在 hugo.toml 中配置\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# theme = \u0026#39;PaperUI\u0026#39;   # 删除或注释掉这行\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 3. 编辑 go.mod 或使用 hugo mod get\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 具体配置参见 Hugo Modules 文档\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cblockquote\u003e\n\u003cp\u003e目前推荐使用 Git Submodule 方式，更简单直观。\u003c/p\u003e","title":"PaperUI 安装与快速上手指南"},{"content":"这篇文章是 PaperUI 主题的完整配置参考手册。你可以把它当作速查表来查阅。\n如果你想知道每个参数在模板层面的具体作用逻辑，推荐阅读 Hugo + PaperUI 配置文件逐行详解，它以本博客真实配置为例，结合模板源码进行拆解。\n基础站点配置 baseURL = \u0026#39;https://你的域名.com/\u0026#39; # 站点 URL，上线前务必修改 title = \u0026#39;站点标题\u0026#39; # 显示在浏览器标签页和 header 中 theme = \u0026#39;PaperUI\u0026#39; # 主题名称 defaultContentLanguage = \u0026#39;zh-cn\u0026#39; # 默认语言 enableRobotsTXT = true # 自动生成 robots.txt enableEmoji = true # 支持 Emoji 输出格式 [outputs] home = [\u0026#39;HTML\u0026#39;, \u0026#39;RSS\u0026#39;, \u0026#39;JSON\u0026#39;] # 首页输出 HTML、RSS 和搜索索引 JSON 全局参数 [params] env = \u0026#39;production\u0026#39; # 环境：development 或 production description = \u0026#39;站点描述\u0026#39; # SEO 描述，显示在搜索引擎结果中 keywords = [\u0026#39;博客\u0026#39;, \u0026#39;Hugo\u0026#39;] # SEO 关键词 defaultTheme = \u0026#39;auto\u0026#39; # 默认主题：auto / dark / light disableThemeToggle = false # 禁用主题切换按钮 disableScrollToTop = false # 禁用回到顶部按钮 # 文章展示相关 ShowReadingTime = true # 显示阅读时间估算 ShowWordCount = true # 显示字数统计 ShowShareButtons = false # 显示分享按钮 ShowPostNavLinks = true # 显示上一篇/下一篇文章链接 ShowBreadCrumbs = false # 显示面包屑导航 ShowCodeCopyButtons = true # 显示代码块复制按钮 ShowToc = true # 显示文章目录（侧边栏） ShowPageNums = true # 分页显示页码 ShowRssButtonInSectionTermList = true # 分类/标签页显示 RSS 按钮 ShowAllPagesInArchive = false # 归档页显示所有文章（不推荐大量文章时开启） ShowFullTextinRSS = false # RSS 中显示全文 homePostCount = 8 # 首页显示文章数量 首页信息 [params.homeInfoParams] Title = \u0026#39;欢迎来到我的博客\u0026#39; # 首页标题 Content = \u0026#39;分享技术和思考\u0026#39; # 首页简介 首页轮播配置 [params.homeCarousel] # 左侧主轮播（16:9 比例） slides = [ { image = \u0026#39;/images/hero-1.webp\u0026#39;, url = \u0026#39;/posts/post-1/\u0026#39; }, { image = \u0026#39;/images/hero-2.webp\u0026#39;, url = \u0026#39;/posts/post-2/\u0026#39; }, { image = \u0026#39;/images/hero-3.webp\u0026#39;, url = \u0026#39;/posts/post-3/\u0026#39; }, ] # 中部正方形卡片（1:1 比例） middle = [ { image = \u0026#39;/images/square-1.webp\u0026#39;, url = \u0026#39;/posts/post-4/\u0026#39; }, { image = \u0026#39;/images/square-2.webp\u0026#39;, url = \u0026#39;/posts/post-5/\u0026#39; }, ] # 右侧竖版图片（3:4 比例） right = { image = \u0026#39;/images/portrait-1.webp\u0026#39;, url = \u0026#39;/about/\u0026#39; } 不配置 homeCarousel 时，首页使用标准的 homeInfoParams 模式。\nFavicon 配置 [params.assets] favicon = \u0026#39;/favicon.svg\u0026#39; favicon16x16 = \u0026#39;/favicon.svg\u0026#39; favicon32x32 = \u0026#39;/favicon.svg\u0026#39; 页脚配置 [params.footer] hideCopyright = false # 隐藏版权信息 语言配置 [languages.zh-cn] locale = \u0026#39;zh-CN\u0026#39; label = \u0026#39;中文\u0026#39; title = \u0026#39;站点中文标题\u0026#39; weight = 1 导航菜单 [[languages.zh-cn.menu.main]] name = \u0026#39;首页\u0026#39; url = \u0026#39;/\u0026#39; weight = 1 [[languages.zh-cn.menu.main]] name = \u0026#39;文章\u0026#39; url = \u0026#39;/posts/\u0026#39; weight = 2 [[languages.zh-cn.menu.main]] name = \u0026#39;分类\u0026#39; url = \u0026#39;/categories/\u0026#39; weight = 3 [[languages.zh-cn.menu.main]] name = \u0026#39;标签\u0026#39; url = \u0026#39;/tags/\u0026#39; weight = 4 [[languages.zh-cn.menu.main]] name = \u0026#39;归档\u0026#39; url = \u0026#39;/archives/\u0026#39; weight = 5 [[languages.zh-cn.menu.main]] name = \u0026#39;搜索\u0026#39; url = \u0026#39;/search/\u0026#39; weight = 6 [[languages.zh-cn.menu.main]] name = \u0026#39;关于\u0026#39; url = \u0026#39;/about/\u0026#39; weight = 7 weight 值越小越靠前，建议用 10 的倍数方便以后插入新项。\n文章 Front Matter 配置 每篇文章的 Markdown 文件头部（YAML 格式）：\n--- date: \u0026#39;2026-05-25\u0026#39; title: \u0026#39;文章标题\u0026#39; categories: [\u0026#34;分类名\u0026#34;] tags: [\u0026#34;标签1\u0026#34;, \u0026#34;标签2\u0026#34;, \u0026#34;标签3\u0026#34;] description: \u0026#39;文章摘要，用于 SEO 和列表展示\u0026#39; --- 单篇文章的特殊参数 --- ShowToc: false # 禁用当前文章的目录 wideLayout: true # 使用宽版布局（隐藏侧边栏） searchHidden: true # 从搜索结果中隐藏 hiddenInRss: true # 从 RSS 中隐藏 --- 图片资源建议 轮播图尺寸 位置 比例 推荐尺寸 slides（主轮播） 16:9 1200×675 middle（正方形） 1:1 600×600 right（竖版） 3:4 600×800 图片格式 推荐同时提供 .jpg 和 .webp 两种格式 .webp 格式体积更小，加载更快 Hugo 可以在构建时自动转换格式（需配置 image processing） 完整配置示例 这个博客站点（新墨韬）使用的就是 PaperUI，你可以参考它的完整配置文件。下一篇我们将讨论 PaperUI 的 SEO 优化实践，让你的博客在搜索引擎中获得更好的排名。\n","permalink":"https://paperui.newmt.fun/posts/paperui-config-guide/","summary":"\u003cp\u003e这篇文章是 PaperUI 主题的完整配置参考手册。你可以把它当作速查表来查阅。\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e如果你想知道\u003cstrong\u003e每个参数在模板层面的具体作用逻辑\u003c/strong\u003e，推荐阅读 \u003ca href=\"/posts/hugo-toml-config-guide/\"\u003eHugo + PaperUI 配置文件逐行详解\u003c/a\u003e，它以本博客真实配置为例，结合模板源码进行拆解。\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003ch2 id=\"基础站点配置\"\u003e基础站点配置\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003ebaseURL\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;https://你的域名.com/\u0026#39;\u003c/span\u003e     \u003cspan style=\"color:#75715e\"\u003e# 站点 URL，上线前务必修改\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003etitle\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;站点标题\u0026#39;\u003c/span\u003e                      \u003cspan style=\"color:#75715e\"\u003e# 显示在浏览器标签页和 header 中\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003etheme\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;PaperUI\u0026#39;\u003c/span\u003e                      \u003cspan style=\"color:#75715e\"\u003e# 主题名称\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003edefaultContentLanguage\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;zh-cn\u0026#39;\u003c/span\u003e       \u003cspan style=\"color:#75715e\"\u003e# 默认语言\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eenableRobotsTXT\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e                 \u003cspan style=\"color:#75715e\"\u003e# 自动生成 robots.txt\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eenableEmoji\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e                     \u003cspan style=\"color:#75715e\"\u003e# 支持 Emoji\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch2 id=\"输出格式\"\u003e输出格式\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e[\u003cspan style=\"color:#a6e22e\"\u003eoutputs\u003c/span\u003e]\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003ehome\u003c/span\u003e = [\u003cspan style=\"color:#e6db74\"\u003e\u0026#39;HTML\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;RSS\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;JSON\u0026#39;\u003c/span\u003e]         \u003cspan style=\"color:#75715e\"\u003e# 首页输出 HTML、RSS 和搜索索引 JSON\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch2 id=\"全局参数\"\u003e全局参数\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e[\u003cspan style=\"color:#a6e22e\"\u003eparams\u003c/span\u003e]\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eenv\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;production\u0026#39;\u003c/span\u003e                     \u003cspan style=\"color:#75715e\"\u003e# 环境：development 或 production\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003edescription\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;站点描述\u0026#39;\u003c/span\u003e               \u003cspan style=\"color:#75715e\"\u003e# SEO 描述，显示在搜索引擎结果中\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003ekeywords\u003c/span\u003e = [\u003cspan style=\"color:#e6db74\"\u003e\u0026#39;博客\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;Hugo\u0026#39;\u003c/span\u003e]            \u003cspan style=\"color:#75715e\"\u003e# SEO 关键词\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003edefaultTheme\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;auto\u0026#39;\u003c/span\u003e                  \u003cspan style=\"color:#75715e\"\u003e# 默认主题：auto / dark / light\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003edisableThemeToggle\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003efalse\u003c/span\u003e             \u003cspan style=\"color:#75715e\"\u003e# 禁用主题切换按钮\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003edisableScrollToTop\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003efalse\u003c/span\u003e             \u003cspan style=\"color:#75715e\"\u003e# 禁用回到顶部按钮\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 文章展示相关\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowReadingTime\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e                 \u003cspan style=\"color:#75715e\"\u003e# 显示阅读时间估算\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowWordCount\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e                   \u003cspan style=\"color:#75715e\"\u003e# 显示字数统计\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowShareButtons\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003efalse\u003c/span\u003e               \u003cspan style=\"color:#75715e\"\u003e# 显示分享按钮\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowPostNavLinks\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e                \u003cspan style=\"color:#75715e\"\u003e# 显示上一篇/下一篇文章链接\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowBreadCrumbs\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003efalse\u003c/span\u003e                \u003cspan style=\"color:#75715e\"\u003e# 显示面包屑导航\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowCodeCopyButtons\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e             \u003cspan style=\"color:#75715e\"\u003e# 显示代码块复制按钮\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowToc\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e                         \u003cspan style=\"color:#75715e\"\u003e# 显示文章目录（侧边栏）\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowPageNums\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e                    \u003cspan style=\"color:#75715e\"\u003e# 分页显示页码\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowRssButtonInSectionTermList\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e  \u003cspan style=\"color:#75715e\"\u003e# 分类/标签页显示 RSS 按钮\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowAllPagesInArchive\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003efalse\u003c/span\u003e          \u003cspan style=\"color:#75715e\"\u003e# 归档页显示所有文章（不推荐大量文章时开启）\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eShowFullTextinRSS\u003c/span\u003e = \u003cspan style=\"color:#66d9ef\"\u003efalse\u003c/span\u003e              \u003cspan style=\"color:#75715e\"\u003e# RSS 中显示全文\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003ehomePostCount\u003c/span\u003e = \u003cspan style=\"color:#ae81ff\"\u003e8\u003c/span\u003e                      \u003cspan style=\"color:#75715e\"\u003e# 首页显示文章数量\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch2 id=\"首页信息\"\u003e首页信息\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e[\u003cspan style=\"color:#a6e22e\"\u003eparams\u003c/span\u003e.\u003cspan style=\"color:#a6e22e\"\u003ehomeInfoParams\u003c/span\u003e]\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eTitle\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;欢迎来到我的博客\u0026#39;\u003c/span\u003e             \u003cspan style=\"color:#75715e\"\u003e# 首页标题\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eContent\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;分享技术和思考\u0026#39;\u003c/span\u003e             \u003cspan style=\"color:#75715e\"\u003e# 首页简介\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch2 id=\"首页轮播配置\"\u003e首页轮播配置\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e[\u003cspan style=\"color:#a6e22e\"\u003eparams\u003c/span\u003e.\u003cspan style=\"color:#a6e22e\"\u003ehomeCarousel\u003c/span\u003e]\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 左侧主轮播（16:9 比例）\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eslides\u003c/span\u003e = [\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  { \u003cspan style=\"color:#a6e22e\"\u003eimage\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/images/hero-1.webp\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#a6e22e\"\u003eurl\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/posts/post-1/\u0026#39;\u003c/span\u003e },\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  { \u003cspan style=\"color:#a6e22e\"\u003eimage\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/images/hero-2.webp\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#a6e22e\"\u003eurl\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/posts/post-2/\u0026#39;\u003c/span\u003e },\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  { \u003cspan style=\"color:#a6e22e\"\u003eimage\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/images/hero-3.webp\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#a6e22e\"\u003eurl\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/posts/post-3/\u0026#39;\u003c/span\u003e },\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e]\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 中部正方形卡片（1:1 比例）\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003emiddle\u003c/span\u003e = [\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  { \u003cspan style=\"color:#a6e22e\"\u003eimage\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/images/square-1.webp\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#a6e22e\"\u003eurl\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/posts/post-4/\u0026#39;\u003c/span\u003e },\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  { \u003cspan style=\"color:#a6e22e\"\u003eimage\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/images/square-2.webp\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#a6e22e\"\u003eurl\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/posts/post-5/\u0026#39;\u003c/span\u003e },\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e]\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 右侧竖版图片（3:4 比例）\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#a6e22e\"\u003eright\u003c/span\u003e = { \u003cspan style=\"color:#a6e22e\"\u003eimage\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/images/portrait-1.webp\u0026#39;\u003c/span\u003e, \u003cspan style=\"color:#a6e22e\"\u003eurl\u003c/span\u003e = \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;/about/\u0026#39;\u003c/span\u003e }\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cblockquote\u003e\n\u003cp\u003e不配置 \u003ccode\u003ehomeCarousel\u003c/code\u003e 时，首页使用标准的 \u003ccode\u003ehomeInfoParams\u003c/code\u003e 模式。\u003c/p\u003e","title":"PaperUI 完整配置指南与参数说明"},{"content":"SEO（搜索引擎优化）对技术博客来说至关重要 —— 好的内容需要被看见。PaperUI 继承了 PaperMod 完善的 SEO 体系，并在此基础上做了一些增强。这篇文章分享具体的优化实践。\nPaperUI 内置的 SEO 能力 1. Open Graph 标签 每篇文章自动生成完整的 OG 标签，这是社交媒体分享时显示卡片的基础：\n\u0026lt;meta property=\u0026#34;og:title\u0026#34; content=\u0026#34;文章标题\u0026#34; /\u0026gt; \u0026lt;meta property=\u0026#34;og:description\u0026#34; content=\u0026#34;文章摘要\u0026#34; /\u0026gt; \u0026lt;meta property=\u0026#34;og:type\u0026#34; content=\u0026#34;article\u0026#34; /\u0026gt; \u0026lt;meta property=\u0026#34;og:url\u0026#34; content=\u0026#34;https://你的域名/posts/xxx/\u0026#34; /\u0026gt; \u0026lt;meta property=\u0026#34;og:image\u0026#34; content=\u0026#34;https://你的域名/images/cover.jpg\u0026#34; /\u0026gt; \u0026lt;meta property=\u0026#34;og:site_name\u0026#34; content=\u0026#34;站点名称\u0026#34; /\u0026gt; 2. Twitter Cards 同样自动生成 Twitter 分享卡片：\n\u0026lt;meta name=\u0026#34;twitter:card\u0026#34; content=\u0026#34;summary_large_image\u0026#34; /\u0026gt; \u0026lt;meta name=\u0026#34;twitter:title\u0026#34; content=\u0026#34;文章标题\u0026#34; /\u0026gt; \u0026lt;meta name=\u0026#34;twitter:description\u0026#34; content=\u0026#34;文章摘要\u0026#34; /\u0026gt; 3. JSON-LD 结构化数据 这是对搜索引擎最重要的部分。PaperUI 自动生成 Schema.org 的结构化数据：\n{ \u0026#34;@context\u0026#34;: \u0026#34;https://schema.org\u0026#34;, \u0026#34;@type\u0026#34;: \u0026#34;BlogPosting\u0026#34;, \u0026#34;headline\u0026#34;: \u0026#34;文章标题\u0026#34;, \u0026#34;datePublished\u0026#34;: \u0026#34;2026-05-24T00:00:00+08:00\u0026#34;, \u0026#34;description\u0026#34;: \u0026#34;文章摘要\u0026#34;, \u0026#34;author\u0026#34;: { \u0026#34;@type\u0026#34;: \u0026#34;Person\u0026#34;, \u0026#34;name\u0026#34;: \u0026#34;作者名\u0026#34; } } JSON-LD 帮助 Google 等搜索引擎理解你的内容结构，可能在搜索结果中展示富文本片段（Rich Snippets）。\n4. Canonical URL 避免重复内容被搜索引擎惩罚：\n\u0026lt;link rel=\u0026#34;canonical\u0026#34; href=\u0026#34;https://你的域名/posts/xxx/\u0026#34; /\u0026gt; 5. robots.txt 自动生成，区分环境：\n生产环境：允许所有爬虫 开发环境：禁止所有爬虫（避免开发站点被索引） 每篇文章的 SEO 优化清单 Front Matter 优化 每篇文章的头部信息直接影响 SEO：\n--- title: \u0026#39;一个描述性强的标题\u0026#39; # 包含关键词，60 字符以内最佳 description: \u0026#39;150 字以内的文章摘要\u0026#39; # 这是搜索引擎显示的描述文字 categories: [\u0026#34;分类名\u0026#34;] # 有助于内容归类 tags: [\u0026#34;关键词1\u0026#34;, \u0026#34;关键词2\u0026#34;] # 标签帮助搜索引擎理解内容主题 --- 标题层级 每篇文章只有一个 H1（即文章标题） 使用 H2、H3 构建清晰的内容层级 标题中包含自然的关键词 图片优化 ![描述性的图片说明](/images/example.jpg) alt 文本要有描述性，帮助搜索引擎理解图片内容 使用 WebP 格式减小文件体积 控制图片尺寸，避免过大的图片拖慢页面加载 URL 结构 PaperUI 默认使用 /posts/文章slug/ 的 URL 结构，这是 SEO 友好的：\n层级清晰 包含有意义的路径段 不包含日期或数字 ID 性能优化 页面加载速度是 SEO 排名因素之一。PaperUI 在这方面做得很好：\n构建时的优化 CSS 最小化：Hugo 自动压缩 CSS 文件 JS 按需加载：搜索和轮播 JS 仅在需要时加载 无外部依赖：不加载第三方 CSS/JS 框架 你可以做的 配置 CDN：将静态资源部署到 CDN，加速全球访问\n压缩图片：\n# 使用 ImageMagick 批量转换 WebP for f in *.jpg; do convert \u0026#34;$f\u0026#34; \u0026#34;${f%.jpg}.webp\u0026#34;; done 启用 Gzip/Brotli 压缩：在 Web 服务器配置中启用\n使用 Hugo 的图片处理：\n{{ $image := resources.Get \u0026#34;images/hero.jpg\u0026#34; }} {{ $image := $image.Resize \u0026#34;1200x webp\u0026#34; }} Sitemap 配置 Hugo 自动生成 XML Sitemap。确保在 Google Search Console 中提交：\nhttps://你的域名/sitemap.xml 有用的 Hugo 配置 # 这些配置对 SEO 有帮助 enableRobotsTXT = true # 自动生成 robots.txt enableEmoji = true # 支持 Emoji（不影响 SEO 但提升可读性） [params] description = \u0026#39;站点描述\u0026#39; # 全局站点描述 keywords = [\u0026#39;博客\u0026#39;, \u0026#39;Hugo\u0026#39;] # 全局关键词（meta keywords 已不如以前重要，但仍可配置） 社交媒体预览调试 部署后，用以下工具检查分享卡片效果：\nFacebook：Sharing Debugger Twitter：Card Validator LinkedIn：Post Inspector LLM 搜索引擎 PaperUI 新增的 llms.txt 文件位于 https://你的域名/llms.txt，方便 AI 搜索引擎发现和索引你的内容。如果你关注 AI 时代的搜索可见性，这个文件值得维护。\n小结 PaperUI 在 SEO 方面提供了开箱即用的完善支持。你只需要做好内容本身的质量、合理配置 Front Matter、优化图片和加载速度，搜索引擎就会善待你的站点。\n下一篇我们聊聊如何将 PaperUI 博客部署到生产环境。\n","permalink":"https://paperui.newmt.fun/posts/paperui-seo/","summary":"\u003cp\u003eSEO（搜索引擎优化）对技术博客来说至关重要 —— 好的内容需要被看见。PaperUI 继承了 PaperMod 完善的 SEO 体系，并在此基础上做了一些增强。这篇文章分享具体的优化实践。\u003c/p\u003e\n\u003ch2 id=\"paperui-内置的-seo-能力\"\u003ePaperUI 内置的 SEO 能力\u003c/h2\u003e\n\u003ch3 id=\"1-open-graph-标签\"\u003e1. Open Graph 标签\u003c/h3\u003e\n\u003cp\u003e每篇文章自动生成完整的 OG 标签，这是社交媒体分享时显示卡片的基础：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-html\" data-lang=\"html\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003emeta\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003eproperty\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;og:title\u0026#34;\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003econtent\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;文章标题\u0026#34;\u003c/span\u003e /\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003emeta\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003eproperty\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;og:description\u0026#34;\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003econtent\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;文章摘要\u0026#34;\u003c/span\u003e /\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003emeta\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003eproperty\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;og:type\u0026#34;\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003econtent\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;article\u0026#34;\u003c/span\u003e /\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003emeta\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003eproperty\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;og:url\u0026#34;\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003econtent\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;https://你的域名/posts/xxx/\u0026#34;\u003c/span\u003e /\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003emeta\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003eproperty\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;og:image\u0026#34;\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003econtent\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;https://你的域名/images/cover.jpg\u0026#34;\u003c/span\u003e /\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003emeta\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003eproperty\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;og:site_name\u0026#34;\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003econtent\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;站点名称\u0026#34;\u003c/span\u003e /\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch3 id=\"2-twitter-cards\"\u003e2. Twitter Cards\u003c/h3\u003e\n\u003cp\u003e同样自动生成 Twitter 分享卡片：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-html\" data-lang=\"html\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003emeta\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003ename\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;twitter:card\u0026#34;\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003econtent\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;summary_large_image\u0026#34;\u003c/span\u003e /\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003emeta\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003ename\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;twitter:title\u0026#34;\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003econtent\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;文章标题\u0026#34;\u003c/span\u003e /\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;\u003cspan style=\"color:#f92672\"\u003emeta\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003ename\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;twitter:description\u0026#34;\u003c/span\u003e \u003cspan style=\"color:#a6e22e\"\u003econtent\u003c/span\u003e\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;文章摘要\u0026#34;\u003c/span\u003e /\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch3 id=\"3-json-ld-结构化数据\"\u003e3. JSON-LD 结构化数据\u003c/h3\u003e\n\u003cp\u003e这是对搜索引擎最重要的部分。PaperUI 自动生成 Schema.org 的结构化数据：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-json\" data-lang=\"json\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#f92672\"\u003e\u0026#34;@context\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;https://schema.org\u0026#34;\u003c/span\u003e,\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#f92672\"\u003e\u0026#34;@type\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;BlogPosting\u0026#34;\u003c/span\u003e,\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#f92672\"\u003e\u0026#34;headline\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;文章标题\u0026#34;\u003c/span\u003e,\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#f92672\"\u003e\u0026#34;datePublished\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;2026-05-24T00:00:00+08:00\u0026#34;\u003c/span\u003e,\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#f92672\"\u003e\u0026#34;description\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;文章摘要\u0026#34;\u003c/span\u003e,\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#f92672\"\u003e\u0026#34;author\u0026#34;\u003c/span\u003e: {\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e    \u003cspan style=\"color:#f92672\"\u003e\u0026#34;@type\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;Person\u0026#34;\u003c/span\u003e,\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e    \u003cspan style=\"color:#f92672\"\u003e\u0026#34;name\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;作者名\u0026#34;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  }\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003eJSON-LD 帮助 Google 等搜索引擎理解你的内容结构，可能在搜索结果中展示富文本片段（Rich Snippets）。\u003c/p\u003e\n\u003ch3 id=\"4-canonical-url\"\u003e4. Canonical URL\u003c/h3\u003e\n\u003cp\u003e避免重复内容被搜索引擎惩罚：\u003c/p\u003e","title":"PaperUI 的 SEO 优化实践指南"},{"content":"上一篇聊了 SEO 优化，这篇我们讲部署 —— 把本地写好的 PaperUI 博客发布到互联网上。\n构建静态文件 在部署之前，先生成静态文件：\n# 清理旧文件并重新构建（--cleanDestinationDir 自动清理废弃文件） hugo --minify --cleanDestinationDir --minify 参数会压缩 HTML、CSS、JS，减小文件体积。构建后的文件在 public/ 目录中。\n方案一：GitHub Pages（免费） 适用场景 使用 GitHub 管理博客源代码 免费托管 自定义域名支持 步骤 1. 创建部署仓库\n在 GitHub 上创建 用户名.github.io 仓库（用于用户/组织站点）。\n2. 推送代码\ncd my-blog git init git remote add origin https://github.com/用户名/用户名.github.io.git git add . git commit -m \u0026#34;初始化博客\u0026#34; git push -u origin main 3. 配置 GitHub Actions\n创建 .github/workflows/deploy.yml：\nname: Deploy Hugo site on: push: branches: [main] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 with: submodules: true fetch-depth: 0 - name: Setup Hugo uses: peaceiris/actions-hugo@v3 with: hugo-version: \u0026#39;0.146.0\u0026#39; extended: true - name: Build run: hugo --minify --cleanDestinationDir - name: Deploy uses: peaceiris/actions-gh-pages@v4 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./public 4. 设置 GitHub Pages\n在仓库 Settings → Pages 中，将 Source 设为 GitHub Actions。\n5. 配置自定义域名（可选）\n在仓库 Settings → Pages 中填写你的域名，并在 DNS 中添加 CNAME 记录指向 用户名.github.io。\n方案二：Cloudflare Pages（推荐） 适用场景 需要全球 CDN 加速 免费 SSL 证书 构建速度快 步骤 1. 将代码推送到 GitHub\n确保你的博客代码在 GitHub 仓库中。\n2. 登录 Cloudflare Dashboard\n进入 Workers \u0026amp; Pages → Pages → Create a project → Connect to Git。\n3. 配置构建设置\n配置项 值 框架预设 Hugo 构建命令 hugo --minify --cleanDestinationDir 构建输出目录 public Hugo 版本 0.146.0（或最新版） 4. 添加环境变量\nHUGO_VERSION = 0.146.0 5. 部署\n点击\u0026quot;Save and Deploy\u0026quot;，Cloudflare 会自动构建并部署。\n6. 配置自定义域名\n在 Cloudflare Pages 项目的 Custom domains 中添加你的域名。\n方案三：Netlify 步骤 1. 推送代码到 Git 仓库\n2. 登录 Netlify，选择 \u0026ldquo;Import from Git\u0026rdquo;\n3. 配置构建设置\n配置项 值 Build command hugo --minify --cleanDestinationDir Publish directory public 4. 设置 Hugo 版本\n在 Site Settings → Environment 中添加：\nHUGO_VERSION = 0.146.0 5. 部署并配置域名\n部署前检查清单 在推送到生产环境之前，确认以下事项：\nbaseURL 已改为实际域名（不是 example.org） env 设为 production 图片资源已上传到 static/ 目录 robots.txt 允许搜索引擎爬取（生产环境自动处理） 所有内部链接使用相对路径或完整 URL 在浏览器中预览过 public/ 目录的内容 页面在移动端显示正常 部署后检查 访问 https://你的域名/ 确认首页正常显示 检查 https://你的域名/sitemap.xml 是否生成 检查 https://你的域名/robots.txt 是否允许爬取 用 Google Search Console 提交 Sitemap 用社交媒体调试工具检查分享卡片效果 用 PageSpeed Insights 测试性能 更新内容 PaperUI 博客的内容更新流程非常简单：\n# 1. 创建新文章 hugo new posts/新文章.md # 2. 编辑文章内容 # 3. 本地预览 hugo server -D # 4. 满意后提交推送 git add . git commit -m \u0026#34;新增文章: 标题\u0026#34; git push GitHub Actions 或 Cloudflare Pages 会自动检测到推送并重新构建部署。\n性能基准 一个典型的 PaperUI 博客站点（约 10 篇文章，含轮播图），部署后的性能表现：\n指标 典型值 Lighthouse Performance 95-100 首屏加载时间 \u0026lt; 1s 页面总大小 50-200 KB TTFB \u0026lt; 100ms（CDN 加速后） 小结 PaperUI 博客的部署流程与任何 Hugo 站点一样简单。推荐使用 Cloudflare Pages 获得最佳的全球访问速度和免费 SSL，或者使用 GitHub Pages 获得最简化的部署体验。\n下一篇我们来聊聊 PaperUI 的自定义和二次开发。\n","permalink":"https://paperui.newmt.fun/posts/paperui-deployment/","summary":"\u003cp\u003e上一篇聊了 SEO 优化，这篇我们讲部署 —— 把本地写好的 PaperUI 博客发布到互联网上。\u003c/p\u003e\n\u003ch2 id=\"构建静态文件\"\u003e构建静态文件\u003c/h2\u003e\n\u003cp\u003e在部署之前，先生成静态文件：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 清理旧文件并重新构建（--cleanDestinationDir 自动清理废弃文件）\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ehugo --minify --cleanDestinationDir\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e\u003ccode\u003e--minify\u003c/code\u003e 参数会压缩 HTML、CSS、JS，减小文件体积。构建后的文件在 \u003ccode\u003epublic/\u003c/code\u003e 目录中。\u003c/p\u003e\n\u003ch2 id=\"方案一github-pages免费\"\u003e方案一：GitHub Pages（免费）\u003c/h2\u003e\n\u003ch3 id=\"适用场景\"\u003e适用场景\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e使用 GitHub 管理博客源代码\u003c/li\u003e\n\u003cli\u003e免费托管\u003c/li\u003e\n\u003cli\u003e自定义域名支持\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"步骤\"\u003e步骤\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003e1. 创建部署仓库\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e在 GitHub 上创建 \u003ccode\u003e用户名.github.io\u003c/code\u003e 仓库（用于用户/组织站点）。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e2. 推送代码\u003c/strong\u003e\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ecd my-blog\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit init\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit remote add origin https://github.com/用户名/用户名.github.io.git\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit add .\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit commit -m \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;初始化博客\u0026#34;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit push -u origin main\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e\u003cstrong\u003e3. 配置 GitHub Actions\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e创建 \u003ccode\u003e.github/workflows/deploy.yml\u003c/code\u003e：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-yaml\" data-lang=\"yaml\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#f92672\"\u003ename\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003eDeploy Hugo site\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#f92672\"\u003eon\u003c/span\u003e:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#f92672\"\u003epush\u003c/span\u003e:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e    \u003cspan style=\"color:#f92672\"\u003ebranches\u003c/span\u003e: [\u003cspan style=\"color:#ae81ff\"\u003emain]\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#f92672\"\u003ejobs\u003c/span\u003e:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#f92672\"\u003edeploy\u003c/span\u003e:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e    \u003cspan style=\"color:#f92672\"\u003eruns-on\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003eubuntu-latest\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e    \u003cspan style=\"color:#f92672\"\u003esteps\u003c/span\u003e:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e      - \u003cspan style=\"color:#f92672\"\u003euses\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003eactions/checkout@v4\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e        \u003cspan style=\"color:#f92672\"\u003ewith\u003c/span\u003e:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e          \u003cspan style=\"color:#f92672\"\u003esubmodules\u003c/span\u003e: \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e          \u003cspan style=\"color:#f92672\"\u003efetch-depth\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003e0\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e      - \u003cspan style=\"color:#f92672\"\u003ename\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003eSetup Hugo\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e        \u003cspan style=\"color:#f92672\"\u003euses\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003epeaceiris/actions-hugo@v3\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e        \u003cspan style=\"color:#f92672\"\u003ewith\u003c/span\u003e:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e          \u003cspan style=\"color:#f92672\"\u003ehugo-version\u003c/span\u003e: \u003cspan style=\"color:#e6db74\"\u003e\u0026#39;0.146.0\u0026#39;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e          \u003cspan style=\"color:#f92672\"\u003eextended\u003c/span\u003e: \u003cspan style=\"color:#66d9ef\"\u003etrue\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e      - \u003cspan style=\"color:#f92672\"\u003ename\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003eBuild\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e        \u003cspan style=\"color:#f92672\"\u003erun\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003ehugo --minify --cleanDestinationDir\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e      - \u003cspan style=\"color:#f92672\"\u003ename\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003eDeploy\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e        \u003cspan style=\"color:#f92672\"\u003euses\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003epeaceiris/actions-gh-pages@v4\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e        \u003cspan style=\"color:#f92672\"\u003ewith\u003c/span\u003e:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e          \u003cspan style=\"color:#f92672\"\u003egithub_token\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003e${{ secrets.GITHUB_TOKEN }}\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e          \u003cspan style=\"color:#f92672\"\u003epublish_dir\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003e./public\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e\u003cstrong\u003e4. 设置 GitHub Pages\u003c/strong\u003e\u003c/p\u003e","title":"PaperUI 博客部署到生产环境的完整方案"},{"content":"PaperUI 的设计目标是开箱即用，但你总会有一些个性化的需求。这篇文章介绍如何在不直接修改主题源码的情况下，安全地自定义 PaperUI。\n为什么不要直接修改主题源码 直接修改 themes/PaperUI/ 下的文件有几个问题：\n主题更新困难：一旦修改了源码，git pull 更新主题时会产生冲突 可维护性差：其他人（包括未来的你）很难搞清楚哪些是改过的 升级风险：PaperUI 可能因 Hugo 版本更新而需要修改，你的改动会成为障碍 Hugo 的文件覆盖机制 Hugo 有一个重要的特性：项目根目录的同名文件会覆盖主题中的文件。\n项目/ ├── themes/PaperUI/ │ └── layouts/ │ └── _partials/ │ └── footer.html ← 主题原始文件 └── layouts/ └── _partials/ └── footer.html ← 你的覆盖文件（优先使用） 这意味着你只需要在项目根目录创建相同路径的文件，Hugo 就会使用你的版本而不是主题的。\n自定义主题颜色 PaperUI 使用 CSS 变量控制所有颜色。最简单的方式是在项目中创建覆盖样式文件。\n创建 assets/css/extended/custom.css：\n/* 修改主题色 */ :root { --accent: #3b82f6; /* 蓝色系主题色 */ --accent-alpha: rgba(59, 130, 246, 0.1); --accent-secondary: #2563eb; /* 也可以修改其他变量 */ --content: #1a1a2e; --content-secondary: #4a4a6a; --border: #e5e7eb; } /* 深色模式 */ .dark { --accent: #60a5fa; --accent-alpha: rgba(96, 165, 250, 0.15); --content: #e5e7eb; --content-secondary: #9ca3af; --border: #374151; } PaperUI 默认的 accent 色是 #f87c45（暖橙色），你可以改成任何颜色。\n标签颜色自定义 PaperUI 的 8 色标签系统也可以通过 CSS 变量覆盖：\n:root { --tag-bg-1: #fee2e2; /* 红色系 */ --tag-bg-2: #dbeafe; /* 蓝色系 */ --tag-bg-3: #d1fae5; /* 绿色系 */ --tag-bg-4: #fef3c7; /* 黄色系 */ --tag-bg-5: #ede9fe; /* 紫色系 */ --tag-bg-6: #fce7f3; /* 粉色系 */ --tag-bg-7: #e0f2fe; /* 天蓝色系 */ --tag-bg-8: #f3f4f6; /* 灰色系 */ } 修改页脚文字 创建 layouts/_partials/footer.html，复制主题中的同名文件并修改：\n\u0026lt;footer class=\u0026#34;footer\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;footer-content\u0026#34;\u0026gt; \u0026lt;span\u0026gt;\u0026amp;copy; {{ now.Year }} 你的名字 · Powered by \u0026lt;a href=\u0026#34;https://gohugo.io/\u0026#34; target=\u0026#34;_blank\u0026#34;\u0026gt;Hugo\u0026lt;/a\u0026gt; \u0026amp;amp; \u0026lt;a href=\u0026#34;https://github.com/scenlinx/PaperUI\u0026#34; target=\u0026#34;_blank\u0026#34;\u0026gt;PaperUI\u0026lt;/a\u0026gt; \u0026lt;/span\u0026gt; {{ if not .Site.Params.footer.hideCopyright }} \u0026lt;span class=\u0026#34;footer-separator\u0026#34;\u0026gt;·\u0026lt;/span\u0026gt; \u0026lt;span\u0026gt;保持热爱，奔赴山海\u0026lt;/span\u0026gt; {{ end }} \u0026lt;/div\u0026gt; \u0026lt;/footer\u0026gt; 添加自定义 CSS 在 assets/css/extended/ 目录下创建任意 .css 文件，它们会被自动加载。\n例如，添加一个简单的打印样式：\n/* assets/css/extended/print.css */ @media print { .header, .footer, .home-sidebar, .sidebar, .top-link { display: none !important; } .post-content { max-width: 100% !important; } } 添加自定义 JavaScript 创建 layouts/_partials/extend_head.html：\n\u0026lt;!-- 自定义分析脚本 --\u0026gt; {{ if hugo.IsProduction }} \u0026lt;script async src=\u0026#34;https://analytics.example.com/script.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; {{ end }} 添加新页面模板 比如你想添加一个\u0026quot;友链\u0026quot;页面：\n1. 创建 content/links/index.md\n--- title: \u0026#34;友情链接\u0026#34; layout: \u0026#34;links\u0026#34; --- 2. 创建 layouts/_default/links.html\n{{ define \u0026#34;main\u0026#34; }} \u0026lt;article class=\u0026#34;post-single\u0026#34;\u0026gt; \u0026lt;header class=\u0026#34;post-header\u0026#34;\u0026gt; \u0026lt;h1 class=\u0026#34;post-title\u0026#34;\u0026gt;{{ .Title }}\u0026lt;/h1\u0026gt; \u0026lt;/header\u0026gt; \u0026lt;div class=\u0026#34;post-content\u0026#34;\u0026gt; {{ .Content }} \u0026lt;!-- 友链列表 --\u0026gt; \u0026lt;div class=\u0026#34;links-list\u0026#34;\u0026gt; {{ range .Site.Data.links }} \u0026lt;a href=\u0026#34;{{ .url }}\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener\u0026#34; class=\u0026#34;link-card\u0026#34;\u0026gt; \u0026lt;span class=\u0026#34;link-name\u0026#34;\u0026gt;{{ .name }}\u0026lt;/span\u0026gt; \u0026lt;span class=\u0026#34;link-desc\u0026#34;\u0026gt;{{ .description }}\u0026lt;/span\u0026gt; \u0026lt;/a\u0026gt; {{ end }} \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/article\u0026gt; {{ end }} 3. 创建 data/links.yaml\n- name: \u0026#34;示例博客\u0026#34; url: \u0026#34;https://example.com\u0026#34; description: \u0026#34;一个很棒的技术博客\u0026#34; 覆盖整个布局模板 如果需要更大的改动，可以直接覆盖 layouts/baseof.html 或 layouts/list.html。\n建议的做法是复制主题中的原文件到项目对应路径，然后在此基础上修改：\n# 复制主题模板到项目 cp themes/PaperUI/layouts/list.html layouts/_default/list.html # 然后编辑 layouts/_default/list.html 使用 Hugo Modules 管理依赖 如果你的项目比较复杂，可以考虑使用 Hugo Modules：\nhugo mod init my-blog 在 hugo.toml 中：\n[module] [[module.imports]] path = \u0026#34;github.com/scenlinx/PaperUI\u0026#34; 贡献回主题 如果你做的改进具有通用价值，欢迎提交 PR 到 PaperUI 仓库。好的社区贡献包括：\nBug 修复 新的翻译文件 通用的功能增强 文档改进 提交前请确保：\n功能向后兼容（不破坏现有配置） 代码风格与现有代码一致 通过了本地测试 小结 PaperUI 的自定义遵循 Hugo 的最佳实践 —— 通过文件覆盖和 CSS 变量实现，不修改主题源码。这样既能满足个性化需求，又能在主题更新时无缝升级。\n下一篇是系列最后一篇，汇总 PaperUI 使用中的常见问题和最佳实践。\n","permalink":"https://paperui.newmt.fun/posts/paperui-customization/","summary":"\u003cp\u003ePaperUI 的设计目标是开箱即用，但你总会有一些个性化的需求。这篇文章介绍如何在不直接修改主题源码的情况下，安全地自定义 PaperUI。\u003c/p\u003e\n\u003ch2 id=\"为什么不要直接修改主题源码\"\u003e为什么不要直接修改主题源码\u003c/h2\u003e\n\u003cp\u003e直接修改 \u003ccode\u003ethemes/PaperUI/\u003c/code\u003e 下的文件有几个问题：\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003e主题更新困难\u003c/strong\u003e：一旦修改了源码，\u003ccode\u003egit pull\u003c/code\u003e 更新主题时会产生冲突\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e可维护性差\u003c/strong\u003e：其他人（包括未来的你）很难搞清楚哪些是改过的\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e升级风险\u003c/strong\u003e：PaperUI 可能因 Hugo 版本更新而需要修改，你的改动会成为障碍\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch2 id=\"hugo-的文件覆盖机制\"\u003eHugo 的文件覆盖机制\u003c/h2\u003e\n\u003cp\u003eHugo 有一个重要的特性：\u003cstrong\u003e项目根目录的同名文件会覆盖主题中的文件\u003c/strong\u003e。\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e项目/\n├── themes/PaperUI/\n│   └── layouts/\n│       └── _partials/\n│           └── footer.html    ← 主题原始文件\n└── layouts/\n    └── _partials/\n        └── footer.html        ← 你的覆盖文件（优先使用）\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e这意味着你只需要在项目根目录创建相同路径的文件，Hugo 就会使用你的版本而不是主题的。\u003c/p\u003e\n\u003ch2 id=\"自定义主题颜色\"\u003e自定义主题颜色\u003c/h2\u003e\n\u003cp\u003ePaperUI 使用 CSS 变量控制所有颜色。最简单的方式是在项目中创建覆盖样式文件。\u003c/p\u003e\n\u003cp\u003e创建 \u003ccode\u003eassets/css/extended/custom.css\u003c/code\u003e：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-css\" data-lang=\"css\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e/* 修改主题色 */\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e:\u003cspan style=\"color:#a6e22e\"\u003eroot\u003c/span\u003e {\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  --accent: \u003cspan style=\"color:#ae81ff\"\u003e#3b82f6\u003c/span\u003e;              \u003cspan style=\"color:#75715e\"\u003e/* 蓝色系主题色 */\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  --accent-alpha: rgba(\u003cspan style=\"color:#ae81ff\"\u003e59\u003c/span\u003e, \u003cspan style=\"color:#ae81ff\"\u003e130\u003c/span\u003e, \u003cspan style=\"color:#ae81ff\"\u003e246\u003c/span\u003e, \u003cspan style=\"color:#ae81ff\"\u003e0.1\u003c/span\u003e);\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  --accent-secondary: \u003cspan style=\"color:#ae81ff\"\u003e#2563eb\u003c/span\u003e;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  \u003cspan style=\"color:#75715e\"\u003e/* 也可以修改其他变量 */\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  --content: \u003cspan style=\"color:#ae81ff\"\u003e#1a1a2e\u003c/span\u003e;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  --content-secondary: \u003cspan style=\"color:#ae81ff\"\u003e#4a4a6a\u003c/span\u003e;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  --border: \u003cspan style=\"color:#ae81ff\"\u003e#e5e7eb\u003c/span\u003e;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e}\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e/* 深色模式 */\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e.\u003cspan style=\"color:#a6e22e\"\u003edark\u003c/span\u003e {\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  --accent: \u003cspan style=\"color:#ae81ff\"\u003e#60a5fa\u003c/span\u003e;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  --accent-alpha: rgba(\u003cspan style=\"color:#ae81ff\"\u003e96\u003c/span\u003e, \u003cspan style=\"color:#ae81ff\"\u003e165\u003c/span\u003e, \u003cspan style=\"color:#ae81ff\"\u003e250\u003c/span\u003e, \u003cspan style=\"color:#ae81ff\"\u003e0.15\u003c/span\u003e);\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  --content: \u003cspan style=\"color:#ae81ff\"\u003e#e5e7eb\u003c/span\u003e;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  --content-secondary: \u003cspan style=\"color:#ae81ff\"\u003e#9ca3af\u003c/span\u003e;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e  --border: \u003cspan style=\"color:#ae81ff\"\u003e#374151\u003c/span\u003e;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003ePaperUI 默认的 accent 色是 \u003ccode\u003e#f87c45\u003c/code\u003e（暖橙色），你可以改成任何颜色。\u003c/p\u003e","title":"PaperUI 自定义与二次开发指南"},{"content":"这是 PaperUI 系列文章的最后一篇。我们汇总了使用过程中的常见问题，并分享一些搭建 Hugo 博客的最佳实践。\n常见问题 Q: 文章不显示？ 最常见的原因：日期设为未来日期。 Hugo 默认不渲染未来日期的文章。\n解决方法：确保文章 Front Matter 中的 date 是今天或过去的日期。开发时可以用 hugo server -F 预览未来日期的文章。\nQ: 首页轮播不显示？ 检查以下几点：\nhugo.toml 中是否配置了 [params.homeCarousel] 轮播图片路径是否正确（相对于 static/ 目录） 图片文件是否真实存在 Q: 侧边栏没有内容？ 侧边栏的\u0026quot;随机文章\u0026quot;和\u0026quot;近期文章\u0026quot;需要有足够数量的文章才会显示。建议至少有 3 篇以上的文章。\n\u0026ldquo;分类\u0026quot;和\u0026quot;标签\u0026quot;小部件需要文章配置了对应的 categories 和 tags 才会出现。\nQ: 搜索功能不工作？ PaperUI 的搜索依赖 fuse.js，需要确保：\n[outputs] 中包含 JSON（生成搜索索引） 文章没有被标记为 searchHidden: true 浏览器控制台没有 JS 错误 Q: 修改配置后不生效？ Hugo 开发服务器会自动检测配置变更并重载。但如果修改了主题文件或 CSS，建议重启 hugo server。\n如果是修改了 baseURL 或 env 等影响输出的配置，需要重新构建。\nQ: 如何添加评论系统？ PaperUI 没有内置评论系统（与 PaperMod 一致），但可以通过扩展模板添加。\n创建 layouts/_partials/extend_post_content.html，以添加 Giscus 为例：\n{{ if .Site.Params.giscus }} \u0026lt;div class=\u0026#34;post-comments\u0026#34;\u0026gt; \u0026lt;script src=\u0026#34;https://giscus.app/client.js\u0026#34; data-repo=\u0026#34;你的仓库\u0026#34; data-repo-id=\u0026#34;你的仓库ID\u0026#34; data-category=\u0026#34;Announcements\u0026#34; data-category-id=\u0026#34;你的分类ID\u0026#34; data-mapping=\u0026#34;pathname\u0026#34; data-strict=\u0026#34;0\u0026#34; data-reactions-enabled=\u0026#34;1\u0026#34; data-emit-metadata=\u0026#34;0\u0026#34; data-input-position=\u0026#34;bottom\u0026#34; data-theme=\u0026#34;preferred_color_scheme\u0026#34; data-lang=\u0026#34;zh-CN\u0026#34; crossorigin=\u0026#34;anonymous\u0026#34; async\u0026gt; \u0026lt;/script\u0026gt; \u0026lt;/div\u0026gt; {{ end }} Q: 如何添加统计分析？ 创建 layouts/_partials/extend_head.html：\n\u0026lt;!-- Google Analytics --\u0026gt; {{ if hugo.IsProduction }} \u0026lt;script async src=\u0026#34;https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; \u0026lt;script\u0026gt; window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag(\u0026#39;js\u0026#39;, new Date()); gtag(\u0026#39;config\u0026#39;, \u0026#39;G-XXXXXXXXXX\u0026#39;); \u0026lt;/script\u0026gt; {{ end }} 只在生产环境加载分析脚本，避免开发时产生脏数据。\n最佳实践 1. 内容管理 使用有意义的文件名\n✅ posts/paperui-quickstart.md # 英文 slug，清晰易懂 ❌ posts/post-1.md # 无意义 每篇文章写好 description\n这是 SEO 和社交媒体分享的关键字段，花 30 秒写一个好的摘要，效果远超自动截取。\n合理使用分类和标签\n分类（categories）：文章的大类，通常 1-3 个，如\u0026quot;技术\u0026rdquo;、\u0026ldquo;生活\u0026rdquo;、\u0026ldquo;PaperUI\u0026rdquo; 标签（tags）：具体的关键词，可以有多个，如\u0026quot;Hugo\u0026quot;、\u0026ldquo;CSS\u0026rdquo;、\u0026ldquo;性能优化\u0026rdquo; 2. 图片优化 格式选择\n格式 适用场景 WebP 首选，体积最小 JPEG 照片类图片 PNG 需要透明背景的图片 SVG Logo、图标 尺寸控制\n轮播图和封面图控制在 200KB 以内。过大的图片是页面加载慢的主要原因。\n批量转换工具\n# cwebp 转换单张图片 cwebp -q 80 input.jpg -o output.webp # 或使用 ImageMagick magick input.jpg -quality 80 output.webp 3. 版本控制 .gitignore 配置\npublic/ # 构建输出，不提交 .hugo_build.lock # 构建锁文件 node_modules/ # 如果有前端工具 提交主题子模块\n如果使用 Git Submodule 安装主题，确保 .gitmodules 文件被提交。其他协作者克隆后需要运行：\ngit submodule update --init --recursive 4. 写作工作流 推荐的工作流：\n# 1. 创建新文章 hugo new posts/文章slug.md # 2. 编辑文章 # 使用你喜欢的编辑器写内容 # 3. 预览效果 hugo server -D # 4. 满意后，去掉 draft: true 或直接设置为 draft: false # 5. 提交推送 git add content/ git commit -m \u0026#34;新增文章: 文章标题\u0026#34; git push 5. 定期维护 频率 任务 每月 检查 Hugo 版本更新 每季度 检查主题是否有更新（git submodule update --remote） 每半年 审查旧文章，更新过时内容 持续 检查 Google Search Console 的 SEO 报告 6. 保持主题更新 # 更新 PaperUI 主题到最新版本 cd themes/PaperUI git pull origin main cd ../.. git add themes/PaperUI git commit -m \u0026#34;更新 PaperUI 主题\u0026#34; 更新前建议先备份，确认新版本与你的自定义配置兼容。\n性能优化技巧 使用 hugo --minify 构建：压缩 HTML/CSS/JS 配置 CDN：Cloudflare 免费 CDN 对静态站点非常友好 图片懒加载：PaperUI 已内置（通过浏览器原生 loading=\u0026quot;lazy\u0026quot;） 减少 HTTP 请求：PaperUI 已将 CSS 合并为单个文件 启用 HTTP/2 或 HTTP/3：现代 CDN 默认支持 总结 PaperUI 系列文章到这里就结束了。回顾一下我们聊过的内容：\nPaperUI 的定位和设计理念 PaperMod 为什么优秀 基于 PaperMod 二次开发的技术决策 PaperUI 新增功能详解 安装与快速上手 完整配置参数说明 SEO 优化实践 生产环境部署 自定义与二次开发 常见问题与最佳实践 希望这系列文章能帮助你更好地使用 PaperUI 搭建自己的博客。如果有任何问题或建议，欢迎在 GitHub 上提交 Issue 或 PR。\n好的工具让创作更专注，好的主题让内容更闪耀。PaperUI 存在的意义，就是让你的博客在技术之外，也有一份视觉上的体面。\n","permalink":"https://paperui.newmt.fun/posts/paperui-faq-best-practices/","summary":"\u003cp\u003e这是 PaperUI 系列文章的最后一篇。我们汇总了使用过程中的常见问题，并分享一些搭建 Hugo 博客的最佳实践。\u003c/p\u003e\n\u003ch2 id=\"常见问题\"\u003e常见问题\u003c/h2\u003e\n\u003ch3 id=\"q-文章不显示\"\u003eQ: 文章不显示？\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003e最常见的原因：日期设为未来日期。\u003c/strong\u003e Hugo 默认不渲染未来日期的文章。\u003c/p\u003e\n\u003cp\u003e解决方法：确保文章 Front Matter 中的 \u003ccode\u003edate\u003c/code\u003e 是今天或过去的日期。开发时可以用 \u003ccode\u003ehugo server -F\u003c/code\u003e 预览未来日期的文章。\u003c/p\u003e\n\u003ch3 id=\"q-首页轮播不显示\"\u003eQ: 首页轮播不显示？\u003c/h3\u003e\n\u003cp\u003e检查以下几点：\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003ccode\u003ehugo.toml\u003c/code\u003e 中是否配置了 \u003ccode\u003e[params.homeCarousel]\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e轮播图片路径是否正确（相对于 \u003ccode\u003estatic/\u003c/code\u003e 目录）\u003c/li\u003e\n\u003cli\u003e图片文件是否真实存在\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"q-侧边栏没有内容\"\u003eQ: 侧边栏没有内容？\u003c/h3\u003e\n\u003cp\u003e侧边栏的\u0026quot;随机文章\u0026quot;和\u0026quot;近期文章\u0026quot;需要有足够数量的文章才会显示。建议至少有 3 篇以上的文章。\u003c/p\u003e\n\u003cp\u003e\u0026ldquo;分类\u0026quot;和\u0026quot;标签\u0026quot;小部件需要文章配置了对应的 \u003ccode\u003ecategories\u003c/code\u003e 和 \u003ccode\u003etags\u003c/code\u003e 才会出现。\u003c/p\u003e\n\u003ch3 id=\"q-搜索功能不工作\"\u003eQ: 搜索功能不工作？\u003c/h3\u003e\n\u003cp\u003ePaperUI 的搜索依赖 fuse.js，需要确保：\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003ccode\u003e[outputs]\u003c/code\u003e 中包含 \u003ccode\u003eJSON\u003c/code\u003e（生成搜索索引）\u003c/li\u003e\n\u003cli\u003e文章没有被标记为 \u003ccode\u003esearchHidden: true\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e浏览器控制台没有 JS 错误\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"q-修改配置后不生效\"\u003eQ: 修改配置后不生效？\u003c/h3\u003e\n\u003cp\u003eHugo 开发服务器会自动检测配置变更并重载。但如果修改了主题文件或 CSS，建议重启 \u003ccode\u003ehugo server\u003c/code\u003e。\u003c/p\u003e\n\u003cp\u003e如果是修改了 \u003ccode\u003ebaseURL\u003c/code\u003e 或 \u003ccode\u003eenv\u003c/code\u003e 等影响输出的配置，需要重新构建。\u003c/p\u003e\n\u003ch3 id=\"q-如何添加评论系统\"\u003eQ: 如何添加评论系统？\u003c/h3\u003e\n\u003cp\u003ePaperUI 没有内置评论系统（与 PaperMod 一致），但可以通过扩展模板添加。\u003c/p\u003e","title":"PaperUI 常见问题与最佳实践"},{"content":"不管做开发还是运维，熟练使用 Linux 命令行都能让工作效率提升数倍。以下是我在开发、部署和排错中最常用的操作。\n文件与目录操作 # 递归查找所有 .log 文件 find /var/log -name \u0026#34;*.log\u0026#34; -type f # 查找大于 100MB 的文件 find . -type f -size +100M # 在指定目录搜索包含关键词的文件 grep -r \u0026#34;ERROR\u0026#34; /var/log/nginx/ --include=\u0026#34;*.log\u0026#34; # 统计代码行数 find src/ -name \u0026#34;*.py\u0026#34; | xargs wc -l 权限管理 # 给脚本添加执行权限 chmod +x deploy.sh # 递归修改目录权限 chmod -R 755 public/ chmod -R 644 public/*.html # 修改所有者（常用于 Web 目录） sudo chown -R www-data:www-data /var/www/site/ 一个常见的坑：文件能否执行看权限位，能否被读取看父目录的 x 权限——目录没有执行权限时，即使文件权限正确也无法访问。\n系统监控与排错 # 查看磁盘使用情况 df -h # 查看某个目录占用 du -sh /var/log/* | sort -hr | head -10 # 内存使用 free -h # 实时进程信息 top htop # 如果安装了的话，更友好 # 查看特定进程 ps aux | grep nginx # 查看端口占用 ss -tlnp | grep :80 管道与文本处理 管道的核心思想是小工具组合：\n# 分析 Nginx 访问日志中访问最多的 10 个 IP cat access.log | awk \u0026#39;{print $1}\u0026#39; | sort | uniq -c | sort -nr | head -10 # 统计 API 接口调用次数 grep \u0026#34;POST /api/\u0026#34; access.log | awk \u0026#39;{print $7}\u0026#39; | sort | uniq -c | sort -rn # 实时监控日志中的错误 tail -f app.log | grep --color \u0026#34;ERROR\u0026#34; 几个常用文本工具：\n工具 用途 示例 awk 按列提取 awk '{print $1, $3}' sed 文本替换 sed 's/foo/bar/g' sort 排序 sort -nr（按数字降序） uniq -c 去重计数 需先 sort xargs 参数转发 find ... | xargs rm 实用快捷键 Ctrl + R # 搜索命令历史（最有用的快捷键之一） Ctrl + A # 跳到行首 Ctrl + E # 跳到行尾 Ctrl + U # 删除光标前的内容 Ctrl + K # 删除光标后的内容 !! # 重复上一条命令 !$ # 上一条命令的最后一个参数 服务器部署常用 # 后台运行服务 nohup ./app \u0026gt; output.log 2\u0026gt;\u0026amp;1 \u0026amp; # 查看后台任务 jobs # systemd 服务管理 sudo systemctl status nginx sudo systemctl restart nginx sudo journalctl -u nginx -f # 查看服务日志 # 快速备份 tar -czf backup-$(date +%Y%m%d).tar.gz /data/ Linux 命令行的精髓在于组合——每个工具只做一件事并把它做好，通过管道将它们串联起来就能解决复杂问题。不需要记住所有参数，知道有什么工具、能查到文档，就足够了。\n","permalink":"https://paperui.newmt.fun/posts/linux-commands/","summary":"\u003cp\u003e不管做开发还是运维，熟练使用 Linux 命令行都能让工作效率提升数倍。以下是我在开发、部署和排错中最常用的操作。\u003c/p\u003e\n\u003ch2 id=\"文件与目录操作\"\u003e文件与目录操作\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 递归查找所有 .log 文件\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003efind /var/log -name \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;*.log\u0026#34;\u003c/span\u003e -type f\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 查找大于 100MB 的文件\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003efind . -type f -size +100M\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 在指定目录搜索包含关键词的文件\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egrep -r \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;ERROR\u0026#34;\u003c/span\u003e /var/log/nginx/ --include\u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;*.log\u0026#34;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 统计代码行数\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003efind src/ -name \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;*.py\u0026#34;\u003c/span\u003e | xargs wc -l\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch2 id=\"权限管理\"\u003e权限管理\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 给脚本添加执行权限\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003echmod +x deploy.sh\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 递归修改目录权限\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003echmod -R \u003cspan style=\"color:#ae81ff\"\u003e755\u003c/span\u003e public/\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003echmod -R \u003cspan style=\"color:#ae81ff\"\u003e644\u003c/span\u003e public/*.html\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 修改所有者（常用于 Web 目录）\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003esudo chown -R www-data:www-data /var/www/site/\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e一个常见的坑：文件能否执行看权限位，能否被读取看父目录的 \u003ccode\u003ex\u003c/code\u003e 权限——目录没有执行权限时，即使文件权限正确也无法访问。\u003c/p\u003e\n\u003ch2 id=\"系统监控与排错\"\u003e系统监控与排错\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 查看磁盘使用情况\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003edf -h\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 查看某个目录占用\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003edu -sh /var/log/* | sort -hr | head -10\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 内存使用\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003efree -h\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 实时进程信息\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003etop\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ehtop    \u003cspan style=\"color:#75715e\"\u003e# 如果安装了的话，更友好\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 查看特定进程\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003eps aux | grep nginx\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 查看端口占用\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ess -tlnp | grep :80\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch2 id=\"管道与文本处理\"\u003e管道与文本处理\u003c/h2\u003e\n\u003cp\u003e管道的核心思想是小工具组合：\u003c/p\u003e","title":"Linux 命令行：从开发到运维的常用技巧"},{"content":"Python 以简洁优雅著称，但写出真正的 Pythonic 代码需要刻意练习。以下是日常开发中最值得养成的几个习惯。\n1. 善用列表推导，但别滥用 列表推导清晰时非常优雅：\n# 过滤与转换一步到位 active_users = [u.name for u in users if u.is_active] # 构建字典 name_map = {u.id: u.name for u in users} 但超过一层嵌套时，可读性会急剧下降。此时用普通循环更清晰：\n# 不推荐 result = [x for row in matrix for x in row if x \u0026gt; 0] # 推荐：拆开写 result = [] for row in matrix: for x in row: if x \u0026gt; 0: result.append(x) 2. 用 | 合并字典（Python 3.9+） defaults = {\u0026#34;timeout\u0026#34;: 30, \u0026#34;retries\u0026#34;: 3} user_config = {\u0026#34;timeout\u0026#34;: 60} final = defaults | user_config # {\u0026#39;timeout\u0026#39;: 60, \u0026#39;retries\u0026#39;: 3} 右边覆盖左边，语义直观。老版本用 {**a, **b} 也可以，但 | 更可读。\n3. 用上下文管理器管理资源 不只是文件，任何需要\u0026quot;打开-关闭\u0026quot;的资源都适合：\nfrom contextlib import contextmanager import time @contextmanager def timer(description: str = \u0026#34;\u0026#34;): start = time.perf_counter() yield elapsed = time.perf_counter() - start print(f\u0026#34;{description}耗时: {elapsed:.3f}s\u0026#34;) # 使用 with timer(\u0026#34;数据处理\u0026#34;): process_large_dataset() 4. 使用类型提示 Python 3.5+ 支持类型注解，配合编辑器能大幅减少低级错误：\nfrom typing import Optional def find_user(user_id: int) -\u0026gt; Optional[dict]: \u0026#34;\u0026#34;\u0026#34;返回用户数据，不存在时返回 None\u0026#34;\u0026#34;\u0026#34; return users_db.get(user_id) 团队项目中，类型提示的价值尤其明显——它们是可执行的文档。\n5. pathlib 替代 os.path from pathlib import Path # 旧方式 import os path = os.path.join(\u0026#34;data\u0026#34;, \u0026#34;config\u0026#34;, \u0026#34;app.json\u0026#34;) # 新方式 path = Path(\u0026#34;data\u0026#34;) / \u0026#34;config\u0026#34; / \u0026#34;app.json\u0026#34; content = path.read_text(encoding=\u0026#34;utf-8\u0026#34;) Path 对象支持 / 拼接、read_text、write_text，API 更统一。\n6. 用 enumerate 替代 range(len()) # 不 Pythonic for i in range(len(items)): print(f\u0026#34;{i}: {items[i]}\u0026#34;) # Pythonic for i, item in enumerate(items): print(f\u0026#34;{i}: {item}\u0026#34;) 7. 用 f-string 格式化 name = \u0026#34;World\u0026#34; count = 42 # Python 3.6+ print(f\u0026#34;Hello {name}, count is {count}\u0026#34;) print(f\u0026#34;{count:04d}\u0026#34;) # 0042 print(f\u0026#34;{0.1234:.2%}\u0026#34;) # 12.34% 8. 异常处理要具体 # 不好 try: value = config[\u0026#34;key\u0026#34;] except: value = \u0026#34;default\u0026#34; # 好 try: value = config[\u0026#34;key\u0026#34;] except KeyError: value = \u0026#34;default\u0026#34; 捕获过于宽泛的异常会掩盖真正的 bug。永远只捕获你预期会发生的异常类型。\nPython 的哲学是\u0026quot;应该有一种——最好只有一种——显而易见的写法\u0026quot;。这些习惯并不复杂，坚持用下去，代码质量会自然提升。\n","permalink":"https://paperui.newmt.fun/posts/python-tips/","summary":"\u003cp\u003ePython 以简洁优雅著称，但写出真正的 Pythonic 代码需要刻意练习。以下是日常开发中最值得养成的几个习惯。\u003c/p\u003e\n\u003ch2 id=\"1-善用列表推导但别滥用\"\u003e1. 善用列表推导，但别滥用\u003c/h2\u003e\n\u003cp\u003e列表推导清晰时非常优雅：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-python\" data-lang=\"python\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 过滤与转换一步到位\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003eactive_users \u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e [u\u003cspan style=\"color:#f92672\"\u003e.\u003c/span\u003ename \u003cspan style=\"color:#66d9ef\"\u003efor\u003c/span\u003e u \u003cspan style=\"color:#f92672\"\u003ein\u003c/span\u003e users \u003cspan style=\"color:#66d9ef\"\u003eif\u003c/span\u003e u\u003cspan style=\"color:#f92672\"\u003e.\u003c/span\u003eis_active]\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 构建字典\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ename_map \u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e {u\u003cspan style=\"color:#f92672\"\u003e.\u003c/span\u003eid: u\u003cspan style=\"color:#f92672\"\u003e.\u003c/span\u003ename \u003cspan style=\"color:#66d9ef\"\u003efor\u003c/span\u003e u \u003cspan style=\"color:#f92672\"\u003ein\u003c/span\u003e users}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e但超过一层嵌套时，可读性会急剧下降。此时用普通循环更清晰：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-python\" data-lang=\"python\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 不推荐\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003eresult \u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e [x \u003cspan style=\"color:#66d9ef\"\u003efor\u003c/span\u003e row \u003cspan style=\"color:#f92672\"\u003ein\u003c/span\u003e matrix \u003cspan style=\"color:#66d9ef\"\u003efor\u003c/span\u003e x \u003cspan style=\"color:#f92672\"\u003ein\u003c/span\u003e row \u003cspan style=\"color:#66d9ef\"\u003eif\u003c/span\u003e x \u003cspan style=\"color:#f92672\"\u003e\u0026gt;\u003c/span\u003e \u003cspan style=\"color:#ae81ff\"\u003e0\u003c/span\u003e]\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 推荐：拆开写\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003eresult \u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e []\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#66d9ef\"\u003efor\u003c/span\u003e row \u003cspan style=\"color:#f92672\"\u003ein\u003c/span\u003e matrix:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e    \u003cspan style=\"color:#66d9ef\"\u003efor\u003c/span\u003e x \u003cspan style=\"color:#f92672\"\u003ein\u003c/span\u003e row:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e        \u003cspan style=\"color:#66d9ef\"\u003eif\u003c/span\u003e x \u003cspan style=\"color:#f92672\"\u003e\u0026gt;\u003c/span\u003e \u003cspan style=\"color:#ae81ff\"\u003e0\u003c/span\u003e:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e            result\u003cspan style=\"color:#f92672\"\u003e.\u003c/span\u003eappend(x)\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch2 id=\"2-用--合并字典python-39\"\u003e2. 用 \u003ccode\u003e|\u003c/code\u003e 合并字典（Python 3.9+）\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-python\" data-lang=\"python\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003edefaults \u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e {\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;timeout\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003e30\u003c/span\u003e, \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;retries\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003e3\u003c/span\u003e}\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003euser_config \u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e {\u003cspan style=\"color:#e6db74\"\u003e\u0026#34;timeout\u0026#34;\u003c/span\u003e: \u003cspan style=\"color:#ae81ff\"\u003e60\u003c/span\u003e}\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003efinal \u003cspan style=\"color:#f92672\"\u003e=\u003c/span\u003e defaults \u003cspan style=\"color:#f92672\"\u003e|\u003c/span\u003e user_config\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# {\u0026#39;timeout\u0026#39;: 60, \u0026#39;retries\u0026#39;: 3}\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003cp\u003e右边覆盖左边，语义直观。老版本用 \u003ccode\u003e{**a, **b}\u003c/code\u003e 也可以，但 \u003ccode\u003e|\u003c/code\u003e 更可读。\u003c/p\u003e","title":"Python 开发中值得养成的 8 个编码习惯"},{"content":"Git 是目前最主流的分布式版本控制系统。但学会 Git 不只是记住命令——理解背后的工作流才能真正高效协作。\n三个关键区域 每次操作 Git，数据在四个区域流转：\n工作目录 → 暂存区 → 本地仓库 → 远程仓库 理解这个模型后，add、commit、push 的关系就很清晰了：\ngit add . # 工作目录 → 暂存区 git commit -m \u0026#34;...\u0026#34; # 暂存区 → 本地仓库 git push origin main # 本地仓库 → 远程仓库 分支策略 日常开发中最常用的分支模型是 GitHub Flow：\nmain — 始终可部署 feature/* — 每个功能独立分支 hotfix/* — 紧急修复 # 从 main 切出功能分支 git checkout -b feature/add-login # 开发过程中频繁小提交 git commit -m \u0026#34;feat: add login form\u0026#34; git commit -m \u0026#34;feat: add form validation\u0026#34; # 完成后推送到远程 git push origin feature/add-login 合并 vs 变基 这是 Git 中最容易困惑的地方。简单原则：\n场景 推荐方式 原因 将 main 更新合入 feature 分支 git rebase main 保持提交历史线性整洁 将 feature 合并回 main git merge --no-ff feature 保留功能分支的完整记录 实际工作流示例：\n# 在 feature 分支上，先把 main 的最新代码变基过来 git checkout feature/add-login git fetch origin git rebase origin/main # 解决冲突后继续 git rebase --continue # 推到远程（注意需要 force，因为历史被改写了） git push --force-with-lease origin feature/add-login # 然后发 Pull Request 合并到 main 解决合并冲突 冲突不可怕，可怕的是不知道怎么处理：\n# 发生冲突时 git status # 查看哪些文件冲突 # 冲突文件内标记： # \u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt;\u0026lt; HEAD (当前分支的内容) # ======= # \u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt; feature-xxx (要合并进来的内容) # 手动编辑解决后 git add conflicted_file.txt git commit # 不需要 -m，Git 会生成 merge commit 提交信息规范 推荐使用 Conventional Commits 格式：\n\u0026lt;type\u0026gt;(\u0026lt;scope\u0026gt;): \u0026lt;subject\u0026gt; # 常用 type： feat: 新功能 fix: 修复 bug docs: 文档变更 refactor: 重构（不改变功能） chore: 构建/工具变更 style: 格式调整 好的提交信息让 git log 一目了然：\nfeat(auth): add JWT token refresh fix(upload): handle file size exceed error docs(readme): update deployment guide 常见场景速查 # 撤销工作区修改 git checkout -- filename # 撤销暂存区 git reset HEAD filename # 修改最近一次提交信息 git commit --amend -m \u0026#34;new message\u0026#34; # 暂存当前工作（临时切换分支） git stash git stash pop # 查看某次提交的详情 git show \u0026lt;commit-hash\u0026gt; # 查看谁改过某行代码 git blame filename Git 的关键不在于记住所有命令，而在于理解数据流向和形成一套稳定的协作流程。从 add → commit → push 的基础操作，到 rebase → merge 的分支管理，一步一个脚印就好。\n","permalink":"https://paperui.newmt.fun/posts/git-guide/","summary":"\u003cp\u003eGit 是目前最主流的分布式版本控制系统。但学会 Git 不只是记住命令——理解背后的工作流才能真正高效协作。\u003c/p\u003e\n\u003ch2 id=\"三个关键区域\"\u003e三个关键区域\u003c/h2\u003e\n\u003cp\u003e每次操作 Git，数据在四个区域流转：\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003e工作目录 → 暂存区 → 本地仓库 → 远程仓库\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e理解这个模型后，\u003ccode\u003eadd\u003c/code\u003e、\u003ccode\u003ecommit\u003c/code\u003e、\u003ccode\u003epush\u003c/code\u003e 的关系就很清晰了：\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit add .              \u003cspan style=\"color:#75715e\"\u003e# 工作目录 → 暂存区\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit commit -m \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;...\u0026#34;\u003c/span\u003e    \u003cspan style=\"color:#75715e\"\u003e# 暂存区 → 本地仓库\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit push origin main   \u003cspan style=\"color:#75715e\"\u003e# 本地仓库 → 远程仓库\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch2 id=\"分支策略\"\u003e分支策略\u003c/h2\u003e\n\u003cp\u003e日常开发中最常用的分支模型是 \u003cstrong\u003eGitHub Flow\u003c/strong\u003e：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003emain\u003c/code\u003e — 始终可部署\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003efeature/*\u003c/code\u003e — 每个功能独立分支\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ehotfix/*\u003c/code\u003e — 紧急修复\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 从 main 切出功能分支\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit checkout -b feature/add-login\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 开发过程中频繁小提交\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit commit -m \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;feat: add login form\u0026#34;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit commit -m \u003cspan style=\"color:#e6db74\"\u003e\u0026#34;feat: add form validation\u0026#34;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u003cspan style=\"color:#75715e\"\u003e# 完成后推送到远程\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003egit push origin feature/add-login\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003ch2 id=\"合并-vs-变基\"\u003e合并 vs 变基\u003c/h2\u003e\n\u003cp\u003e这是 Git 中最容易困惑的地方。简单原则：\u003c/p\u003e","title":"Git 实用指南：从日常操作到团队协作"},{"content":"关于本站 新墨韬是一个个人技术博客，名字取\u0026quot;笔墨韬略\u0026quot;之意 —— 用文字记录技术路上的思考与实践。\n这里主要分享以下内容：\nHugo 静态网站：主题开发、配置优化、部署方案 开源工具：Git、Docker、Linux 等开发工具的使用经验 编程实践：Python、Go 等语言的实用技巧 工作流方法：现代软件开发的高效实践 博客基于 Hugo 构建，使用自研的 PaperUI 主题。PaperUI 在 PaperMod 的基础上进行了深度定制，增加了首页轮播、双栏布局、彩色标签系统、搜索增强等特性，专为中文技术博客优化。\n技术栈 组件 技术选型 说明 静态生成 Hugo Go 语言编写，构建速度极快 主题 PaperUI 基于 PaperMod 深度定制的优化版 托管部署 Cloudflare Pages / GitHub Pages 全球 CDN 加速，免费 SSL 图片资源 WebP + JPEG 按需使用，优先 WebP 格式 为什么写博客 整理知识：写作是最好的学习方式，把零散的知识结构化 分享经验：踩过的坑、总结的技巧，或许能帮到遇到同样问题的人 保持思考：定期输出倒逼持续输入，形成正向循环 开源精神：代码开源，文章也开源 —— 本站所有内容在 GitHub 上可见 联系我 如果你对文章内容有疑问或建议，欢迎通过以下方式交流：\nGitHub：scenlinx — 欢迎 Star、Issue 和 PR 博客评论：每篇文章下方支持 Giscus 评论系统，可在 hugo.toml 中配置启用 Email：scenlinx@163.com 关于 PaperUI 主题 PaperUI 是这个博客使用的主题，也是我开发的开源项目。如果你也在用 Hugo 搭建博客，可以试试 PaperUI：\n保留 PaperMod 的全部核心能力（SEO、性能、多语言） 新增首页轮播、侧边栏、彩色标签、搜索增强等实用功能 对中文博客场景做了深度本地化优化 MIT 协议开源，自由使用和修改 好的工具让创作更专注，好的主题让内容更闪耀。\n欢迎访问 GitHub 仓库 了解更多。\n","permalink":"https://paperui.newmt.fun/about/","summary":"\u003ch2 id=\"关于本站\"\u003e关于本站\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003e新墨韬\u003c/strong\u003e是一个个人技术博客，名字取\u0026quot;笔墨韬略\u0026quot;之意 —— 用文字记录技术路上的思考与实践。\u003c/p\u003e\n\u003cp\u003e这里主要分享以下内容：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eHugo 静态网站\u003c/strong\u003e：主题开发、配置优化、部署方案\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e开源工具\u003c/strong\u003e：Git、Docker、Linux 等开发工具的使用经验\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e编程实践\u003c/strong\u003e：Python、Go 等语言的实用技巧\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e工作流方法\u003c/strong\u003e：现代软件开发的高效实践\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e博客基于 \u003cstrong\u003eHugo\u003c/strong\u003e 构建，使用自研的 \u003ca href=\"https://github.com/scenlinx/PaperUI\"\u003e\u003cstrong\u003ePaperUI\u003c/strong\u003e\u003c/a\u003e 主题。PaperUI 在 PaperMod 的基础上进行了深度定制，增加了首页轮播、双栏布局、彩色标签系统、搜索增强等特性，专为中文技术博客优化。\u003c/p\u003e\n\u003ch2 id=\"技术栈\"\u003e技术栈\u003c/h2\u003e\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003cth\u003e组件\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003e技术选型\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003e说明\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e静态生成\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ca href=\"https://gohugo.io/\"\u003eHugo\u003c/a\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003eGo 语言编写，构建速度极快\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e主题\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ca href=\"https://github.com/scenlinx/PaperUI\"\u003ePaperUI\u003c/a\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e基于 PaperMod 深度定制的优化版\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e托管部署\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003eCloudflare Pages / GitHub Pages\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e全球 CDN 加速，免费 SSL\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e图片资源\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003eWebP + JPEG\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e按需使用，优先 WebP 格式\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\u003ch2 id=\"为什么写博客\"\u003e为什么写博客\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e整理知识\u003c/strong\u003e：写作是最好的学习方式，把零散的知识结构化\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e分享经验\u003c/strong\u003e：踩过的坑、总结的技巧，或许能帮到遇到同样问题的人\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e保持思考\u003c/strong\u003e：定期输出倒逼持续输入，形成正向循环\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e开源精神\u003c/strong\u003e：代码开源，文章也开源 —— 本站所有内容在 GitHub 上可见\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"联系我\"\u003e联系我\u003c/h2\u003e\n\u003cp\u003e如果你对文章内容有疑问或建议，欢迎通过以下方式交流：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eGitHub\u003c/strong\u003e：\u003ca href=\"https://github.com/scenlinx\"\u003escenlinx\u003c/a\u003e — 欢迎 Star、Issue 和 PR\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e博客评论\u003c/strong\u003e：每篇文章下方支持 Giscus 评论系统，可在 \u003ccode\u003ehugo.toml\u003c/code\u003e 中配置启用\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eEmail\u003c/strong\u003e：\u003ccode\u003escenlinx@163.com\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"关于-paperui-主题\"\u003e关于 PaperUI 主题\u003c/h2\u003e\n\u003cp\u003ePaperUI 是这个博客使用的主题，也是我开发的开源项目。如果你也在用 Hugo 搭建博客，可以试试 PaperUI：\u003c/p\u003e","title":"关于"}]