デモウェブサイト|変更履歴
Yue は、ブログに適した最小限の多言語カスタマイズ可能な Hugo テーマです。
スクリーンショットは古い可能性があるため、デモ Web サイトにアクセスすることをお勧めします。
デスクトップのライトモード
デスクトップのダークモード
モバイルのライトモード
モバイルのダークモード
最小限の外観
インストールが簡単 (Git と Hugo がインストールされていれば、数秒で Web サイトを作成できます)
詳細なドキュメント
自動ダークモード
多言語対応
単一ページの翻訳リスト
言語セレクター (対応するページまたはホームページに移動します)
複数の著者
目次 (折りたたみ可能、利用可能な場合のみ生成)
ホーム ページ、シングル ページ、セクション ページ、用語ページの変更日
カスタム日付形式
ホーム ページとセクション ページのページネーション
全文RSS
タグとカテゴリー
著作権表示（作者と年を設定可能）
RSSリンク
見出しアンカーリンク
モバイルファーストでレスポンシブな対応
SCSS
検索エンジンの最適化
マイクロデータ
メタディスクリプション
グラフを開く
セクションに対するページ数 ( /posts/ 、 /tags/など)
カスタマイズ
ファビコン
スタイル (SCSS)
目次（HTML）
すべての機能を確認するには、hugo.yaml (デフォルト構成) と exampleSite/hugo.yaml (デモ サイトの構成) を確認してください。
Git と最新の Hugo 拡張機能をインストールします。
# ウェブサイトを作成するgit init my-websitecd my-website# テーマをインストールするgit サブモジュール add -- Depth=1 https://github.com/CyrusYip/hugo-theme-yue Strategies/hugo-theme-yue git commit --message "add theme"# デモ contentcp --recursive Strategies/hugo-theme-yue/exampleSite/* を作成します。# Previewhugo サーバー
これで、動作するデモ Web サイトが完成しました。 contentディレクトリにはコンテンツが含まれており、 hugo.yamlは構成ファイルです。気軽に遊んでみてください。
cd 私のウェブサイト git サブモジュールの更新 --remote
テーマを更新する前に、CHANGELOG.md を読むことをお勧めします。
フィード アグリゲーター (Inoreader など) で更新と変更ログを購読できます。
更新: https://github.com/CyrusYip/hugo-theme-yue/commits/main.atom
変更ログ: https://github.com/CyrusYip/hugo-theme-yue/commits/main/CHANGELOG.md.atom
Web サイトのプロジェクトを複製するときは、追加のオプションを使用する必要があります。
git clone --recurse-submodules --shallow-submodules [email protected]:your-user-name/my-website.git
Web サイトをセットアップしたら、おそらくそれをインターネット上でホストしたいと思うでしょう。これを行うには多くの方法があります。ホスティングと展開を参照してください。ヒューゴ。何を選択すればよいかわからない場合は、Netlify から始めることができます。Netlify でのホスト | を参照してください。ヒューゴ。
hugo.yamlで、baseURL を必ずドメイン名 (例: https://my-cool-domain.org/ ) に変更してください。
-baseURL: https://yue.cyrusyip.org/+baseURL: https://my-cool-domain.org/
推奨されるビルド コマンド:
Hugo --gc --minify
--gc未使用のキャッシュ ファイルを削除し、 --minify Web サイト (主に HTML) のサイズを削減します。
新しい投稿を作成します。
hugo new content content/en/posts/my-first-post.md
使用方法の詳細については、次を参照してください。
基本的な使い方 |ヒューゴ
ディレクトリ構造 |ヒューゴ
設定は、exampleSite/hugo.yaml (デモ サイトの構成) と Hugo.yaml (前者によってインポートされたデフォルトの構成) にリストされています。
Web サイト プロジェクトのルートにある、 hugo.yaml設定ファイルであり、exampleSite/hugo.yaml のコピーです。
構成については、「Hugo の構成 |」を参照してください。ヒューゴ。
サポートされている言語:
en : 英語
fr : フランス語
zh-CN : 簡体字中国語
多言語 Web サイトを作成するには、「多言語モード |」を参照してください。 Hugo と exampleSite/hugo.yaml。
翻訳ファイルは、i18n ディレクトリと data/i18n.yaml にあります。追加の言語への貢献も歓迎します。
新しい言語を提供するには:
i18n ディレクトリに言語ファイル (フランス語の場合はfr.yamlなど) を作成します。
i18n/en.yaml の内容を新しいファイルにコピーします。
すべてのコメント ( # ... ) を削除し、内容を翻訳します。
data/i18n.yaml の内容も翻訳します。
翻訳に貢献し続けたい場合は、i18n/en.yaml (https://github.com/CyrusYip/hugo-theme-yue/commits/main/i18n/en.yaml) のフィードを購読することで最新の変更を取得できます。 .atom) RSS リーダーを使用して。
Web サイトが英語でない場合は、 /tagsと/categoriesのタイトルをカスタマイズする必要があるでしょう。
たとえば、 zh-CN Web サイトの/tagsタイトルをカスタマイズするには、 content/zh-CN/tags/_index.mdを作成し、次のコンテンツをファイルに追加します。
--- title: Chinese Tags ---
Yue を使用すると、ファビコン、スタイル (SCSS)、およびコンテンツ (HTML) をカスタマイズできます。
ファビコンは、ブラウザタブのタイトルの横にあるアイコンです。 favicon を使用するには、 favicon.ico staticディレクトリに置きます。オンラインの favicon.ico ジェネレーターでfavicon.ico作成できます。
Yue は SCSS (libsass) を使用してスタイルを追加します。すべてのファイルはassets/scssにあります。スタイルをカスタマイズするには、 assets/scss/_style-start.scssおよびassets/scss/_style-end.scssを作成します。
_style-start.scssが最初に適用され、このファイル内の変数をオーバーライドできます。
$base-font-size: 15px;
_style-end.scssは最後に適用され、このファイルにスタイルを追加できます。
Vanilla CSS は SCSS でも有効です。
参考文献:
CSS: カスケード スタイル シート | MDN
Sass: Sass の基本
ディレクトリ構造 |ヒューゴ
これらのファイルを作成して HTML コードを挿入できます。
layouts/partials/head/head-start.html
layouts/partials/head/head-end.html
layouts/partials/single/single-end.html
layouts/partials/body/body-end.html
head-start.htmlが<head>要素の先頭近くに追加されます。
使用例:
スクリプトのプリロード
スクリプトをロードする
スタイルをロードする
スクリプトのプリロードの例を次に示します。
<link rel="preload" as="script" href="https://unpkg.com/@swup/head-plugin@2"><link rel="preload" as="script" href="https: //unpkg.com/@swup/preload-plugin@3"><link rel="preload" as="script" href="https://unpkg.com/swup@4">
head-end.htmlが<head>要素の末尾に追加されます。
使用例:
スクリプトをロードする
スタイルをロードする
Google Analytics とローカル スクリプトを追加する例を次に示します。
<!-- Google アナリティクス --><script async src="https://www.googletagmanager.com/gtag/js?id=G-F46B15BRUF"></script><script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-F46B15BRUF');</script><!-- ローカル スクリプト、パス:assets/js/my-script.js -->{{ with resource.Get "js/my-script" .js" | js.Build }} <script defer src="{{ .RelPermalink }}"></script>{{ end }} single-end.html 、投稿の<main>要素の最後に追加されます。
使用例:
コメント サービス (Disqus や giscus など)
Giscus を追加する例を次に示します。
{{ $言語 := "" }}
{{- /*
小文字の LanguagePrefix の回避策、
https://github.com/gohugoio/hugo/issues/9404 を参照してください。
*/ -}}
{{ if eq site.LanguagePrefix "/zh-cn" }}
{{ $ language = "zh-CN" }}
{{ それ以外 }}
{{ $言語 = "en" }}
{{ end }}<script src="https://giscus.app/client.js" data-repo="CyrusYip/yue-test" data-repo-id="P_9hJMbXtqr" data-category="General" データ-category-id="SIB_ldsflk712ldRsjf7" data-mapping="パス名" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="preferred_color_scheme" data-lang="{{ $ language }}"crossorigin="anonymous" async></script>コメントサービス一覧: コメント |ヒューゴ。
body-end.htmlが<body>要素の末尾に追加されます。
使用例:
スクリプトを動的にロードする
バグを報告するには、問題を送信してください。質問するには、ディスカッションを開始してください。
Hugo には多くの機能があります。詳しくは、Hugo のドキュメントを読んでください。
CHANGELOG.mdを参照してください。
このプロジェクトでは、hugo-bin - npm を使用して Hugo のバージョンを管理します。前提条件: Node.js と npm。
このリポジトリのクローンを作成します。
npmインストール npm run clean:server:shared
package.json には他にも便利なコマンドがリストされています。推奨される Hugo バージョンを使用するには、 npx hugoを実行します。
Node.js と npm がインストールされていない場合は、package.json にリストされているバージョンをインストールしてください。
"hugo-bin": { "buildTags": "extended", "version": "x.yyy.z"},CHANGELOG.md はコミットごとに更新する必要があります。
Yue を使用していて、Web サイトのソース コードが GitHub でホストされている場合は、 hugo-theme-yueトピックをリポジトリに追加できます。
hugo-theme-yueトピックへのリンク。
多くのプロジェクトから多くのことを学びました。開発者の皆様、ありがとうございます。
Hugo-xmin (最小限のテンプレート)
ヒューゴテーマジェーン (RSS テンプレート)
Hugo-theme-zen (言語セレクター)
Hugo-theme-gruvbox (カラー)
gruvbox (カラー)
Hugo-theme-stack (ソースコード、ドキュメント、構成)
Hugo-PaperMod (ソースコード、ドキュメント、構成)
このプロジェクトは MIT の下でライセンスを取得しています。
