hugo toigian
1.0.0
使用 Tailwind CSS 的最小 Hugo 主題
Toigian-Tối giản（越南語）：極簡主義（英語）免責聲明：我不是前端開發人員，只是一個喜歡調整東西的人，所以我的程式碼可能不漂亮/乾淨。我嘗試學習 Tailwind CSS，hugo-toigian 就是結果。
這些螢幕截圖可能已過時。查看示範網站以取得最新資訊。
| 黑暗的 | 光 |
|---|---|
tối giản ）設計。深受 mellow.dev 的啟發。git 、 npm 。snap install hugo --channel=extendedpostcss-cli JavaScript 套件（ npm install -g postcss postcss-cli ）以及使用的任何 PostCSS 插件（例如， npm install -g autoprefixer ）。如果您使用 Hugo Snap 軟體包，則需要在 Hugo 網站目錄中本機安裝 PostCSS 和插件，例如，不含 -g 標誌的npm install postcss-cli 。 hugo new site hugo-example-site
cd hugo-example-site
git initgit submodule add https://github.com/ntk148v/hugo-toigian.git themes/hugo-toigian cd themes/hugo-toigian
npm installconfig.toml檔案中的主題。 theme = " hugo-toigian "hugo server -DF --disableFastRenderhugo --environment production --minify您可以將一些設定選項新增到 config.toml 檔案中。
baseURL = ' http://example.org/ '
languageCode = ' en-us '
title = ' Toigian '
theme = " hugo-toigian "
themesDir = " ../.. "
# (Optional) If you provide a Disqus shortname, comments will be enabled on
# all pages.
# disqusShortname = "my-site"
[ params ]
# (Optional, default true): Controls table of contents visibility on right side of pages.
# Start and end levels can be controlled with markup.tableOfContents setting.
toc = true
# (Optional, default true) Enables comments template on pages
# By default partials/docs/comments.html includes Disqus template
# See https://gohugo.io/content-management/comments/#configure-disqus
# Can be overwritten by same param in page frontmatter
comments = true
[ params . author ]
name = " Kien Nguyen-Tuan "
email = " [email protected] "
[ markup ]
defaultMarkdownHandler = " goldmark "
# By default, Goldmark trims unsafe outputs which might prevent some shortcodes from rendering.
# It is recommended to set markup.goldmark.renderer.unsafe=true if you encounter problems.
[ markup . goldmark ]
[ markup . goldmark . renderer ]
unsafe = true # Enable user to embed HTML snippets in Markdown content.
[ markup . highlight ]
codeFences = true
guessSyntax = true
lineNos = false
noClasses = false
tabWidth = 4
[ markup . tableOfContents ]
startLevel = 2
endLevel = 4
ordered = true
# The left side navbar at the top
[ menu ]
[[ menu . nav ]]
name = " About "
url = " /about "
weight = 2
[[ menu . nav ]]
name = " Posts "
url = " /posts "
weight = 3您可以在各個頁面的前面指定其他參數。
# Your posts tags
tags = [ ]
# If you have enabled comments for the site, you can disable it for specific pages
comment = true查看短代碼。
layouts/partials/中主題的元件。| 空部分 | 放置 | 用法 |
|---|---|---|
layouts/partials/custom/head.html | 關閉<head>標籤之前 | 新增自訂 css/js |
layouts/partials/custom/content-before.html | 頁面內容前 | |
layouts/partials/custom/content-after.html | 頁面內容之後 | |
layouts/partials/font.html | 導入自訂字體 |
| 文件 | 描述 |
|---|---|
assets/css/custom.css | 自訂或覆蓋 css 樣式 |
例如，您不喜歡所選的字體 (Inconsolata)，並且想要使用自己選擇的字體，請按照以下步驟操作：
layouts/partials/font.html來匯入你的字體： <!-- load Inter and Overpass fonts -->
< link rel =" preconnect " href =" https://fonts.googleapis.com " />
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin />
< link
href =" https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Overpass:wght@400;500&display=swap "
rel =" stylesheet "
/>assets/css/custom.css ： // change the default mono font to Overpass
:root {
--font-mono : " Overpass " ;
--font-serif : " Inter " ;
}如你所知，我不是前端開發人員。因此，如果您發現任何錯誤或想要改進，請毫不猶豫地提出問題/拉取請求。
主要目標是：
如果您發現缺少配置或自訂選項，請隨時提出問題。
