hugo-universal-themeを日本語訳していく
hugo-universal-themeの取扱説明書
公式ドキュメントを淡々と翻訳していきます。
爆速企業ポートフォリオサイトとして利用したい方向けです。
拙い英語力が少しでもお役に立てれば幸いです。
特徴
- レスポンシブルデザイン
- カスタマイズ可能なリンク先ページ
- カルーセル
- お客様の声
- 特徴
- 顧客
- 最近の投稿
- Formspreeによるお問い合わせフォーム
- Google検索
- Disqusのコメント
- グーグルアナリティクス
インストール
あなたのHugoサイトを持っているディレクトリに移動して実行してください:
$ mkdir themes
$ cd themes
$ git clone https://github.com/devcows/hugo-universal-theme
詳細については、Hugoの公式セットアップガイドをお読みください。
構成
ユニバーサルテーマを正常にインストールしたら、exampleSiteディレクトリをご覧ください。あなたのサイトの出発点として使用できるユニバーサルテーマで構成された作業Hugoサイトがあります。
まず、config.tomlを見てみましょう。サイトをカスタマイズする方法を学ぶと便利です。設定で遊んでみてください。
言語
使用可能な翻訳は/i18n
ディレクトリにあります。次のキーを変更する言語を構成できます。
defaultContentLanguage = "en"
スタイル
次のキーを変更して、テーマの色を変更できます。
style = "default"
利用可能なオプションは次のとおりです。default
(水色)、 、blue
、green
、marsala
、pink
、red
、。turquoise
violet
コメント
オプションのコメントシステムは、Disqusによって提供されます。コメントを有効にしたい場合は、Disqusでアカウントを作成して、ショートネームを書き留めます。
disqusShortname = "devcows"
コメントシステムを無効にするには、disqusShortname
空のままにします。
グーグルアナリティクス
Googleアナリティクスを有効にすることもできます。“にトラッキングコードを入力してください。
googleAnalytics = "UA-XXXXX-X"
googleAnalytics
無効にするには、キーを空のままにします。
お問い合わせフォーム
オプションで連絡先ページを作成し、連絡先フォームを含めることができます。
連絡先ページは通常のHugoページと似ています。しかし、それはid
価値のcontact
あるフィールドを含める必要があります。
+++
title = "Contact"
id = "contact"
+++
必要に応じて、Googleマップセクションで緯度と経度を定義するウィジェットを追加することができますparams
でconfig.toml
。ピンをクリックすると、Googleマップの座標が表示されます。さらに、あなたの方向性のために異なる目標を設定したい場合、または会社のGoogleマップエントリを設定する場合は、方向を定義することができます。
[params]
...
latitude = "-12.043333"
longitude = "-77.028333"
direction = "Desamparados Station、Distrito de Lima 15001、Peru"
このHugoサイトは静的なので、連絡先フォームはFormspreeをプロキシとして使用します。フォームは実際の電子メールを送信するためにサーバーにPOST要求を行います。訪問者は無料で毎月1000通の電子メールを送信できます。
連絡先ページでフォームを有効にするには、Formspreeメールをconfig.toml
ファイルに入力します。
[params]
email = "your@email.com"
メニュー
上のバーに表示されるメニュー項目を定義することもできます。[[params.menu]]
エントリを編集してメニューを作成します。
[[params.menu]]
name = "Contact"
url = "/contact"
weight = 4
このweight
パラメータは、メニューエントリの順序を決定します。
サイドバーウィジェット
ブログセクションに表示されるサイドバーウィジェットを有効/無効にすることができます。現在、以下のウィジェットが利用可能です:
- 検索バー(Google提供)
- カテゴリ一覧
- タグリスト
それらを有効/無効にすることができparams.widgets
ます。
[params.widget]
search = true
category = true
tags = true
ブログの投稿サムネイル
新しい投稿を作成した後、画像への相対パスを入力してバナーを定義することができます。
banner = "img/banners/banner-4.jpg"
ディレクトリ内のバナーへの相対パスを含む必要がありstatic
ます。
ランディングページ
ランディングページは、個別にアクティブ化および設定できる多くのセクションで構成されています。すべてのセクションを上から下へ移動しましょう。
カルーセル
カルーセルのコンテンツは、データディレクトリに設定されます。
data
└── carousel
├── customizable.yaml
├── design.yaml
├── features.yaml
└── multipurpose.yaml
各カルーセル項目は、内部のYAMLファイルとして表されdata/carousel
ます。customizable.yaml
カルーセル入力の例を見てみましょう。
weight: 4
title: "Easy to customize"
description: >
<ul class="list-style-none">
<li>7 preprepared colour variations.</li>
<li>Easily to change fonts</li>
</ul>
image: "img/carousel/template-easy-code.png"
このweight
フィールドは、エントリの位置を決定します。title
テキストのみのフィールドです。description
フィールドには、HTMLコードを受け付けます。また、image
ディレクトリ内のイメージへの相対パスが含まれている必要がありstatic
ます。
カルーセルが設定されたら、config.toml
ファイルで明示的に有効にする必要があります。
[params.carousel]
enable = true
特徴
機能はdata
、カルーセルのようにディレクトリにも定義されています。
data
└── features
├── consulting.yaml
├── email.yaml
├── print.yaml
├── seo.yaml
├── uiux.yaml
└── webdesign.yaml
フィーチャファイルは次のようになります。
weight: 4
name: "Consulting"
icon: "fa fa-lightbulb-o"
description: "Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring."
icon
フィールドは、アイコンのCSSクラスです。この例では、FontAwesomeを使用するアイコンを使用しています。
フィーチャを完成したら、config.toml
ファイルでフィーチャを有効にします。
[params.features]
enable = true
お客様の声
お客様の声はディレクトリに定義されてdata
います。
data
└── testimonials
├── 1.yaml
├── 2.yaml
├── 3.yaml
├── 4.yaml
└── 5.yaml
必要な数の推薦ファイルを追加することができます。次の例のように、すべてのフィールドに必ず入力してください。
text: "One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections."
name: "John McIntyre"
position: "CEO, TransTech"
avatar: "img/testimonials/person-1.jpg"
次に、設定ファイルで有効にして、タイトルとサブタイトルを追加します。
[params.testimonials]
enable = true
title = "Testimonials"
subtitle = "We have worked with many clients and we always like to hear they come out from the cooperation happy and satisfied. Have a look what our clients said about us."
続きを見る
このセクションは、別の場所へのリンクを提供するために使用されます。外部サイト、またはHugoサイト内のページまたは投稿にすることができます。
これを構成ファイルで有効にすることができます。
[params.see_more]
enable = true
icon = "fa fa-file-code-o"
title = "Do you want to see more?"
subtitle = "We have prepared for you more than 40 different HTML pages, including 5 variations of homepage."
link_url = "https://your-site.com/more"
link_text = "Check other homepages"
クライアント
クライアントセクションは、協力している企業のロゴのリストを表示するために使用されます。クライアントはdata
YAMLファイルとしてディレクトリに定義されています。
data
└── clients
├── 1.yaml
├── 2.yaml
├── 3.yaml
├── 4.yaml
├── 5.yaml
└── 6.yaml
各クライアントファイルには、次の情報が含まれています。
name: "customer-1"
image: "img/clients/customer-1.png"
url: "https://www.customer-1.com"
name
クライアントの。image
ディレクトリ内のロゴへの相対パスstatic
です。またurl
、ロゴをクライアントのWebサイトにリンクする場合のオプションフィールドです。
次に、設定ファイルのセクションを有効にすることができます。
[params.recent_posts]
enable = true
title = "From our blog"
subtitle = "Pellen"
最近の投稿
最近の投稿のセクションには、4つの最新のブログ記事が掲載されています。
これを構成ファイルで有効にすることができます。
[params.recent_posts]
enable = true
title = "From our blog"
subtitle = "Pellen
メタタグ
Description
そして、Keywords
メタタグが利用可能で、カスタマイズすることができます。config.toml
ファイル内のすべてのページのデフォルト値は、次のように設定できます。
[params]
defaultKeywords = ["devcows", "hugo", "go"]
defaultDescription = "Site template made by Devcows using Hugo"
HTMLの結果は次のようになります。
<meta name="keywords" content="devcows, hugo, go">
<meta name="description" content="Site template made by Devcows using Hugo">
個々のページのメタデータとconfig.toml
を設定することにより、デフォルト値を上書きすることもできます。例については、ディレクトリ内のファイルを参照してください。description
keywords
faq.md
exampleSite
+++
title = "FAQ"
description = "Frequently asked questions"
keywords = ["FAQ","How do I","questions","what if"]
+++
使用法
あなたのサイトが実際に動作するようにするには、Hugoの組み込みローカルサーバーを実行します。
$ hugo server -w
次にlocalhost:1313
、ブラウザのアドレスバーに入力します。
詳細については、公式のHugoのドキュメントを参照してください。
貢献する
あなたはバグを見つけましたか、新しい機能のアイデアを得ましたか?私たちに連絡するには、問題トラッカーを自由に使用してください。またはプルリクエストを直接行います。
ライセンス
このポートはMITライセンスの下でリリースされています。追加のライセンス情報については、元のテーマライセンスを確認してください。
ありがとう
Hugoを作成したSteve Franciaとプロジェクトの素晴らしいコミュニティに感謝します。また、この素晴らしいテーマを作成するためのBootstrapiousに感謝します。