[{"content":"Congo 2.0には多くの変更点が含まれていますが、最新リリースへのアップグレードに必要な労力を最小限に抑えるように設計されています。\nとはいえ、Version 1.xで構築された既存のサイトには、調整が必要な場合もあります。このガイドでは、そのプロセスを順を追って説明し、考慮すべき点を説明します。\nStep 1: Hugoのアップグレード # Congo 2.0はHugo v0.87.0以上が必要です。 Congoは、Hugoの最新機能のいくつかを利用するように作られています。問題を避けるために、定期的にHugoのインストールを最新の状態に保つ必要があります。\nHugoのバージョンは hugo version コマンドで確認できます。あなたのプラットフォーム用の新しいリリースを入手する方法については、Hugoのドキュメントをご覧ください。\nStep 2: Congoのアップグレード #Congoをアップグレードする手順は、プロジェクトにどのようにテーマを含めるかによって異なります。各手順は以下にあります。\nUpgrade using Hugo Upgrade using Git Upgrade manually Upgrade using Hugo #Goモジュールを新しいメジャーリリースにアップグレードするには、 modules.toml と go.mod ファイルを更新する必要があります。それぞれのファイルで、テーマへのパスを github.com/jpanther/congo から github.com/jpanther/congo/v2 に更新してください。\nそして、プロジェクト・ディレクトリに移動し、以下のコマンドを実行してください。\nhugo mod get -u Hugo がローカルにモジュールをキャッシュしているため、状況によってはこのステップで問題が発生する場合があることに注意してください。上記のコマンドがうまくいかない場合は、 hugo mod clean を使ってローカルキャッシュを消去し、モジュールを再ダウンロードしてみてください。\nCongoがアップグレードされたら、次のステップに進みます。\nUpgrade using Git #Git サブモジュールは git コマンドを使ってアップグレードできます。次のコマンドを実行するだけで、最新バージョンのテーマがローカルリポジトリにダウンロードされます:\ngit submodule update --remote --merge サブモジュールがアップデートされたら、次のステップに進みます。\nUpgrade manually #Congoを手動で更新するには、テーマの最新コピーをダウンロードして、プロジェクト内の古いバージョンを置き換える必要があります。\nテーマファイルに対して行ったローカルでのカスタマイズは、この処理中に失われますのでご注意ください。 テーマのソースコードの最新リリースをダウンロードする。\nDownload from Github アーカイブを解凍し、ディレクトリ名を congo に変更して、Hugoプロジェクトのルートディレクトリ内の themes/ ディレクトリに移動します。すべてのテーマファイルを置き換えるには、既存のディレクトリを上書きする必要があります。\n次のステップに進んでください。\nStep 3: テーマの設定 #Congo 2.0では新しいテーマ設定パラメーターが多数導入されています。このテーマは既存のバージョン1の設定に適応しますが、より新しいテーマ機能のいくつかを利用するためには、既存の設定を調整する必要があります。\nこれを行う最も簡単な方法は、テーマのデフォルト設定のコピーを取り、既存のファイルと比較することです。以下にその手順を詳しく説明します。\nlanguages.toml #多言語サポートを提供するために、言語固有のテーマパラメーターは新しい設定ファイル languages.[lang-code].toml に移動されました。テーマにはテンプレート languages.en.toml ファイルが付属しており、ガイドとして使用することができます。\n多言語サポートが必要ない場合は、このステップは必要ありません。 言語設定ファイルはこのような構造になっています:\n# config/_default/languagues.en.toml languageCode = \u0026#34;en\u0026#34; languageName = \u0026#34;English\u0026#34; displayName = \u0026#34;EN\u0026#34; htmlCode = \u0026#34;en\u0026#34; weight = 1 rtl = false # Language-specific parameters go here お好みの言語を使って、 config/_default/ に新しいファイルを作成し、既存の設定ファイルから言語固有のパラメーターをこの新しいファイルに移動するだけです。下の表は移動させる必要のあるパラメーターの概要です。\nParameter Old location title config.toml description params.toml copyright config.toml dateFormat params.toml [author] config.toml 値を移行したら、これらのパラメーターは元の場所から削除すべきです。\nmenus.toml #テーマが言語を認識するようになったので、 menus.toml ファイルの名前も言語コードを含むように変更する必要があります。既存の menus.toml を menus.[lang-code].toml にリネームしてください。言語コードは前のセクションの languages.toml ファイルで使用したコードと同じです。\nconfig.toml #config.toml`ファイルには、Hugoの基本設定値のみが含まれるようになりました。上記の言語固有の文字列を削除した以外に、考慮すべき変更は2つだけです。\n英語以外の言語を使用している場合は、その言語用に作成した設定ファイルの言語コードと一致する defaultContentLanguage 値を指定してください。次に、Congo 2.0の新しいサイト内検索を利用するために、 [outputs] ブロックを用意する必要があります。\n# config/_default/config.toml defaultContentLanguage = \u0026#34;en\u0026#34; enableRobotsTXT = true paginate = 10 summaryLength = 0 [outputs] home = [\u0026#34;HTML\u0026#34;, \u0026#34;RSS\u0026#34;, \u0026#34;JSON\u0026#34;] markup.toml #Congo 2.0では記事ページの目次がサポートされました。Hugoには目次を生成するためのデフォルト設定が同梱されていますが、 markup.toml ファイルに新しい [tableOfContents] ブロックを追加することで、この動作を調整することができます。\n推奨設定は以下のとおりで、目次にレベル2、3、4のの見出しを含みます:\n# config/_default/markup.toml [tableOfContents] startLevel = 2 endLevel = 4 params.toml #Congo 2.0では多くの新しいテーマ・パラメーターが導入されました。既存の設定にも若干の変更が必要です。パラメーターが提供されない場合、常にデフォルト値に戻ることを覚えておいてください。\nCongoでのダークモードの動作方法が変更され、より柔軟に設定できるようになりました。従来の darkMode と darkToggle パラメーターは 削除され、3つの新しいパラメーターに置き換えられました。これらの新しいオプションはそれぞれ独立して動作するため、強制的に表示させることができ、またユーザーが上書きすることもできます。\nNew parameter Type Default Description defaultAppearance String \u0026quot;light\u0026quot; デフォルトの外観; light か dark のどちらか。\n⚠️ light に設定すると以前の darkMode = false の設定が再現され、 dark に設定すると darkMode = true の設定が再現される。 autoSwitchAppearance Boolean true 外観をオペレーティングシステムの環境設定に基づいて自動的に切り替えるかどうか。 false に設定すると、常に defaultAppearance を使用します。 ⚠️ これを true にすることで以前の darkMode = \u0026quot;auto\u0026quot; 設定が再現されます。 showAppearanceSwitcher Boolean false 外観スイッチャーをフッターに表示するかどうか。 ⚠️ この設定は darkToggle を置き換えます。 次の表は、Version 2の新機能を制御する、その他の主要なパラメーターの概要です:\nNew parameter Type Default enableSearch Boolean false showScrollToTop Boolean true article.showTaxonomies Boolean false article.showTableOfContents Boolean false list.showTableOfContents Boolean false サポートされるすべてのパラメーターについては 設定を参照ください。\nStep 4: assetsの移動 #ファビコンを除くすべてのassetsが、Hugo Pipesにて最適化されるようになりました。テーマがあなたのファイルを見つけるためには、以前の static/ から assets/ ディレクトリに移動する必要があります。主に、著者画像とサイトロゴです:\nstatic/me.jpg → assets/me.jpg\nstatic/logo.jpg → assets/logo.jpg\n著者画像やサイトロゴを提供した場合は、これらのアセットを static/ から assets/ に移動するだけです。同じディレクトリ構造を使用している場合、テーマはこれらのファイルがどこにあるかを自動的に認識します。新しいパスを指定したい場合は、 logo と author.image の設定値を適宜更新してください。\nこのステップは、プロジェクト内の静的なassetsには適用されないことに注意してください。例えば、記事内から直接リンクしているPDFファイルは静的なassetsです。これらのファイルは、Hugoがサイトを構築するときに出力ディレクトリに確実にコピーされるよう、static/ ディレクトリに残しておく必要があります。\nStep 5: コンテンツの確認 #Congo 2.0では figure ショートコードの振る舞いが変わります。記事内で figure を使用している場合、パラメーターを調整する必要があるかもしれません。\nサポートされているパラメーターについては、 shortcodeを参照してください。\nStep 6: 再構築 #これですべての設定変更が完了したので、いよいよサイトを再構築します。 hugo またはあなたのビルドコマンドを実行し、すべてが期待通りに動作することを確認してください。\nエラーに遭遇した場合は、設定が正しいことを確認し、 ドキュメントを参照してください。テーマに同梱されている設定ファイルの例には、デフォルトのパラメーターがすべて含まれており、出発点として最適です。\n🙋‍♀️ それでもまだ助けが必要な場合は、GitHub Discussionsで遠慮なく質問してください。\n","date":null,"permalink":"/congo/ja/docs/version-2/upgrade/","section":"ドキュメント","summary":"Congo 2.","title":"Congo 1.xからのアップグレード"},{"content":" Tailwind CSSをベースに開発された強力で軽量なHugo向けテーマ。 これはCongoを使って構築されたデモサイトです。 Congoに関するドキュメントも含まれています。 Congoは柔軟性に富み、静的なコンテンツ配信にも、投稿フィード機能を持つようなBlogにも適しています。\nこれはpageレイアウトのデモです。 レイアウトを切り替える \u0026orarr; 例を見て、Congoの実力を実感してください。気に入ったらGitHubをチェックするか、 インストールを読んで実際に使い始めてほしい。\n","date":null,"permalink":"/congo/ja/","section":"Congoへようこそ! 🎉","summary":"Tailwind CSSをベースに開発された強力で軽量なHugo向けテーマ。 これはCongoを使って構築されたデモサイトです。 Congoに関するドキュメントも含まれています。 Congoは柔軟性に富み、静的なコンテンツ配信にも、投稿フィード機能を持つようなBlogにも適しています。","title":"Congoへようこそ! 🎉"},{"content":"","date":null,"permalink":"/congo/ja/tags/docs/","section":"Tags","summary":"","title":"docs"},{"content":"","date":null,"permalink":"/congo/ja/tags/new/","section":"Tags","summary":"","title":"new"},{"content":"CongoはHugoのTaxonomiesを完全にサポートしており、どのようなTaxonomiesの設定にも適応します。Taxonomiesのリストは、用語リストの上に表示されるカスタムコンテンツもサポートしています。\nこの領域は各Taxonomyに説明的なテキストを追加するために使用することができます。このコンセプトをさらに発展させる方法について、以下の Tags/advancedも参照してください。\n","date":null,"permalink":"/congo/ja/tags/","section":"Tags","summary":"CongoはHugoのTaxonomiesを完全にサポートしており、どのようなTaxonomiesの設定にも適応します。Taxonomiesのリストは、用語リストの上に表示されるカスタムコンテンツもサポートしています。","title":"Tags"},{"content":" シンプルでパワフル。Congoの使い方と特徴をご紹介します。 このセクションにはCongoの知るべきすべてが含まれています。もしあなたがCongoに触れるのが初めてならば、 インストールガイドを読むか、 例を見て、Congoは何ができるか確認してください。\nこのドキュメントに素晴らしいイラストを提供してくれたKaterina Limpitsouniに感謝します。\n","date":null,"permalink":"/congo/ja/docs/","section":"ドキュメント","summary":"シンプルでパワフル。Congoの使い方と特徴をご紹介します。 このセクションにはCongoの知るべきすべてが含まれています。もしあなたがCongoに触れるのが初めてならば、 インストールガイドを読むか、 例を見て、Congoは何ができるか確認してください。","title":"ドキュメント"},{"content":" Congo 2.0には、大量の新機能と最適化が詰め込まれています。 Congoの当初の目的は、シンプルで軽量なテーマを開発することでした。Version 2では、これをさらに一歩進め、軽量でありながら、よりパワフルなテーマとなっています。\n新機能については以下をご覧ください。アップグレードの準備ができましたら、 アップグレードガイドをご覧ください。\nTailwind CSS 3.0 #Tailwind CSSはCongoの中核であり、この新しいリリースには最新のTailwind CSS version 3が含まれています。Tailwind CSS 3.0では、パフォーマンスが最適化され、新しいCSS機能がサポートされています。\nこの新バージョンを実装することで、テーマからTailwindプラグインの依存関係をいくつか削除し、全体的なフットプリントを軽量に保つことができるようになりました。\n多言語対応 #要望の多かった多言語対応を行いました！複数の言語でコンテンツを公開する場合、サイトはすべての翻訳が利用可能な状態で構築されます。\n🇬🇧 🇩🇪 🇫🇷 🇪🇸 🇨🇳 🇯🇵 🇧🇷 🇹🇷 🇧🇩 コミュニティの貢献によって、Congoはすでに23言語以上に翻訳されています。新しい翻訳もPull Requestからいつでも歓迎しています！\nRight to Left言語のサポート #新しいTailwindの利点の一つは、RTL言語サポートを追加する機能です。有効にすると、サイト全体のコンテンツが右から左にリフローされます。テーマ内のすべての要素は、RTL言語でも見栄えが良くなるように再構築されています。\nRTLは言語ごとに制御されるため、プロジェクト内でRTLとLTRの両方のコンテンツを混ぜてマッチさせることができ、テーマはそれに応じて対応します。\n画像の自動リサイズ #Congo 2.0の大きな変更点は、画像の自動リサイズ機能の追加です。Hugo Pipesのパワーを使って、Markdownコンテンツ内の画像が自動的に異なる出力サイズに拡大縮小されるようになりました。これらの画像はHTMLの srcset 属性を使って表示され、サイト訪問者に最適化されたファイルサイズを提供することができます。\n\u0026lt;!-- Markdown: ![My image](image.jpg) --\u0026gt; \u0026lt;img srcset=\u0026#34; /image_320x0_resize_q75_box.jpg 320w, /image_635x0_resize_q75_box.jpg 635w, /image_1024x0_resize_q75_box.jpg 1024w, /image_1270x0_resize_q75_box.jpg 2x\u0026#34; src=\u0026#34;/image_635x0_resize_q75_box.jpg\u0026#34; alt=\u0026#34;My image\u0026#34; /\u0026gt; あなたは何も変更する必要がありません！標準的なMarkdown画像構文を挿入するだけで、あとはテーマにお任せください。もう少しコントロールしたい場合は、 figure ショートコードを完全に書き換えて、同じリサイズの利点を提供します。\nパフォーマンスの改善 #今回のアップデートでは、全体的にパフォーマンスが向上している。今回のリリースの主な目的はLighthouseのスコアを向上させることで、Congoは4つの指標すべてで100点満点を獲得しました。\n個々の変更点が多すぎて、ここでは紹介しきれませんが、さらに詳しく知りたい場合は、 Lighthouseのレポートをご覧ください。実際のパフォーマンスは、サーバーの構成によって異なります。\nサイト内検索 #Fuse.jsを利用したサイト内検索で、訪問者が素早く簡単にコンテンツを見つけることができます。すべての検索はクライアントサイドで実行されるため、サーバー上で設定する必要がなく、クエリは超高速で実行されます。サイト設定でこの機能を有効にするだけで準備は完了です。また、フルキーボードナビゲーションにも対応しています！\n記事ページ内の目次 #要望の多かった記事ページ内の目次をサポートしました。このページで実際にご覧いただけます。コンテンツは完全にレスポンシブで、異なる画面解像度で利用可能なスペースを活用するように調整されます。\nグローバルまたは記事単位で利用可能な目次は、Hugoの標準設定値を使用して完全にカスタマイズすることができます。\nアクセシビリティの改善 #より多くの項目にARIA記述を追加し、特定のテキスト要素のコントラストを調整してアクセシビリティを改善しました。\nCongo 2.0では、クイックナビゲーションを可能にする「コンテンツへスキップ」と「トップへスクロール」リンクも導入されています。また、マウスに手を伸ばすことなく検索などの項目を有効にするためのキーボードショートカットもあります。\n新しい画像サイズ変更機能は、 alt と title 要素の完全なコントロールを提供し、すべての訪問者にアクセシブルな体験を提供します。\nその他もろもろ #他にも数え切れないほどの細かな変更があります。記事やリストページでTaxonomyを表示できるようになったり、新しい headline の著者パラメーターを使ってホームページをカスタマイズできるようになったり。また、SEOのパフォーマンスをさらに最適化するJSON-LDも改善されています。さらに、一貫したデザイン言語を保証するために、テーマ全体がさらに洗練されました。\n🚀 詳細はfull changelogをご覧ください。\nNext steps #準備ができたら Version 1.xからのアップグレードガイドをお読みください。Congoを初めてお使いになる方は インストールに進んでください。\n","date":null,"permalink":"/congo/ja/docs/version-2/","section":"ドキュメント","summary":"Version 2.0では、Congoを新たな高みへと導き、その軽量さを維持しながらも、テーマをさらに強力なものにしています。","title":"What's New in 2.0 ✨"},{"content":"","date":null,"permalink":"/congo/ja/tags/installation/","section":"Tags","summary":"","title":"installation"},{"content":"Hugoの標準的なQuick Startに従うだけで、すぐに使い始めることができます。\n詳しいインストール方法は以下をご覧ください。 更新のインストールについても解説しています。\nインストール #この手順を読めば、HugoとCongoをまったく何もない状態から使い始めることができます。このガイドで述べられている依存関係のほとんどは、あなたのプラットフォームで選択したパッケージマネージャを使ってインストールできます。\nHugoのインストール #Hugoを使ったことがない場合は、インストールする必要があります。すでにインストールされているかは、 hugo version コマンドで確認できます。\nCongoはHugoの最新機能の一部を利用しているため、 Hugoバージョン0.87.0 以降を使用していることを確認してください。 Hugo docsに、あなたのプラットフォーム用の詳しいインストール手順があります。\n新しいサイトを作成 #コマンド hugo new site mywebsite を実行して、 mywebsite というディレクトリに新しいHugoサイトを作成します。\nプロジェクト・ディレクトリは好きな名前をつけることができますが、以下では説明の便宜上 mywebsite という名前を使います。それ以外の名前を使う場合は、適宜置き換えてください。\nCongoのダウンロード #CongoをHugoのウェブサイトにインストールするには、いくつかの方法があります。インストールとメンテナンスが最も簡単なものから最も難しいものまで、次のとおりです:\nHugo module (recommended) Git submodule Manual file copy わからない場合は、 Hugo module の方法を選んでください。\nInstall using Hugo #この方法はテーマを最新の状態に保つのに最も早く、簡単です。Hugoはモジュールの初期化と管理に Go を使うので、先に進む前に go がインストールされていることを確認する必要があります。\nDownloadをクリックし、Goをインストールしてください。すでにインストールされているかは、 go version コマンドで確認できます。\nHugoがモジュールを正しく動作させるために、 Goバージョン1.12 以降を使用していることを確認してください。 Hugoプロジェクトのディレクトリ (上記で作成したもの)から、ウェブサイトのモジュールを初期化します:\n# GitHubでプロジェクトを管理している場合 hugo mod init github.com/\u0026lt;username\u0026gt;/\u0026lt;repo-name\u0026gt; # ローカルでプロジェクトを管理している場合 hugo mod init my-project Congoを設定に追加するには、 config/_default/module.toml ファイルを新規作成し、以下を追加します:\n[[imports]] path = \u0026#34;github.com/jpanther/congo/v2\u0026#34; hugo server を使用してサーバーを起動すると、テーマが自動的にダウンロードされます。\nテーマ設定ファイルのセットアップに進みます。\nInstall using Git #この方法では、ローカルマシンに Git がインストールされていることを確認する必要があります。\nHugoプロジェクトのディレクトリ（上で作成したもの）に移動し、新しく git リポジトリを初期化してCongoをサブモジュールとして追加します。\ncd mywebsite git init git submodule add -b stable https://github.com/jpanther/congo.git themes/congo テーマ設定ファイルのセットアップに進みます。\nInstall manually # Congoのソースコードの最新リリースをダウンロードする。\nDownload from Github アーカイブを解凍し、ディレクトリ名を congo に変更して、Hugoプロジェクト内の themes/ ディレクトリに移動します。\nテーマ設定ファイルのセットアップに進みます。\nテーマ設定ファイルのセットアップ #ウェブサイトのルートディレクトリで、Hugoによって生成された config.toml ファイルを削除します。テーマの *.toml 設定ファイルを config/_default/ ディレクトリにコピーします。これでCongoの設定がすべて正しくなり、必要に応じてCongoを簡単にカスタマイズできるようになります。\n注記: プロジェクト内にすでに module.toml ファイルが存在する場合は上書きしないでください！ テーマのインストール方法によって、テーマの設定ファイルは異なる場所にあります。:\nHugo Modules: Hugoのキャッシュディレクトリ、またはGitHubからコピーをダウンロードしてください。 Git submodule or Manual install: themes/congo/config/_default ファイルをコピーしたら、設定ディレクトリは以下のようになっているはずです:\nconfig/_default/ ├─ config.toml ├─ markup.toml ├─ menus.toml ├─ module.toml # if you installed using Hugo Modules └─ params.toml 重要: Hugoモジュールを使ってCongoをインストールしなかった場合は、 config.toml ファイルの先頭に theme = \u0026quot;congo\u0026quot; という行を追加する必要があります。 Next steps #これで基本的なCongoのインストールは完了です。テーマの設定についての詳細は、 はじめにセクションに進んでください。\n更新のインストール #時折、テーマに修正を適用し、新しい機能を追加した新しいリリースが投稿されます。これらの変更を利用するには、ウェブサイトのテーマファイルを更新する必要があります。\nこの方法は、テーマを最初にインストールしたときに選択したインストール方法によって異なります。各方法の手順は以下にあります。\nHugo module Git submodule Manual file copy Update using Hugo #Hugoはモジュールのアップデートをとても簡単にしてくれます。プロジェクトディレクトリに移動して、以下のコマンドを実行するだけです:\nhugo mod get -u Hugoはプロジェクトに必要なモジュールを自動的にアップデートします。これは module.toml と go.mod ファイルを検査することで行われます。アップデートに問題がある場合は、これらのファイルが正しく設定されているか確認してください。\nその後、サイトを再構築し、すべてが期待通りに動作することを確認してください。\nUpdate using git #Gitサブモジュールは git コマンドを使って更新できます。次のコマンドを実行するだけで、テーマの最新バージョンがローカルリポジトリにダウンロードされます:\ngit submodule update --remote --merge サブモジュールのアップデートが完了したら、サイトを再構築し、すべてが期待通りに動作することを確認してください。\nUpdate manually #Congoを手動で更新するには、テーマの最新コピーをダウンロードして、プロジェクト内の古いバージョンを置き換える必要があります。\nテーマファイルに対して行ったローカルでのカスタマイズは、この処理中に失われますのでご注意ください。 Congoのソースコードの最新リリースをダウンロードする。\nDownload from Github アーカイブを解凍し、ディレクトリ名を congo に変更して、Hugoプロジェクトのルートディレクトリ内の themes/ ディレクトリに移動します。すべてのテーマファイルを置き換えるには、既存のディレクトリを上書きする必要があります。\nサイトを再構築し、すべてが期待通りに動作することを確認してください。\n","date":null,"permalink":"/congo/ja/docs/installation/","section":"ドキュメント","summary":"全く何もない状態からHugoとCongoを使い始める方法を紹介します。初めての方はここから始めるのが最適です。","title":"インストール"},{"content":" このセクションはあなたが既にインストールを終えていることを前提としています。 Congoに同梱されている設定ファイルには、テーマが認識できるすべての設定が含まれおり、デフォルトでは多くはコメントアウトされていますが、特定の機能を有効にしたり変更したりするには、コメントアウトを解除するだけです。\n基本設定 #コンテンツを作成する前に、新規インストール用に設定すべきことがいくつかあります。まず config.toml ファイルで、baseURL と languageCode パラメーターを設定し、 languageCode には、コンテンツの作成に使用するメインの言語を設定しましょう。\n# config/_default/config.toml baseURL = \u0026#34;https://your_domain.com/\u0026#34; languageCode = \u0026#34;en\u0026#34; 次のステップは言語設定です。Congoは多言語をサポートしていますが、今はメインの言語だけを設定してください。\nconfig/_default の中にある languages.en.toml ファイルを探してください。メイン言語が英語の場合は、このファイルをそのまま使うことができます。そうでない場合は、ファイル名に正しい言語コードが含まれるようにファイル名を変更してください。例えばフランス語の場合は、 languages.fr.toml にファイル名を変更します。\n言語設定ファイル名の言語コードは、 config.toml の languageCode 設定と一致している必要があります。 # config/_default/languages.en.toml title = \u0026#34;My awesome website\u0026#34; [author] name = \u0026#34;My name\u0026#34; image = \u0026#34;img/author.jpg\u0026#34; headline = \u0026#34;A generally awesome human\u0026#34; bio = \u0026#34;A little bit about me\u0026#34; links = [ { twitter = \u0026#34;https://twitter.com/username\u0026#34; } ] [author] はウェブサイト上でどのように著者情報を表示するかを決定します。画像はサイトの assets/ に置きましょう。リンクはリストの記述順に沿って表示されます。\n各設定に関する詳細情報は、 設定セクションで説明されています。\nカラースキーム #Congoにはいくつかのカラースキームが同梱されています。配色を変更するには、colorScheme パラメーターを設定するだけです。有効なオプションは congo （デフォルト）、 avocado 、 cherry 、 fire 、 ocean 、 sapphire 、 slate です。\ncolourScheme の値は小文字で指定します。 # config/_default/params.toml colorScheme = \u0026#34;congo\u0026#34; Congoは、テーマ全体で使用される3色のパレットを定義しています。それぞれのメインカラーには、Tailwindに含まれる10色の濃淡が含まれています。\nCongo (default) # Avocado # Cherry # Fire # Ocean # Sapphire # Slate # 独自の配色を作成することもできます。詳しくは 高度な設定セクションを参照してください。\nコンテンツの整理 #Congoは特定のコンテンツタイプを強制しません。そのため、自由にコンテンツを定義することができます。静的なサイトには_pages_、ブログには_posts_、ポートフォリオには_projects_がいいかもしれません。\nディレクトリ構造 #基本的なCongoプロジェクトの概要を説明します。すべてのコンテンツは content に置かれます:\n. ├── assets │ └── img │ └── author.jpg ├── config │ └── _default ├── content │ ├── _index.md │ ├── about.md │ └── posts │ ├── _index.md │ ├── first-post.md │ └── another-post │ ├── aardvark.jpg │ └── index.md └── themes └── congo ここで注意しなければならないのは、コンテンツディレクトリの中で、通常の記事ページは index.md という名前になり、リストページは _index.md という名前になるということです。記事に付随するアセットはインデックスファイルと一緒にサブディレクトリに置く必要があります。 このテーマはHugoのページバンドルを最大限に活用するように設計されているため、Hugoがどのようにコンテンツを整理することを想定しているかをしっかりと把握することが重要です。詳しくはHugo公式ドキュメントを読んでください。\nfeature、cover、そしてthumb(nail) #Congoは、記事リストと個々の記事ページの上部に画像を表示できます。サポートされている画像には3つのタイプがあり、それぞれに使用例があります: feature 、 cover 、 thumb です。\n以下の例では、 first-post の記事に cover と thumb を用意しています:\n. └── content └── posts ├── _index.md └── first-post ├── cover.jpg ├── index.md └── thumb.jpg thumb 画像は記事のサムネイルとして記事リストで表示され、 cover 画像は個々の記事ページで記事内容の上部に表示されます。\nこの例では、 thumb 画像付きの記事を示しています。 パフォーマンスの観点から、 thumb 画像は自動的に4:3の比率にトリミング・リサイズされます。 cover 画像は内容に合わせて自動的にリサイズされますが、比率は問いません。 The feature image is a special type, and when present, it will be used in place of both the thumb and cover images. Feature images are also present in the article metadata, which is included when content is shared to third-party networks like Facebook and Twitter. feature 画像は特別で、存在する場合には thumb 画像と cover 画像の両方の代わりに使用されます。 feature 画像は記事のメタデータとして、FacebookやTwitterのようなサードパーティのネットワークにコンテンツが共有される場合にも含まれます。\nCongoは記事画像をインテリジェントに検出し、自動的にあなたのサイトに追加します。フロントマターでそれらを指定する必要はなく、ページリソース内に適切な名前のファイルを配置するだけです。画像ファイル名のどこかに feature 、 cover 、 thumb という単語があれば、それがその目的で使用されます。\n例には、これらの画像の例が多数掲載されています（また、ソースコードを参照してファイル構造を確認することもできます）。\nTaxonomies #CongoはTaxonomiesに関しても柔軟です。 tags や categories を使ってコンテンツをグループ化したい人もいれば、 topics を使いたい人もいるでしょう。\nHugoはデフォルトで posts 、 tags 、 categories を使用するようになっています。しかし、これをカスタマイズしたい場合は、 taxonomies.toml 設定ファイルを作成することでカスタマイズできます:\n# config/_default/taxonomies.toml topic = \u0026#34;topics\u0026#34; 上記の例はデフォルトの tags と categories を topics に置き換えます。詳細は、Hugo Taxonomy docsを参照してください。\nWhen you create a new taxonomy, you will need to adjust the navigation links on the website to point to the correct sections, which is covered below.\nメニュー #Congoには2つのメニューがあり、サイトの内容やレイアウトに合わせてカスタマイズすることができます。 main メニューはサイトのヘッダーに表示され、 footer メニューはページの一番下、著作権表示のすぐ上に表示されます。\nBoth menus are configured in the menus.en.toml file. Similarly to the languages config file, if you wish to use another language, rename this file and replace en with the language code you wish to use. Menu links will be sorted from lowest to highest weight, and then alphabetically by name. どちらのメニューも menus.en.toml ファイルで設定すします。 menus.en.toml ファイルは言語設定ファイルと同様に、他の言語を使いたい場合はファイル名を変更して使いたい言語コードに置き換えてください。メニューのリンクは weight の低いものから高いものへとソートされ、次にアルファベット順に name でソートされます。\n# config/_default/menus.en.toml [[main]] name = \u0026#34;Blog\u0026#34; pageRef = \u0026#34;posts\u0026#34; weight = 10 [[main]] name = \u0026#34;Topics\u0026#34; pageRef = \u0026#34;topics\u0026#34; weight = 20 [[main]] name = \u0026#34;GitHub\u0026#34; url = \u0026#34;https://github.com/jpanther/congo\u0026#34; weight = 30 [main.params] icon = \u0026#34;github\u0026#34; showName = false target = \u0026#34;_blank\u0026#34; [[main]] identifier = \u0026#34;search\u0026#34; weight = 99 [main.params] action = \u0026#34;search\u0026#34; icon = \u0026#34;search\u0026#34; [[footer]] name = \u0026#34;Privacy\u0026#34; pageRef = \u0026#34;privacy\u0026#34; 基本のリンク #name パラメーターはメニューリンクで使用するテキストを指定します。また、オプションでリンクのHTMLタイトル属性となる title を指定することもできます。\npageRef パラメーターを使うと、HugoのコンテンツページやTaxonomyを簡単に参照することができます。Hugoのコンテンツアイテムを参照するだけで、自動的に正しいリンクが作成されるので、メニューを設定する最も簡単な方法です。外部URLへのリンクには url パラメーターを使用します。\nリンク内に params を指定することで、さらなるカスタマイズが可能です。 icon を追加したり、 showName でリンクテキストを切り替えたり、URLに target を設定したりすることができます。上記の例では、GitHubリンクはアイコンのみで表示され、リンクは新しいウィンドウで開きます。\nアクションリンク #There is a special case for creating menu items for links that take theme actions. These are denoted using the action parameter, and a value of the action the link should perform. Action links allow for all the same custom parameters as other links and can be styled with an icon or text name. 特別なケースとして、アクションを実行するリンク項目を作成する場合があります。これらは action パラメーターと実行するアクションの値を使って指定します。アクションリンクでは基本のリンクと同じカスタムパラメーターを使用することができ、アイコンやテキスト名でスタイルを設定することもできます。\n有効なテーマ・アクションは2つあります:\nappearance は外観を切り替えるリンクを作成します search はサイト内検索を行うリンクを作成します どちらのメニューも完全にオプションであり、必要なければコメントアウトすることができます。デフォルトとして提供されているテンプレートも参考にしてください。\n詳細な設定 #上記の手順は最低限の設定です。これで hugo server を実行すると、空白のCongoウェブサイトが表示されます。詳細な設定については、 設定セクションを参照してください。\n","date":null,"permalink":"/congo/ja/docs/getting-started/","section":"ドキュメント","summary":"このセクションでは、すでにCongoをインストールし、カラースキーム、メニュー、コンテンツ構造の選択など基本的な設定作業を行う準備ができていることを前提としています。","title":"はじめに"},{"content":"","date":null,"permalink":"/congo/ja/tags/config/","section":"Tags","summary":"","title":"config"},{"content":"","date":null,"permalink":"/congo/ja/tags/icons/","section":"Tags","summary":"","title":"icons"},{"content":"","date":null,"permalink":"/congo/ja/tags/sample/","section":"Tags","summary":"","title":"sample"},{"content":"","date":null,"permalink":"/congo/ja/tags/shortcodes/","section":"Tags","summary":"","title":"shortcodes"},{"content":"","date":null,"permalink":"/congo/ja/tags/users/","section":"Tags","summary":"","title":"users"},{"content":"Congo はFontAwesome 6のアイコンをサポートしています。これらのアイコンは、 パーシャル - アイコン または ショートコード - アイコン のいずれかを使ってウェブサイトに含めることができます。\nさらに、カスタムアイコンも完全にサポートされています。プロジェクトのルートにある assets/icons/ ディレクトリに SVG アイコンアセットを置くだけです。ディレクトリ内のアイコンは、テーマ全体で使用できるようになります。\n内蔵アイコンの全リストと対応する名称は以下を参照してください。\nIcon name Preview amazon apple bars blogger bug check chevron-down chevron-up circle-info codepen coffee comment dev dribbble edit email facebook flickr foursquare github gitlab globe google hashnode instagram keybase kickstarter lastfm lightbulb link linkedin list mastodon medium microsoft mobile moon orcid patreon pencil phone pinterest reddit researchgate search skull-crossbones slack snapchat soundcloud stack-overflow steam sun tag telegram threads tiktok translate triangle-exclamation tumblr twitch twitter whatsapp x-twitter xmark youtube ","date":"2020年8月14日","permalink":"/congo/ja/samples/icons/","section":"サンプル","summary":"Congo はFontAwesome 6のアイコンをサポートしています。これらのアイコンは、 パーシャル - アイコン または ショートコード - アイコン のいずれかを使ってウェブサイトに含めることができます。","title":"アイコン"},{"content":" Congoはあなたのコンテンツに命を吹き込みます 😍 このセクションには、Congoがさまざまなタイプのコンテンツをどのようにレンダリングするかを示すいくつかのデモページがあります。また、 Tagsページの例も見ることができます。\n補足: このページは標準的なCongoの記事リストであり、Hugoは samples コンテンツタイプを生成し、記事の要約を表示するように設定されています。\n","date":null,"permalink":"/congo/ja/samples/","section":"サンプル","summary":"Congoはあなたのコンテンツに命を吹き込みます 😍 このセクションには、Congoがさまざまなタイプのコンテンツをどのようにレンダリングするかを示すいくつかのデモページがあります。また、 Tagsページの例も見ることができます。","title":"サンプル"},{"content":"Congoは高度にカスタマイズ可能なテーマで、最新のHugoの機能のいくつかを使用して、設定方法を簡素化しています。\nこのテーマには、基本的なブログまたは静的ウェブサイトを立ち上げて実行できるようにするデフォルト設定が同梱されています。\n同梱されている設定ファイルはTOMLフォーマットで提供されています。設定ファイルをYAMLやJSONに変換したい場合はご自由にどうぞ。\nデフォルトのテーマ設定は各ファイルに文書化されているので、ニーズに合わせて自由に設定を調整することができます。\nインストール手順で説明されているように、Hugoプロジェクトの config/_default/ にあるファイルを修正し、プロジェクトルートにある config.toml ファイルを削除することで、テーマの設定を調整します。 サイト設定 #Hugoの標準的な設定変数はテーマ全体を通して尊重されますが、最良のエクスペリエンスのために設定すべき特別なものもあります。\nサイトの設定は config/_default/config.toml ファイルで管理されます。下の表はCongoが利用するすべての設定の概要です。\nこの表で提供される変数名は、TOML構造を簡略化するためにドット記法を使用していることに注意してください（つまり、 outputs.home は [outputs] home を指します）。\nName Default Description theme \u0026quot;congo\u0026quot; Hugo Modulesを使用する場合、この設定値は削除してください。他のすべてのインストールタイプでは、テーマを機能させるために congo に設定する必要があります。 baseURL Not set ウェブサイトのルートへのURL。 defaultContentLanguage \u0026quot;en\u0026quot; この値はテーマコンポーネントとコンテンツのデフォルト言語を決定します。サポートされる言語コードについては、下記の 言語と国際化セクションを参照してください。 enableRobotsTXT true 有効にすると、サイトルートに robots.txt ファイルが作成され、検索エンジンがサイト全体をクロールできるようになります。あらかじめ用意されている robots.txt を利用したい場合は、false に設定して static ディレクトリにファイルを置いてください。完全にコントロールしたい場合は、 カスタムレイアウトを指定してこのファイルを生成することができます。 paginate 10 記事一覧の各ページに掲載される記事の数。 summaryLength 0 記事の要約が フロントマターで提供されていない場合に、記事の要約を生成するために使われる単語の数。デフォルト値 0 は最初の文章を使用します。この値は要約が非表示の場合には影響しません。 outputs.home [\u0026quot;HTML\u0026quot;, \u0026quot;RSS\u0026quot;, \u0026quot;JSON\u0026quot;] 生成される出力フォーマット。Congoでは、すべてのテーマコンポーネントが正しく動作するために、HTML、RSS、JSONが必要です。 permalinks Not set パーマリンクの設定はHugo docsを参照してください。 taxonomies Not set Taxonomiesについては、 コンテンツの整理セクションを参照してください。 言語と国際化 #Congoは完全な多言語ウェブサイト用に最適化されており、テーマのアセットはすぐに複数の言語に翻訳されます。言語設定により、複数バージョンのコンテンツを生成し、訪問者の母国語でカスタマイズされたエクスペリエンスを提供することができます。\nCongoは現在、以下の言語に対応しています:\nLanguage Code 🇬🇧 English (default) en 🇪🇬 Arabic ar 🇧🇩 Bengali bn 🇨🇳 Chinese - Simplified (China) zh-cn 🇹🇼 Chinese - Traditional (Taiwan) zh-tw 🇨🇿 Czech cs 🇳🇱 Dutch nl 🇫🇮 Finnish fi 🇫🇷 French fr 🇩🇪 German de 🇮🇱 Hebrew he 🇭🇺 Hungarian hu 🇮🇩 Indonesian id 🇮🇹 Italian it 🇯🇵 Japanese ja 🇵🇱 Polish pl 🇧🇷 Portuguese (Brazil) pt-br 🇵🇹 Portuguese (Portugal) pt-pt 🇷🇴 Romanian ro 🇷🇺 Russian ru 🇸🇰 Slovak sk 🇪🇸 Spanish (Spain) es 🇹🇷 Turkish tr 翻訳文字列を含むカスタムファイルを i18n/[code].yaml に作成することでデフォルトの翻訳をオーバーライドできます。このメソッドを使って新しい言語を追加することもできます。新しい翻訳をコミュニティと共有したい場合、Pull Requestを作ってください。\n設定 #可能な限り柔軟に対応するために、ウェブサイトの言語ごとに言語設定ファイルを作成する必要があります。デフォルトでは、Congoは config/_default/languages.en.toml に英語の言語設定を含んでいます。\n英語以外の言語でウェブサイトを作成したい場合は、デフォルトのファイルをテンプレートとして使用したり、ファイル名を変更したりすることができます。ファイル名は languages.[language-code].toml という形式にしてください。\n注記: サイト設定の defaultContentLanguage パラメーターが、言語設定ファイル名の [language-code] と一致していることを確認してください。 Name Default Description languageCode \u0026quot;en\u0026quot; このファイルの言語コード。トップレベル言語 (例 en)またはサブ変数 (例 en-AU)で、ファイル名の [language-code] と一致する必要があります。 languageName \u0026quot;English\u0026quot; 言語名。 languageDirection \u0026quot;ltr\u0026quot; RTL言語かどうか。 \u0026quot;rtl\u0026quot; に設定すると、コンテンツを右から左にリフローする。CongoはRTL言語とLTR言語の同時使用を完全にサポートしており、動的に両方の言語に調整します。 weight 1 多言語サイトを構築する際の優先順序。 title \u0026quot;Congo\u0026quot; ウェブサイトのタイトル。サイトのヘッダーとフッターに表示されます。 copyright Not set サイトのフッターに表示する著作権メッセージを含むMarkdown文字列。何も指定されない場合、Congoは title を使って自動的にコピーライト文字列を生成します。 params.dateFormat \u0026quot;2 January 2006\u0026quot; 日付の書式。許容される書式については、Hugo docsを参照してください。 params.mainSections Not set 最近の記事リストに表示するセクション。指定されていない場合は、記事の数が最も多いセクションが使われます。 params.description Not set ウェブサイトの説明。これはサイトのメタデータに使用されます。 author.name Not set 著者の名前。これは記事のフッターと、プロフィールレイアウトが使用されている場合にホームページに表示されます。 author.image Not set 著者の画像ファイルへのパス。画像は縦横比1:1で、 assets/ に置くこと。 author.headline Not set 著者の見出しを含むMarkdown文字列。プロフィールのトップページで著者の名前の下に表示されます。 author.bio Not set 著者の経歴を含むMarkdown文字列。記事のフッターに表示されます。 author.links Not set 著者の詳細とともに表示するリンク。設定ファイルにはリンクの例が含まれており、コメントを外すだけで有効にすることができます。リンクが表示される順番は、配列に表示される順番によって決まります。 assets/icons/ に対応するSVGアイコンを用意することで、カスタムリンクを追加することもできます。 メニュー #Congoは言語別メニュー設定もサポートしている。メニュー設定ファイルは、言語ファイルと同じ命名形式に従っています。ファイル名に言語コードを指定するだけで、そのファイルがどの言語に関連するかをHugoに伝えることができます。\nメニュー設定ファイルは menus.[language-code].toml という形式で命名されます。 [language-code] が設定と一致していることを常に確認してください。\nはじめにセクションで、このファイルの構造について詳しく説明しています。また、Hugo menu docsにも設定例があります。\nテーマパラメーター #Congoはテーマの機能を制御する多数の設定パラメーターを提供します。下の表は config/_default/params.toml ファイルで利用可能なパラメーターの概要です。\nパラメーターの多くは、フロントマターで指定することで、記事ごとに上書きすることができます。詳しくは、 フロントマターセクションを参照してください。\nName Default Description colorScheme \u0026quot;congo\u0026quot; 使用する配色。有効な値は congo (デフォルト), avocado, cherry, fire, ocean, sapphire, slate です。詳しくは カラースキームセクションを参照してください。 defaultAppearance \u0026quot;light\u0026quot; デフォルトのテーマ外観、 light または dark のいずれか。 autoSwitchAppearance true テーマの外観を訪問者のオペレーティングシステムの設定に基づいて自動的に切り替えるかどうか。常に defaultAppearance を使うようにするには false を設定します。 enableSearch false サイト内検索を有効にするかどうか。検索機能を有効にするには true を設定します。検索機能は、 サイト設定の outputs.home が正しく設定されているかどうかに依存することに注意してください。 enableCodeCopy false \u0026lt;code\u0026gt; ブロックに対してクリップボードへのコピーボタンを有効にするかどうか。 highlight.noClasses が false に設定されていなければ、コードコピーは正しく機能しません。 その他の設定ファイルについては以下を参照してください。 enableImageLazyLoading true ブラウザが遅延ロードするように画像をマークするかどうか。 robots Not set ロボットがあなたのサイトをどのように扱うべきかを示す文字列。設定された場合、 \u0026lt;head\u0026gt; に出力されます。有効な値についてはGoogleのドキュメントを参照してください。 fingerprintAlgorithm \u0026quot;sha256\u0026quot; assets にフィンガープリントを行う際のハッシュアルゴリズム。有効なオプションは md5、sha256、sha384 および sha512 です。 header.layout \u0026quot;basic\u0026quot; ヘッダーとメニューのレイアウト。有効な値は basic、hamburger、hybridまたはcustomです。 custom に設定した場合は、 /layouts/partials/header/custom.html ファイルを作成して独自のレイアウトを指定する必要があります。 header.logo Not set assets/ 内のロゴファイルへの相対パス。ロゴファイルは2倍の解像度で提供され、任意の画像サイズに対応している必要があります。 header.logoDark Not set dark モード時に使用されるロゴファイルへの相対パス。 header.showTitle true サイトのタイトルをヘッダーに表示するかどうか。 footer.showCopyright true サイトフッターにコピーライト文字列を表示するかどうか。 言語と国際化の copyright パラメーターを使って文字列自体をカスタマイズできます。 footer.showThemeAttribution true \u0026ldquo;Powered by Hugo \u0026amp; Congo\u0026rdquo; といった帰属表示をフッターに表示するかどうか。この表示を無効にする場合は、サイト上の他の場所（例えば、アバウトページなど）でテーマの帰属を表示することを検討してください。 footer.showAppearanceSwitcher false フッターに外観スイッチャーを表示するかどうか。訪問者の設定を保持するためにブラウザのローカルストレージが使用されます。 footer.showScrollToTop true true に設定すると、最上部にスクロールする矢印が表示されます。 homepage.layout \u0026quot;page\u0026quot; ホームページのレイアウト。有効な値は page, profile または custom です。 custom に設定した場合は、 /layouts/partials/home/custom.html ファイルを作成して、独自のレイアウトを指定する必要があります。詳しくは ホームページレイアウトセクションを参照してください。 homepage.showRecent false ホームページに最近の記事リストを表示するかどうか。 homepage.recentLimit 5 homepage.showRecent が true の場合に表示する最近の記事の最大数。 article.showDate true 記事が作成された日付を表示するかどうか。 article.showDateUpdated false 記事が更新された日付を表示するかどうか。 article.showAuthor true 記事フッターに著者欄を表示するかどうか。 article.showBreadcrumbs false 記事のヘッダーにパンくずリストを表示するかどうか。 article.showDraftLabel true --buildDrafts でビルドしたときに、記事の横に下書きインジケータを表示するかどうか。 article.showEdit false 記事の内容を編集するためのリンクを表示するかどうか。 article.editURL Not set article.showEdit がアクティブな場合の編集リンクのURL。 article.editAppendPath true article.editURLで設定されたURLに現在の記事へのパスを追加するかどうか。 article.showHeadingAnchors true 見出しアンカーリンクを記事内の見出しと一緒に表示するかどうか。 article.showPagination true 記事のフッターに次/前の記事リンクを表示するかどうか。 article.invertPagination false 次の記事/前の記事リンクの向きを反転させるかどうか。 article.showReadingTime true 記事の予想読了時間を表示するかどうか。 article.showTableOfContents false 記事に目次を表示するかどうか。 article.showTaxonomies false この記事に関連するTaxonomiesを表示するかどうか。 article.showWordCount false 記事の単語数を表示するかどうか。 article.showComments false コメントを記事フッターの後に含めるかどうか。 article.sharingLinks Not set 各記事の最後に共有リンクを表示するかどうか。 false にすると共有リンクは表示されません。 list.showBreadcrumbs false リストページのヘッダーにパンくずリストを表示するかどうか。 list.showTableOfContents false リストページに目次を表示するかどうか。 list.showTaxonomies false リストページに関連するTaxonomiesを表示するかどうか。 list.showSummary false リストページに記事の要約を表示するかどうか。もし フロントマターで要約が提供されていない場合、 サイト設定の summaryLength パラメーターを使って要約が自動生成されます。 list.groupByYear true リストページで記事を年ごとにグループ化するかどうか。 list.paginationWidth 1 リストページを切り詰める際に、現在のページの両側にいくつのページネーションリンクを出力するか。 1 の場合、現在のページの両側に1つのリンクを出力します。 最初のページ と 最後のページ へのリンクは常に表示され、この値に追加されます。 sitemap.excludedKinds [\u0026quot;taxonomy\u0026quot;, \u0026quot;term\u0026quot;] 生成される /sitemap.xml から除外されるべきコンテンツの種類。許容される値についてはHugo docsを参照してください。 taxonomy.showTermCount true TaxonomiesのリストにTermごとの記事数を表示するかどうか。 fathomAnalytics.site Not set Fathom Analyticsによって生成されたウェブサイトのサイトコード。詳細は アナリティクスを参照してください。 fathomAnalytics.domain Not set Fathom Analyticsでカスタムドメインを使用している場合、カスタムドメインからscript.jsを提供するためにここに指定します。 verification.google Not set サイトのメタデータに含めるGoogleが提供するサイト検証文字列。 verification.bing Not set サイトのメタデータに含めるBingが提供するサイト検証文字列。 verification.pinterest Not set サイトのメタデータに含めるPinterestが提供するサイト検証文字列。 verification.yandex Not set サイトのメタデータに含めるYandexが提供するサイト検証文字列。 その他の設定ファイル #このテーマには markup.toml 設定ファイルも含まれています。このファイルにはいくつかの重要なパラメータが含まれており、Congoで構築されたサイトを生成するためにHugoが正しく設定されるようにします。\nこのファイルがconfigディレクトリに存在し、必要な値が設定されていることを常に確認してください。これを行わないと、特定の機能が正しく動作しなかったり、意図しない動作になったりする可能性があります。\n","date":null,"permalink":"/congo/ja/docs/configuration/","section":"ドキュメント","summary":"Congoで利用可能なすべてのサイト、言語、テーマ設定と、それらを使用してプロジェクトをカスタマイズする方法をご覧ください。","title":"基本設定"},{"content":" Congoを使用して構築された実際のウェブサイト。 以下は、Congoを使って構築されたウェブサイトのほんの一握りです。このテーマでできることの素晴らしさをご覧ください。\nWebsite Details jamespanther.com Personal site - Theme author antoinesoetewey.com Personal site leif.io Personal site and Tech blog dr460nf1r3.org Personal site and Blog OCram85.com Personal site and Blog mackiser.github.io Personal site and Blog jamesmillner.dev Personal site and Blog jeremic.ca Personal site and Blog rohn.tech Personal site klimafreundlicher-kochen.de Food blog (in German) datanalyze.be Professional site sneaky-potato.github.io Professional site and Blog kelset.dev Personal site docteurelsavancaster.com Professional site ruihao-li.github.io Personal site and Blog phalanxhead.dev Personal site and Blog Bible Multi Apps Personal site and Blog Jh123x Personal site and Blog sforzando LLC. and Inc. Corporate site and Blog szegedkungfu.hu Sports association site jcransom.com Personal Site and Blog cbrincoveanu.com Personal site and Blog medical-humanities Academic site boyersnet.com Personal site and Blog major.io Personal site and Blog 顾宇的博客 Personal Blog (in Chinese) cgutierr-zgz.github.io Personal site and Tech blog adam.sr Personal site and Blog kpavlov.me Personal site and Blog pfisterer.dev Personal site and Blog davidrothera.me Personal site and Blog sug.bitprism.net Personal Site and Blog arjuns.me Personal Site and Blog statistix.be Professional site sathyabh.at Personal Site and Blog leonidasv.com Personal site and Blog andrew-jones.com Personal site and tech blog nikita.computer Personal site and tech blog blog.dejavu.moe Personal blog and weekly issues spiffyeight77.com Personal blog Tomy\u0026rsquo;s Blog Personal site and Blog Beerjoa Blog Personal site and Blog simaosilva.com Personal Site kom.al Personal Site Congoを使っていますか？ あなたのウェブサイトを加えるためにPull Requestを投げてください。\n","date":null,"permalink":"/congo/ja/users/","section":"Congoへようこそ! 🎉","summary":"Congoを使用して構築された実際のウェブサイト。 以下は、Congoを使って構築されたウェブサイトのほんの一握りです。このテーマでできることの素晴らしさをご覧ください。","title":"利用例"},{"content":"","date":null,"permalink":"/congo/ja/tags/homepage/","section":"Tags","summary":"","title":"homepage"},{"content":"","date":null,"permalink":"/congo/ja/tags/layouts/","section":"Tags","summary":"","title":"layouts"},{"content":"Congoは柔軟なホームページレイアウトを提供します。2つのメインテンプレートから選択でき、追加設定でデザインを調整できます。また、独自のテンプレートを用意して、ホームページの内容を完全にコントロールすることもできます。\nホームページのレイアウトは params.toml 設定ファイルの homepage.layout 設定によって制御されます。さらに、すべてのレイアウトには 最近の記事を表示するオプションがあります。\nページレイアウト #デフォルトのレイアウトはページレイアウトです。これはシンプルにMarkdownコンテンツを表示します。静的なウェブサイトには最適で、多くの柔軟性を提供します。\nページレイアウトを有効にするには、 params.toml 設定ファイルで homepage.layout = \u0026quot;page\u0026quot; を設定します。\nプロフィールレイアウト #プロフィールレイアウトは、個人のウェブサイトやブログに最適です。画像とソーシャル・プロフィールへのリンクを提供することで、著者の詳細を前面に押し出します。\n著者情報は languages 設定ファイルで提供されます。パラメーターの詳細については、 はじめにと 言語と国際化セクションを参照してください。\nさらに、ホームページのコンテンツで提供されるすべてのMarkdownコンテンツは、著者プロフィールの下に配置されます。これにより、ショートコードを使用した著者の略歴やその他のカスタムコンテンツを表示するための柔軟性が増します。\nプロフィールレイアウトを有効にするには、 params.toml 設定ファイルで homepage.layout = \u0026quot;profile\u0026quot; を設定します。\nカスタムレイアウト #組み込みのホームページレイアウトがあなたのニーズに十分でない場合は、独自のカスタムレイアウトを提供するオプションがあります。これにより、ページの内容を完全にコントロールすることができ、白紙の状態から作成することができます。\nカスタムレイアウトを有効にするには、 params.toml 設定ファイルで homepage.layout = \u0026quot;custom\u0026quot; を設定します。\n設定値が設定された状態で、新しい custom.html ファイルを作成し、 layouts/partials/home/custom.html に配置してください。これで、 custom.html ファイルにあるものは何でも、サイトのホームページのコンテンツエリアに配置されるようになります。レイアウトの定義には、HTML、Tailwind、Hugoのテンプレート関数など、お好きなものをお使いください。\nカスタムレイアウトに 最近の記事を含めるには、 recent-articles.html パーシャルを使います。\n例として、このサイトの ホームページでは、カスタムレイアウトを使ってページとプロフィールのレイアウトを切り替えられるようにしています。GitHub repoを訪問して、どのように動作するか見てみましょう。\n最近の記事 #すべてのホームページレイアウトには、メインページコンテンツの下に最近の記事を表示するオプションがあります。これを有効にするには、 params.toml 設定ファイルの homepage.showRecent 設定を true にするだけです。\nこのセクションにリストされる記事は、 mainSections 設定から派生したもので、あなたのウェブサイトで使用しているコンテンツタイプに対応します。例えば、 posts と projects のコンテンツセクションがある場合、この設定を [\u0026quot;posts\u0026quot;, \u0026quot;projects\u0026quot;] に設定することで、これら2つのセクションにあるすべての記事が最近の記事リストに出力されます。Congoはこの設定が配列であることを想定しているので、すべてのコンテンツに1つのセクションしか使用しない場合は、この設定を適宜変更してください: [\u0026quot;blog\u0026quot;]\n","date":null,"permalink":"/congo/ja/docs/homepage-layout/","section":"ドキュメント","summary":"Congoは、組み込みテンプレートと独自のテンプレートを提供する機能によって、柔軟なホームページレイアウトを提供します。","title":"ホームページレイアウト"},{"content":"","date":null,"permalink":"/congo/ja/tags/front-matter/","section":"Tags","summary":"","title":"front matter"},{"content":"Hugoのフロントマターパラメーターに加えて、Congoは個々の記事の表示をカスタマイズするためのオプションを追加しています。利用可能なフロントマターのパラメーターを以下に示します。\nフロントマターパラメーターのデフォルト値はテーマの 基本設定から継承されるので、デフォルトを上書きしたい場合にのみフロントマターでこれらのパラメーターを指定する必要があります。\nName Default Description title Not set 記事の名前。 description Not set 記事の説明文。HTMLメタデータで使用されます。 feature \u0026quot;*feature*\u0026quot; この記事の feature 画像のファイル名にマッチするテキストパターン。 featureAlt \u0026quot;\u0026quot; feature 画像の代替テキスト説明。 cover \u0026quot;*cover*\u0026quot; この記事の cover 画像のファイル名にマッチするテキストパターン。 coverAlt featureAlt cover 画像の代替テキスト説明。 coverCaption Not set cover 画像の下に表示されるキャプションテキスト。 thumbnail \u0026quot;*thumb*\u0026quot;_ この記事の thumb 画像のファイル名にマッチするテキストパターン。 thumbnailAlt featureAlt thumb 画像の代替テキスト説明。 externalUrl Not set この記事が第三者のウェブサイトで公開されている場合のURL。URLを提供することで、コンテンツページが生成されるのを防ぎ、この記事への参照はすべて第三者のウェブサイトに直接リンクされます。 editURL article.editURL showEdit がアクティブな場合の編集リンクのURL。 editAppendPath article.editAppendPath editURLで設定されたURLに現在の記事へのパスを追加するかどうか。 groupByYear list.groupByYear 一覧ページで記事を年ごとにグループ化するかどうか。 keywords Not set 記事のメタデータに含めるべきキーワード。 menu Not set 値が指定されると、指定されたメニューにこの記事へのリンクが表示されます。有効な値は main または footer です。 robots Not set ロボットがこの記事をどのように扱うべきかを示す文字列。設定された場合、 \u0026lt;head\u0026gt; に出力されます。有効な値についてはGoogleのドキュメントを参照してください。 sharingLinks article.sharingLinks この記事の最後にどの共有リンクを表示するか。 false に設定すると共有リンクは表示されません。 showAuthor article.showAuthor 記事フッターに著者欄を表示するかどうか。 showBreadcrumbs article.showBreadcrumbs or list.showBreadcrumbs パンくずリストを記事のヘッダーに表示するか、リストのヘッダーに表示するか。 showDate article.showDate 記事が作成された日付を表示するかどうか。日付は date パラメーターで設定します。 showDateUpdated article.showDateUpdated 記事が更新された日付を表示するかどうか。日付は lastmod パラメーターで設定します。 showEdit article.showEdit 記事の内容を編集するためのリンクを表示するかどうか。 showHeadingAnchors article.showHeadingAnchors 見出しアンカーリンクを記事内の見出しと一緒に表示するかどうか。 showPagination article.showPagination 記事のフッターに次/前の記事リンクを表示するかどうか。 invertPagination article.invertPagination 次の記事/前の記事リンクの向きを反転させるかどうか。 showReadingTime article.showReadingTime 記事の予想読了時間を表示するかどうか。 showTaxonomies article.showTaxonomies この記事に関連するTaxonomiesを表示するかどうか。 showTableOfContents article.showTableOfContents この記事に目次を表示するかどうか。 showWordCount article.showWordCount 記事の単語数を表示するかどうか。 showComments article.showComments コメントを記事フッターの後に含めるかどうか。 showSummary list.showSummary リストページに記事の要約を表示するかどうか。 summary Auto generated using summaryLength (see site configuration) showSummary が有効な場合、この記事の要約として使用されるMarkdown文字列。 xml true unless excluded by sitemap.excludedKinds この記事が /sitemap.xml ファイルに含まれるかどうか。 ","date":null,"permalink":"/congo/ja/docs/front-matter/","section":"ドキュメント","summary":"CongoはほとんどのHugoのデフォルト設定をサポートしつつ、個々の記事の表示をカスタマイズするための多くのフロントマターを追加しています。","title":"フロントマター"},{"content":"","date":null,"permalink":"/congo/ja/tags/icon/","section":"Tags","summary":"","title":"icon"},{"content":"","date":null,"permalink":"/congo/ja/tags/lead/","section":"Tags","summary":"","title":"lead"},{"content":"","date":null,"permalink":"/congo/ja/tags/mermaid/","section":"Tags","summary":"","title":"mermaid"},{"content":"すべてのデフォルトのHugoショートコードに加えて、Congoは追加機能のためにいくつか追加しています。\nアラート #alert は、その内容をスタイル化されたメッセージボックスとして記事内に出力します。読者に見逃してほしくない重要な情報に注意を促すのに便利です。\n入力はMarkdownで書かれているので、好きなようにフォーマットできます。\nデフォルトでは、警告の三角形アイコンで表示されます。アイコンを変更するには、アイコン名をショートコードに含めます。アイコンの使い方については、 アイコンをご覧ください。\n例:\n{{\u0026lt; alert \u0026gt;}} **警告！** この行為は破壊的です！ {{\u0026lt; /alert \u0026gt;}} {{\u0026lt; alert \u0026#34;twitter\u0026#34; \u0026gt;}} Twitterで私を[フォロー](https://twitter.com/jpanther)することをお忘れなく！ {{\u0026lt; /alert \u0026gt;}} 警告！ この行為は破壊的です！ Twitterで私をフォローすることをお忘れなく！ バッジ #badge は、メタデータを表示するのに便利なスタイル付きバッジコンポーネントを出力します。\n例:\n{{\u0026lt; badge \u0026gt;}} 新着記事！ {{\u0026lt; /badge \u0026gt;}} 新着記事！ ボタン #button は主要なアクションを強調するために使用できるスタイル付きボタンコンポーネントを出力します。オプションで3つのパラメーターを持ちます:\nParameter Description href ボタンがリンクするURL。 target リンクのターゲット。 download ブラウザがURLに移動するのではなく、リソースをダウンロードするかどうか。このパラメーターの値はダウンロードされるファイルの名前になります。 例:\n{{\u0026lt; button href=\u0026#34;#button\u0026#34; target=\u0026#34;_self\u0026#34; \u0026gt;}} Click! {{\u0026lt; /button \u0026gt;}} Click! チャート #chart は、Chart.jsライブラリを使用して、単純な構造化データを使用して記事にチャートを埋め込みます。多くの異なるチャートスタイルをサポートしており、全てはショートコード内から設定することができます。ショートコードのタグの間にチャートのパラメーターを指定するだけで、あとはChart.jsがやってくれます。\n構文とサポートされるチャート・タイプの詳細については、Chart.js公式ドキュメントを参照してください。\n例:\n{{\u0026lt; chart \u0026gt;}} type: \u0026#39;bar\u0026#39;, data: { labels: [\u0026#39;Tomato\u0026#39;, \u0026#39;Blueberry\u0026#39;, \u0026#39;Banana\u0026#39;, \u0026#39;Lime\u0026#39;, \u0026#39;Orange\u0026#39;], datasets: [{ label: \u0026#39;# of votes\u0026#39;, data: [12, 19, 3, 5, 3], }] } {{\u0026lt; /chart \u0026gt;}} サンプル - チャートで、他のサンプルを見るこができます。\n図 #Congoには、コンテンツに画像を追加するための figure ショートコードが含まれています。このショートコードは、Hugoの基本機能を置き換えることで、さらなるパフォーマンス上の利点を提供します。\n提供された画像がページリソースである場合、Hugo Pipesを使用して最適化され、さまざまなデバイスの解像度に適した画像が提供されるように拡大縮小されます。静的アセットや外部画像へのURLが提供された場合は、Hugoによる画像処理は行われず、そのまま含まれます。\nfigure は6つのパラメーターを受け入れます:\nParameter Description src 必須 画像のローカルパス/ファイル名またはURL。パスとファイル名を指定すると、テーマは次の順番で画像を探します: まず、ページにバンドルされているページリソース、次に assets/ ディレクトリ、最後に static/ ディレクトリ。 alt 画像の代替テキスト説明。 caption 画像の下に表示される画像キャプションのMarkdown文字列。 class 画像に適用する追加のCSSクラス。 href 画像のリンク先URL。 default デフォルトのHugo figure の動作に戻す際には default=true を指定し、通常のHugo ショートコード構文を参照してください。 Congoは、標準的なMarkdown構文を使用した場合の画像についても自動変換をサポートしています。以下のフォーマットを使用するだけで処理します:\n![Alt text](image.jpg \u0026#34;Image caption\u0026#34;) 例:\n{{\u0026lt; figure src=\u0026#34;abstract.jpg\u0026#34; alt=\u0026#34;抽象的な紫色のアートワーク\u0026#34; caption=\u0026#34;Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)\u0026#34; \u0026gt;}} \u0026lt;!-- OR --\u0026gt; ![抽象的な紫色のアートワーク](abstract.jpg \u0026#34;Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)\u0026#34;) Photo by Jr Korpa on Unsplash アイコン #icon はアイコンの名前を唯一のパラメーターとして受け取り、SVGアイコンを出力します。アイコンは現在のテキストサイズに合わせて自動的に拡大縮小されます。\n例:\n{{\u0026lt; icon \u0026#34;github\u0026#34; \u0026gt;}} 出力: アイコンはHugo Pipesを使って配置されるため、非常に柔軟性があります。Congoには、ソーシャル、リンク、その他の目的のために多くのビルトインアイコンが含まれています。サポートされているアイコンの完全なリストは、 サンプル - アイコンページをチェックしてください。\nカスタムアイコンは、プロジェクトの assets/icons/ ディレクトリに独自のアイコンアセットを提供することで追加できます。アイコンは拡張子 .svg を除いたSVGファイル名でショートコードから参照できます。\nアイコンは パーシャル - アイコンを呼び出すことでパーシャルでも使用できます。\nKatex #katex を使うと、KaTeXパッケージを使って記事の内容に数式を追加することができます。利用可能な構文についてはsupported TeX functionsのオンラインリファレンスを参照してください。\n記事中に数式を含めるには、コンテンツ内の任意の場所にショートコードを配置するだけです。記事ごとに一度記述するだけで、KaTeXが自動的にそのページのマークアップをレンダリングします。インライン表記とブロック表記の両方がサポートされています。\nインライン記法は、式を区切り記号 \\\\( と \\\\) で囲むことで生成できます。ブロック記法の場合は $$ です。\n例:\n{{\u0026lt; katex \u0026gt;}} \\\\(f(a,b,c) = (a^2+b^2+c^2)^3\\\\) \\(f(a,b,c) = (a^2+b^2+c^2)^3\\)\n数学的表記のサンプルでより多くの例をチェックしてください。\nリード #lead は記事の冒頭を強調するために使われます。導入部のスタイルや、重要な情報を呼び出すために使用することができます。Markdownのコンテンツを lead で囲むだけです。\n例:\n{{\u0026lt; lead \u0026gt;}} 人生があなたにレモンを与えるなら、それでレモネードを作りなさい。 {{\u0026lt; /lead \u0026gt;}} 人生があなたにレモンを与えるなら、それでレモネードを作りなさい。 Mermaid #mermaid を使えば、テキストを使って詳細なダイアグラムやビジュアライゼーションを描くことができます。Mermaidを使用しており、様々なダイアグラム、チャート、その他の出力形式をサポートしています。\nmermaid 内にMermaid構文を記述するだけで、あとはプラグインにおまかせです。\n構文とサポートされている図の種類の詳細については、Mermaid公式ドキュメントを参照してください。\n例:\n{{\u0026lt; mermaid \u0026gt;}} graph LR; A[レモン]--\u0026gt;B[レモネード]; B--\u0026gt;C[利益] {{\u0026lt; /mermaid \u0026gt;}} graph LR; A[レモン]--\u003eB[レモネード]; B--\u003eC[利益] ダイアグラムとフローチャートのサンプルで、他の例を見ることができます。\n","date":null,"permalink":"/congo/ja/docs/shortcodes/","section":"ドキュメント","summary":"Congoには、画像、図表、ボタンなどのリッチコンテンツを記事に追加するショートコードが含まれています。","title":"ショートコード"},{"content":"","date":null,"permalink":"/congo/ja/tags/analytics/","section":"Tags","summary":"","title":"analytics"},{"content":"","date":null,"permalink":"/congo/ja/tags/comments/","section":"Tags","summary":"","title":"comments"},{"content":"","date":null,"permalink":"/congo/ja/tags/favicons/","section":"Tags","summary":"","title":"favicons"},{"content":"","date":null,"permalink":"/congo/ja/tags/partials/","section":"Tags","summary":"","title":"partials"},{"content":"","date":null,"permalink":"/congo/ja/tags/privacy/","section":"Tags","summary":"","title":"privacy"},{"content":"アナリティクス #CongoはFathom AnalyticsとGoogle Analyticsをビルトインでサポートしています。Fathomはユーザーのプライバシーを尊重するGoogle Analyticsの有料代替サービスです。ご興味のある方は、このアフィリエイトリンクから10ドルのクレジットを受け取ってください。\nFathom Analytics #Fathom Analyticsのサポートを有効にするには、 config/_default/params.toml ファイルにFathomサイトコードを記述するだけです。Fathomのカスタムドメイン機能を使用し、ドメインからスクリプトを提供したい場合は、 domain 設定値を追加で指定することもできます。 domain の値を指定しない場合、スクリプトはFathom DNSから直接読み込まれます。\n# config/_default/params.toml [fathomAnalytics] site = \u0026#34;ABC12345\u0026#34; domain = \u0026#34;llama.yoursite.com\u0026#34; Google Analytics #Google Analyticsのサポートは内部のHugoパーシャルを通して提供されます。 config/_default/config.toml ファイルに googleAnalytics キーを指定するだけで、スクリプトが自動的に追加されます。\n提供された設定値に基づいて、バージョン3（analytics.js）とバージョン4（gtag.js）の両方がサポートされています:\n# config/_default/config.toml # version 3 googleAnalytics = \u0026#34;UA-PROPERTY_ID\u0026#34; # version 4 googleAnalytics = \u0026#34;G-MEASUREMENT_ID\u0026#34; Custom analytics providers #別のアナリティクスプロバイダーを使いたい場合は、アナリティクスパーシャルをオーバーライドして独自のスクリプトを提供することもできます。 layouts/partials/analytics.html ファイルをプロジェクトに作成するだけで、ウェブサイトの \u0026lt;head\u0026gt; に自動的にインクルードされます。\nコメント #記事にコメント機能を追加するために、Congoは各記事ページのベースに含まれるコメントパーシャルのサポートを含んでいます。 layouts/partials/comments.html を提供するだけで、選択したコメントを表示するために必要なコードが含まれます。\n組み込みのHugo Disqusテンプレートを使用するか、独自のカスタムコードを提供することができます。詳しくはHugo docsを参照してください。\nコメントを表示する場所をより細かく制御するために showComments パラメーターを使用します。この値は params.toml の テーマパラメーターとして設定するか、 フロントマターに含めることで記事ごとに設定するか、選ぶことができます。このパラメーターはデフォルトで false に設定されているので、コメントを表示させるにはこれらの場所のいずれかで true に設定する必要があります。\nファビコン #Congoはデフォルトで空白のファビコンセットを提供しますが、それを上書きするために独自のアセットを設定することができます。新しいファビコンを入手する最も簡単な方法は、favicon.ioのようなサードパーティプロバイダーを使って生成することです。\nアイコンアセットは、ウェブサイトの static/ に直接配置し、以下のリストに従って名前を付けてください。favicon.ioを使用する場合、これらは自動的に生成されるファイル名になりますが、必要に応じて独自のアセットを提供することもできます。\nstatic/ ├─ android-chrome-192x192.png ├─ android-chrome-512x512.png ├─ apple-touch-icon.png ├─ favicon-16x16.png ├─ favicon-32x32.png ├─ favicon.ico └─ site.webmanifest また、デフォルトのファビコンの動作を完全にオーバーライドすることもできます。 layouts/partials/favicons.html ファイルをプロジェクトに提供するだけで、デフォルトのアセットの代わりに \u0026lt;head\u0026gt; に注入されます。\nアイコン # ショートコード - アイコンと同様に、Congoの icon.html パーシャルを使うことで、独自のテンプレートやパーシャルにアイコンを含めることができます。このパーシャルにはアイコンの名前を指定します。\n例:\n{{ partial \u0026#34;icon.html\u0026#34; \u0026#34;github\u0026#34; }} アイコンはHugo Pipesを使って配置されるため、非常に柔軟性があります。Congoには、ソーシャル、リンク、その他の目的のために多くのビルトインアイコンが含まれています。サポートされているアイコンの完全なリストは、 サンプル - アイコン ページをチェックしてください。\nカスタムアイコンはプロジェクトの assets/icons/ ディレクトリに独自のアイコンアセットを提供することで追加できます。アイコンは拡張子 .svg を除いたSVGファイル名でパーシャルから参照できます。\nExtensions #Congoは基本機能の拡張を可能にする多くのパーシャルを提供しています。\n記事リンク #記事リンクの後に追加のコードを挿入したい場合は、 layouts/partials/extend-article-link.html ファイルを作成してください。これは、特定の記事のメタデータをハイライトするために使用できる バッジショートコードと組み合わせると特に強力です。\nHeadとFooter #テンプレートの \u0026lt;head\u0026gt; と \u0026lt;footer\u0026gt; に直接追加コードを挿入することができます。これらはテーマの一部ではないスクリプトやその他のロジックを提供するのに便利です。\nlayouts/partials/extend-head.html または layouts/partials/extend-footer.html を作成するだけで、これらは自動的にあなたのウェブサイトに挿入されます。どちらのパーシャルも \u0026lt;head\u0026gt; と \u0026lt;footer\u0026gt; の最後の項目として挿入されるので、テーマのデフォルトを上書きするために使用することができます。\n","date":null,"permalink":"/congo/ja/docs/partials/","section":"ドキュメント","summary":"パーシャルは、アナリティクス、コメント、ファビコン、カスタムスクリプトなどの特別な機能をテーマに追加するために使用されます。","title":"パーシャル"},{"content":"","date":null,"permalink":"/congo/ja/tags/content/","section":"Tags","summary":"","title":"content"},{"content":"","date":null,"permalink":"/congo/ja/tags/example/","section":"Tags","summary":"","title":"example"},{"content":"ドキュメントを順番に読んできたのなら、Congoで利用可能な機能と設定についてはすべて知っているはずです。このページでは、それらをまとめて、あなたがHugoプロジェクトで使いたくなるような例をいくつか紹介します。\nヒント: もしあなたがHugoに慣れていないのであれば、Hugo docsをチェックし、ページバンドルとリソースの概念について学んでください。 このページで紹介する例はさまざまなシナリオに適用できますが、個々のプロジェクトで特定のコンテンツ項目をフォーマットする方法について、いくつかのアイデアが得られることを願っています。\nブランチページ #Hugoのブランチページバンドルは、ホームページ、セクションリスト、Taxonomyページのような項目をカバーしています。ブランチバンドルについて覚えておくべき重要なことは、このコンテンツタイプのファイル名は _index.md` であるということです。\nCongoはブランチページで指定されたフロントマターを尊重し、デフォルト設定を上書きします。例えば、ブランチページで title パラメーターを設定すると、ページタイトルを上書きすることができます。\nホームページ # Layout: layouts/index.html Content: content/_index.md Congoのホームページは、ホームページレイアウト設定パラメーターによって包括的なデザインが制御されるという点で特別です。これについては ホームページレイアウトセクションで詳しく説明しています。\nこのページにカスタムコンテンツを追加したい場合は、 content/_index.md ファイルを作成するだけです。このファイルにあるものはすべてホームページに含まれます。\n例:\n--- title: \u0026#34;Congoへようこそ！\u0026#34; description: \u0026#34;これはホームページにコンテンツを追加するデモです\u0026#34; --- 私のウェブサイトへようこそ！立ち寄ってくれて本当に嬉しいです。 この例では、カスタムタイトルを設定し、ページ本文にいくつかの追加テキストを追加します。ショートコード、画像、リンクを含め、どのようなMarkdownフォーマットのテキストでも構いません。\nリストページ # Layout: layouts/_default/list.html Content: content/../_index.md リストページは、セクション内のすべてのページをグループ化し、訪問者が各ページに到達するための方法を提供します。ブログやポートフォリオは、記事やプロジェクトをグループ化したリストページの例です。\nリストページの作成は、 content 内にサブディレクトリを作成するのと同じくらい簡単です。例えば、\u0026ldquo;Projects\u0026quot;セクションを作成するには、 content/projects/ を作成します。そして、プロジェクトごとにMarkdownファイルを作成します。\nデフォルトではリストページが生成されますが、コンテンツをカスタマイズするために、この新しいディレクトリに_index.mdページも作成してください。\n. └── content └── projects ├── _index.md # /projects ├── first-project.md # /projects/first-project └── another-project ├── index.md # /projects/another-project └── project.jpg Hugoは、 content/projects 内のページのURLを適宜生成します。\nホームページと同じように、 _index.md ファイルのコンテンツは生成されたリストインデックスに出力されます。Congoはこのセクションのすべてのページをリストします。\n例:\n--- title: \u0026#34;Projects\u0026#34; description: \u0026#34;私のプロジェクトについて\u0026#34; cascade: showReadingTime: false --- このセクションには、私が現在取り組んでいるすべてのプロジェクトが含まれています。 この例では、特別な cascade パラメーターを使って、このセクション内のサブページの読書時間を非表示にしています。こうすることで、どのプロジェクトページでも読書時間が表示されなくなります。これは、個々のページにデフォルトのテーマパラメーターを含めなくても、セクション全体のデフォルトのテーマパラメーターを上書きすることができる素晴らしい方法です。\nこのサイトの サンプルはリストページの一例です。\nTaxonomyページ # List layout: layouts/_default/taxonomy.html Term layout: layouts/_default/term.html Content: content/../_index.md Taxonomyページには、TaxonomyのリストとTaxonomyのTermという2つの形式があります。リストはTaxonomy内の各Termのリストを表示し、Termは指定されたTermに関連するページのリストを表示します。\nTermは少し混乱しやすいので、animals というTaxonomyを使って例を探ってみましょう。\nまず、HugoでTaxonomyを使うには設定が必要です。 config/_default/taxonomies.toml に設定ファイルを作成し、Taxonomyの名前を定義します。\n# config/_default/taxonomies.toml animal = \u0026#34;animals\u0026#34; HugoはTaxonomyを単数形と複数形でリストすることを想定しているので、単数形の animal と複数形の animals を追加して、例のTaxonomyを作成します。\nこれで animals Taxonomyが存在することになったので、個々のコンテンツに追加する必要があります。フロントマターに挿入するだけです:\n--- title: \u0026#34;ライオンの巣へ\u0026#34; description: \u0026#34;今週はライオンについて学びます\u0026#34; animals: [\u0026#34;lion\u0026#34;, \u0026#34;cat\u0026#34;] --- これで animals Taxonomyの中に lion と cat というTermができたことになります。\nこの時点では明らかではありませんが、Hugoはこの新しいTaxonomyリストとTermのページを生成します。デフォルトでは、リストは /animals/ に、Termページは /animals/lion/ と /animals/cat/ になります。\nリストページはTaxonomyに含まれるすべてのTermをリストアップします。この例では、 /animals/ に移動すると、 lion と cat のリンクがあるページが表示され、訪問者はそれぞれのTermページに移動できます。\nTermページはそのTermが含まれるすべてのページをリストアップします。これらのTermリストは基本的に通常の リストページとほとんど同じように動作します。\nTaxonomyページにカスタムコンテンツを追加するには、Taxonomy名をサブディレクトリとして、 content 内に _index.md ファイルを作成するだけです。\n. └── content └── animals ├── _index.md # /animals └── lion └── _index.md # /animals/lion これらのコンテンツファイルにあるものは生成されたTaxonomyページに配置されます。他のコンテンツと同じように、フロントマターはデフォルトを上書きするために使うことができます。このように、 lion という名前のタグがあっても、 title を\u0026quot;Lion\u0026quot;に上書きすることができます。\nこれが実際にどのように見えるかは、このサイトの Tagsをチェックしてください。\nリーフページ # Layout: layouts/_default/single.html Content (standalone): content/../page-name.md Content (bundled): content/../page-name/index.md Hugoのリーフページは基本的に標準的なコンテンツページです。サブページを含まないページとして定義されます。例えば、アバウトページや、ウェブサイトのブログセクションにある個々のブログ記事などです。\nリーフページについて覚えておくべき最も重要なことは、ブランチページとは異なり、リーフページはアンダースコアなしで index.md と名前をつけるべきということです。リーフページはまた、セクションのトップレベルにまとめて一意な名前をつけることができるという点で特別です。\n. └── content └── blog ├── first-post.md # /blog/first-post ├── second-post.md # /blog/second-post └── third-post ├── index.md # /blog/third-post └── image.jpg 画像などをページに含める場合、ページバンドルを使用する必要があります。ページバンドルは index.md ファイルを含むサブディレクトリを使って作成します。ショートコードやその他のテーマロジックの多くは、リソースがページと一緒にバンドルされていることを前提としているので、コンテンツと一緒に独自のディレクトリにグループ化することが重要です。\n例:\n--- title: \u0026#34;初めてのブログ投稿\u0026#34; date: 2022-01-25 description: \u0026#34;私のブログへようこそ！\u0026#34; summary: \u0026#34;私について、そして私がなぜこのブログを始めたのか、もっと知ってください。\u0026#34; tags: [\u0026#34;welcome\u0026#34;, \u0026#34;new\u0026#34;, \u0026#34;about\u0026#34;, \u0026#34;first\u0026#34;] --- _これ_ が私のブログ記事の内容です。 リーフページには様々な フロントマターパラメーターがあり、それらを使って表示方法をカスタマイズすることができます。\n外部リンク #Congoには、外部ページへのリンクを記事リストに表示できる特別な機能があります。これは、Mediumのようなサードパーティのウェブサイトや研究論文にコンテンツがあり、Hugoのサイトにコンテンツを複製することなくリンクを張りたい場合に便利です。\n外部リンク記事を作成するには、特別なフロントマターを設定する必要があります:\n--- title: \u0026#34;私のMediumの記事\u0026#34; date: 2022-01-25 externalUrl: \u0026#34;https://medium.com/\u0026#34; summary: \u0026#34;私はMediumに記事を書きました。\u0026#34; showReadingTime: false _build: render: \u0026#34;false\u0026#34; list: \u0026#34;local\u0026#34; --- title や summary のような通常のフロントマターパラメーターとともに、 externalUrl パラメーターはこの記事が普通の記事ではないことを伝えるために使われます。ここで指定されたURLは、訪問者がこの記事を選択したときに誘導される場所になります。\nさらに、このコンテンツの通常のページが生成されないように（外部URLにリンクしているので、ページを生成する意味がありません！）、Hugoの特別なフロントマターパラメーターである _build を使用しています。\nテーマには、このような外部リンク記事を簡単に生成するためのアーキタイプが含まれています。新しいコンテンツを作るときに -k external を指定するだけです。\nhugo new -k external posts/my-post.md シンプルページ # Layout: layouts/_default/simple.html Front Matter: layout: \u0026quot;simple\u0026quot; Congoにはシンプルなページのための特別なレイアウトも含まれています。シンプル・レイアウトは全幅のテンプレートで、特別なテーマ機能なしにMarkdownコンテンツをページに配置するだけです。\nシンプルレイアウトで利用できる唯一の機能はパンくずリストと共有リンクです。これらの動作は通常のページと同様に フロントマターパラメーターを使って制御することができます。\n特定のページでシンプルレイアウトを有効にするには、 layout フロントマター変数に \u0026quot;simple\u0026quot; という値を追加します:\n--- title: \u0026#34;ランディングページ\u0026#34; date: 2022-03-08 layout: \u0026#34;simple\u0026#34; --- このページのコンテンツは全幅になりました。 カスタムレイアウト #Hugoの利点のひとつは、サイト全体や個々のセクション、ページのカスタムレイアウトを簡単に作成できることです。\nレイアウトは通常のHugoのテンプレート規則に従います。詳細はHugo公式ドキュメントをご覧ください。\nデフォルトレイアウトのオーバーライド #上で説明した各コンテンツタイプには、各タイプのページを生成するために使用されるレイアウトファイルが記載されています。このファイルをローカルプロジェクトに作成すると、テーマテンプレートを上書きするので、ウェブサイトのデフォルトスタイルをカスタマイズするために使用することができます。\n例えば、 layouts/_default/single.html ファイルを作成すれば、リーフページのレイアウトを完全にカスタマイズすることができます。\nカスタムセクションレイアウト #また、個々のコンテンツセクションのカスタムレイアウトを作成するのも簡単です。これは、特定のコンテンツを特定のスタイルで一覧表示するセクションを作りたい場合に便利です。\n特殊なレイアウトでプロジェクトを一覧表示するカスタム「Projects」ページを作成する例を見てみましょう。\nこれを行うには、通常のHugoコンテンツルールを使用してコンテンツを構成し、プロジェクト用のセクションを作成します。さらに、コンテンツと同じディレクトリ名を使い、 list.html ファイルを追加して、プロジェクトセクション用の新しいレイアウトを作成します。\n. └── content │ └── projects │ ├── _index.md │ ├── first-project.md │ └── second-project.md └── layouts └── projects └── list.html この list.html ファイルはデフォルトのリストテンプレートをオーバーライドします。このファイルを見る前に、まず個々のプロジェクトファイルを見てみましょう。\n--- title: \u0026#34;Congo\u0026#34; date: 2021-08-11 icon: \u0026#34;github\u0026#34; description: \u0026#34;Tailwind CSSで作られたHugoのテーマ\u0026#34; topics: [\u0026#34;Hugo\u0026#34;, \u0026#34;Web\u0026#34;, \u0026#34;Tailwind\u0026#34;] externalUrl: \u0026#34;https://github.com/jpanther/congo/\u0026#34; --- この例では、各プロジェクトにメタデータを割り当て、リストテンプレートで使用できるようにしています。ページのコンテンツはありませんが、それを含めることを妨げるものも何もありません。あなたのカスタムテンプレートなのですから！\nプロジェクトが定義されたので、各プロジェクトの詳細を出力するリストテンプレートを作成することができます。\n{{ define \u0026#34;main\u0026#34; }} \u0026lt;section class=\u0026#34;mt-8\u0026#34;\u0026gt; {{ range .Pages }} \u0026lt;article class=\u0026#34;pb-6\u0026#34;\u0026gt; \u0026lt;a class=\u0026#34;flex\u0026#34; href=\u0026#34;{{ .Params.externalUrl }}\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;mr-3 text-3xl text-neutral-300\u0026#34;\u0026gt; \u0026lt;span class=\u0026#34;relative inline-block align-text-bottom\u0026#34;\u0026gt; {{ partial \u0026#34;icon.html\u0026#34; .Params.icon }} \u0026lt;/span\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;div\u0026gt; \u0026lt;h3 class=\u0026#34;flex text-xl font-semibold\u0026#34;\u0026gt; {{ .Title }} \u0026lt;/h3\u0026gt; \u0026lt;p class=\u0026#34;text-sm text-neutral-400\u0026#34;\u0026gt; {{ .Description }} \u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/a\u0026gt; \u0026lt;/article\u0026gt; {{ end }} \u0026lt;/section\u0026gt; {{ end }} これは非常にわかりやすい例ですが、このセクションの各ページ（つまり各プロジェクト）を順に見ていき、各プロジェクトへのHTMLリンクをアイコンと一緒に出力していることがわかります。各プロジェクトのフロントマターのメタデータは、どの情報を表示するかを決定するために使われます。\n関連するスタイルとクラスが利用可能であることを確認する必要があり、Tailwind CSSを再コンパイルする必要があるかもしれないことを覚えておいてください。これについては、 高度なカスタマイズセクションで詳しく説明します。\nこのようなカスタムテンプレートを作成する場合、デフォルトのCongoテンプレートがどのように動作するかを見て、それをガイドとして使用するのが最も簡単です。Hugo docsはテンプレートの作成についてもっと学ぶための素晴らしいリソースです。\n","date":null,"permalink":"/congo/ja/docs/content-examples/","section":"ドキュメント","summary":"コンテンツがどのように構成されるべきかを示すいくつかの例です。","title":"コンテンツの例"},{"content":"これは高度なタグです。Congoの他のリスティングページと同様に、個々のTaxonomy Termにカスタムコンテンツを追加することができ、Term Listの上部に表示されます。 🚀\nまた、これらのコンテンツページを使用して、SEOやその他の目的で使用されるタイトルや説明文などのHugoのメタデータを定義することもできます。\n","date":null,"permalink":"/congo/ja/tags/advanced/","section":"Tags","summary":"これは高度なタグです。Congoの他のリスティングページと同様に、個々のTaxonomy Termにカスタムコンテンツを追加することができ、Term Listの上部に表示されます。 🚀","title":"advanced"},{"content":"","date":null,"permalink":"/congo/ja/tags/css/","section":"Tags","summary":"","title":"css"},{"content":"Congoに高度な変更を加える方法はたくさんあります。カスタマイズできる内容や、ご希望の結果を得るための最良の方法については、以下をお読みください。\nさらにアドバイスが必要な場合はGitHub Discussionsに質問を投稿してください。\nHugoプロジェクトの構造 #これらの作業に入る前に、Hugoプロジェクトの構造とコンテンツやテーマを管理するためのベストプラクティスについて説明します。\n要約: テーマファイルを直接編集するのではなく、Hugoプロジェクトのサブディレクトリでカスタマイズを行なってください。 Congoは、Hugoの標準的なプラクティスをすべて活用できるように作られています。コアのテーマファイルを変更することなく、テーマのすべての側面をカスタマイズしたり上書きしたりできるように設計されています。これにより、ウェブサイトのルック＆フィールを完全にコントロールしながら、シームレスなアップグレードが可能になります。\nそのためには、テーマファイルを手動で直接調整してはいけません。Hugo モジュールを使ってインストールする場合でも、git サブモジュールとしてインストールする場合でも、手動でテーマを themes/ ディレクトリにインクルードする場合でも、これらのファイルは常にそのままにしておくべきです。\nテーマの動作を調整する正しい方法は、Hugoの強力なfile lookup orderを使ってファイルを上書きすることです。そうすることで、あなたがプロジェクトディレクトリにインクルードしたファイルが自動的にテーマファイルよりも優先されることを保証します。\n例えば、Congoのメイン記事テンプレートをオーバーライドしたい場合、独自の layouts/_default/single.html ファイルを作成し、プロジェクトのルートに置くだけです。このファイルはテーマを変更することなく、テーマの single.html を上書きします。これは、HTMLテンプレート、パーシャル、ショートコード、設定ファイル、データ、アセットなど、どんなテーマファイルにも使えます。\nこのシンプルな慣習に従う限り、あなたのカスタマイズを失うことなく、常にテーマをアップデート（または異なるテーマのバージョンをテスト）することができます。\nカラースキーム #Congoにはいくつかのカラースキームが同梱されています。配色を変更するには、 colorScheme テーマパラメーターを設定します。組み込みの配色について詳しくは はじめにセクションを参照してください。\nデフォルトの配色に加えて、独自のスキームを作成し、ウェブサイト全体を好みのスタイルに変更することもできます。スキームは assets/css/schemes/ ディレクトリに \u0026lt;scheme-name\u0026gt;.css ファイルを置くことで作成できます。ファイルを作成したら、テーマ設定の中でその名前を参照するだけです。\nCongoは3色のパレットを定義してテーマ全体に使用しています。この3色は「ニュートラル」、「プライマリー」、「セカンダリー」として定義され、それぞれ10色の濃淡があります。\nTailwind CSS 3.0が不透明度を用いてカラー値を計算するため、使用するカラーは特定のフォーマットに準拠して指定するする必要があります。\n:root { --color-primary-500: 139, 92, 246; } この例では、 primary-500 をCSS変数として Red: 139, Green: 92, Blue: 246 に定義しています。\n既存のテーマスタイルシートのいずれかをテンプレートとして使用してください。独自の色を定義するのは自由ですが、インスピレーションを得るために、公式のTailwind color palette referenceもチェックしてみてください。\nスタイルのオーバーライド #独自のHTML要素にスタイルを設定するために、カスタムスタイルを追加する場合があります。Congoでは、独自のCSSスタイルシートでデフォルトのスタイルをオーバーライドすることができます。プロジェクトの assets/css/ ディレクトリに custom.css ファイルを作成するだけです。\ncustom.css ファイルはHugoによってminifyされ、他のテーマスタイルの後に自動的に読み込まれます。\nフォントサイズの変更 #custom.css を用いてフォントサイズをオーバーライドする例です。Congoでは、ベースとなるHTMLフォントサイズに由来するフォントサイズをテーマ全体で使用するため、フォントサイズの変更は簡単です。デフォルトでは、Tailwindはデフォルトサイズを12ptに設定していますが、お好きな値に変更することができます。\nassets/css/custom.css を用意して下記のように記述してください:\n/* Increase the default font size */ html { font-size: 13pt; } この1つの値を変更するだけで、ウェブサイト上のすべてのフォントサイズが新しいサイズに合わせて調整されます。したがって、全体のフォントサイズを大きくするには、値を 12pt より大きくします。同様に、フォントサイズを小さくするには、値を 12pt より小さくします。\nソースコードから再構築 #大きな変更を加えたい場合は、Tailwind CSSのJITコンパイラを利用し、テーマCSS全体をゼロから再構築することができます。これは、Tailwindの設定を調整したり、メインのスタイルシートに追加のTailwindクラスを追加したい場合に便利です。\n注記: 手動でテーマを再構築するのは上級者向けです。 それでは、Tailwind CSSの構築方法を順を追って説明しましょう。\nTailwindの設定 #実際に使用されているTailwindのクラスのみを含むCSSファイルを生成するために、JITコンパイラはすべてのHTMLテンプレートとMarkdownファイルをスキャンして、どのスタイルが存在するかをチェックします。コンパイラは、テーマディレクトリのルートに含まれる tailwind.config.js ファイルを参照します:\n// themes/congo/tailwind.config.js module.exports = { content: [ \u0026#34;./layouts/**/*.html\u0026#34;, \u0026#34;./content/**/*.{html,md}\u0026#34;, \u0026#34;./themes/congo/layouts/**/*.html\u0026#34;, \u0026#34;./themes/congo/content/**/*.{html,md}\u0026#34;, ], // and more... }; デフォルトでは、特定のプロジェクト構造に従っていれば、修正することなく簡単に独自のCSSファイルを生成できるようにコンテンツパスが設定されています。つまり、Congo を themes/congo/ のサブディレクトリとしてプロジェクトに含める必要があります。 よって、Hugoモジュールを使って簡単にテーマをインストールすることはできず、 Gitサブモジュール（推奨）か手動インストールのどちらかの方法を取らなければなりません。 インストールでは、これらの方法のいずれかを使ってテーマをインストールする方法を説明しています。\nプロジェクトの構造 #デフォルト設定の恩恵を授かるには、プロジェクトは下記のような構造になっているべきです。\n. ├── assets │ └── css │ └── compiled │ └── main.css # this is the file we will generate ├── config # site config │ └── _default ├── content # site content │ ├── _index.md │ ├── projects │ │ └── _index.md │ └── blog │ └── _index.md ├── layouts # custom layouts for your site │ ├── partials │ │ └── extend-article-link.html │ ├── projects │ │ └── list.html │ └── shortcodes │ └── disclaimer.html └── themes └── congo # git submodule or manual theme install この構造例では、独自のカスタムレイアウトを持つ新しい projects コンテンツタイプを、カスタムショートコードと拡張パーシャルとともに追加します。プロジェクトがこの構造に従っていれば、必要なのは main.css ファイルを再コンパイルすることだけです。\n依存関係のインストール #上記を動作させるには、 themes/congo/ ディレクトリにて、プロジェクトの依存関係をインストールする必要がある。このステップにはnpmが必要です。\ncd themes/congo npm install Tailwindコンパイラの実行 #依存関係のインストールが完了したら、あとはTailwind CLIを使ってJITコンパイラを起動するだけです。Hugoプロジェクトのルートに戻り、以下のコマンドを実行してください:\ncd ../.. ./themes/congo/node_modules/tailwindcss/lib/cli.js -c ./themes/congo/tailwind.config.js -i ./themes/congo/assets/css/main.css -o ./assets/css/compiled/main.css --jit このコマンドはパス指定の関係で少し醜いですが、基本的にはTailwind CLIを呼び出し、Tailwindの設定ファイル、 main.css の場所、そしてコンパイルされたCSSファイルを置く場所（ assets/css/compiled/ ）を渡しています。\nTailwindの設定ファイルによって、プロジェクト内のすべてのコンテンツとレイアウト、およびテーマ内のすべてのコンテンツを自動的に走査し、ウェブサイトに必要なすべてのCSSを含む新しいCSSファイルを作成します。Hugoはプロジェクト内のファイルを自動的にテーマに付属するもので上書きします。\nレイアウトを変更して新しいTailwind CSSスタイルが必要になるたびに、コマンドを再実行するだけで、新しいCSSファイルを生成することができます。コマンドの最後に -w を追加すると、JITコンパイラをウォッチモードで実行することもできます。\nbuildスクリプトの準備 #私がやっているように、必要なコマンドを含む package.json をプロジェクトのルートに追加して、再構築プロセスを簡単にすることもできます。\n// package.json { \u0026#34;name\u0026#34;: \u0026#34;my-website\u0026#34;, \u0026#34;version\u0026#34;: \u0026#34;1.0.0\u0026#34;, \u0026#34;description\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;scripts\u0026#34;: { \u0026#34;server\u0026#34;: \u0026#34;hugo server -b http://localhost -p 8000\u0026#34;, \u0026#34;dev\u0026#34;: \u0026#34;NODE_ENV=development ./themes/congo/node_modules/tailwindcss/lib/cli.js -c ./themes/congo/tailwind.config.js -i ./themes/congo/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w\u0026#34;, \u0026#34;build\u0026#34;: \u0026#34;NODE_ENV=production ./themes/congo/node_modules/tailwindcss/lib/cli.js -c ./themes/congo/tailwind.config.js -i ./themes/congo/assets/css/main.css -o ./assets/css/compiled/main.css --jit\u0026#34; }, // and more... } これで、デザインに取りかかりたいときに npm run dev を実行すればコンパイラがウォッチモードで実行されます。デプロイする準備ができたら、 npm run build を実行すれば、通常のTailwind CSSビルドが実行されます。\n🙋‍♀️ ヘルプが必要な場合は、遠慮なくGitHub Discussionsに質問を投稿してください。\n","date":null,"permalink":"/congo/ja/docs/advanced-customisation/","section":"ドキュメント","summary":"Congoは、基本的なTailwind設定の変更、手動でのテーマ構築、カスタムCSSの提供など、高度なカスタマイズをサポートしています。","title":"高度なカスタマイズ"},{"content":"","date":null,"permalink":"/congo/ja/tags/deployment/","section":"Tags","summary":"","title":"deployment"},{"content":"","date":null,"permalink":"/congo/ja/tags/github/","section":"Tags","summary":"","title":"github"},{"content":"","date":null,"permalink":"/congo/ja/tags/hosting/","section":"Tags","summary":"","title":"hosting"},{"content":"","date":null,"permalink":"/congo/ja/tags/netlify/","section":"Tags","summary":"","title":"netlify"},{"content":"","date":null,"permalink":"/congo/ja/tags/render/","section":"Tags","summary":"","title":"render"},{"content":"Congoで構築したHugoウェブサイトを展開する方法はたくさんあります。このテーマは、ほとんどすべてのデプロイシナリオに柔軟に対応できるように設計されています。\nCongoはテーマ全体で相対URLを使って構築されています。これにより、サイトをサブディレクトリやGitHub Pagesのようなホストに簡単に配置することができます。通常、 config.toml ファイルで baseURL パラメーターが設定されていれば、特別な設定は必要ありません。\nHugo公式ドキュメントのHosting and Deploymentは、あなたのサイトをデプロイする方法を学ぶのに最適な場所です。以下のセクションには、特定のプラットフォームで役立つ、特定のテーマ設定の詳細が含まれています。\nデプロイ先を選んでください:\nGitHub Pages Netlify Render Cloudflare Pages 共有ホスティング、VPS、または自身のWebサーバー GitHub Pages #GitHubでは、Actionsを使ってGitHub Pages上でホスティングすることができます。この機能を有効にするには、リポジトリでPagesを有効にし、新しいActionsワークフローを作成してサイトをビルド、デプロイします。\nファイルはYAML形式で、GitHubリポジトリの .github/workflows/ ディレクトリに置き、拡張子を .yml とします。\n重要: branches とデプロイステップの if パラメーターにプロジェクトで使用しているブランチ名を正しく設定してください。 # .github/workflows/gh-pages.yml name: GitHub Pages on: push: branches: - main jobs: build-deploy: runs-on: ubuntu-latest concurrency: group: ${{ github.workflow }}-${{ github.ref }} steps: - name: Checkout uses: actions/checkout@v3 with: submodules: true fetch-depth: 0 - name: Setup Hugo uses: peaceiris/actions-hugo@v2 with: hugo-version: \u0026#34;latest\u0026#34; - name: Build run: hugo --minify - name: Deploy uses: peaceiris/actions-gh-pages@v3 if: ${{ github.ref == \u0026#39;refs/heads/main\u0026#39; }} with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_branch: gh-pages publish_dir: ./public 設定ファイルをGitHubにプッシュすると、アクションが自動的に実行されるはずです。初回は失敗するかもしれないので、GitHubリポジトリの Settings \u0026gt; Pages にアクセスして、ソースが正しいか確認してください。 gh-pages ブランチを使うように設定されているべきです。\n設定が完了したら、アクションを再実行し、サイトを正しくビルドしてデプロイします。すべてが正常にデプロイされたことを確認するためにアクションログを参照することができます。\nNetlify #Netlifyにデプロイするには、Netlify側に新しいデプロイサイトを作成し、ソースコードとリンクします。Netlify UIでは、ビルド設定は空白のまま、使用するドメインだけを設定する必要があります。\n次に、サイト・リポジトリのルートに netlify.toml ファイルを作成します:\n# netlify.toml [build] command = \u0026#34;hugo mod get -u \u0026amp;\u0026amp; hugo --gc --minify -b $URL\u0026#34; publish = \u0026#34;public\u0026#34; [build.environment] HUGO_VERSION = \u0026#34;0.118.2\u0026#34; NODE_ENV = \u0026#34;production\u0026#34; GO_VERSION = \u0026#34;1.20\u0026#34; TZ = \u0026#34;UTC\u0026#34; # Set to preferred timezone [context.production.environment] HUGO_ENV = \u0026#34;production\u0026#34; 上の例は、CongoをHugoモジュールとしてデプロイすることを想定しています。別の方法でテーマをインストールした場合は、ビルドコマンドを hugo --gc --minify -b $URL に変更してください。\n設定ファイルをリポジトリにプッシュすると、Netlifyは自動的にサイトをデプロイします。Netlify UIでデプロイのログを確認し、エラーがないかチェックすることができます。\nRender #Renderへのデプロイは非常に簡単で、すべての設定はRender UIを介して行います。\n新しい静的サイトを作成し、プロジェクトのコード・リポジトリにリンクします。そして、ビルドコマンドを hugo --gc --minify に、公開ディレクトリを public に設定するだけです。\nあなたが変更をリポジトリにプッシュするたびに、自動的にビルドとデプロイを行います。\nCloudflare Pages #CloudflareはHugoサイトをホストできるPagesサービスを提供しています。Gitリポジトリからサイトを構築し、CloudflareのCDNでホスティングします。Hugoデプロイメントガイドに従って始めてください。\nThe Rocket Loader™ feature offered by Cloudflare tries to speed up rendering of web pages with JavaScript, but it breaks the appearance switcher in the theme. It can also cause an annoying light/dark screen flash when browsing your site due to scripts loading in the wrong order.\nCloudflareが提供するRocket Loader™は、JavaScriptを使用したウェブページのレンダリングを高速化するものですが、テーマの外観スイッチャーを壊してしまいます。また、スクリプトのロード順序が正しくないため、サイトを閲覧する際に煩わしい画面の明暗が点滅することがあります。\nこれらの問題は下記を無効にすることで解決できます:\nCloudflare dashboardにアクセスする あなたのドメイン名をクリックする Speed セクションの中にある Optimization をクリックする Rocket Loader™ までスクロールし、これを無効にする Congoで構築されたサイトは、この機能を無効にしても十分に読み込みが速いです。\n共有ホスティング、VPS、または自身のWebサーバー #従来のウェブホスティングを使用する場合や自分のサーバーにデプロイする場合は、Hugoサイトを構築してファイルをホストに転送するだけです。\nconfig.toml の baseURL パラメーターに、あなたのウェブサイトのルートへの完全なURLが設定されていることを確認してください。\nそれから hugo コマンドを使ってサイトを構築し、出力ディレクトリの内容をウェブサーバのルートにコピーすれば準備完了です。デフォルトでは、出力ディレクトリは public という名前になっています。\nホスティングプロバイダーが必要な場合は、VultrまたはDigitalOceanをチェックしてください。これらのアフィリエイトリンクを使用してサインアップすると、最大100ドルの無料クレジットがもらえます。\n","date":null,"permalink":"/congo/ja/docs/hosting-deployment/","section":"ドキュメント","summary":"Congoは、ほとんどすべてのデプロイシナリオに柔軟に対応できるように設計されています。プロジェクトを一般的なホスティングプラットフォームにデプロイする方法については、こちらをご覧ください。","title":"ホスティングとデプロイ"},{"content":"","date":null,"permalink":"/congo/ja/tags/html/","section":"Tags","summary":"","title":"html"},{"content":"","date":null,"permalink":"/congo/ja/tags/markdown/","section":"Tags","summary":"","title":"markdown"},{"content":"この記事では、Congoで使用できる基本的なMarkdownフォーマットのサンプルを提供し、またいくつかの基本的なHTML要素がどのように装飾されているかを示します。\n見出し #以下のHTMLの \u0026lt;h1\u0026gt; から \u0026lt;h6\u0026gt; 要素は6段階のセクション見出しを表します。 \u0026lt;h1\u0026gt; は最も高いセクションレベルであり、 \u0026lt;h6\u0026gt; は最も低いセクションレベルです。\nH1 #H2 #H3 #H4 #H5 #H6 #パラグラフ #Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.\nItatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.\nBlockquotes #blockquote 要素は他のソースから引用された内容を表し、オプションとして引用元を footer 要素または cite 要素内に記述します。注釈や省略形などのインライン変更を記述することもできます。\nBlockquote without attribution # Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.\nBlockquote with attribution # Don\u0026rsquo;t communicate by sharing memory, share memory by communicating.\n— Rob Pike1\n表 #表はMarkdownのコア仕様には含まれていませんが、Hugoはサポートしています。\n名前 年齢 Bob 27 Alice 23 表中のMarkdown # Italics Bold Code italics bold code Code Blocks #Code block with backticks #\u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34; /\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Code block indented with four spaces #\u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026quot;en\u0026quot;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026quot;utf-8\u0026quot;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Code block with Hugo\u0026rsquo;s internal highlight shortcode # 1 2 3 4 5 6 7 8 9 10 \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; リスト #順序付きリスト # First item Second item Third item 順序なしリスト # List item Another item And another item ネストしたリスト # Fruit Apple Orange Banana Dairy Milk Cheese その他の要素 — abbr, sub, sup, kbd, mark #GIFはビットマップ形式の画像です.\nH2O\nXn + Yn = Zn\nCTRL+ALT+Deleteを押下してください。\nほとんどのサンショウウオは夜行性で、昆虫やミミズなどの小さな生き物を狩る。\nThe above quote is excerpted from Rob Pike\u0026rsquo;s talk about nothing during Gopherfest, November 18, 2015.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"2019年3月11日","permalink":"/congo/ja/samples/markdown/","section":"サンプル","summary":"\u003cp\u003eこの記事では、Congoで使用できる基本的なMarkdownフォーマットのサンプルを提供し、またいくつかの基本的なHTML要素がどのように装飾されているかを示します。\u003c/p\u003e","title":"Markdown"},{"content":"","date":null,"permalink":"/congo/ja/tags/gist/","section":"Tags","summary":"","title":"gist"},{"content":"","date":null,"permalink":"/congo/ja/tags/twitter/","section":"Tags","summary":"","title":"twitter"},{"content":"","date":null,"permalink":"/congo/ja/tags/vimeo/","section":"Tags","summary":"","title":"vimeo"},{"content":"","date":null,"permalink":"/congo/ja/tags/youtube/","section":"Tags","summary":"","title":"youtube"},{"content":"Hugoには、リッチコンテンツのためのいくつかの組み込みショートコードと、プライバシー設定、そして様々なソーシャルメディアの埋め込みを静的に可能にする simple shortcodes のセットが同梱されています。\nYouTube #以下は、組み込みの youtube ショートコードを使用した例です。\nTwitter #この例では twitter_simple ショートコードを使っています。 user と id の2つの名前付きパラメーターが必要です。\n“In addition to being more logical, asymmetry has the advantage that its complete appearance is far more optically effective than symmetry.”\n— Jan Tschichold pic.twitter.com/gcv7SrhvJb\n\u0026mdash; Design Reviewed | Graphic Design History (@DesignReviewed) January 17, 2019 tweet ショートコードを使えば、完全にマークアップされたTwitterカードを埋め込むこともできます。\nGist #gist ショートコードを使うと、GitHubのGistを埋め込むことができます。ユーザー名とGistのIDというパラメーターが必要です。\nVimeo #vimeo_simple ショートコードでVimeoの動画を埋め込むことができます。\n","date":"2019年3月10日","permalink":"/congo/ja/samples/rich-content/","section":"サンプル","summary":"\u003cstrong\u003eリッチ\u003c/strong\u003e なコンテンツの \u003cem\u003e一例\u003c/em\u003e","title":"リッチコンテンツ"},{"content":"","date":null,"permalink":"/congo/ja/tags/latin/","section":"Tags","summary":"","title":"latin"},{"content":"","date":null,"permalink":"/congo/ja/tags/text/","section":"Tags","summary":"","title":"text"},{"content":"Lorem est tota propiore conpellat pectoribus de pectora summo.\nRedit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.\nExierant elisi ambit vivere dedere Duce pollice Eris modo Spargitque ferrea quos palude Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.\nComas hunc haec pietate fetum procerum dixit Post torum vates letum Tiresia Flumen querellas Arcanaque montibus omnes Quidem et Vagus elidunt #\nThe Van de Graaf Canon\nMane refeci capiebant unda mulcebat #Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. Faces illo pepulere tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.\nIubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.\nEurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel mitis temploque vocatus, inque alis, oculos nomen non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides parte.\n","date":"2019年3月9日","permalink":"/congo/ja/samples/placeholder-text/","section":"サンプル","summary":"\u003cp\u003eLorem est tota propiore conpellat pectoribus de pectora summo.\u003c/p\u003e","title":"プレースホルダー"},{"content":"","date":null,"permalink":"/congo/ja/tags/katex/","section":"Tags","summary":"","title":"katex"},{"content":"","date":null,"permalink":"/congo/ja/tags/maths/","section":"Tags","summary":"","title":"maths"},{"content":"記事中の数学的表記にKaTeXを使用することができます。\nCongoは、数学的表記を使用する場合にのみ、KaTeXアセットをプロジェクトにバンドルします。これを動作させるには、単に記事内に katex ショートコードをインクルードしてください。そのページ上のKaTeX構文は自動的にレンダリングされます。\n使用可能な構文については、supported TeX functionsのオンラインリファレンスを参照してください。\nインライン記法 #インライン記法は、式を \\\\( と \\\\) で囲むことで生成できます。\n例:\n% KaTeX inline notation インライン記法: \\\\(\\varphi = \\dfrac{1+\\sqrt5}{2}= 1.6180339887…\\\\) インライン記法: \\(\\varphi = \\dfrac{1+\\sqrt5}{2}= 1.6180339887…\\)\nブロック記法 #あるいは、 $$ を使ってブロック記法で生成することもできます。これは式を独自のHTMLブロックとして出力します。\n例:\n% KaTeX block notation $$ \\varphi = 1+\\frac{1} {1+\\frac{1} {1+\\frac{1} {1+\\cdots} } } $$ $$ \\varphi = 1+\\frac{1} {1+\\frac{1} {1+\\frac{1} {1+\\cdots} } } $$\n","date":"2019年3月8日","permalink":"/congo/ja/samples/mathematical-notation/","section":"サンプル","summary":"\u003cp\u003e記事中の数学的表記にKaTeXを使用することができます。\u003c/p\u003e","title":"数学的表記"},{"content":"","date":null,"permalink":"/congo/ja/tags/chart/","section":"Tags","summary":"","title":"chart"},{"content":"","date":null,"permalink":"/congo/ja/tags/diagram/","section":"Tags","summary":"","title":"diagram"},{"content":"","date":null,"permalink":"/congo/ja/tags/graph/","section":"Tags","summary":"","title":"graph"},{"content":"Mermaid構文を mermaid で囲むだけで、Congoは設定された colorScheme に合わせて図を出力します。\n詳細は ショートコード - Mermaidを参照してください。\n以下の例は、Mermaid公式ドキュメントから抜粋したものです。GitHubのページのソースを見るからもマークアップを見ることができます。\nフローチャート # graph TD A[Christmas] --\u003e|Get money| B(Go shopping) B --\u003e C{Let me think} B --\u003e G[/Another/] C ==\u003e|One| D[Laptop] C --\u003e|Two| E[iPhone] C --\u003e|Three| F[Car] subgraph Section C D E F G end シーケンス図 # sequenceDiagram autonumber par Action 1 Alice-\u003e\u003eJohn: Hello John, how are you? and Action 2 Alice-\u003e\u003eBob: Hello Bob, how are you? end Alice-\u003e\u003e+John: Hello John, how are you? Alice-\u003e\u003e+John: John, can you hear me? John--\u003e\u003e-Alice: Hi Alice, I can hear you! Note right of John: John is perceptive John--\u003e\u003e-Alice: I feel great! loop Every minute John--\u003eAlice: Great! end クラス図 # classDiagram Animal \"1\" \u003c|-- Duck Animal \u003c|-- Fish Animal \u003c--o Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } ER図 # erDiagram CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ INVOICE : \"liable for\" DELIVERY-ADDRESS ||--o{ ORDER : receives INVOICE ||--|{ ORDER : covers ORDER ||--|{ ORDER-ITEM : includes PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT ||--o{ ORDER-ITEM : \"ordered in\" ","date":"2019年3月6日","permalink":"/congo/ja/samples/diagrams-flowcharts/","section":"サンプル","summary":"It\u0026rsquo;s easy to add diagrams and flowcharts to articles using Mermaid.","title":"ダイアグラムとフローチャート"},{"content":"Congoは、 chart ショートコードを使ったChart.jsをサポートしています。チャートのマークアップをショートコードにラップするだけです。Congoは設定された colorScheme パラメーターに合うように自動的にチャートをテーマ化しますが、通常のChart.js構文を使って色をカスタマイズすることもできます。\n詳細は ショートコード - チャートのドキュメントを参照してください。\n以下の例は、Chart.jsの公式ドキュメントから抜粋したものです。GitHubのページのソースを見るからもマークアップを見ることができます。\nバーチャート（棒グラフ） # ラインチャート（折れ線グラフ） # ドーナツチャート（円グラフ） # ","date":"2019年3月6日","permalink":"/congo/ja/samples/charts/","section":"サンプル","summary":"CongoにはChart.jsが含まれており、パワフルなチャートとデータのビジュアライゼーションが可能です。","title":"チャート（グラフ）"},{"content":"","date":null,"permalink":"/congo/ja/tags/emoji/","section":"Tags","summary":"","title":"emoji"},{"content":"Congo全体で絵文字（Emoji）をサポートしています。絵文字はタイトル、メニュー項目、記事内容で使用できます。\n注記: これらのグリフのレンダリングはブラウザとプラットフォームに依存します。絵文字をスタイルするには、サードパーティの絵文字フォントまたはフォントスタックを使用することができます。 絵文字の置き換えはコンテンツやフロントマターでショートコードを使用すれば、ビルド時に対応するグリフに自動的に変換されます。\n例: see_no_evil 🙈, hear_no_evil 🙉, speak_no_evil 🙊\nEmojipediaは、絵文字を探すための便利なリファレンスです。\n","date":"2019年3月5日","permalink":"/congo/ja/samples/emoji/","section":"サンプル","summary":"📖🏞️🧗🏽🐉🧙🏽‍♂️🧚🏽👸","title":"絵文字 🪂"}]