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(水色)、 、bluegreenmarsalapinkred、。turquoiseviolet

コメント

オプションのコメントシステムは、Disqusによって提供されます。コメントを有効にしたい場合は、Disqusでアカウントを作成して、ショートネームを書き留めます。

disqusShortname = "devcows"

コメントシステムを無効にするには、disqusShortname空のままにします。

グーグルアナリティクス

Googleアナリティクスを有効にすることもできます。“にトラッキングコードを入力してください。

googleAnalytics = "UA-XXXXX-X"

googleAnalytics無効にするには、キーを空のままにします。

お問い合わせフォーム

オプションで連絡先ページを作成し、連絡先フォームを含めることができます。

連絡先ページは通常のHugoページと似ています。しかし、それはid価値のcontactあるフィールドを含める必要があります。

+++ 
title = "Contact"
id = "contact"
+++

必要に応じて、Googleマップセクションで緯度と経度を定義するウィジェットを追加することができますparamsconfig.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 = "http://your-site.com/more"
    link_text = "Check other homepages"

クライアント

クライアントセクションは、協力している企業のロゴのリストを表示するために使用されます。クライアントはdataYAMLファイルとしてディレクトリに定義されています。

data
└── clients
    ├── 1.yaml
    ├── 2.yaml
    ├── 3.yaml
    ├── 4.yaml
    ├── 5.yaml
    └── 6.yaml

各クライアントファイルには、次の情報が含まれています。

name: "customer-1" 
image: "img/clients/customer-1.png" 
url: "http://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を設定することにより、デフォルト値を上書きすることもできます。例については、ディレクトリ内のファイルを参照してください。descriptionkeywordsfaq.mdexampleSite

+++
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に感謝します。