hugo theme fiber

ミニマリストのための Hugo のテーマ。 Fiber では最小限の JavaScript と CSS を使用するため、サイトの読み込みが速くなります。 UIも綺麗で目に優しい!!

目次

• インストール
  • サブモジュールの使用
  • テーマを直接ダウンロードする
• 特徴
  • SEO対応
  • ショートコード
    • アスキーマ
    • 使ってもいいですか
  • クリックしてコードをコピー
  • 美しい音符
• スクリーンショット
• テーマの設定
  • ホームページのコンテンツのリスト
    • ブログやnoteなどの一覧
    • カスタムコンテンツのリスト表示
  • コードの強調表示
  • メニュー項目
  • サイトタイトル
• 執筆内容
  • メモを書く
  • フロントマター

インストール

このテーマを Hugo ベースのサイトで使用するには 2 つの方法があります。

1. Git サブモジュールの使用 (推奨)
2. テーマを<hugo-site-root>/themes/に直接ダウンロードします。

サブモジュールの使用

1. hugo new site SITE_NAMEを使用してサイトを作成する
2. SITE_NAMEにcd
3. git リポジトリを初期化します: git init 。 git サブモジュールを追加する必要があるため、これが必要になります。
4. git submodule add [email protected]:abdus/hugo-theme-fiber.git themes/hugo-theme-fiberを実行してサブモジュールを追加します
5. 次に、 hugo serve使用して Hugo サーバーをローカルで起動します。

テーマ リポジトリに更新がある場合は、 git submodule update --remote使用して取得できます。

テーマを直接ダウンロードする

何らかの理由で Git を使用できない場合は、この方法を使用してください。

1. これをダウンロードし、その内容をSITE_ROOT/themes/hugo-theme-fiber/に抽出します。
2. ターミナルからhugo serve実行してローカルで Hugo を起動します。

特徴

SEO対応

このテーマには、基本的な SEO と Schema.org からの最小限の JSON-LD データが読み込まれています。

ショートコード

すぐに使えるショートコードとは別に、時には役に立つことが証明される他の便利なショートコードがいくつかあります。

アスキーマ

AsciiNema キャストを埋め込みます。使用するショートコード: {{< asciinema id="id of a public cast" >}}

使ってもいいですか

このショートコードは、caniuse.com Web サイトからの最新データを示します。 Web 開発者にとって役立ちます。例：

{{ < caniuse feature =" abortcontroller " periods =" future_1,current,past_1,past_2 "
> }}

クリックしてコードをコピー

Web サイトの訪問者は、ワンクリックでコードブロックのコンテンツをコピーできます。これにより、コードのインデントが壊れることはありません。

美しい音符

content/notes内に置いたものはすべて、大まかな注釈が付けられます。これにより、メモから重要なことを認識しやすくなります。

大まかな注釈は、 strong 、 em 、 strikethroughなどのタグを使用して制御されます。新しいnotesエントリを生成するには、まずディレクトリcontent/notesを作成する必要があります。次に、 hugo new notes/file-name.mdを使用してノートを生成します。このファイルには、上記のタグで注釈を付ける方法に関する情報が含まれます。

スクリーンショット

テーマの設定

ホームページのコンテンツのリスト

ホームページは 2 つの異なる方法で設定できます。 contentディレクトリからお気に入り/最も重要なセクションをリストすることができます。

または、その中にカスタム コンテンツを配置します。

あるいは、両方を行うこともできます。 fromtmatter 内にプロパティtitle持つファイルcontent/_index.mdを必ず作成してください。このtitleプロパティは SEO に役立ちます。例：

 ---
title : " Welcome to my Homepage "
---

<!-- content goes here --> 

ブログやnoteなどの一覧

ホームページにコンテンツのリストを作成するには、 config.tomlファイルにmainSectionsという変数を設定する必要があります。例：

[ params ]
mainSections = [ " posts " ]

カスタムコンテンツのリスト表示

カスタム コンテンツをリストするには、適切なフロントマターを使用してcontent/_index.md内にカスタム コンテンツを配置するだけです。

コードの強調表示

デフォルトでは、Hugo はクラスを使用しません。ただし、一部の機能はテーマに依存しているため、これはこのテーマでは機能しません。

コードブロックのクラスをオンにする必要があります。その方法は次のとおりです。

 # file: config.toml
[ markup ]
[ markup . highlight ]
codeFences = true
noClasses = false

メニュー項目

デフォルトでは、トップメニューにはメニュー項目が 1 つだけあります。さらに項目を追加するには、 config.toml内でメニュー項目を定義する必要があります。以下は私のサイトのconfig.tomlの例です。

[ menu ]

  [[ menu . main ]]
    identifier = " me "
    name = " Me "
    url = " /me/ "
    weight = 10


  [[ menu . main ]]
    identifier = " keys "
    name = " keys "
    url = " /keys/ "
    weight = 10

  [[ menu . main ]]
    identifier = " categories "
    name = " categories "
    url = " /categories "
    weight = 10

  [[ menu . main ]]
    identifier = " notes "
    name = " notes "
    url = " /notes/ "
    weight = 10

サイトタイトル

サイトのタイトルは、 config.tomlの次のパラメータによって制御されます。

[ params ]
  title = " abdus.xyz "
  mainSections = [ " posts " ]

執筆内容

メモを書く

Notes 、このテーマでハードコーディングされた特別な種類です。この種のコンテンツには、大まかな注釈が付けられます (メモの管理が容易になります)。

コマンドhugo new notes/your-filename.mdを使用してノート ページを生成し、ノート ページ内で大まかな注釈を使用する方法を学びます。

種類ノートのアーキタイプが含まれています。

フロントマター

このテーマは、Frontmatter を使用して、SEO のためのカスタム投稿の説明とメタ画像を処理します。 meta.imageとmeta.descriptionが見つからない場合は、それぞれ/images/default-meta-image.pngと.Summaryにフォールバックします。

フロントマターでこれら 2 つのフィールドを次のように使用します。

 ---
...
...
meta :
image : " https://example.com/some-image.png "
  description : " your custom desc "
...
...
---

<!-- content goes here -->