hugo dream plus
Yume
このテーマは、Yue Yangによるドリームテーマのアップグレードバージョンで、次のようなたくさんの新機能が含まれています。
このテーマは、2つの目的に使用できます。
このプロジェクトは、貢献者の契約行動規範を順守しています。参加することで、このコードを維持することが期待されます。 [email protected]に容認できない行動を報告してください。
インストール
はじめる
ドキュメント
ほぼ終了しました
貢献
ライセンス
テーマは、Hugo Webサイトフォルダー内で次のコマンドを実行することでインストールできます。
cd themes
git submodule add https://github.com/UtkarshVerma/hugo-dream-plus dream-plus
git submodule update --init --recursiveテーマが正常にインストールされたら、あなたの好みを満たすためにテーマを少し調整する必要があります。
exampleSiteフォルダー内には、テーマを調整するために使用できる構成ファイル、 cards.toml 、 posts.tomlがあります。
これらの構成ファイルは、必要な変数宣言を処理するため、サイトの基礎として使用する必要があります。これは、ニーズに応じて編集できます。
図のように、 authorテーブルの下にあるparamsの次の構成変数を通して自分自身を定義します。
[ params . author ]
author = " <name of the author> "
description = " Short description of the site "
motto = " author's motto or short description "
# Leaving the avatar variable unset displays svg avatars
avatar = " <absolute path to avatar> "その後、構成ファイルの最後にソーシャル変数を記入します。このテーマは次のソーシャルサイトにsuartしています：（例が示されています）
| ソーシャルリンク | 変数 | 例初期化 |
|---|---|---|
| github | github | github = "username" |
| メール | メール | email = "[email protected]" |
| ツイッター | ツイッター | twitter = "username" |
facebook = "username" | ||
| YouTube | YouTube | youtube = "username" |
| 中くらい | 中くらい | medium = "username" |
linkedin = "username" | ||
| StackOverflow | StackOverflow | stackoverflow = "number/username" |
| Codepen | Codepen | codepen = "username" |
reddit = "username" |
これらの変数は、 [social] config.tomlの[ソーシャル]テーブルまたはYAMLまたはJSONの同等のものでなければなりません。
[ social ]
github = " UtkarshVerma "これが完了したら、ここで指示されているように、マークダウンのウェブサイトの「私について」セクションを書きます：エラーとページについて。
前述のように、このテーマには2つのビューがあります。カードの表示と投稿ビューが表示されます。ビューレンダリングのタイプは、夢を見ているコンテンツのタイプに依存します。したがって：
/contentフォルダーにcardsフォルダーがあると、カードビューがアクティブになります。/contentフォルダーにpostsフォルダーがあると、投稿ビューがアクティブになります。
contentType変数は現在廃止されました。
両方のビューの1つの明確な区別は、カードビューが投稿をサポートしておらず、代わりに指定されたリンクにリダイレクトされ、 Post Viewが実行することです。それらを使用する私のサイト（上記）にアクセスして、自分でテストすることができます。また、両方のビューでポスト/カードの作成は異なって行われます。次のとおりです。
hugo new cards/example.md # Card creation
hugo new posts/example.md # Post creationこの後、マークダウンカード/投稿を開いて、カード/ポストのパラメーターを提供するだけです。
このテーマの背景を構成するには、2つの異なる方法があります。これらの設定は相互に排他的です。
特定の背景色を設定するには、 color変数を使用して実行します。代わりに、色のランダムな組み合わせを背景として設定したい場合は、色変数を設定したままにしておきます。
[ params . background ]
color = " #13547A " # Provide a color as hex or rgb equivalent images配列を介して背景として設定する画像を指定します。単一の画像の背景を好む場合は、配列に単一の値を与えるだけです。例えば：
[ params . background ]
images = [ " /images/bg1.jpeg " ] # Single image as background
images = [ " /images/bg1.jpeg " , " <some other image> " ] # Multiple images as background images配列に複数の画像を提供すると、Dream Plusのランダムな画像背景機能が有効になります。また、 blur変数を介して背景をある程度曖昧にすることもできます。
すべてのバックグラウンドで構成されている変数は、
paramsの下でbackroundテーブル内に配置されます
[ params . background ]
# Random backgrounds
images = [ " /images/bg1.jpeg " , " /images/bg2.jpeg " , " /images/bg3.jpeg " ]
# Blur the background
blur = " 0.2 "各ポストカードまたはカードのカバーは、Dream Plusによって処理され、Hugo Image Processingを使用してWebサイトの読み込み時間を速くします。カバーファイルのルックアップパスは、以下に記載されています。
/content/cards/<card>/cover.<any-extension>/content/posts/<post>/images/cover.<any-extension>
フロントマッテルを通してカバー画像を指定することが非推奨になりました。カードカバーは、coverキーを介してFrontMatterを介して定義できるようになりました。ただし、画像処理はそのようなカバーには適用されません。また、 FrontMatterカバーは画像リソースよりも優先されます。したがって、画像リソースのカバーをレンダリングするには、最初にFrontMatterからカバーキーを削除する必要があります。
また、 [params.features]のcoverArgs変数を介して画像処理プロセスを変更することもできます。渡された引数.Resize 、それが夢を利用するものだからです。例えば、
[ params . features ]
coverArgs = " 400x300 q50 " # Specify resolution and quality of output imageisMobile JS変数を使用して、クライアントデバイスに基づいてWebサイトを構成できます。クライアントデバイスがモバイルである場合、その逆もtrue 。
このテーマは、 About and Errorページの完全なカスタマイズをサポートしています。これらのページは、 about.mdおよび404.mdファイルを介してカスタマイズできます。 Dream Plusは、上記のファイルをプレーンマークダウンテキストとして読み取り、レンダリングします。ファイルの書き込みが完了し、ニーズに応じてファイルを変更したら、Hugoサイトのcontentフォルダーに貼り付けます。これらのページをHugoによって構築したくない場合は<website>.<domain>/aboutまたは<website>.<domain>/404 。次に、 config.tomlファイルのignoreFiles変数を介してこれらを無視するようにHugoに次のように指示できます。
ignoreFiles = [ " content/404.md " , " content/about.md " ]また、 paramsの下でfavicon構成変数を使用して、Webサイトのカスタムファビコンを設定することもできます。例えば、
[params]
favicon = "/images/defaultFav.ico"
Shorte.stのWebサイトスクリプトは、このテーマに実装されています。それを使用するには、 paramsの下でshortestテーブルを介して構成する必要があります。
[ params . shortest ]
enabled = true # Enable shorte.st
apiToken = " " # The API Token you received from shorte.st
domains = [ " " ] # The domains you want to defineページにある投稿/カードの量を制御する場合は、 paginate Config変数を使用してそうすることができます。
paginate = 4 # Defaults to 10また、タグは、有効になった場合、デフォルトでヘッダーとサイドバーにすべて表示されるわけではありません。鬱血を避けるために、そこに上位8タグ（記事 - カウント）のみが表示されます。ただし、 [params.tag]テーブルのtagLimit変数を使用してオーバーライデンすることができます。
[ params . tag ]
enabled = true
tagLimit = 10 # Top 10 tags will be displayed
# or
tagLimit = 0 # Display all tags他にもいくつかのマイナーな構成もあります。構成ファイル内のコメントを参照して、それらを設定できます。
このリポジトリのドキュメントは現在作業中であり、このリポジトリのWikiに追加されています。 Wikiの貢献は大歓迎です。このテーマの機能についてお気軽にお問い合わせください。
構成を終えた後、あなたは行くのが良いです。したがって、以下を使用してWebサイトをテストします。
hugo serverあなたのサイトは、テストのためにhttp：// localhost：1313でローカルで入手できるようになりました。
サンプルサイトをテストするには、Hugoに設定ファイルを明示的に指定する必要があります。これは次のように行われます。
# For posts view demo
hugo server --config posts.toml
# For cards view demo
hugo server --config cards.tomlこのテーマやむしろ「バグ」に追加するのに面白いものが見つかりました。 Issue Trackerを通じてそれについて教えてください。プルリクエストも大歓迎です。貢献方法の詳細については、貢献を参照してください。md
このテーマはMITライセンスの下でリリースされます。
