前端【免费下载链接】hugo-theme-academic-cv Academic portfolio that boosts citations. AI generates pages, you own as Markdown. BibTeX auto-import, Jupyter, LaTeX, slides, visual block editor — free to host forever. 学术主页AI 生成Markdown 拥有 项目地址https://gitcode.com/gh_mirrors/th/hugo-theme-academic-cv点击查看免费下载Callout提示框是 Hugo Blox 基于 Hugo 主题体系提供的一种内容强调组件用于在文章中以醒目的视觉块突出注意事项、提示、警告等信息。本文以本仓库hugo-theme-academic-cv中的 Callouts 官方文档 为主线完整覆盖 15 种 Callout 类型的 Markdown 语法、自定义标题、旧版短代码迁移、CSS 深度定制并结合仓库内实际使用的博客与课程页面为你提供一套可直接复制、可运行的实战方案。Callout 是什么一次理解它的设计目标Callout 在 Hugo Blox 中被定义为一种asides / hints / alerts旁注、提示、警示核心用途是让读者在不打断正文阅读流的前提下快速抓住需要特别注意的信息。它的设计目标有三个高兼容性同时支持 GitHub 与 Obsidian 风格的 Markdown Callout 语法保证内容在不同平台间可移植零侵入不依赖 Hugo 特有的短代码shortcode而是使用纯 Markdown 语法书写可定制渲染结果带有语义化 CSS 类与 data 属性方便站点作者按需美化。在本仓库中Callout 语法被实际用于博客文章与课程文档例如 get-started 示例博客 中的快速开始提示、second-brain 博客 中的笔记提示以及 格式化教程之媒体嵌入页 中的说明。这些页面全部使用标准的 [!TYPE]语法是本文最好的活教材。基础语法与 15 种 Callout 类型Hugo Blox 完整支持 Obsidian 文档中定义的全部 15 种 Callout 类型。语法非常简单以引用块blockquote为基础首行写 [!类型]后续每行以开头书写内容 [!NOTE] 这是一条提示信息。根据语义这 15 种类型可以划分为四大类。信息与笔记类Information NotesNOTE是最常用的类型用于呈现读者应该知道的重要信息 [!NOTE] This is a note callout with important information that users should know.[!NOTE] This is a note callout with important information that users should know.INFO是 NOTE 的别名视觉样式完全相同适合在语义上强调补充说明 [!INFO] Alternative info callout - same styling as NOTE.[!INFO] Alternative info callout - same styling as NOTE.ABSTRACT适合用来承载摘要、总结或 TL;DR 段落 [!ABSTRACT] Use for abstracts, summaries, or TL;DR sections.[!ABSTRACT] Use for abstracts, summaries, or TL;DR sections.动作与任务类Actions TasksTODO标记待办事项适合在教程中标注下一步要做什么 [!TODO] This is something that needs to be done.[!TODO] This is something that needs to be done.TIP用于给出提高效率的实用建议 [!TIP] Heres a helpful tip to make your workflow more efficient![!TIP] Heres a helpful tip to make your workflow more efficient!SUCCESS用于标示操作成功完成等正面结果 [!SUCCESS] Great job! This operation completed successfully.[!SUCCESS] Great job! This operation completed successfully!提问与交互类Questions InteractiveQUESTION用于抛出问题、征集读者反馈 [!QUESTION] What do you think about this approach? Let us know![!QUESTION] What do you think about this approach? Let us know!EXAMPLE用于展示可落地的实例 [!EXAMPLE] Heres a practical example of how to implement this feature.[!EXAMPLE] Heres a practical example of how to implement this feature.QUOTE用于呈现引文例如名人名言 [!QUOTE] The best way to predict the future is to invent it. - Alan Kay[!QUOTE] The best way to predict the future is to invent it. - Alan Kay警告与错误类Warnings ErrorsWARNING提醒读者操作可能带来意外后果 [!WARNING] Be careful! This action might have unexpected consequences.[!WARNING] Be careful! This action might have unexpected consequences.CAUTION比 WARNING 更强烈标示可能造成数据丢失等不可逆后果的操作 [!CAUTION] Danger! This operation is irreversible and could cause data loss.[!CAUTION] Danger! This operation is irreversible and could cause data loss.IMPORTANT标示读者必须理解才能继续的关键信息 [!IMPORTANT] This is critical information that users must understand to proceed.[!IMPORTANT] This is critical information that users must understand to proceed.DANGER用于极端危险、需要极度谨慎的场景 [!DANGER] This is extremely dangerous - proceed with extreme caution![!DANGER] This is extremely dangerous - proceed with extreme caution!FAILURE标示操作失败并给出排查建议 [!FAILURE] This operation failed. Check your configuration and try again.[!FAILURE] This operation failed. Check your configuration and try again.BUG用于标注已知问题例如浏览器兼容性缺陷 [!BUG] Known issue: This feature doesnt work properly in Safari 14.[!BUG] Known issue: This feature doesnt work properly in Safari 14.自定义标题让 Callout 更贴合上下文默认情况下Callout 的标题就是类型名如 NOTE、WARNING。你可以在类型名后追加 自定义标题来覆盖它 [!WARNING] Custom Warning Title This warning has a custom title instead of just Warning.[!WARNING] Custom Warning Title This warning has a custom title instead of just Warning.这一模式在本仓库中大量使用。例如 get-started 示例博客 中的 [!TIP] Quick Start Guide、 [!NOTE] Enhanced Markdown Support与 [!WARNING] Version Requirements都是在保留语义类型的同时让标题直接面向读者可读。自定义标题语法支持在之后直接书写任意文本含中文与英文均可。旧版短代码语法仍可用但已弃用在旧版本中Hugo Blox 通过callout短代码实现提示框。该写法在当前版本中依然能正常工作但会显示弃用警告deprecation warning官方建议尽快迁移到本文所述的 Markdown 语法{{/* callout note */}} This still works but is deprecated. Use the Markdown syntax above! {{/* /callout */}}迁移方法非常直观把{{ callout note }}替换为 [!NOTE]把{{ /callout }}及其内部的正文逐行加上前缀即可。新的 Markdown 语法不依赖 Hugo 特定短代码因此内容可以被 GitHub、Obsidian 等外部工具直接识别。CSS 深度定制利用语义化类名与 data 属性Hugo Blox 渲染 Callout 时会生成语义化的 CSS 类与 data 属性这是定制样式的核心入口。每个 Callout 都会包含基础类.callout类型专属 data 属性data-calloutnote类型名小写组件类.callout-icon图标、.callout-title标题、.callout-content内容主体、.callout-body整体内容容器将自定义样式写入你的assets/css/custom.css即可覆盖默认外观。以下 CSS 示例来自原文档可直接复制使用我们对其补充了逐段注释/* 自定义 NOTE 提示框加粗左边框并添加柔和阴影 */ .callout[data-calloutnote] { border-left-width: 8px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } /* 让 SUCCESS 提示框产生脉冲动画突出成功反馈 */ .callout[data-calloutsuccess] { animation: pulse 2s infinite; } /* 自定义图标样式鼠标悬停时图标放大 */ .callout-icon svg { transition: transform 0.2s; } .callout:hover .callout-icon svg { transform: scale(1.1); } /* 暗色模式覆盖针对 WARNING 使用更适配暗色背景的配色 */ media (prefers-color-scheme: dark) { .callout[data-calloutwarning] { background-color: rgb(92 25 2); border-color: rgb(245 158 11); } }这套定制方案与 Obsidian 的 CSS 定制体系保持对齐意味着你在 Obsidian 中编写的样式经验可以平滑迁移到 Hugo Blox 站点跨平台表现一致。可选的定制方向还包括调整圆角与内边距、为不同data-callout类型设置专属图标颜色、在暗色模式下统一调整文字对比度等。注意media (prefers-color-scheme: dark)依赖于站点的主题模式设置本仓库 params.yaml 中theme.mode可设为light、dark或system只有当渲染环境判定为暗色时才会生效。新语法的七大优势原文档将新 Markdown 语法总结为以下七个优势这里逐一展开说明可移植Portable语法与 GitHub、Obsidian 等主流 Markdown 编辑器完全兼容内容可以在平台之间自由搬运不会因为换编辑器而丢失结构标准化Standard采用被广泛采纳的 Markdown 引用块 类型标注写法属于社区通用事实标准而非某个工具私有语法干净Clean正文中不再出现 Hugo 特有的短代码包裹源码可读性更高也更利于 AI 与 LLM 理解内容语义面向未来Future-proof新语法由 Hugo 0.132.0 及以上版本原生支持。本仓库的 hugoblox.yaml 声明构建所需 Hugo 版本为0.162.0已远高于该门槛可放心使用可定制Customizable语义化 CSS 类与 data 属性让深度主题化变得容易见上文 CSS 章节完整Complete全部 15 种 Obsidian Callout 类型均受支持覆盖笔记、任务、提问、警告四大语义场景多语言MultilingualCallout 标题会根据站点语言自动翻译并可在语言包中自定义。本仓库 languages.yaml 展示了多语言站点的配置方式——默认语言为en可取消注释zh段并设置contentDir: content/zh来启用中文站点届时 Callout 标题会自动切换为对应语言。版本与配置前提Callout 语法能否生效取决于以下几个配置与版本前提均可在本仓库中直接验证Hugo 版本 ≥ 0.132.0这是新 Markdown 语法的最低要求。仓库根目录 hugoblox.yaml 已声明hugo_version: 0.162.0满足条件如果你的站点仍使用旧版 Hugo会看到 [!NOTE]以普通引用块形式输出。markup 配置合并Hugo Blox 通过 hugo.yaml 中的markup._merge: deep将主题的 Goldmark 渲染配置合并进站点配置。如果你自定义了markup段落应保留_merge: deep或显式继承主题的渲染钩子否则 Callout 渲染钩子可能被覆盖。内容位置无关Callout 既可用于独立内容页博客文章、出版物、项目也可用于课程文档。本仓库的 格式化教程索引页 将 Callout 列为格式化组件之一与 Button、Cards、Spoiler、Steps 并列说明它是内容编排体系中的一等公民。仓库实战三个可直接参考的案例除本文所依据的 官方 Callout 文档 外仓库内已有多个真实页面使用了 Callout 语法可作为落地范例案例一博客快速开始页组合多种类型——content/blog/get-started/index.md 在同一篇文章中同时使用了[!TIP]、[!IMPORTANT]、[!NOTE]与[!WARNING]展示了自定义标题 多种类型混排的典型博客写作模式其中[!WARNING] Version Requirements明确提示新语法需要 Hugo v0.132.0与本文的版本前提互相印证。案例二第二大脑博客Callout 的经典科普——content/blog/second-brain/index.md 先用普通文本解释 Callout 的定义随后给出 [!NOTE]的源码与其渲染效果对照再改用 [!WARNING]强调别让读者漏掉关键细节是教学型文章中循序渐进使用 Callout 的好范例。案例三课程格式化教程与 LaTeX 结合——content/courses/hugo-blox/guide/formatting/media.md 在讲解 LaTeX 数学渲染时用 [!NOTE]说明包裹 math 短代码以防 Markdown 误渲染说明 Callout 完全可以在包含公式、代码等复杂内容的页面中正常工作。常见问题速查Callout 与普通引用块有何区别普通引用块开头渲染为无样式的引用文本Callout 首行带有[!类型]标记会被 Hugo 0.132.0 的渲染钩子转换为带图标、标题与语义样式的提示框。能否在 Callout 内部嵌套其他 Markdown可以。Callout 内容区本质上仍是引用块内部支持粗体、行内代码、列表等 Markdown 语法建议保持内容简洁避免嵌套过深影响可读性。如何让 Callout 标题随语言切换无需额外操作——标题的翻译由主题语言包完成前提是站点启用了对应语言参考 languages.yaml如需完全自定义标题文案直接使用[!类型] 自定义标题语法即可。升级旧站后 Callout 显示异常检查两点Hugo 版本是否 ≥ 0.132.0markup配置是否仍保留_merge: deep见 hugo.yaml。同时确认没有残留的旧版{{ callout }}短代码——它虽可运行但会输出弃用警告。掌握 [!TYPE]语法后你便可以在 Hugo Blox 的博客、课程、出版物等任意内容中用最轻量、最标准的方式组织提示信息配合.callout[data-callout...]选择器还能让提示框与站点的明暗主题、品牌配色完全融合实现开箱即用 深度定制两不误。赞分享前端【免费下载链接】hugo-theme-academic-cv Academic portfolio that boosts citations. AI generates pages, you own as Markdown. BibTeX auto-import, Jupyter, LaTeX, slides, visual block editor — free to host forever. 学术主页AI 生成Markdown 拥有 项目地址https://gitcode.com/gh_mirrors/th/hugo-theme-academic-cv点击查看免费下载相关推荐Hugo Academic CV 主题使用教程Hugo Academic CV 主题使用教程 1、项目介绍 Hugo Academic CV 是一个基于 Hugo 的开源主题专为学术界人士设计。它允许用户前端MultiTalk实战从单人唱歌到多人对话的完整案例MultiTalk实战从单人唱歌到多人对话的完整案例 MultiTalk是NeurIPS 2025发布的音频驱动多人对话视频生成框架它能够根据多流音频输入、人工智能大模型媒体生成多模态计算机视觉语音基于 Hugo Blox Builder 的 Hugo Academic CV 模板构建学术个人主页与在线简历的完整指南基于 Hugo Blox Builder 的 Hugo Academic CV 模板构建学术个人主页与在线简历的完整指南 导读 本文围绕仓库 starters人工智能大模型强化学习AI Agent微调上一篇终极指南如何用ChatGPT管理微型股票投资组合——AI与传统量化策略的完美融合下一篇Rufus 手把手教程从 0 开始把系统 ISO 写入 U 盘做出能开机的启动盘创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
)
