Hugo 主题

上一个/下一个: 所有主题

risotto

一个受终端美学启发的极简、响应式主题。

下载
risotto

risotto

risotto 是一个受终端美学启发的极简、响应式 hugo 主题。

Hugo Themes Version hugo build status W3C Validation Code size

Screenshot of the risotto theme

特性

  • 纯粹的、语义化的 HTML，不使用 Javascript
  • 纯 CSS – 没有框架，没有预处理器，只有简单易于定制的样式表
  • 使用 CSS Grid 实现原生响应式行为，无需任意断点
  • 带有 16 种基于流行的终端主题的内置配色方案，并且可以使用 base16 系统使用自定义主题

安装

安装主题的最简单方法是下载最新版本并将其解压到项目的 themes/ 目录。您也可以将此存储库克隆到您站点的 themes 目录并检出最新版本

git clone https://github.com/joeroe/risotto themes/risotto && cd themes/risotto
rit checkout $(git tag -l | grep '^v[0-9.]*$' | sort -V | tail -n 1)

请注意，如果您的站点本身是一个 git 存储库，则此方法将不起作用。在这种情况下，您可以将主题添加为 git 子模块，但由于难以跟踪特定版本，因此不建议这样做。

更新

如果您使用 git clone 安装了主题，请拉取存储库以获取最新版本

cd themes/risotto
git pull

否则，只需下载最新版本并将其解压到项目的 themes/ 目录，替换旧版本。

配置

要使用主题，请将 theme = 'risotto' 添加到站点的 config.toml，或将 theme: risotto 添加到 config.yaml。

请参阅 exampleSite/config.toml，了解您需要添加到站点 config.toml 或 config.yaml 的主题特定参数，以配置主题。

配色方案

risotto 使用 base16 框架定义配色方案，该配色方案可以与 theme.palette 参数一起使用。主题捆绑了 16 种调色板（10 种深色，6 种浅色）：apprentice、base16-dark、base16-light、dracula、gruvbox-dark、gruvbox-light、material、papercolor-dark、papercolor-light、solarized-dark、solarized-light、tender、tokyo-night-dark、tokyo-night-light、windows-95 和 windows-95-light。默认值为 base16-dark。

使用其他 base16 样式的最简单方法是从 https://github.com/monicfenga/base16-styles/tree/master/css-variables 获取 .css 文件，并将其放置在 static/css/palettes 目录中。

或者要定义完全自定义的主题，您需要为以下 base16 颜色定义以下 CSS 变量（有关示例，请参阅 base16-dark.css）

基础默认颜色用于示例
00深色背景页面背景
01│备用背景内容背景
02│内联背景<pre>、<code>、<kbd>、<samp>
03│静音文本:before 和 :marker 符号
04│备用前景侧边文本
05│前景内容文本
06│
07浅色
08红色
09橙色
0A黄色高亮显示选定的文本，<mark>
0B绿色主要强调色Logo
0C青色活动链接a:active、a:hover
0D蓝色链接a:link、a:visited
0E洋红色
0F棕色

对于浅色模式调色板，00-07 的顺序应反转（从浅到深，而不是从深到浅）。请注意，并非所有颜色都已在主题中使用。

您可以使用方便类 .baseXX 和 .bg-baseXX 直接在内容中使用这些颜色。例如

<span class="base0A">Yellow text</span>
<mark class="base0D">Text highlighted in green</mark>

网站图标

risotto 将自动使用放置在 static/ 目录中的网站图标。以下文件将被检测到并包含在站点的 <head> 部分

  • favicon.ico
  • favicon-16x16.png
  • favicon-32x32.png
  • apple-touch-icon.png
  • site.webmanifest

您可以使用 favicon.io 或类似服务从图像或表情符号生成这些文件。它们必须直接放置在站点的 static/ 目录下，即不在子目录或 themes/risotto/static/ 中。

鸣谢

用作示例站点网站图标的“煮熟的米饭”表情符号由 Twemoji 项目创建，并根据 CC-BY 4.0 获得许可。

另请参阅