2023-10-24 00:32:05 +00:00
<!doctype html> < html lang = ja dir = ltr class = scroll-smooth data-default-appearance = light data-auto-appearance = true > < head > < meta charset = utf-8 > < meta name = viewport content = "width=device-width,initial-scale=1" > < meta name = theme-color content = "rgb(255,255,255)" > < title > はじめに · Congo< / title > < meta name = title content = "はじめに · Congo" > < script type = text/javascript src = /congo/js/appearance.min.022d0ebc3b46a335eb1c7ef79b7f2de143d7cd5156d433638592ef1ce5f8554e.js integrity = "sha256-Ai0OvDtGozXrHH73m38t4UPXzVFW1DNjhZLvHOX4VU4=" > < / script >
< link type = text/css rel = stylesheet href = /congo/css/main.bundle.min.01ac3cc4e8efc0cc99c1ccd36de44a607b6417510adf4e8565dcf79f021217cd.css integrity = "sha256-Aaw8xOjvwMyZwczTbeRKYHtkF1EK306FZdz3nwISF80=" > < script defer type = text/javascript id = script-bundle src = /congo/js/main.bundle.min.8bf222b04e90525b24092e726014d8956126bc28fc115d01827360a56daa042c.js integrity = "sha256-i/IisE6QUlskCS5yYBTYlWEmvCj8EV0BgnNgpW2qBCw=" data-copy = コピー data-copied = コピーしました > < / script > < meta name = description content = "
2023-10-22 23:23:53 +00:00
Congoを使い始める方法
2023-10-24 00:32:05 +00:00
">< link rel = canonical href = https://jpanther.github.io/congo/ja/docs/getting-started/ > < link rel = apple-touch-icon sizes = 180x180 href = /congo/apple-touch-icon.png > < link rel = icon type = image/png sizes = 32x32 href = /congo/favicon-32x32.png > < link rel = icon type = image/png sizes = 16x16 href = /congo/favicon-16x16.png > < link rel = manifest href = /congo/site.webmanifest > < meta property = "og:title" content = "はじめに" > < meta property = "og:description" content = "Congoを使い始める方法" > < meta property = "og:type" content = "article" > < meta property = "og:url" content = "https://jpanther.github.io/congo/ja/docs/getting-started/" > < meta property = "article:section" content = "docs" > < meta property = "article:published_time" content = "2020-08-15T00:00:00+00:00" > < meta property = "article:modified_time" content = "2020-08-15T00:00:00+00:00" > < meta name = twitter:card content = "summary" > < meta name = twitter:title content = "はじめに" > < meta name = twitter:description content = "Congoを使い始める方法" > < script type = application/ld+json > { "@context" : "https://schema.org" , "@type" : "Article" , "articleSection" : "ドキュメント" , "name" : "はじめに" , "headline" : "はじめに" , "description" : "Congoを使い始める方法" , "abstract" : "このセクションでは、すでにCongoをインストールし、カラースキーム、メニュー、コンテンツ構造の選択など基本的な設定作業を行う準備ができていることを前提としています。" , "inLanguage" : "ja" , "url" : "https:\/\/jpanther.github.io\/congo\/ja\/docs\/getting-started\/" , "author" : { "@type" : "Person" , "name" : "Congo" } , "copyrightYear" : "2020" , "dateCreated" : "2020-08-15T00:00:00\u002b00:00" , "datePublished" : "2020-08-15T00:00:00\u002b00:00" , "dateModified" : "2020-08-15T00:00:00\u002b00:00" , "keywords" : [ "installation" , "docs" ] , "mainEntityOfPage" : "true" , "wordCount" : "574" } < / script > < meta name = author content = "Congo" > < link href = https://twitter.com/ rel = me > < link href = https://facebook.com/ rel = me > < link href = https://linkedin.com/ rel = me > < link href = https://youtube.com/ rel = me > < / head > < body class = "flex flex-col h-screen px-6 m-auto text-lg leading-7 max-w-7xl bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral sm:px-14 md:px-24 lg:px-32" > < div id = the-top class = "absolute flex self-center" > < a class = "px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600" href = #main-content > < span class = "font-bold pe-2 text-primary-600 dark:text-primary-400" > ↓ < / span > メインコンテンツへスキップ< / a > < / div > < header class = "py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10" > < nav class = "flex items-start justify-between sm:items-center" > < div class = "flex flex-row items-center" > < a class = "decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" rel = me href = /congo/ja/ > Congo< / a > < / div > < ul class = "flex list-none flex-col text-end sm:flex-row" > < li class = "group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5" > < a href = /congo/ja/docs/ title = ドキュメント > < span class = "decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2" > ドキュメント< / span > < / a > < / li > < li class = "group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5" > < a href = /congo/ja/samples/ title = サンプル > < span class = "decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2" > サンプル< / span > < / a > < / li > < li class = "group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5" > < a href = /congo/ja/users/ title = 利用例 > < span class = "decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2" > 利用例< / span > < / a > < / li > < li class = "group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5" > < a href = https://github.com/jpanther/congo title target = _blank > < span class = "group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600" > < span class = "relative inline-block align-text-bottom px-1 icon" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 496 512" > < path fill = "currentcolor" d = "M165.9 397 . 4c0 2-2 . 3 3 . 6-5 . 2 3 . 6-3 . 3 . 3-5 . 6-1 . 3-5 . 6-3 . 6 . 0-2 2 . 3-3 . 6 5 . 2-3 . 6 3- . 3 5 . 6 1 . 3 5 . 6 3 . 6zm-31 . 1-4 . 5c
2023-10-22 23:23:53 +00:00
< span class = "group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600" > < span class = "relative inline-block align-text-bottom px-1 icon" > < svg aria-hidden = "true" focusable = "false" data-prefix = "fas" data-icon = "search" class = "svg-inline--fa fa-search fa-w-16" role = "img" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 512 512" > < path fill = "currentcolor" d = "M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9.0 208 0S0 93.1.0 208s93.1 208 208 208c48.3.0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9.0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7.0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7.0 128 57.2 128 128 0 70.7-57.2 128-128 128z" / > < / svg > < / span > < / span > < span class = "decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2" > < / span > < / button > < / li > < li class = "group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5" > < div class = "relative group" > < button class = "flex items-center justify-end w-full transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600" >
< span class = "relative inline-block align-text-bottom px-1 icon" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 16 16" > < path fill = "currentcolor" d = "M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z" / > < path fill = "currentcolor" d = "M0 2a2 2 0 012-2h7a2 2 0 012 2v3h3a2 2 0 012 2v7a2 2 0 01-2 2H7a2 2 0 01-2-2v-3H2A2 2 0 010 9V2zm2-1A1 1 0 001 2v7a1 1 0 001 1h7a1 1 0 001-1V2A1 1 0 009 1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066.0 01-.415-.492 1.988 1.988.0 01-.94.31z" / > < / svg > < / span > < span class = text-sm > JA< / span > < span class = text-[0.6rem] > < span class = "relative inline-block align-text-bottom px-1 icon" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 512 512" > < path fill = "currentcolor" d = "M233.4 406.6c12.5 12.5 32.8 12.5 45.3.0l192-192c12.5-12.5 12.5-32.8.0-45.3s-32.8-12.5-45.3.0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3.0s-12.5 32.8.0 45.3l192 192z" / > < / svg > < / span > < / span > < / button > < div class = "invisible w-full h-2 bg-transparent group-hover:visible" > < / div > < div class = "top-8 invisible absolute ltr:right-0 rtl:left-0 z-50 flex flex-col whitespace-nowrap rounded border border-neutral-300 bg-neutral text-start text-base shadow group-hover:visible dark:border-neutral-600 dark:bg-neutral-800" > < div class = "flex flex-grow" > < a href = /congo/docs/getting-started/ class = "w-full py-1 pe-10 ps-2 decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" > English (Australia)< / a > < / div > < div class = "flex flex-grow" > < a href = /congo/ja/docs/getting-started/ class = "flex items-center justify-between w-full px-2 py-1 bg-primary-100 dark:bg-primary-900" > 日本語< span class = "w-6 ms-2 text-primary-600 dark:text-primary-400" > < span class = "relative inline-block align-text-bottom px-1 icon" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 448 512" > < path fill = "currentcolor" d = "M438.6 105.4c12.5 12.5 12.5 32.7.0 45.2l-256 256c-12.5 12.5-32.7 12.5-45.2.0L9.372 278.6c-12.496-12.5-12.496-32.7.0-45.2 12.498-12.5 32.758-12.5 45.258.0L159.1 338.7 393.4 105.4c12.5-12.52 32.7-12.52 45.2.0h0z" / > < / svg > < / span > < / span > < / a > < / div > < / div > < / div > < / li > < / ul > < / nav > < / header > < div class = "relative flex flex-col grow" > < main id = main-content class = grow > < article > < header class = max-w-prose > < ol class = "text-sm text-neutral-500 dark:text-neutral-400 print:hidden" > < li class = "inline hidden" > < a class = "hover:underline decoration-neutral-300 dark:underline-neutral-600" href = /congo/ja/ > Congoへようこそ! :tada:< / a > < span class = "px-1 text-primary-500" > /< / span > < / li > < li class = inline > < a class = "hover:underline decoration-neutral-300 dark:underline-neutral-600" href = /congo/ja/docs/ > ドキュメント< / a > < span class = "px-1 text-primary-500" > /< / span > < / li > < li class = "inline hidden" > < a class = "hover:underline decoration-neutral-300 dark:underline-neutral-600" href = /congo/ja/docs/getting-started/ > はじめに< / a > < span class = "px-1 text-primary-500" > /< / span > < / li > < / ol > < h1 class = "mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral" > はじめに< / h1 > < div class = "mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden" > < div class = "flex flex-row flex-wrap items-center" > < span title = 読むのに必要な時間 > 3 分< / span > < span class = "px-2 text-primary-500" > · < / span >
2023-10-24 00:32:05 +00:00
< span class = mb-[2px] > < a href = https://github.com/jpanther/congo/tree/dev/exampleSite/content/docs/getting-started/index.ja.md class = "text-lg hover:text-primary-500" rel = "noopener noreferrer" target = _blank title = 編集 > < span class = "relative inline-block align-text-bottom px-1 icon" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 512 512" > < path fill = "currentcolor" d = "M490.3 40.4c21.9 21.87 21.9 57.33.0 79.2l-30 30.1-98-97.98 30.1-30.06C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7 339.7 74.34l98 97.96L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2l-88.8 29.6C150.1 385.6 141.5 383.4 135 376.1 128.6 370.5 126.4 361 129.2 352.4l29.6-88.8C161.6 255.3 166.2 247.8 172.4 241.7v0zM192 63.1c17.7.0 32 15.23 32 32 0 18.6-14.3 32-32 32H96c-17.67.0-32 15.2-32 32V416c0 17.7 14.33 32 32 32H352c17.7.0 32-14.3 32-32V319.1c0-16.8 14.3-32 32-32s32 15.2 32 32V416c0 53-43 96-96 96H96c-53.02.0-96-43-96-96V159.1c0-53 42.98-96 96-96h96z" / > < / svg > < / span > < / a > < / span > < / div > < / div > < / header > < section class = "flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row" > < div class = "order-first px-0 lg:order-last lg:max-w-xs lg:ps-8" > < div class = "toc pe-5 print:hidden lg:sticky lg:top-10" > < details open class = "-ms-5 mt-0 overflow-hidden rounded-lg ps-5" > < summary class = "-ms-5 block cursor-pointer bg-neutral-100 py-1 ps-5 text-lg font-semibold text-neutral-800 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden" > 目次< / summary > < div class = "-ms-5 border-s border-dotted border-neutral-300 py-2 ps-5 dark:border-neutral-600" > < nav id = TableOfContents > < ul > < li > < a href = #基本設定 > 基本設定< / a > < / li > < li > < a href = #カラースキーム > カラースキーム< / a > < ul > < li > < / li > < / ul > < / li > < li > < a href = #コンテンツの整理 > コンテンツの整理< / a > < ul > < li > < a href = #ディレクトリ構造 > ディレクトリ構造< / a > < / li > < li > < a href = #featurecoverそしてthumbnail > feature、cover、そしてthumb(nail)< / a > < / li > < li > < a href = #taxonomies > Taxonomies< / a > < / li > < / ul > < / li > < li > < a href = #メニュー > メニュー< / a > < ul > < li > < a href = #基本のリンク > 基本のリンク< / a > < / li > < li > < a href = #アクションリンク > アクションリンク< / a > < / li > < / ul > < / li > < li > < a href = #詳細な設定 > 詳細な設定< / a > < / li > < / ul > < / nav > < / div > < / details > < / div > < / div > < div class = "min-w-0 min-h-0 max-w-prose grow" > < div class = "flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900" > < span class = "pe-3 text-primary-400" > < span class = "relative inline-block align-text-bottom px-1 icon" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 512 512" > < path fill = "currentcolor" d = "M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z" / > < / svg > < / span > < / span > < span class = dark:text-neutral-300 > このセクションはあなたが既に
< a href = https://jpanther.github.io/congo/ja/docs/installation/ target = _blank rel = noreferrer > インストール< / a >
を終えていることを前提としています。< / span > < / div > < p > Congoに同梱されている設定ファイルには、テーマが認識できるすべての設定が含まれおり、デフォルトでは多くはコメントアウトされていますが、特定の機能を有効にしたり変更したりするには、コメントアウトを解除するだけです。< / p > < h2 id = 基本設定 class = "relative group" > 基本設定 < span class = "absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100" > < a class = "group-hover:text-primary-300 dark:group-hover:text-neutral-700" style = text-decoration-line:none!important href = #%e5%9f%ba%e6%9c%ac%e8%a8%ad%e5%ae%9a aria-label = アンカー > #< / a > < / span > < / h2 > < p > コンテンツを作成する前に、新規インストール用に設定すべきことがいくつかあります。まず < code > config.toml< / code > ファイルで、< code > baseURL< / code > と < code > languageCode< / code > パラメーターを設定し、 < code > languageCode< / code > には、コンテンツの作成に使用するメインの言語を設定しましょう。< / p > < div class = highlight > < pre tabindex = 0 class = chroma > < code class = language-toml data-lang = toml > < span class = line > < span class = cl > < span class = c > # config/_default/config.toml< / span >
2023-10-22 23:23:53 +00:00
< / span > < / span > < span class = line > < span class = cl >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > baseURL< / span > < span class = p > =< / span > < span class = s2 > " https://your_domain.com/" < / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > languageCode< / span > < span class = p > =< / span > < span class = s2 > " en" < / span >
< / span > < / span > < / code > < / pre > < / div > < p > 次のステップは言語設定です。Congoは多言語をサポートしていますが、今はメインの言語だけを設定してください。< / p > < p > < code > config/_default< / code > の中にある < code > languages.en.toml< / code > ファイルを探してください。メイン言語が英語の場合は、このファイルをそのまま使うことができます。そうでない場合は、ファイル名に正しい言語コードが含まれるようにファイル名を変更してください。例えばフランス語の場合は、 < code > languages.fr.toml< / code > にファイル名を変更します。< / p > < div class = "flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900" > < span class = "pe-3 text-primary-400" > < span class = "relative inline-block align-text-bottom px-1 icon" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 512 512" > < path fill = "currentcolor" d = "M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z" / > < / svg > < / span > < / span > < span class = dark:text-neutral-300 > 言語設定ファイル名の言語コードは、 < code > config.toml< / code > の < code > languageCode< / code > 設定と一致している必要があります。< / span > < / div > < div class = highlight > < pre tabindex = 0 class = chroma > < code class = language-toml data-lang = toml > < span class = line > < span class = cl > < span class = c > # config/_default/languages.en.toml< / span >
< / span > < / span > < span class = line > < span class = cl >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > title< / span > < span class = p > =< / span > < span class = s2 > " My awesome website" < / span >
< / span > < / span > < span class = line > < span class = cl >
< / span > < / span > < span class = line > < span class = cl > < span class = p > [< / span > < span class = nx > author< / span > < span class = p > ]< / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > name< / span > < span class = p > =< / span > < span class = s2 > " My name" < / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > image< / span > < span class = p > =< / span > < span class = s2 > " img/author.jpg" < / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > headline< / span > < span class = p > =< / span > < span class = s2 > " A generally awesome human" < / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > bio< / span > < span class = p > =< / span > < span class = s2 > " A little bit about me" < / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > links< / span > < span class = p > =< / span > < span class = p > [< / span >
< / span > < / span > < span class = line > < span class = cl > < span class = p > {< / span > < span class = nx > twitter< / span > < span class = p > =< / span > < span class = s2 > " https://twitter.com/username" < / span > < span class = p > }< / span >
< / span > < / span > < span class = line > < span class = cl > < span class = p > ]< / span >
2023-10-24 00:32:05 +00:00
< / span > < / span > < / code > < / pre > < / div > < p > < code > [author]< / code > はウェブサイト上でどのように著者情報を表示するかを決定します。画像はサイトの < code > assets/< / code > に置きましょう。リンクはリストの記述順に沿って表示されます。< / p > < p > 各設定に関する詳細情報は、
< a href = https://jpanther.github.io/congo/ja/docs/configuration/ > 設定< / a >
セクションで説明されています。< / p > < h2 id = カラースキーム class = "relative group" > カラースキーム < span class = "absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100" > < a class = "group-hover:text-primary-300 dark:group-hover:text-neutral-700" style = text-decoration-line:none!important href = #%e3%82%ab%e3%83%a9%e3%83%bc%e3%82%b9%e3%82%ad%e3%83%bc%e3%83%a0 aria-label = アンカー > #< / a > < / span > < / h2 > < p > Congoにはいくつかのカラースキームが同梱されています。配色を変更するには、< code > colorScheme< / code > パラメーターを設定するだけです。有効なオプションは < code > congo< / code > （デフォルト）、 < code > avocado< / code > 、 < code > cherry< / code > 、 < code > fire< / code > 、 < code > ocean< / code > 、 < code > sapphire< / code > 、 < code > slate< / code > です。< / p > < div class = "flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900" > < span class = "pe-3 text-primary-400" > < span class = "relative inline-block align-text-bottom px-1 icon" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 512 512" > < path fill = "currentcolor" d = "M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z" / > < / svg > < / span > < / span > < span class = dark:text-neutral-300 > < code > colourScheme< / code > の値は小文字で指定します。< / span > < / div > < div class = highlight > < pre tabindex = 0 class = chroma > < code class = language-toml data-lang = toml > < span class = line > < span class = cl > < span class = c > # config/_default/params.toml< / span >
2023-10-22 23:23:53 +00:00
< / span > < / span > < span class = line > < span class = cl >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > colorScheme< / span > < span class = p > =< / span > < span class = s2 > " congo" < / span >
2023-10-24 00:32:05 +00:00
< / span > < / span > < / code > < / pre > < / div > < p > Congoは、テーマ全体で使用される3色のパレットを定義しています。それぞれのメインカラーには、
< a href = https://tailwindcss.com/docs/customizing-colors#color-palette-reference target = _blank rel = noreferrer > Tailwind< / a >
に含まれる10色の濃淡が含まれています。< / p > < h4 id = congo-default class = "relative group" > Congo (default) < span class = "absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100" > < a class = "group-hover:text-primary-300 dark:group-hover:text-neutral-700" style = text-decoration-line:none!important href = #congo-default aria-label = アンカー > #< / a > < / span > < / h4 > < div class = "flex justify-between" > < span class = "mr-2 w-full rounded-md py-6" style = background-color:#71717a > < / span >
2023-10-22 23:23:53 +00:00
< span class = "mr-2 w-full rounded-md py-6" style = background-color:#8b5cf6 > < / span >
< span class = "mr-2 w-full rounded-md py-6" style = background-color:#d946ef > < / span > < / div > < h4 id = avocado class = "relative group" > Avocado < span class = "absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100" > < a class = "group-hover:text-primary-300 dark:group-hover:text-neutral-700" style = text-decoration-line:none!important href = #avocado aria-label = アンカー > #< / a > < / span > < / h4 > < div class = "flex justify-between" > < span class = "mr-2 w-full rounded-md py-6" style = background-color:#78716c > < / span >
< span class = "mr-2 w-full rounded-md py-6" style = background-color:#84cc16 > < / span >
< span class = "mr-2 w-full rounded-md py-6" style = background-color:#10b981 > < / span > < / div > < h4 id = cherry class = "relative group" > Cherry < span class = "absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100" > < a class = "group-hover:text-primary-300 dark:group-hover:text-neutral-700" style = text-decoration-line:none!important href = #cherry aria-label = アンカー > #< / a > < / span > < / h4 > < div class = "flex justify-between" > < span class = "mr-2 w-full rounded-md py-6" style = background-color:#737373 > < / span >
< span class = "mr-2 w-full rounded-md py-6" style = background-color:#f43f5e > < / span >
< span class = "mr-2 w-full rounded-md py-6" style = background-color:#22c55e > < / span > < / div > < h4 id = fire class = "relative group" > Fire < span class = "absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100" > < a class = "group-hover:text-primary-300 dark:group-hover:text-neutral-700" style = text-decoration-line:none!important href = #fire aria-label = アンカー > #< / a > < / span > < / h4 > < div class = "flex justify-between" > < span class = "mr-2 w-full rounded-md py-6" style = background-color:#78716c > < / span >
< span class = "mr-2 w-full rounded-md py-6" style = background-color:#f97316 > < / span >
< span class = "mr-2 w-full rounded-md py-6" style = background-color:#f43f5e > < / span > < / div > < h4 id = ocean class = "relative group" > Ocean < span class = "absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100" > < a class = "group-hover:text-primary-300 dark:group-hover:text-neutral-700" style = text-decoration-line:none!important href = #ocean aria-label = アンカー > #< / a > < / span > < / h4 > < div class = "flex justify-between" > < span class = "mr-2 w-full rounded-md py-6" style = background-color:#64748b > < / span >
< span class = "mr-2 w-full rounded-md py-6" style = background-color:#3b82f6 > < / span >
< span class = "mr-2 w-full rounded-md py-6" style = background-color:#06b6d4 > < / span > < / div > < h4 id = sapphire class = "relative group" > Sapphire < span class = "absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100" > < a class = "group-hover:text-primary-300 dark:group-hover:text-neutral-700" style = text-decoration-line:none!important href = #sapphire aria-label = アンカー > #< / a > < / span > < / h4 > < div class = "flex justify-between" > < span class = "mr-2 w-full rounded-md py-6" style = background-color:#64748b > < / span >
< span class = "mr-2 w-full rounded-md py-6" style = background-color:#6366f1 > < / span >
< span class = "mr-2 w-full rounded-md py-6" style = background-color:#ec4899 > < / span > < / div > < h4 id = slate class = "relative group" > Slate < span class = "absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100" > < a class = "group-hover:text-primary-300 dark:group-hover:text-neutral-700" style = text-decoration-line:none!important href = #slate aria-label = アンカー > #< / a > < / span > < / h4 > < div class = "flex justify-between" > < span class = "mr-2 w-full rounded-md py-6" style = background-color:#6b7280 > < / span >
< span class = "mr-2 w-full rounded-md py-6" style = background-color:#64748b > < / span >
2023-10-24 00:32:05 +00:00
< span class = "mr-2 w-full rounded-md py-6" style = background-color:#6b7280 > < / span > < / div > < p > 独自の配色を作成することもできます。詳しくは
< a href = https://jpanther.github.io/congo/ja/docs/advanced-customisation/#colour-schemes > 高度な設定< / a >
セクションを参照してください。< / p > < h2 id = コンテンツの整理 class = "relative group" > コンテンツの整理 < span class = "absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100" > < a class = "group-hover:text-primary-300 dark:group-hover:text-neutral-700" style = text-decoration-line:none!important href = #%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%81%ae%e6%95%b4%e7%90%86 aria-label = アンカー > #< / a > < / span > < / h2 > < p > Congoは特定のコンテンツタイプを強制しません。そのため、自由にコンテンツを定義することができます。静的なサイトには_pages_、ブログには_posts_、ポートフォリオには_projects_がいいかもしれません。< / p > < h3 id = ディレクトリ構造 class = "relative group" > ディレクトリ構造 < span class = "absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100" > < a class = "group-hover:text-primary-300 dark:group-hover:text-neutral-700" style = text-decoration-line:none!important href = #%e3%83%87%e3%82%a3%e3%83%ac%e3%82%af%e3%83%88%e3%83%aa%e6%a7%8b%e9%80%a0 aria-label = アンカー > #< / a > < / span > < / h3 > < p > 基本的なCongoプロジェクトの概要を説明します。すべてのコンテンツは < code > content< / code > に置かれます:< / p > < div class = highlight > < pre tabindex = 0 class = chroma > < code class = language-shell data-lang = shell > < span class = line > < span class = cl > .
2023-10-22 23:23:53 +00:00
< / span > < / span > < span class = line > < span class = cl > ├── assets
< / span > < / span > < span class = line > < span class = cl > │ └── img
< / span > < / span > < span class = line > < span class = cl > │ └── author.jpg
< / span > < / span > < span class = line > < span class = cl > ├── config
< / span > < / span > < span class = line > < span class = cl > │ └── _default
< / span > < / span > < span class = line > < span class = cl > ├── content
< / span > < / span > < span class = line > < span class = cl > │ ├── _index.md
< / span > < / span > < span class = line > < span class = cl > │ ├── about.md
< / span > < / span > < span class = line > < span class = cl > │ └── posts
< / span > < / span > < span class = line > < span class = cl > │ ├── _index.md
< / span > < / span > < span class = line > < span class = cl > │ ├── first-post.md
< / span > < / span > < span class = line > < span class = cl > │ └── another-post
< / span > < / span > < span class = line > < span class = cl > │ ├── aardvark.jpg
< / span > < / span > < span class = line > < span class = cl > │ └── index.md
< / span > < / span > < span class = line > < span class = cl > └── themes
< / span > < / span > < span class = line > < span class = cl > └── congo
2023-10-24 00:32:05 +00:00
< / span > < / span > < / code > < / pre > < / div > < div class = "flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900" > < span class = "pe-3 text-primary-400" > < span class = "relative inline-block align-text-bottom px-1 icon" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 512 512" > < path fill = "currentcolor" d = "M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z" / > < / svg > < / span > < / span > < span class = dark:text-neutral-300 > ここで注意しなければならないのは、コンテンツディレクトリの中で、通常の記事ページは < code > index.md< / code > という名前になり、リストページは < code > _index.md< / code > という名前になるということです。記事に付随するアセットはインデックスファイルと一緒にサブディレクトリに置く必要があります。< / span > < / div > < p > このテーマはHugoのページバンドルを最大限に活用するように設計されているため、Hugoがどのようにコンテンツを整理することを想定しているかをしっかりと把握することが重要です。詳しくは
< a href = https://gohugo.io/content-management/organization/ target = _blank rel = noreferrer > Hugo公式ドキュメント< / a >
を読んでください。< / p > < h3 id = featurecoverそしてthumbnail class = "relative group" > feature、cover、そしてthumb(nail) < span class = "absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100" > < a class = "group-hover:text-primary-300 dark:group-hover:text-neutral-700" style = text-decoration-line:none!important href = #featurecover%e3%81%9d%e3%81%97%e3%81%a6thumbnail aria-label = アンカー > #< / a > < / span > < / h3 > < p > Congoは、記事リストと個々の記事ページの上部に画像を表示できます。サポートされている画像には3つのタイプがあり、それぞれに使用例があります: < code > feature< / code > 、 < code > cover< / code > 、 < code > thumb< / code > です。< / p > < p > 以下の例では、 < code > first-post< / code > の記事に < code > cover< / code > と < code > thumb< / code > を用意しています:< / p > < div class = highlight > < pre tabindex = 0 class = chroma > < code class = language-shell data-lang = shell > < span class = line > < span class = cl > .
2023-10-22 23:23:53 +00:00
< / span > < / span > < span class = line > < span class = cl > └── content
< / span > < / span > < span class = line > < span class = cl > └── posts
< / span > < / span > < span class = line > < span class = cl > ├── _index.md
< / span > < / span > < span class = line > < span class = cl > └── first-post
< / span > < / span > < span class = line > < span class = cl > ├── cover.jpg
< / span > < / span > < span class = line > < span class = cl > ├── index.md
< / span > < / span > < span class = line > < span class = cl > └── thumb.jpg
< / span > < / span > < / code > < / pre > < / div > < p > < code > thumb< / code > 画像は記事のサムネイルとして記事リストで表示され、 < code > cover< / code > 画像は個々の記事ページで記事内容の上部に表示されます。< / p > < p > < figure > < img class = "mx-auto my-0 rounded-md" width = 1318 height = 248 srcset = "/congo/ja/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_330x0_resize_q75_box.jpg 330w,/congo/ja/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_660x0_resize_q75_box.jpg 660w,/congo/ja/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_1024x0_resize_q75_box.jpg 1024w,/congo/ja/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_1320x0_resize_q75_box.jpg 2x" src = /congo/ja/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_660x0_resize_q75_box.jpg alt = "A screenshot of an article with a thumbnail image" loading = lazy > < figcaption class = text-center > この例では、 < code > thumb< / code > 画像付きの記事を示しています。< / figcaption > < / figure > < / p > < div class = "flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900" > < span class = "pe-3 text-primary-400" > < span class = "relative inline-block align-text-bottom px-1 icon" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 512 512" > < path fill = "currentcolor" d = "M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z" / > < / svg > < / span > < / span > < span class = dark:text-neutral-300 > パフォーマンスの観点から、 < code > thumb< / code > 画像は自動的に4:3の比率にトリミング・リサイズされます。 < code > cover< / code > 画像は内容に合わせて自動的にリサイズされますが、比率は問いません。< / span > < / div > < p > The < code > feature< / code > image is a special type, and when present, it will be used in place of < em > both< / em > the < code > thumb< / code > and < code > cover< / code > 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.
2023-10-24 00:32:05 +00:00
< code > feature< / code > 画像は特別で、存在する場合には < code > thumb< / code > 画像と < code > cover< / code > 画像の両方の代わりに使用されます。 < code > feature< / code > 画像は記事のメタデータとして、FacebookやTwitterのようなサードパーティのネットワークにコンテンツが共有される場合にも含まれます。< / p > < p > Congoは記事画像をインテリジェントに検出し、自動的にあなたのサイトに追加します。フロントマターでそれらを指定する必要はなく、ページリソース内に適切な名前のファイルを配置するだけです。画像ファイル名のどこかに < code > feature< / code > 、 < code > cover< / code > 、 < code > thumb< / code > という単語があれば、それがその目的で使用されます。< / p > < p > < a href = https://jpanther.github.io/congo/ja/samples/ > 例< / a >
には、これらの画像の例が多数掲載されています（また、
< a href = https://github.com/jpanther/congo/tree/dev/exampleSite/content/samples target = _blank rel = noreferrer > ソースコード< / a >
を参照してファイル構造を確認することもできます）。< / p > < h3 id = taxonomies class = "relative group" > Taxonomies < span class = "absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100" > < a class = "group-hover:text-primary-300 dark:group-hover:text-neutral-700" style = text-decoration-line:none!important href = #taxonomies aria-label = アンカー > #< / a > < / span > < / h3 > < p > CongoはTaxonomiesに関しても柔軟です。 < code > tags< / code > や < code > categories< / code > を使ってコンテンツをグループ化したい人もいれば、 < code > topics< / code > を使いたい人もいるでしょう。< / p > < p > Hugoはデフォルトで < code > posts< / code > 、 < code > tags< / code > 、 < code > categories< / code > を使用するようになっています。しかし、これをカスタマイズしたい場合は、 < code > taxonomies.toml< / code > 設定ファイルを作成することでカスタマイズできます:< / p > < div class = highlight > < pre tabindex = 0 class = chroma > < code class = language-toml data-lang = toml > < span class = line > < span class = cl > < span class = c > # config/_default/taxonomies.toml< / span >
2023-10-22 23:23:53 +00:00
< / span > < / span > < span class = line > < span class = cl >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > topic< / span > < span class = p > =< / span > < span class = s2 > " topics" < / span >
2023-10-24 00:32:05 +00:00
< / span > < / span > < / code > < / pre > < / div > < p > 上記の例はデフォルトの < em > tags< / em > と < em > categories< / em > を < em > topics< / em > に置き換えます。詳細は、
< a href = https://gohugo.io/content-management/taxonomies/ target = _blank rel = noreferrer > Hugo Taxonomy docs< / a >
を参照してください。< / p > < p > When 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.< / p > < h2 id = メニュー class = "relative group" > メニュー < span class = "absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100" > < a class = "group-hover:text-primary-300 dark:group-hover:text-neutral-700" style = text-decoration-line:none!important href = #%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc aria-label = アンカー > #< / a > < / span > < / h2 > < p > Congoには2つのメニューがあり、サイトの内容やレイアウトに合わせてカスタマイズすることができます。 < code > main< / code > メニューはサイトのヘッダーに表示され、 < code > footer< / code > メニューはページの一番下、著作権表示のすぐ上に表示されます。< / p > < p > Both menus are configured in the < code > menus.en.toml< / code > file. Similarly to the languages config file, if you wish to use another language, rename this file and replace < code > en< / code > with the language code you wish to use. Menu links will be sorted from lowest to highest < code > weight< / code > , and then alphabetically by < code > name< / code > .
2023-10-22 23:23:53 +00:00
どちらのメニューも < code > menus.en.toml< / code > ファイルで設定すします。 < code > menus.en.toml< / code > ファイルは言語設定ファイルと同様に、他の言語を使いたい場合はファイル名を変更して使いたい言語コードに置き換えてください。メニューのリンクは < code > weight< / code > の低いものから高いものへとソートされ、次にアルファベット順に < code > name< / code > でソートされます。< / p > < div class = highlight > < pre tabindex = 0 class = chroma > < code class = language-toml data-lang = toml > < span class = line > < span class = cl > < span class = c > # config/_default/menus.en.toml< / span >
< / span > < / span > < span class = line > < span class = cl >
< / span > < / span > < span class = line > < span class = cl > < span class = p > [[< / span > < span class = nx > main< / span > < span class = p > ]]< / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > name< / span > < span class = p > =< / span > < span class = s2 > " Blog" < / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > pageRef< / span > < span class = p > =< / span > < span class = s2 > " posts" < / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > weight< / span > < span class = p > =< / span > < span class = mi > 10< / span >
< / span > < / span > < span class = line > < span class = cl >
< / span > < / span > < span class = line > < span class = cl > < span class = p > [[< / span > < span class = nx > main< / span > < span class = p > ]]< / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > name< / span > < span class = p > =< / span > < span class = s2 > " Topics" < / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > pageRef< / span > < span class = p > =< / span > < span class = s2 > " topics" < / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > weight< / span > < span class = p > =< / span > < span class = mi > 20< / span >
< / span > < / span > < span class = line > < span class = cl >
< / span > < / span > < span class = line > < span class = cl > < span class = p > [[< / span > < span class = nx > main< / span > < span class = p > ]]< / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > name< / span > < span class = p > =< / span > < span class = s2 > " GitHub" < / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > url< / span > < span class = p > =< / span > < span class = s2 > " https://github.com/jpanther/congo" < / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > weight< / span > < span class = p > =< / span > < span class = mi > 30< / span >
< / span > < / span > < span class = line > < span class = cl > < span class = p > [< / span > < span class = nx > main< / span > < span class = p > .< / span > < span class = nx > params< / span > < span class = p > ]< / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > icon< / span > < span class = p > =< / span > < span class = s2 > " github" < / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > showName< / span > < span class = p > =< / span > < span class = kc > false< / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > target< / span > < span class = p > =< / span > < span class = s2 > " _blank" < / span >
< / span > < / span > < span class = line > < span class = cl >
< / span > < / span > < span class = line > < span class = cl > < span class = p > [[< / span > < span class = nx > main< / span > < span class = p > ]]< / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > identifier< / span > < span class = p > =< / span > < span class = s2 > " search" < / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > weight< / span > < span class = p > =< / span > < span class = mi > 99< / span >
< / span > < / span > < span class = line > < span class = cl > < span class = p > [< / span > < span class = nx > main< / span > < span class = p > .< / span > < span class = nx > params< / span > < span class = p > ]< / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > action< / span > < span class = p > =< / span > < span class = s2 > " search" < / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > icon< / span > < span class = p > =< / span > < span class = s2 > " search" < / span >
< / span > < / span > < span class = line > < span class = cl >
< / span > < / span > < span class = line > < span class = cl > < span class = p > [[< / span > < span class = nx > footer< / span > < span class = p > ]]< / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > name< / span > < span class = p > =< / span > < span class = s2 > " Privacy" < / span >
< / span > < / span > < span class = line > < span class = cl > < span class = nx > pageRef< / span > < span class = p > =< / span > < span class = s2 > " privacy" < / span >
< / span > < / span > < / code > < / pre > < / div > < h3 id = 基本のリンク class = "relative group" > 基本のリンク < span class = "absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100" > < a class = "group-hover:text-primary-300 dark:group-hover:text-neutral-700" style = text-decoration-line:none!important href = #%e5%9f%ba%e6%9c%ac%e3%81%ae%e3%83%aa%e3%83%b3%e3%82%af aria-label = アンカー > #< / a > < / span > < / h3 > < p > < code > name< / code > パラメーターはメニューリンクで使用するテキストを指定します。また、オプションでリンクのHTMLタイトル属性となる < code > title< / code > を指定することもできます。< / p > < p > < code > pageRef< / code > パラメーターを使うと、HugoのコンテンツページやTaxonomyを簡単に参照することができます。Hugoのコンテンツアイテムを参照するだけで、自動的に正しいリンクが作成されるので、メニューを設定する最も簡単な方法です。外部URLへのリンクには < code > url< / code > パラメーターを使用します。< / p > < p > リンク内に < code > params< / code > を指定することで、さらなるカスタマイズが可能です。 < code > icon< / code > を追加したり、 < code > showName< / code > でリンクテキストを切り替えたり、URLに < code > target< / code > を設定したりすることができます。上記の例では、GitHubリンクはアイコンのみで表示され、リンクは新しいウィンドウで開きます。< / p > < h3 id = アクションリンク class = "relative group" > アクションリンク < span class = "absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100" > < a class = "group-hover:text-primary-300 dark:group-hover:text-neutral-700" style = text-decoration-line:none!important href = #%e3%82%a2%e3%82%af%e3%82%b7%e3%83%a7%e3%83%b3%e3%83%aa%e3%83%b3%e3%82%af aria-label = アンカー > #< / a > < / span > < / h3 > < p > There is a special case for creating menu items for links that take theme actions. These are denoted using the < code > action< / code > 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.
2023-10-24 00:32:05 +00:00
特別なケースとして、アクションを実行するリンク項目を作成する場合があります。これらは < code > action< / code > パラメーターと実行するアクションの値を使って指定します。アクションリンクでは基本のリンクと同じカスタムパラメーターを使用することができ、アイコンやテキスト名でスタイルを設定することもできます。< / p > < p > 有効なテーマ・アクションは2つあります:< / p > < ul > < li > < code > appearance< / code > は外観を切り替えるリンクを作成します< / li > < li > < code > search< / code > はサイト内検索を行うリンクを作成します< / li > < / ul > < p > どちらのメニューも完全にオプションであり、必要なければコメントアウトすることができます。デフォルトとして提供されているテンプレートも参考にしてください。< / p > < h2 id = 詳細な設定 class = "relative group" > 詳細な設定 < span class = "absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100" > < a class = "group-hover:text-primary-300 dark:group-hover:text-neutral-700" style = text-decoration-line:none!important href = #%e8%a9%b3%e7%b4%b0%e3%81%aa%e8%a8%ad%e5%ae%9a aria-label = アンカー > #< / a > < / span > < / h2 > < p > 上記の手順は最低限の設定です。これで < code > hugo server< / code > を実行すると、空白のCongoウェブサイトが表示されます。詳細な設定については、
< a href = https://jpanther.github.io/congo/ja/docs/configuration/ > 設定< / a >
セクションを参照してください。< / p > < / div > < / section > < footer class = "pt-8 max-w-prose print:hidden" > < div class = pt-8 > < hr class = "border-dotted border-neutral-300 dark:border-neutral-600" > < div class = "flex justify-between pt-3" > < span > < a class = "group flex" href = /congo/ja/docs/installation/ > < span class = "me-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 dark:text-neutral dark:group-hover:text-primary-400" > < span class = "ltr:inline rtl:hidden" > ← < / span > < span class = "ltr:hidden rtl:inline" > → < / span > < / span >
2023-10-22 23:23:53 +00:00
< span class = "flex flex-col" > < span class = "mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500" > インストール< / span >
< span class = "mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400" > < / span > < / span > < / a > < / span > < span > < a class = "group flex text-right" href = /congo/ja/docs/configuration/ > < span class = "flex flex-col" > < span class = "mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500" > 基本設定< / span >
< span class = "mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400" > < / span > < / span > < span class = "ms-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 dark:text-neutral dark:group-hover:text-primary-400" > < span class = "ltr:inline rtl:hidden" > → < / span > < span class = "ltr:hidden rtl:inline" > ← < / span > < / span > < / a > < / span > < / div > < / div > < / footer > < / article > < div class = "pointer-events-none absolute bottom-0 end-0 top-[100vh] w-12" > < a href = #the-top class = "pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400" aria-label = TOPへスクロール title = TOPへスクロール > ↑ < / a > < / div > < / main > < footer class = "py-10 print:hidden" > < div class = "flex items-center justify-between" > < div > < p class = "text-sm text-neutral-500 dark:text-neutral-400" > © 2023 Congo contributors< / p > < p class = "text-xs text-neutral-500 dark:text-neutral-400" > Powered by < a class = "hover:underline hover:decoration-primary-400 hover:text-primary-500" href = https://gohugo.io/ target = _blank rel = "noopener noreferrer" > Hugo< / a > & < a class = "hover:underline hover:decoration-primary-400 hover:text-primary-500" href = https://github.com/jpanther/congo target = _blank rel = "noopener noreferrer" > Congo< / a > < / p > < / div > < div class = "flex flex-row items-center" > < div class = "me-14 cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400" > < button id = appearance-switcher-0 type = button aria-label = "appearance switcher" > < div class = "flex h-12 w-12 items-center justify-center dark:hidden" title = ダークモードへ切り替え > < span class = "relative inline-block align-text-bottom px-1 icon" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 512 512" > < path fill = "currentcolor" d = "M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z" / > < / svg > < / span > < / div > < div class = "hidden h-12 w-12 items-center justify-center dark:flex" title = ライトモードへ切り替え > < span class = "relative inline-block align-text-bottom px-1 icon" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 512 512" > < path fill = "currentcolor" d = "M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z" / > < / svg > < / span > < / div > < / button > < / div > < / div > < / div > < / footer > < div id = search-wrapper class = "invisible fixed inset-0 z-50 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]" data-url = https://jpanther.github.io/congo/ja/ > < div id = search-modal class = "flex flex-col w-full max-w-3xl min-h-0 mx-auto border rounded-md shadow-lg top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800" > < header class = "relative z-10 flex items-center justify-between flex-none px-2" > < form class = "flex items-center flex-auto min-w-0" > < div class = "flex items-center justify-center w-8 h-8 text-neutral-400" > < span class = "relative inline-block align-text-bottom px-1 icon" > < svg aria-hidden = "true" focusable = "false" data-prefix = "fas" data-icon = "search" class = "svg-inline--fa fa-search fa-w-16" role = "img" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0
< span class = "relative inline-block align-text-bottom px-1 icon" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 320 512" > < path fill = "currentcolor" d = "M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z" / > < / svg > < / span > < / button > < / header > < section class = "flex-auto px-2 overflow-auto" > < ul id = search-results > < / ul > < / section > < / div > < / div > < / div > < / body > < / html >
