Hugo 主题
Hugo ReFresh
一个多页、简洁且响应式的主题。支持多语言。
适用于 Hugo 的 ReFresh 主题
ReFresh 是一个用于 Hugo 静态站点生成器的主题,灵感来源于出色的 Fresh 主题(您可以在下面找到对原始主题的更改列表)。
您可以在我的个人网站上找到 ReFresh 主题的实时演示。
此主题适用于个人网站和博客。如果您想扩展该主题以包含其他功能,请提交拉取请求。
入门
要使用 Hugo ReFresh 创建新站点
# Create site and cd into it
hugo new site my-site && cd my-site
# Clone the ReFresh theme into the themes folder
git init
git submodule add https://github.com/PippoRJ/hugo-refresh.git themes/hugo-refresh
# Remove the default config
rm config.toml
# Fetch the example config
curl -O https://raw.githubusercontent.com/PippoRJ/hugo-refresh/master/exampleSite/config.yaml
# Run the site locally
hugo server -D
# Open the site in your browser
open https://127.0.0.1:1313
要使用 Hugo ReFresh 运行示例站点
# Create site and cd into it
hugo new site my-site && cd my-site
# Clone the ReFresh theme into the themes folder
git init
git submodule add https://github.com/PippoRJ/hugo-refresh themes/hugo-refresh
# Remove the default config
rm config.toml
# Copy the Example site content and configuration in my-site
cp -R themes/hugo-refresh/exampleSite/* ./
# Open the site in your browser
hugo server -D
故障排除
如果在尝试运行 hugo server
时看到 error: failed to transform resource: TOCSS: failed to transform "style.sass"
错误,请确保您已安装了 Hugo 的扩展版本
# On Ubuntu:
snap refresh hugo --channel=extended
统计计数器
您可以将您的 Google / Yandex / 等统计计数器代码输入到 layouts/partials/counter.html
中。代码将在打开 <body>
标签后立即生成。
自定义 HEAD
如果您想在 HEAD
部分的末尾包含自定义脚本,请在 layouts/partials/custom_head.html
中创建一个文件并将您的内容添加到那里。
自定义您的页面
Hugo ReFresh 有不同的配置选项,包括:导航栏、侧边栏、主页、字体、颜色、着陆页、统计计数器和图像。请阅读 config.yaml
文件中的注释以了解更多信息。
在 config.yaml
文件中指定的图像需要放置在配置文件中 assetDir
选项指定的目录中。例如:将 assetDir: "static"
设置为站点的默认文件夹 static
文件夹。
您可以在文章中使用的简码列表及说明:
可以在这里找到这些简码的实时示例。
title1.html、title2.html、title3.html、title4.html、title5.html、title6.html
用法示例
{{< title1 "My awesome title" "my-title-id">}}
第一个参数是简码的标题(在此示例中为“My awesome title”)。
第二个参数是简码的 ID(在此示例中为“my-title-id”)。
它可以用作同一页面上的链接
[link to the title](#my-title-id)
subtitle1.html、subtitle2.html、subtitle3.html、subtitle4.html、subtitle5.html、subtitle6.html
用法示例
{{< subtitle1 "My awesome subtitle" "my-subtitle-id">}}
第一个参数是简码的标题(在此示例中为“My awesome subtitle”)。
第二个参数是简码的 ID(在此示例中为“my-subtitle-id”)。
它可以用作同一页面上的链接
[link to the subtitle](#my-subtitle-id)
code.html
此简码构建一个居中的页面,该页面是页面全尺寸的三分之二。
用法示例
{{< code language="shell" >}}
$ sudo bash -c 'echo 0 > /proc/sys/kernel/randomize_va_space'
{{< /code >}}
此简码有 2 个参数
line-numbers 用于隐藏或显示行号。默认值为 true,对于单行代码,永远不会显示行号。
language 用于正确突出显示代码的语法
codeWide.html
此简码构建一个居中的页面,该页面与页面的全尺寸一样宽。
用法示例
{{< codeWide language="shell" >}}
$ dmesg | tail
......
[13401.299114] overflow64[16566]: segfault at 616161616161 ip 0000616161616161 sp 00007fffffffddb0 error 14 in libc-2.27.so[7ffff79e4000+1e7000]
{{< /codeWide >}}
此简码有 2 个参数
line-numbers 用于隐藏或显示行号。默认值为 true,对于单行代码,永远不会显示行号。
language 用于正确突出显示代码的语法
container.html
此简码构建一个居中的页面,该页面与页面尺寸的三分之二一样宽。简码的内容将通过 Markdown 处理器。
用法示例
{{< container "container-id" >}}
{{< /container >}}
此简码有一个可选参数,用于为 html div
指定 ID。
containerWide.html
此简码构建一个居中的页面,该页面与页面的尺寸一样宽。简码的内容将通过 Markdown 处理器。
用法示例
{{< containerWide "container-wide-id" >}}
{{< /containerWide >}}
此简码有一个可选参数,用于为 html div
指定 ID。
figure.html
此简码会调整您指定的宽度和/或高度的图像大小
用法示例
{{< figure src="images/the_stack.png" width="700" >}}
{{< figure src="images/the_stack.png" height="700" >}}
参数 src 是图像相对于使用简码的文件位置的位置。
参数 width 是图像的宽度。
参数 height 是图像的高度。
参数 caption 是图像的标题。
参数 alt 是图像的 alt 属性。
twoFigure.html
此简码显示 2 个图像,彼此相邻,可以调整它们的大小。
用法示例
{{< twoFigure src1="images/overflow_1.png" width1="700" src2="images/overflow_2.png" width2="700" >}}
参数 src1 是右侧图像相对于使用简码的文件位置的位置。
参数 width1 是右侧图像的宽度。
参数 height1 是右侧图像的高度。
参数 caption1 是右侧图像的标题。
参数 alt1 是右侧图像的 alt 属性。
参数 src2 是左侧图像相对于使用简码的文件位置的位置。
参数 width2 是左侧图像的宽度。
参数 height2 是左侧图像的高度。
参数 caption2 是左侧图像的标题。
参数 alt2 是左侧图像的 alt 属性。
在小屏幕上,这些图像将一个接一个地显示。
请参阅此处的用法示例
twoVideos.html
此简码显示 2 个 YouTube 视频,彼此相邻。
用法示例
{{% twoVideos id2="pKRzfdIJUZE" id1="Ncv2KmhVgyU" autoplay1=true ratio1="4:3" ratio2="16:9" %}}
参数 id1 是左侧视频的 ID
参数 id2 是右侧视频的 ID
参数 autoplay1 用于启动左侧的视频(视频将以静音状态启动)。将其设置为“true”以激活自动播放。
参数 autoplay2 用于启动左侧的视频(视频将以静音状态启动)。将其设置为“true”以激活自动播放。
参数 ratio1 用于指定左侧视频的比例。它可以是 “16:9” 或 “4:3”。默认值为 “16:9”。
参数 ratio2 用于指定右侧视频的比例。它可以是 “16:9” 或 “4:3”。默认值为 “16:9”。
在小屏幕上,这些视频会上下排列显示。
book.html
用法示例
{{< book title="Title Awesome" authors="Awesome author" image="images/cover.jpg" size="300x">}}
参数 title 是书的标题。
参数 authors 包含书的作者。
参数 image 是书的封面。
参数 size 用于指定书的尺寸,单位是像素,格式为 “宽度” x “高度”。
例如:“300x” 表示宽度为 300 像素。
例如:“x300” 表示高度为 300 像素。
请参阅此处的用法示例
exercise.html
用法示例
{{< exercise >}}
Text of the exercise.
{{< /exercise >}}
此短代码没有参数。
请参阅此处的用法示例
tabsCode.html
用法示例
{{< tabsCode
file1="/content/code_exercises/staircase_n_steps/code/solution_python.md" language1="python" title1="Python" icon1="python"
file2="/content/code_exercises/staircase_n_steps/code/solution_c.md" language1="c" title2="C" icon2="c"
file3="/content/code_exercises/staircase_n_steps/code/solution_java.md" language1="java" title3="Java" icon3="java"
>}}
参数 file1 是要在第一个选项卡中显示的代码文件名。路径需要从 content
文件夹开始。
参数 language1 用于正确高亮显示代码的语法。参数 title1 是第一个选项卡的标题。
参数 icon1 是显示在标题右侧的图标,这是一个可选参数。请参阅部分代码 icon.html
以获取可用的图标。
目前支持 6 个选项卡。
文件参数是 file1、file2、file3、file4、file5、file6
标题参数是 title1、title2、title3、title4、title5、title6
语言参数是 language1、language2、language3、language4、language5、language6
图标参数是 icon1、icon2、icon3、icon4、icon5、icon6
请参阅此处的用法示例
tabs.html
用法示例
{{< tabs
file1="/content/exercises/article1/comments/my_comments.md" title1="My Ideas"
file2="/content/exercises/article1/comments/your_comments.md" title2="Your Ideas"
file3="/content/exercises/article1/comments/her_comments.md" title3="Her Ideas"
>}}
文件的内容 (file1, file2 …) 会通过 Markdown 处理器处理,因此您可以在这些文件中使用 Markdown。
参数 file1 是要在第一个选项卡中显示的代码文件名。路径需要从 content
文件夹开始。
参数 title1 是第一个选项卡的标题。
参数 icon1 是显示在标题右侧的图标,这是一个可选参数。请参阅部分代码 icon.html
以获取可用的图标。
目前支持 6 个选项卡。
文件参数是 file1、file2、file3、file4、file5、file6
标题参数是 title1、title2、title3、title4、title5、title6
图标参数是 icon1、icon2、icon3、icon4、icon5、icon6
codeInLine.html
用法示例
{{< codeInline >}}sudo echo 0 > /proc/sys/kernel/randomize_va_space{{< /codeInline >}}
此简码有 2 个参数
language 用于正确突出显示代码的语法
id 用于设置 html
code
元素的 id。
请在此处查看使用示例
messageBlue.html, messageDark.html, messageGreen.html, messageRed.html, messageYellow.html
notificationBlue.html, notificationGreen.html, notificationRed.html, notificationYellow.html
siteBlue.html, siteGreen.html, siteLightgreen.html, siteRed.html, siteYellow.html
用法示例
{{< siteLightgreen "Web" "https://www.example.com" >}}
<p>Description of the website.</p>
{{< /siteLightgreen >}}
第一个参数 将显示在短代码的右侧彩色部分。
第二个参数 将显示在短代码的中间部分。
请在此处查看使用示例
常规页面的自定义选项
这些是您可以在常规页面的 front matter 中定义的选项。
---
title: "My Awesome Title"
date: 2019-06-03T21:51:13+01:00
draft: false
hideLastModified: true
summaryImage: "images/system.jpg"
keepImageRatio: true
tags: ["Tag1", "tag2", "tag 3"]
summary: "This is a custom summary for my article"
showInMenu: true
---
summaryImage
:用于指定在摘要中使用的图片。keepImageRatio
:用于强制保持图像的纵横比。默认值为 false。summary
:用于指定文章的摘要,而不是从文章本身提取。hideLastModified
:用于隐藏文章末尾添加的时间戳。showInMenu
:用于在右上角的菜单中显示文章。tags
:文章的标签列表;它们将用于构建左侧边栏。
为了避免指定 summaryImage
时出现路径问题,建议将常规页面定义为叶子捆绑包。上面的示例将导致
* my_awesome_title (folder)
* index.md (file)
* images (folder)
* system.jpg (file)
多语言支持
要选择默认语言,您需要在 config.yaml
文件中设置 DefaultContentLanguage
设置。(您也可以同时拥有多种语言,请参阅 exampleSite/config.yaml
以获取示例。)
支持的语言有
英语
西班牙语
法语
意大利语
俄语
中文
波兰语
德语
葡萄牙语
如果您想添加缺失的语言,请提交功能请求。
对原始主题的修改列表
重大修改:ReFresh 主题从单页面模板转换为多页面。
新增:添加了多语言支持。
重大扩展:左侧菜单动态显示标签和出现次数,基于页面的内容生成(而不是像原始主题那样从配置文件中的列表生成)。
新增:主题图像的颜色会根据主颜色主题进行更改(即:现在使用
resources.ExecuteAsTemplate
处理,并将颜色写入生成的 SVG 图像)。新增:list 和 terms 类型的页面包含帖子摘要列表。
新增:用于构建摘要的图像可以调整大小,以便更好地利用带宽。
新增:js 和 css 文件可以缩小(在
config.yaml
上有一个可配置的选项)。重大扩展:菜单根据
content
文件夹的结构自动构建(而不是像原始主题那样从配置文件中的列表构建)。目前允许两级。删除:删除了原始主题的菜单中使用的
navbar-burger
(在调整页面大小时显示)。增强:
.sass
文件现在使用resources.ExecuteAsTemplate
处理,以便可以使用config.yaml
中的变量。增强:在
config.yaml
中添加了选项,用于配置导航栏、侧边栏和页面内容所使用的字体。增强:Bulma(主题基于的 css 框架)现在更新到 0.7.5 版本,因为在新版本中,content 类具有单独的样式,可以只修改帖子的内容。
扩展:添加了 highlight.js 以更好地突出显示帖子的代码部分。我选择了 monokai-sublime 样式。
扩展:添加了 highlightjs-line-number.js,以便在帖子代码部分的代码行的开头添加行号。
扩展:添加了 MathJax 的最小版本,以允许将 LaTeX 样式的数学表达式放置在站点中。
增强:添加了其他几个选项来个性化帖子的内容。
扩展:添加了一个短代码来调整图像大小并节省帖子内容中的带宽。
扩展:添加了一个短代码来显示多个选项卡。
扩展:添加了四个短代码来显示代码:内联、在页面中、在页面宽、在选项卡中。
增强:favicon 使用
resources.ExecuteAsTemplate
处理,以跟随页面的主颜色。扩展:为每个帖子添加了 Open Graph 元标签,以便在社交媒体网站上轻松分享。
重大扩展:所有 js 和 css 文件都在本地加载,即,不是从第三方站点加载。