Hugo

为什么在 VS Code 中预览时有彩色显示，但在 Hugo 生成的网页上没有彩色的原因？ Markdown语法的文本编辑，可以使得博客文章在视觉上更加丰富多彩，提高阅读体验。但是使用PaperMod主题默认配置会出现“为什么在 VS Code 中预览时有彩色显示，但在 Hugo 生成的网页上没有彩色的问题”。这实际上和我们对css和html的配置有很大关系，本文将教大家如何配置正确的富文本渲染样式。 问题分析 经过分析，发现了两个主要问题： 标准 Markdown 元素无彩色样式：Hugo PaperMod 主题默认只对代码块提供了语法高亮，但对于其他 Markdown 元素如加粗、斜体、内联代码等没有提供彩色样式。 HTML 标签被过滤：在某些 Markdown 文件中使用了 HTML 标签来设置颜色（如<font color="#2DC26B">或<span style="background:#fdbfff">），但 Hugo 默认会过滤掉不安全的 HTML 标签，导致这些彩色样式在网页中不显示。 解决方案 创建自定义 CSS 文件 在项目的 assets/css/extended/ 目录下创建一个新文件 markdown-colors.css /* 为Markdown元素添加彩色样式 */ .post-content strong { color: var(--primary, #e83e8c); font-weight: 700; } .post-content em { color: var(--secondary, #fd7e14); font-style: italic; } .post-content strong em, .post-content em strong { color: var(--tertiary, #6610f2); font-weight: 700; font-style: italic; } .post-content code:not(.highlight) { color: var(--code-color, #d63384); background-color: var(--code-bg, #f8f9fa); padding: 0.2em 0.4em; border-radius: 3px; font-size: 0.9em; } .post-content a { color: var(--link-color, #0d6efd); text-decoration: none; transition: color 0.2s ease-in-out; } .post-content a:hover { color: var(--link-hover-color, #0a58ca); text-decoration: underline; } .post-content blockquote { border-left: 4px solid var(--quote-border, #0d6efd); background-color: var(--quote-bg, #f8f9fa); padding: 1rem 1.5rem; margin: 1.5rem 0; color: var(--quote-text, #495057); border-radius: 0 4px 4px 0; } .post-content del { color: var(--del-color, #6c757d); text-decoration: line-through; } .post-content table th { background-color: var(--table-header-bg, #e9ecef); color: var(--table-header-text, #495057); font-weight: 600; } .post-content table tr:nth-child(even) { background-color: var(--table-row-even, #f8f9fa); } /* 深色主题适配 */ [data-theme="dark"] .post-content strong { color: var(--primary, #ff6b9d); } [data-theme="dark"] .post-content em { color: var(--secondary, #ffa94d); } [data-theme="dark"] .post-content code:not(.highlight) { color: var(--code-color, #f783ac); background-color: var(--code-bg, #343a40); } [data-theme="dark"] .post-content a { color: var(--link-color, #74c0fc); } [data-theme="dark"] .post-content a:hover { color: var(--link-hover-color, #a5d8ff); } [data-theme="dark"] .post-content blockquote { background-color: var(--quote-bg, #343a40); border-left-color: var(--quote-border, #74c0fc); color: var(--quote-text, #dee2e6); } [data-theme="dark"] .post-content del { color: var(--del-color, #adb5bd); } [data-theme="dark"] .post-content table th { background-color: var(--table-header-bg, #495057); color: var(--table-header-text, #f8f9fa); } [data-theme="dark"] .post-content table tr:nth-child(even) { background-color: var(--table-row-even, #343a40); } 在 hugo.yml 配置文件中确保已经启用了自定义 CSS： params: # 其他配置... assets: disableFingerprinting: false # 其他配置... 启用 HTML 标签支持（针对已有 HTML 样式） Markdown 文件中已经使用了 HTML 标签来设置颜色（如 <font color="#2DC26B">），需要在 Hugo 配置中启用 HTML 标签支持： ...

使用 Hugo + CloudFlare Pages + Github 自动化部署个人博客网站 在cloudflare pages托管博客 创建好第一篇博客后，就可以将它部署到网上了，这里使用GitHub+Cloudflare，GitHub代码托管，Cloudflare赛博菩萨，提供免费的全球CDN加速和网站托管服务。 GithubPages部署 配置Pages并关联代码仓库 等待部署完成 部署成功 我们的域名是：MakeMoney，https://funkygod.vip/ Github管理博客 在GitHub创建代码仓库，为推送hugo 博客到项目中做准备，且方便后续托管博客到cloudflare。 参考文档：利用Hugo和Cloudflare Pages搭建博客 | EndlessParadox 本地新建Hugo $ hugo new site blog-demo Congratulations! Your new Hugo site was created in D:\Code\blog-demo. Just a few more steps... 1. Change the current directory to D:\Code\blog-demo. 2. Create or install a theme: - Create a new theme with the command "hugo new theme <THEMENAME>" - Or, install a theme from https://themes.gohugo.io/ 3. Edit hugo.toml, setting the "theme" property to the theme name. 4. Create new content with the command "hugo new content <SECTIONNAME>\<FILENAME>.<FORMAT>". 5. Start the embedded web server with the command "hugo server --buildDrafts". See documentation at https://gohugo.io/. 主题安装: PaperMod 从这里面挑一个 https://themes.gohugo.io/ ...