congo

6.9 KiB

Raw Permalink Blame History

title

date

draft

description

summary

slug

アナリティクス

CongoはFathom AnalyticsとGoogle Analyticsをビルトインでサポートしています。Fathomはユーザーのプライバシーを尊重するGoogle Analyticsの有料代替サービスです。ご興味のある方は、このアフィリエイトリンクから10ドルのクレジットを受け取ってください。

Fathom Analytics

Fathom Analyticsのサポートを有効にするには、 config/_default/params.toml ファイルにFathomサイトコードを記述するだけです。Fathomのカスタムドメイン機能を使用し、ドメインからスクリプトを提供したい場合は、 domain 設定値を追加で指定することもできます。 domain の値を指定しない場合、スクリプトはFathom DNSから直接読み込まれます。

# config/_default/params.toml

[fathomAnalytics]
  site = "ABC12345"
  domain = "llama.yoursite.com"

Google Analytics

Google Analyticsのサポートは内部のHugoパーシャルを通して提供されます。 config/_default/config.toml ファイルに googleAnalytics キーを指定するだけで、スクリプトが自動的に追加されます。

提供された設定値に基づいて、バージョン3（analytics.js）とバージョン4（gtag.js）の両方がサポートされています:

# config/_default/config.toml

# version 3
googleAnalytics = "UA-PROPERTY_ID"
# version 4
googleAnalytics = "G-MEASUREMENT_ID"

Custom analytics providers

別のアナリティクスプロバイダーを使いたい場合は、アナリティクスパーシャルをオーバーライドして独自のスクリプトを提供することもできます。 layouts/partials/analytics.html ファイルをプロジェクトに作成するだけで、ウェブサイトの <head> に自動的にインクルードされます。

記事にコメント機能を追加するために、Congoは各記事ページのベースに含まれるコメントパーシャルのサポートを含んでいます。 layouts/partials/comments.html を提供するだけで、選択したコメントを表示するために必要なコードが含まれます。

組み込みのHugo Disqusテンプレートを使用するか、独自のカスタムコードを提供することができます。詳しくはHugo docsを参照してください。

コメントを表示する場所をより細かく制御するために showComments パラメーターを使用します。この値は params.toml の[テーマパラメーター]({{< ref "configuration#テーマパラメーター" >}})として設定するか、[フロントマター]({{< ref "front-matter" >}})に含めることで記事ごとに設定するか、選ぶことができます。このパラメーターはデフォルトで false に設定されているので、コメントを表示させるにはこれらの場所のいずれかで true に設定する必要があります。

ファビコン

Congoはデフォルトで空白のファビコンセットを提供しますが、それを上書きするために独自のアセットを設定することができます。新しいファビコンを入手する最も簡単な方法は、favicon.ioのようなサードパーティプロバイダーを使って生成することです。

アイコンアセットは、ウェブサイトの static/ に直接配置し、以下のリストに従って名前を付けてください。favicon.ioを使用する場合、これらは自動的に生成されるファイル名になりますが、必要に応じて独自のアセットを提供することもできます。

static/
├─ 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 ファイルをプロジェクトに提供するだけで、デフォルトのアセットの代わりに <head> に注入されます。

アイコン

[ショートコード - アイコン]({{< ref "shortcodes#アイコン" >}})と同様に、Congoの icon.html パーシャルを使うことで、独自のテンプレートやパーシャルにアイコンを含めることができます。このパーシャルにはアイコンの名前を指定します。

例:

  {{ partial "icon.html" "github" }}

アイコンはHugo Pipesを使って配置されるため、非常に柔軟性があります。Congoには、ソーシャル、リンク、その他の目的のために多くのビルトインアイコンが含まれています。サポートされているアイコンの完全なリストは、[サンプル - アイコン]({{< ref "samples/icons" >}}) ページをチェックしてください。

カスタムアイコンはプロジェクトの assets/icons/ ディレクトリに独自のアイコンアセットを提供することで追加できます。アイコンは拡張子 .svg を除いたSVGファイル名でパーシャルから参照できます。

Extensions

Congoは基本機能の拡張を可能にする多くのパーシャルを提供しています。

記事リンク

記事リンクの後に追加のコードを挿入したい場合は、 layouts/partials/extend-article-link.html ファイルを作成してください。これは、特定の記事のメタデータをハイライトするために使用できる[バッジ]({{< ref "shortcodes#バッジ" >}})ショートコードと組み合わせると特に強力です。

HeadとFooter

テンプレートの <head> と <footer> に直接追加コードを挿入することができます。これらはテーマの一部ではないスクリプトやその他のロジックを提供するのに便利です。

layouts/partials/extend-head.html または layouts/partials/extend-footer.html を作成するだけで、これらは自動的にあなたのウェブサイトに挿入されます。どちらのパーシャルも <head> と <footer> の最後の項目として挿入されるので、テーマのデフォルトを上書きするために使用することができます。

6.9 KiB Raw Permalink Blame History Unescape Escape