定制Eureka

2020-10-20
7分钟阅读时长

内容管理中,你已经了解了 Eureka 的各类内容。接下来我们将介绍 Eureka 的定制化选项。本文将带领你了解 Eureka 的配置方式及其选项。

样式

你可以通过设置config/_default/params.yaml中的style属性自定义 Eureka 的颜色及字体。将该属性设置为default或留空将会使用默认样式。

如果你希望自定义样式,你可以在data/styles/中创建一个以你的样式名称命名的配置文件。接下来将style属性设置为你的样式名称即可。你可以参考默认样式中可配置的属性。

导航栏

你可以简单快捷的定义网页导航栏的内容。在config/_default/menus.yaml中,有多个main模块,只需根据示例文件中的内容进行修改即可。例如在导航栏加入 archive 页只需加入以下内容即可:

main:
  - name: Archive
    url: /archive/
    weight: 40

需要注意的是,导航栏的顺序按weight的大小升序排列。

代码高亮

Eureka 使用 highlight.js 渲染代码高亮。如需配置 highlight.js,只需对config/_default/params.yaml中的highlight进行相关配置即可。

highlight.handler(string)

可选值为 highlightjs。

highlight.highlightjs.languages(list)

highlight.js 默认会包含部分常见语言,通过该属性可配置默认语言外的其他语言。查看可用的语言

highlight.highlightjs.style(string)

Eureka 默认使用 highlight.js 的 solarized-light 样式,通过该属性可配置使用的样式。查看可用的样式

数学公式

Eureka 支持使用 KaTeX 渲染 LaTeX 数学公式。如需配置 KaTeX,只需对config/_default/params.yaml中的math进行相关配置即可。

math.handler(string)

可选值为katex,留空则不启用该功能。

math.katex(object)

KaTeX 相关配置。具体可选值可参考:Options · KaTeX。由于 Eureka 使用了 KaTeX 的自动渲染拓展,因此链接中的displayMode属性将会被忽略。

因为 Hugo 的配置文件为大小写不敏感的,因此你需要在大写字母前添加-_。例如,throwOnError应写作throw-On-Error或其他有效形式。

Eureka 也支持对每个界面是否启动数学公式渲染进行单独配置。例如你有以下文件结构的项目:

content/
├── posts
│   ├── post-1.md
│   ├── post-2.md
│   └── ...
│
└── docs
    ├── doc-1
    │   ├── content-1.md
    │   ├── content-2.md
    |   ├── nested-doc
    │   |   ├── nested-content-1.md
    │   |   ├── nested-content-2.md
    |   |   └── _index.md
    │   └── _index.md
    └── ...

你可以在任意一级文件的 Front Matter 内设置enableMath属性的值,这会影响该页面或该章节下的所有页面。优先级为 Page > Section > Site。例如我在nested-doc的 Front Matter 中设置enableMath: fasle而在nested-content-1.md的 Front Matter 中设置enableMath: true则会使nested-content-1.md渲染数学公式而nested-doc文件夹中的其他文件不进行渲染。

评论

Eureka 支持使用 Disqus,Utterances 和 Commento 作为评论系统。如需配置评论,只需对config/_default/params.yaml中的comment进行相关配置即可。

Eureka 也支持对每个界面是否启动评论进行单独配置。例如你有以下文件结构的项目:

content/
├── posts
│   ├── post-1.md
│   ├── post-2.md
│   └── ...
│
└── docs
    ├── doc-1
    │   ├── content-1.md
    │   ├── content-2.md
    |   ├── nested-doc
    │   |   ├── nested-content-1.md
    │   |   ├── nested-content-2.md
    |   |   └── _index.md
    │   └── _index.md
    └── ...

你可以在任意一级文件的 Front Matter 内设置enableComment属性的值,这会影响该页面或该章节下的所有页面。优先级为 Page > Section > Site。例如我在nested-doc的 Front Matter 中设置enableComment: fasle而在nested-content-1.md的 Front Matter 中设置enableCommenth: true则会使nested-content-1.md启用评论而nested-doc文件夹中的其他文件不启用评论。

comment.handler(string)

可选值为disqusutterancesvalinecommento,留空则不启用该功能。

comment.disqus.shortname(string)

Disqus 的 shortname 值。

comment.utterances(object)

