前端【免费下载链接】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点击查看免费下载本文以本仓库课程 Guide 章节guide/_index.md为核心骨架系统讲解构建 Hugo Blox 站点必须掌握的三件事内容目录结构与文件命名约定、config/_default/下的站点配置、以及基于 Markdown 与内置短代码shortcode的富内容格式化。读完本文你将能独立规划内容目录、配置菜单与左右侧边栏并熟练使用 Button、Callout、Cards、Spoiler、Steps、媒体嵌入等全部内置组件。从 Guide 章节开始三大主题一目了然在本仓库的课程体系中guide/_index.md 是 Learn Hugo Blox in 10 minutes! 课程见 content/courses/hugo-blox/_index.md中承上启下的指南章节。它本身是一页导航索引front matter 中通过weight: 2控制章节顺序sidebar.open: true让侧边栏默认展开正文则用三张卡片把读者引向三个核心主题卡片目标主题对应文档Formatting用 Markdown 与可复用短代码编写富内容guide/formatting/Project Structure站点目录组织与文件命名guide/project-structure.mdConfiguration站点全局配置guide/configuration.md这张卡片本身就是 Cards 短代码的真实使用案例后文会详述展示了一种Hugo Blox 式的内容组织方式用{{ cards }}把相关页面聚合成导航入口。下文按这三个主题依次展开。项目结构四大目录与文件命名约定4 个主文件夹与 1 个版本文件Hugo 站点有4 个主文件夹外加 1 个模块版本文件本仓库的目录结构与之完全对应content/存放 Markdown 格式的内容文件首页、文档页等。其中_index.md是首页Hugo 要求首页与归档页必须以_index下划线前缀命名。本仓库的content/下就有authors/、blog/、courses/、events/、projects/、publications/、slides/等板块。assets/资源目录。assets/media/存放媒体文件图片、视频。本仓库的作者头像、幻灯片 Logo 都位于 assets/media/。assets/media/icons/custom/上传任何你想使用的自定义 SVG 图标目录在本仓库中已预留见 assets/media/icons/custom/。config/_default/站点配置文件目录。本仓库正好包含 5 个文件各司其职hugo.yaml配置 Hugo 本身站点标题、URL、Hugo 选项、按文件夹设置页面特性。例如其中用cascade让/slides/**页面额外输出present格式、配置outputs、markup.highlight代码高亮等。module.yaml安装或卸载 Hugo 主题与插件。本仓库通过imports引入github.com/HugoBlox/kit/modules/...下的 netlify、blox、slides 模块并用mounts把社区 blox 挂载到布局目录。params.yaml配置 Hugo Blox 选项SEO、分析、站点特性是功能开关最集中的文件详见下文配置章节。menus.yaml配置菜单链接前提是params.yaml中启用了该菜单。languages.yaml配置站点语言或为多语言站点设置语言级选项。static/uploads/存放希望访客下载的文件例如 PDF。本仓库的 static/uploads/resume.pdf 就是真实用例。go.mod设定站点使用的 Hugo 主题/插件版本。位于仓库根目录的 go.mod 定义了 HugoBlox Kit 相关模块依赖。Hugo 文件命名约定Hugo 提供两种标准页面文件命名方式TITLE/index.md或TITLE.mdTITLE为页面名。页面名应小写并使用连字符-代替空格。两种方式产出的 URL 结果相同可任选一种组织方式文件夹方式的额外好处是页面所有文件如图片都收拢在该页面的文件夹内页面自包含、更便于整体分享。首页是特例Hugo 要求首页与列表页listing pages命名为_index.md。例如本仓库的 content/blog/_index.md、content/courses/_index.md 都是列表页而首页则由content/_index.md若存在担任。文档导航与排序文档导航Docs Navigation会根据docs/文件夹中的内容自动生成默认按字母顺序排序。可通过在 Markdown 文件的 front matter 中添加weight参数改变页面顺序——weight值越小越靠前。原文档给出的示例页面example.md--- title: My Example weight: 1 ---页面test.md--- title: My Test weight: 2 ---由于example.md的weight更小它将排在test.md之前。本仓库的 Guide 章节正是这样排序的project-structure.md设weight: 1、configuration.md设weight: 2见 guide/project-structure.md 与 guide/configuration.md而guide/_index.md本身设weight: 2用于章节排序。站点配置config/_default/ 全解析站点配置全部位于config/_default/目录guide/configuration.md 从导航、左/右侧边栏三个角度讲解了配置方法。菜单Menu配置菜单通过menus.yaml定义。站点顶部的main菜单在本仓库中的真实结构节选自 menus.yaml为main: - name: Bio url: / weight: 10 - name: Experience url: experience/ weight: 20 - name: Projects url: projects/ weight: 30 - name: Courses url: courses/ weight: 40可以看到每个菜单项包含name、url、weight三个字段weight控制链接在菜单中的出现顺序。左侧边栏Left Sidebar左侧边栏的链接自动从内容目录的结构生成只需添加一个文件夹即可嵌套页面本仓库content/courses/hugo-blox/guide/下再建formatting/文件夹即形成二级导航见 guide/formatting/。除了自动生成的导航还可在config/_default/menus.yaml的sidebar段添加额外链接完整配置示例原文继承menu: sidebar: - name: Need help? params: type: separator weight: 1 - name: A page pageRef: /page-filename-here weight: 2 - name: An external link ↗ url: https://example.com weight: 3要点说明type: separator用于渲染一个分隔符标题如 Need help?本身不可点击pageRef指向站内页面路径如/page-filename-hereurl用于站外链接示例中的https://example.com请替换为你自己的地址weight决定链接在侧边栏中的顺序。右侧边栏与目录Table of Contents右侧边栏的目录TOC自动根据 Markdown 文件的标题生成。可选地在页面 front matter 中设置toc: false关闭该页面的目录--- title: My Page toc: false ---这一页面级覆盖与本仓库 params.yaml 中hugoblox.content.toc.enable: true的全局默认值相互配合全局默认开启个别页面用 front matter 关闭。与此类似的还有mathLaTeX 数学渲染默认false、reading_time阅读时长估算等开关均可在params.yaml的hugoblox.content段统一控制见 params.yaml。常用功能配置速查params.yaml是 Hugo Blox 的核心功能开关所在除上述content段外本仓库还展示了这些常用分组config/_default/params.yamlidentity站点品牌信息名称、组织、Schema.org 类型、描述、社交账号theme明暗模式light/dark/system、主题包与主色覆盖header/footer顶栏样式navbar等、搜索、主题切换、语言切换开关copyright版权声明与许可证CC 类型及衍生/商用/共享条款seo浏览器标签标题、AI 爬虫引导seo.ai.allow/disallowsearch站内搜索开关与建议词comments评论系统giscus / disqus开关与凭据analyticsGoogle Analytics、GTM、Plausible、Fathom 等分析服务接入。内容格式化Markdown 与 Hugo Blox 短代码Guide 章节的 Formatting 主题见 guide/formatting/_index.md倡导用 Markdown 可复用的 Hugo Blox 组件短代码编写丰富、有吸引力的内容。它通过五张卡片组织了 Button、Callout、Cards、Spoiler、Steps 五个短代码此外格式化目录下还包含媒体嵌入文档media.md。下面逐一讲解。Button现代、可定制的按钮短代码Button 短代码提供渐变样式、图标与智能链接处理。基础用法{{ button url/contact }}Contact Us{{ /button }} {{ button urlhttps://example.com new_tabtrue stylesecondary }}Visit External Site{{ /button }}第一个按钮指向站内/contact页面第二个是新标签页打开的外部链接按钮。风格变体style参数默认primary{{ button url# styleprimary }}Primary Button{{ /button }} {{ button url# stylesecondary }}Secondary Button{{ /button }} {{ button url# styleoutline }}Outline Button{{ /button }} {{ button url# styleghost }}Ghost Button{{ /button }}尺寸size参数默认md{{ button url# sizesm }}Small Button{{ /button }} {{ button url# sizemd }}Medium Button{{ /button }} {{ button url# sizelg }}Large Button{{ /button }} {{ button url# sizexl }}Extra Large{{ /button }}对齐align参数默认left{{ button url# alignleft }}Left Aligned{{ /button }} {{ button url# aligncenter }}Center Aligned{{ /button }} {{ button url# alignright }}Right Aligned{{ /button }}图标iconicon_position默认图标位于文本前{{ button url# iconarrow-down-tray }}Download{{ /button }} {{ button url# iconarrow-right icon_positionright }}Continue{{ /button }}图标名称取自 Hero Icons 图标包icon_position可取值left/right。圆角rounded参数默认md{{ button url# roundedsm }}Small Radius{{ /button }} {{ button url# roundedmd }}Medium Radius{{ /button }} {{ button url# roundedlg }}Large Radius{{ /button }} {{ button url# roundedfull }}Pill Button{{ /button }}高级示例——组合参数实现真实场景{{ button url/signup styleprimary sizelg aligncenter iconrocket-launch }}Get Started Today{{ /button }}{{ button urlhttps://example.com new_tabtrue styleoutline iconarrow-top-right-on-square icon_positionright }}View on GitHub{{ /button }}{{ button url/files/document.pdf stylesecondary icondocument-arrow-down roundedfull }}Download PDF{{ /button }}分别是居中的 CTA 大按钮、新标签页打开的外部链接按钮、胶囊圆角的下载按钮url指向站内文件如 static/uploads/resume.pdf。参数表完整继承参数类型默认值说明urlstring#必填。按钮目标地址站内或站外textstring短代码内文本按钮文本覆盖短代码内容new_tabbooleanfalse是否在新标签页打开链接stylestringprimary按钮风格primary、secondary、outline、ghostsizestringmd按钮尺寸sm、md、lg、xlalignstringleft按钮对齐left、center、righticonstring-图标名称来自 Hero Iconsicon_positionstringleft图标位置left、rightroundedstringmd圆角半径sm、md、lg、xl、fulldisabledbooleanfalse是否禁用按钮安全特性按钮短代码会自动处理外部链接的安全属性——外部链接自动添加relnoreferrer在新标签页打开的外部链接添加relnoopener noreferrer在新标签页打开的站内链接添加relnoopener。这保证了安全的导航跳转且不损失功能。无障碍Accessibility内置rolebutton属性、aria-label支持、键盘焦点指示、高对比度焦点环以及禁用状态处理。CalloutGitHub 与 Obsidian 风格的提示块Hugo Blox 支持 GitHub 与 Obsidian 风格的 Markdown Callout提示块用于在文章中强调重要或相关内容笔记、提示、警告等兼具最大兼容性与内容可移植性。全部 15 种 Obsidian 提示类型均受支持。信息与笔记类 [!NOTE] 这是一条需要用户知晓的重要信息的提示。 [!INFO] INFO 是 NOTE 的别名样式相同。 [!ABSTRACT] 用于摘要、总结或 TL;DR 段落。动作与任务类 [!TODO] 这是需要完成的事项。 [!TIP] 这是一条让工作流更高效的小技巧 [!SUCCESS] 操作成功完成问答与交互类 [!QUESTION] 你对这个方案怎么看 [!EXAMPLE] 这里给出一个实现该功能的实际例子。 [!QUOTE] 预测未来的最好方式是创造未来。 —— 艾伦·凯警告与错误类 [!WARNING] 小心该操作可能带来意想不到的后果。 [!CAUTION] 危险该操作不可逆可能导致数据丢失。 [!IMPORTANT] 这是用户必须理解才能继续的关键信息。 [!DANGER] 极度危险请格外谨慎 [!FAILURE] 操作失败请检查配置后重试。 [!BUG] 已知问题该功能在 Safari 14 中无法正常工作。自定义标题任何提示块都可以通过后接自定义文本覆盖默认标题 [!WARNING] 自定义警告标题 这条警告使用自定义标题而不是默认的 Warning。旧版短代码语法已弃用旧的callout短代码仍然可用但会显示弃用警告{{ callout note }} 这仍然有效但已弃用请改用上面的 Markdown 语法 {{ /callout }}CSS 自定义Hugo Blox 生成的 Callout 带有语义化 CSS 类与 data 属性便于定制。每个 Callout 包含基类.callout、类型专属的 data 属性data-calloutnote、以及组件类.callout-icon、.callout-title、.callout-content、.callout-body。可添加自定义 CSS例如在站点的assets/css/custom.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); } /* 深色模式覆盖 */ media (prefers-color-scheme: dark) { .callout[data-calloutwarning] { background-color: rgb(92 25 2); border-color: rgb(245 158 11); } }该 CSS 定制方式与 Obsidian 的 CSS 定制体系一致样式可跨平台复用。新语法的优势可移植兼容 GitHub、Obsidian 及其他 Markdown 编辑器、标准化采用广泛使用的 Markdown Callout 语法、干净无需 Hugo 专属短代码、面向未来受最新 Hugo 版本支持、可定制语义化 CSS 类与 data 属性、完整支持全部 15 Obsidian 提示类型、多语言提示标题根据站点语言自动翻译并可在语言包中定制。Cards卡片式导航Cards 短代码用于创建卡片卡片可作为链接或纯文本展示。用法示例{{ cards }} {{ card url../callout titleCallout iconacademic-cap }} {{ card url titleA card without an icon }} {{ /cards }}第一张卡片带图标和链接第二张卡片既无图标也无链接纯文本卡片。参数表参数说明icon图标名称默认来自 Hero Icons 图标包title卡片的标题标题subtitle副标题支持 Markdownurl卡片链接地址本仓库中 Cards 短代码有大量真实用例Guide 章节的 guide/_index.md、课程首页 content/courses/hugo-blox/_index.md 都用{{ cards }}{{ card }}组织章节导航。Spoiler折叠内容块Spoiler 短代码用于切换显示可折叠内容非常适合点击查看答案/剧透。用法{{ spoiler textClick to view the spoiler }} 这是折叠内容的正文。 Markdown 是**受支持**的。 {{ /spoiler }}text参数设定点击前的提示文字折叠内容中支持 Markdown 渲染。Steps教程步骤序列Steps 短代码用于展示一系列步骤例如教程步骤标题使用Markdown 三级标题###表示。用法{{% steps %}} ### Step 1 第一步的操作说明…… ### Step 2 第二步的操作说明…… ### Step 3 第三步的操作说明…… {{% /steps %}}注意这里使用的是{{% %}}百分号围栏Hugo 中{{% %}}形式会先渲染内部的 Markdown 内容三级标题会被处理为步骤标题而{{ }}尖括号形式不渲染内部 Markdown。本仓库的 getting-started.md 正是用{{% steps %}}组织从模板创建站点的四步流程可作为真实范例对照。富媒体内容视频、音频、数学、代码与图标格式化目录下的 media.md 进一步展示了 Hugo Blox 对技术类内容的全方位支持嵌入视频、播客、代码、LaTeX 数学甚至用折叠块测试学生。视频三种方式任选{{ youtube w7Ft2ymGmfc }} !-- YouTube -- {{ bilibili idBV1WV4y1r7DF }} !-- Bilibili -- {{ video srcmy_video.mp4 controlsyes }} !-- 视频文件 --视频文件可放在assets/media/媒体库或放在页面自己的文件夹Page Bundle中。播客 / 音频把 MP3 文件放入页面文件夹或媒体库然后用 audio 短代码嵌入{{ audio srcambient-piano.mp3 }}本仓库的 guide/formatting/ambient-piano.mp3 就是为这个短代码准备的真实音频文件。用 Spoiler 测试学生提供简单有趣的自我评估用spoiler短代码揭示挑战题的答案{{ spoiler text点击查看答案 }} 你找到答案了 {{ /spoiler }}数学公式Hugo Blox 支持 $\LaTeX$ 数学扩展通过在config/_default/params.yaml中切换math选项开启本仓库 params.yaml 中hugoblox.content.math.enable默认关闭需开启才能渲染。行内公式用{{ math }}$...${{ /math }}块级公式用{{ math }}$$...$${{ /math }}。之所以要把 LaTeX 包在math短代码里是为了防止 Hugo 把数学内容误当作 Markdown 处理。块级公式示例{{ math }} $$ \gamma_{n} \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2} $$ {{ /math }}行内公式示例{{ math }}$\nabla F(\mathbf{x}_{n})${{ /math }}。多行数学可用\\换行LaTeX 的cases环境{{ math }} $$f(k;p_{0}^{*}) \begin{cases}p_{0}^{*} \text{if }k1, \\ 1-p_{0}^{*} \text{if }k0.\end{cases}$$ {{ /math }}代码高亮Hugo Blox 利用 Hugo 的 Markdown 扩展进行代码语法高亮代码主题在config/_default/params.yaml中选择本仓库 hugo.yaml 的markup.highlight段即控制高亮行为如lineNos开关。普通围栏代码块即可import pandas as pd data pd.read_csv(data.csv) data.head()内联图标用icon短代码在行内插入图标{{ icon namepython }} Python结语至此Guide 章节的三大主题已经打通先理解content/、assets/、config/_default/、static/uploads/四大目录与_index.md命名约定再掌握menus.yaml菜单、左右侧边栏与params.yaml功能开关最后用 Button、Callout、Cards、Spoiler、Steps 与媒体短代码把内容写活。这套知识可以直接套用到本仓库的任意板块例如给 content/blog 的文章加 Callout 提示、给 content/publications 列表页设计卡片导航、或在 content/slides 演示中嵌入数学公式。若需要更深层的定制如主题自定义与多语言可继续阅读课程的 reference 章节content/courses/hugo-blox/reference/并以仓库根目录的 hugoblox.yaml 与 config/_default/ 为起点逐步探索。赞分享前端【免费下载链接】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点击查看免费下载相关推荐Agent Reach社区与支持渠道指南Issue、微信群与作者邮箱全汇总Agent Reach社区与支持渠道指南Issue、微信群与作者邮箱全汇总 Agent Reach 是一款开源 CLI 工具给你的 AI Agent 一键装人工智能AI Agent工具调用AI 技能MCP 服务网页爬虫Hugo Blox Builder 学术模板入门用 Markdown 与配置搭建 Academic CV 个人站点的完整实战指南Hugo Blox Builder 学术模板入门用 Markdown 与配置搭建 Academic CV 个人站点的完整实战指南 Hugo Blox Buil静态站点前端开发工具Hugo Blox Academic CV 中预印本/工作论文Preprint页面的完整配置指南Hugo Blox Academic CV 中预印本/工作论文Preprint页面的完整配置指南 导读 本指南以 Hugo Blox Academic CV静态站点前端开发工具上一篇uBlock Origin终极指南5分钟打造无广告、超安全的浏览器体验下一篇Perform String ShiftsLeetCode 1427双解法详解字符串循环移位与净位移合并技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
