Hugo 主题
终端
演示:https://panr.github.io/hugo-theme-terminal-demo/
创建您自己的配色方案:https://panr.github.io/terminal-css/
⚠️ 该主题至少需要 Hugo Extended v0.90.x。
- 功能
- 内置短代码
- 代码高亮
- 如何开始
- 如何运行您的站点
- 如何配置
- 文章原型
- 附加组件
- 如何编辑主题
- 发现错误?
- 新的酷炫想法或功能
- 终端主题用户?
- 许可证
功能
- 由 Terminal.css 生成的完全可自定义的配色方案。
- Fira Code 作为默认等宽字体。它非常漂亮!
- 基于 PrismJS 的非常漂亮的双色调自定义语法高亮
- 完全响应式
- 完全基于 Hugo 生态系统(管道和模块)
内置短代码
image
(必需属性:src
;可选属性:alt
、position
(左侧为默认值 | center | right)、style
)- 例如
{{< image src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" >}}
figure
(与image
相同,加上一些可选属性:caption
、captionPosition
(left | center 为默认值 | right)、captionStyle
)- 例如
{{< figure src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" caption="Hello Friend!" captionPosition="right" captionStyle="color: red;" >}}
code
(必需属性:language
;可选属性:title
、id
、expand
(默认“△”)、collapse
(默认“▽”)、isCollapsed
)- 例如
{{< code language="css" title="Really cool snippet" id="1" expand="Show" collapse="Hide" isCollapsed="true" >}} pre { background: #1a1a1d; padding: 20px; border-radius: 8px; font-size: 1rem; overflow: auto; @media (--phone) { white-space: pre-wrap; word-wrap: break-word; } code { background: none !important; color: #ccc; padding: 0; font-size: inherit; } } {{< /code >}}
代码高亮
基于 PrismJS 的自定义语法高亮。您所需要做的就是像这样包装您的代码
```html
// your code here
```
支持的语言:actionscript, apacheconf, applescript, bash, c, clike, cmake, coffeescript, cpp, csharp, csp, css, css-extras, diff, django, docker, elixir, elm, erlang, flow, fsharp, git, go, graphql, haml, handlebars, haskell, http, java, javascript, json, jsx, kotlin, latex, less, llvm, makefile, markdown, markup, markup-templating, nasm, objectivec, ocaml, perl, php, php-extras, powershell, processing, pug, python, r, reason, ruby, rust, sass, scala, scheme, scss, sql, stylus, swift, textile, toml, tsx, twig, typescript, vim, visual-basic, wasm, yaml。
如何开始
您可以手动下载主题,方法是访问 https://github.com/panr/hugo-theme-terminal.git 并将其粘贴到您根目录中的 themes/terminal
中。
您还可以选择以下 3 种方式之一来安装主题
- 作为 Hugo 模块
- 作为独立的本地目录
- 作为 git 子模块
⚠️ 该主题至少需要 Hugo Extended v0.90.x。
将主题安装为 Hugo 模块
# If this is the first time you're using Hugo Modules
# in your project. You have to initiate your own module before
# you fetch the theme module.
#
# hugo mod init [your website/module name]
hugo mod get github.com/panr/hugo-theme-terminal/v4
并在您的配置文件中添加
[module]
# this is needed when you fetch the theme as a submodule to your repo.
# replacements = "github.com/panr/hugo-theme-terminal/4 -> themes/terminal"
[[module.imports]]
path = 'github.com/panr/hugo-theme-terminal/v4'
请记住,该主题默认不会显示在 themes
目录中。这意味着您正在使用主题,就像您获取它时仓库中的样子。您的本地 go.sum
文件保留所有引用。请阅读官方文档中有关 Hugo 模块的更多信息。
在本地安装主题
git clone https://github.com/panr/hugo-theme-terminal.git themes/terminal
这将把仓库直接克隆到 themes/terminal
目录中。
将主题安装为子模块
git submodule add -f https://github.com/panr/hugo-theme-terminal.git themes/terminal
这会将仓库作为子模块安装在 themes/terminal
目录中。
⚠️ 如果您遇到任何问题
Error: module "terminal" not found; either add it as a Hugo Module or store it in "[...your custom path]/themes".: module does not exist
那么请尝试从您的配置文件中删除 theme = "terminal"
。
如何运行您的站点
hugo server -t terminal
然后在浏览器中访问 localhost:1313
。从现在开始,您所做的所有更改都将实时生效,因此您无需每次都刷新浏览器。
如何配置
该主题不需要任何高级配置。只需复制
baseurl = "/"
languageCode = "en-us"
# Add it only if you keep the theme in the `themes` directory.
# Remove it if you use the theme as a remote Hugo Module.
theme = "terminal"
paginate = 5
[params]
# dir name of your main content (default is `content/posts`).
# the list of set content will show up on your index page (baseurl).
contentTypeName = "posts"
# if you set this to 0, only submenu trigger will be visible
showMenuItems = 2
# show selector to switch language
showLanguageSelector = false
# set theme to full screen width
fullWidthTheme = false
# center theme with default width
centerTheme = false
# if your resource directory contains an image called `cover.(jpg|png|webp)`,
# then the file will be used as a cover automatically.
# With this option you don't have to put the `cover` param in a front-matter.
autoCover = true
# set post to show the last updated
# If you use git, you can set `enableGitInfo` to `true` and then post will automatically get the last updated
showLastUpdated = false
# Provide a string as a prefix for the last update date. By default, it looks like this: 2020-xx-xx [Updated: 2020-xx-xx] :: Author
# updatedDatePrefix = "Updated"
# whether to show a page's estimated reading time
# readingTime = false # default
# whether to show a table of contents
# can be overridden in a page's front-matter
# Toc = false # default
# set title for the table of contents
# can be overridden in a page's front-matter
# TocTitle = "Table of Contents" # default
# Set date/time format for posts
# This will impact the date/time displayed on
# index.html, the posts list page, and on posts themselves
# This value can also be configured per-post on front matter
# If you have any issues with the timezone rendering differently
# than you expected, please ensure your timezone is correctly set
# on your server.
# This value can be customized according to Hugo documentation:
# https://gohugo.com.cn/functions/time/format/
# Default value (no changes needed):
# dateFormat = "2006-01-02"
# Example format, with date, time, and timezone abbreviation:
# dateFormat = "2006-01-02 3:04:06 PM MST"
[params.twitter]
# set Twitter handles for Twitter cards
# see https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started#card-and-content-attribution
# do not include @
creator = ""
site = ""
[languages]
[languages.en]
languageName = "English"
title = "Terminal"
[languages.en.params]
subtitle = "A simple, retro theme for Hugo"
owner = ""
keywords = ""
copyright = ""
menuMore = "Show more"
readMore = "Read more"
readOtherPosts = "Read other posts"
newerPosts = "Newer posts"
olderPosts = "Older posts"
missingContentMessage = "Page not found..."
missingBackButtonLabel = "Back to home page"
minuteReadingTime = "min read"
words = "words"
[languages.en.params.logo]
logoText = "Terminal"
logoHomeLink = "/"
[languages.en.menu]
[[languages.en.menu.main]]
identifier = "about"
name = "About"
url = "/about"
[[languages.en.menu.main]]
identifier = "showcase"
name = "Showcase"
url = "/showcase"
[module]
# In case you would like to make changes to the theme and keep it locally in you repository,
# uncomment the line below (and correct the local path if necessary).
# --
# replacements = "github.com/panr/hugo-theme-terminal/v4 -> themes/terminal"
[[module.imports]]
path = 'github.com/panr/hugo-theme-terminal/v4'
注意: 请记住,目前 main menu
不支持嵌套。
文章原型
请参阅主题支持的默认 post
文件参数 - https://github.com/panr/hugo-theme-terminal/blob/master/archetypes/posts.md
附加组件
- 评论 — 要为您的博客文章添加评论,请查看
layouts/partials/comments.html
https://github.com/panr/hugo-theme-terminal/blob/master/layouts/partials/comments.html。 - 扩展头 — 请查看
layouts/partials/extended_head.html
https://github.com/panr/hugo-theme-terminal/blob/master/layouts/partials/extended_head.html - 扩展页脚 — 请查看
layouts/partials/extended_footer.html
https://github.com/panr/hugo-theme-terminal/blob/master/layouts/partials/extended_footer.html
如何编辑主题
如果您将其用作远程 Hugo 模块(您的 theme/terminal
中没有主题文件),并且您只需要覆盖某些样式,您可以通过在您的根目录中添加 static/style.css
并指定您想要更改的内容来轻松实现此目的。
如果你的主题文件位于主题目录中,那么你可以直接编辑主题中的任何内容,只需进入 themes/terminal
并修改文件即可。无需编译步骤。
发现错误?
如果你发现任何错误,请使用 Issue Tracker (问题追踪器) 或创建一个新的 Pull Request (拉取请求) 来修复该问题。
有新的酷炫想法或功能?
该主题自 2019 年以来一直在不断开发,并拥有许多很酷的功能,这些功能帮助了你们很多人,并使主题变得更好。但也存在许多我不确定的功能,因为我想尽可能保持主题的简洁性。
所以,假设你有一个关于如何扩展主题的想法。这很棒,欢迎你这样做,只需按照以下步骤操作
- Fork (复刻) 该主题
- 实现该功能
- 编写如何使用该功能的说明
- 为其他用户提供该实现的工作示例
- 将关于你的工作的信息添加到
COMMUNITY-FEATURES.md
中 - 创建一个包含编辑过的
COMMUNITY-FEATURES.md
的 PR (拉取请求)
这将有助于保持主题的原始性,并允许任何希望改进它并满足其需求的人,去做他们想做的任何事情。
听起来不错吗?太棒了,我们开始吧!🤘
终端主题用户?
我很高兴能更多地了解你以及你在做什么。如果你想分享它,请做出贡献并将你的网站添加到列表中!🤗
许可证
版权所有 © 2019-2024 Radosław Kozieł (@panr)
该主题根据 MIT 许可证发布。有关其他许可信息,请查看原始主题许可证。