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=extendednpm install -g autoprefixer ) とともに、 postcss-cli JavaScript パッケージを環境にインストールする必要があります ( npm install -g postcss postcss-cli )。 Hugo Snap パッケージを使用している場合は、PostCSS とプラグインを Hugo サイト ディレクトリ内にローカルにインストールする必要があります。たとえば、-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 --minifyconfig.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 " ;
}すでにご存知のとおり、私はフロントエンド開発者ではありません。したがって、何か問題を見つけた場合、または改善したい場合は、ためらわずにイシュー/プル リクエストを開いてください。
主な目標は次のとおりです。
不足している構成オプションやカスタマイズ オプションを見つけた場合は、遠慮なく問題を開いてください。