Utterances 相关配置。具体可选值可参考:utterances。如果你希望 Utterances 的色彩模式跟随 Eureka,只需将配置项中的theme设为eureka即可。

comment.valine(object)

Valine 相关配置。具体可选值可参考:配置项 | Valine

因为 Hugo 的配置文件为大小写不敏感的,因此你需要在大写字母前添加-_。例如,appId应写作app-Id或其他有效形式。

comment.commento.url

如果你的 commento 为自托管的,该值为你的网址(例如https://commento.example.com)。否则留空。

图表

Eureka 支持使用 Mermaid 渲染图表。如需配置 Mermaid,只需对config/_default/params.yaml中的diagram进行相关配置即可。

diagram.handler(string)

可选值为mermaid,留空则不启用该功能。

diagram.mermaid(object)

Mermaid 相关配置。具体可选值可参考:Configuration handling in Mermaid API

因为 Hugo 的配置文件为大小写不敏感的,因此你需要在大写字母前添加-_。例如,diagramPadding应写作diagram-Padding或其他有效形式。

基本配置文件

config/_default/config.yaml中定义了部分基本配置,帮助你设置网站的一些基础功能。本章节将不涉及前文已包含的内容。

baseURL(string)

网站根域名。

title(string)

网站标题。

theme(string)

网站使用的主题。

paginate(int)

每页内容数量。

copyright(string)

网站版权声明,会出现在网页最下方。

enableGitInfo(bool)

是否使用 git 信息。默认为false

enableEmoji(bool)

是否使用 emoji,默认为false

summaryLength(int)

概要长度,默认为 70。

defaultContentLanguage(string)

默认语言的语言代码。

hasCJKLanguage(bool)

是否包含中文、日语、韩语内容,默认为false

defaultContentLanguageInSubdir(bool)

多语言时默认语言是否处在子链接下,例如默认语言为zh时,/将会被重定向至/zh/

googleAnalytics(string)

Google Analytics 代码。从0.2.1开始,Google Analytics 只在生产环境中生成。如果你想在开发环境中预览,你需要设置 Hugo 环境变量为production

markup.tableOfContents(object)

内容目录渲染方式。

markup.tableOfContents.startLevel(int)

开始渲染目录的标题层级。

markup.tableOfContents.endLevel(int)

结束渲染目录的标题层级。

markup.tableOfContents.ordered(bool)

是否生成有序列表。

taxonomies(object)

网站中的所有 Taxonomies。

build(object)

构建设置。

build.useResourceCacheWhen(string)

使用缓存文件进行渲染,如无特殊情况请保持always

除此之外,Hugo 还有一些预定义的基本配置,具体可参考Configure Hugo

参数配置文件

除了基本配置外,你还可以设置一些 Eureka 提供的属性。本章节将不涉及前文已包含的内容。

mainSections(list)

列表中的类型将会显示在首页上。

description(string)

网站的描述。

repoEditURL(string)

内容编辑网址,可在params.yaml或 Front Matters 中定义。值为当前目录对应的仓库编辑地址。

例如在params.yaml中定义repoEditURL: https://github.com/<username>/<repo>/blob/<branch>即可在每篇文章最下方显示对应链接。

如果只想显示content/docs中的内容则可在该文件夹的_index.md的 Front Matters 中定义repoEditURL: https://github.com/<username>/<repo>/blob/<branch>/content/docs。其他各层次同理。

titleSeparator(string/list)

设置网页标题的分隔符。默认值为|

如只需单层次的分隔符则以字符串形式输入。例如输入titleSeparator: '-'则网页标题将类似于Eureka - 技术公馆

如需多层次的分隔符则以列表形式输入,例如输入titleSeparator: ['|', '-']则在需要多层次的标题中将显示为主页配置 - Eureka | 技术公馆。其他位置将显示为Eureka | 技术公馆

dateFormat(string)

网站中显示日期的格式,配置应满足 Go 语言的相应格式

colorScheme(string)

网站默认颜色模式。可选值为autolightdark。留空为auto

siteType(string)

网站类型。

icon(string)

网站图标,设置方式可参考加载图片

publisherName(string)

发布者姓名。

publisherLogo(string)

发布者图标,为空则为网站图标。


喜欢Eureka就请点个Star吧! Star
上一页 内容管理
下一页 多语言模式