Hugo 主题
Hugo Flex
一个利用 CSS Flexbox 的轻量级 Hugo 主题。
Hugo Flex
一个利用 CSS Flexbox 的轻量级 Hugo 主题。
此主题经验证可与 Hugo 版本 v0.134.0–v0.139.0 配合使用。
功能
- 基于 Flexbox 的响应式布局
- PageSpeed Insights 上 100% 的性能和可访问性评分
- 无框架
- 无 Javascript
- RSS 源中的完整文章
- RSS 页面看起来像普通页面
- 多语言支持
- 暗黑主题
可选功能
- 服务器端数学渲染
- 语法高亮
- 在主页上显示摘要
- Schema.org、Open Graph 和 Twitter Cards 元数据
- Utterances 评论小部件
- 可以在站点范围内添加自定义 CSS 和 JS,或者使用简码动态添加
- 内置简码
- Netlify 联系表单
- 保护隐私的 SoundCloud 播放器
示例
演示站点由 hugo-flex-demo 存储库构建。
一个专门为该主题制作的完整启动模板也可在 scivision/hugo-flex-example 获得。
安装
安装 Hugo。
创建一个 Hugo 站点。
在站点根目录打开命令提示符并下载主题
git init git submodule add https://github.com/ldeso/hugo-flex.git themes/hugo-flex
将主题添加到站点配置。如果站点配置是名为
hugo.yaml
的文件echo 'theme: hugo-flex' >> hugo.yaml
更新
在站点的根目录打开命令提示符并更新主题
git submodule update --remote --rebase
配置
可以将默认主题配置的任何部分复制到站点配置以进行修改。默认主题配置是
baseURL: https://example.org/
title: My New Hugo Site
languageCode: en-US
theme: hugo-flex
params:
color: teal # Any color in CSS syntax
width: 42rem # Any length in CSS syntax / leave empty to span page
divider: \2500\2500 # Any string in CSS syntax / leave empty for no divider
footer: >- # HTML spaces ( ) are needed before HTML elements
Except where otherwise noted, content on this site is licensed under a  
<a href="http://creativecommons.org/licenses/by/4.0/" rel="license">Creative
Commons Attribution 4.0 International License</a>.
rss: To subscribe to this RSS feed, copy its address and paste it into your
favorite feed reader.
favicon: false # Set to true to add a link to the favicon.ico
noClasses: &nc false # Set to true to use inline CSS for syntax highlighting
katex: 0.16.11 # KaTeX version / leave empty to use the latest version
headingoffset: 0 # Change heading levels when rendering markdown
linkicons: false # Set to hover or true to add a link icon to headings
summaries: false # Set to true to show summaries of posts on homepage
schema: false # Set to true to add Schema.org metadata
opengraph: false # Set to true to add Open Graph metadata
twittercards: false # Set to true to add Twitter Cards metadata
utterances:
repo: # Set to Utterances repo URL to add Utterances comments
issueterm: # Leave empty for the default blog post to issue mapping
theme: # Leave empty to use the adaptive Utterances dark theme
netlify:
honeypot: false # Set to true to add honeypot field in contact form
recaptcha: false # Set to true to add recaptcha challenge in contact form
# css: # Uncomment to add custom CSS from the assets directory
# - css/foo.css
# - bar.css
# js: # Uncomment to add custom JS from the assets directory
# - js/foo.js
# - bar.js
markup:
highlight:
noClasses: *nc # Set to same value as params.noClasses
goldmark:
extensions:
passthrough:
enable: false # Set to true to render math in LaTeX notation globally
delimiters:
block:
- ['\[', '\]']
- ['$$', '$$']
inline:
- ['\(', '\)']
menu:
main:
- name: About
pageRef: /about
weight: 1
- name: Posts
pageRef: /post
weight: 2
- name: Tags
pageRef: /tags
weight: 3
- name: Categories
pageRef: /categories
weight: 4
- name: RSS
pageRef: /
weight: 5
params:
- format: rss
outputFormats:
rss:
mediatype: application/rss+xml
baseName: feed # Rename RSS feed URL from rss.xml to feed.xml
默认情况下,日期显示在所有普通页面的标题中,并隐藏在特殊页面上。可以通过在其前端设置 showdate
参数来在特定页面上覆盖此设置。例如,可以通过将“关于”页面的前端设置为以下内容来隐藏日期
+++
title = "About"
date = 2006-01-02
[params]
showdate = false
+++
数学渲染
用 LaTeX 表示法编写的数学公式可以渲染为 HTML,而无需使用 javascript。渲染可以全局进行,也可以使用内置的简码在特定位置进行。
要全局渲染数学,请在站点配置中启用 passthrough 扩展。
Inline formulas such as $y=ax+b$ are supported, displayed formulas as well: $$ e^{i\pi}+1=0 $$
要在特定位置渲染数学表达式,请用
math
简码将其包围Inline formulas such as {{< math >}}y=ax+b{{< /math >}} are supported, displayed formulas as well: {{< math displayMode=true >}} e^{i\pi}+1=0 {{< /math >}}
语法高亮
默认情况下,Hugo 中的语法高亮会将内联样式添加到语法高亮器生成的 HTML 代码中。如果站点有严格的内容安全策略,这可能会有问题。此主题使可以自动使用外部样式表进行语法高亮。
要使用外部样式表而不是内联样式,请在站点配置中将选项 markup.highlight.noClasses 和 params.noClasses 切换为 false。生成的外部样式表仅包含在站点中需要它的页面上。
默认的语法高亮样式称为 github-dark。要使用不同的样式,可以通过在站点根目录运行以下命令在位置 assets/css/syntax.css
生成样式表
hugo gen chromastyles --style style-name > assets/css/syntax.css
具有高对比度和与暗黑模式良好兼容性的样式称为 average、doom-one、doom-one2、github-dark、modus-operandi(浅色背景)、modus-vivendi、rrt 和 witchhazel。
内置简码
Netlify 联系表单
可以使用简码插入与 Netlify Forms 服务配合使用的联系表单
{{< contact >}}
可以为成功页面提供自定义 URL 作为参数
{{< contact "/success" >}}
SoundCloud 播放器
可以使用简码插入一个保护隐私的 SoundCloud 播放器
{{< soundcloud https://soundcloud.com/artist/track >}}
嵌入式播放器仅在用户输入后加载,如果禁用 JavaScript,则会被一个简单的链接替换。
自定义 CSS 和 JS
此主题提供了两种添加自定义 CSS 或 JS 资源的方法,允许在不需要创建分支的情况下应用小的修改。
站点范围
自定义 CSS 和 JS 文件可以作为每个页面链接的基本资源的一部分加载。为此,必须将它们的文件名添加到站点配置中
params:
css:
- css/foo.css
- bar.css
js:
- js/foo.js
- bar.js
路径是相对于资源目录的。在此示例中,相对于站点根目录的文件路径将是:assets/css/foo.css
、assets/bar.css
、assets/js/foo.js
和 assets/bar.js
。
动态嵌入
有时,仅在特定页面上才需要自定义 CSS 或 JS。此主题提供了一种通过短代码加载 CSS 或 JS 资源的机制。这些资源在每个页面上仅加载一次,即使同一页面中的多个短代码需要它们也是如此。
要在使用短代码的每个页面上加载 CSS 或 JS 资源,短代码模板必须将资源添加到页面暂存区的 css
或 js
键中。例如,包含以下行的短代码模板 myshortcode.html
{{ resources.Get "myscript.js" | .Page.Store.SetInMap "js" "myscript" }}
将导致 myscript.js
在使用 myshortcode
的每个页面上加载。
作为一个实际的例子,这是内置的 SoundCloud 短代码的模板
{{ resources.Get "css/soundcloud.css" | .Page.Store.SetInMap "css" "soundcloud" }}
{{ resources.Get "js/soundcloud.js" | .Page.Store.SetInMap "js" "soundcloud" }}
<div class="Soundcloud">
<a href="{{ .Get 0 }}" target="_blank" class="Soundcloud-box Soundcloud-box--link"><span class="Soundcloud-ellipsis">{{ .Get 0 }}</span></a>
</div>
许可证
本主题基于 Apache License 2.0 许可证发布。