Hugoテーマの公開 Basic Design Personal Blog

こんにちはnasustです。

今回のブログのテンプレート作成チュートリアルで作成したものを テンプレートとして公開しました。

ブログで必要な機能を提供しているテンプレートです。

Hugo Theme Basic Design Personal Blog

シンプルなデザインのブログテーマです。 カスタマイズしやすいようにプレーンなデザインにしています。

またスターターキットも用意しています。

Hugo Blog Starter Kit

初期設定済みのサイトと上記のテーマを一緒にダウンロードできます。 設定ファイルをあなたのサイト用に書き換えるだけで初められます。

ダウンロード

スクリーンショット

特徴

  • HTML5
  • SCSS
  • AMP
  • レスポンシブデザイン
  • グローバルメニュー
  • 階層カテゴリ
  • タグ
  • アイキャッチ
  • ページネーション

HTML5 / SCSS

テンプレートはHTML5とCSSはSCSSで記述しています。 CSS設計はBEMを採用しています。

AMP対応

AMPに対応しています。

[outputs]
    page = [ "HTML" , "AMP"  ]
toml

outputsにAMPを追加することで、https://xxxx/amp/post/entryなどのURL公開されます。

グローバルメニュー

[menu]
    [[menu.global_header]]
        name = "Home"
        url = "/"
        weight = 1
    [[menu.global_header]]
        name = "Blog"
        url = "/post"
        weight = 2
    [[menu.global_header]]
        name = "About"
        url = "/about"
        weight = 3
toml

config.tomlで上記のように設定することで、グローバルメニューが追加できます。

階層カテゴリー

content
└── post
    ├── general --------------- カテゴリー
    ├── cateogry_1 ------------ カテゴリー
    │   ├── sub_category_1 --- サブカテゴリー
    │   └── sub_category_2 --- サブカテゴリー
    └── cateogry_2  ----------- カテゴリー
bash

階層カテゴリーをサポートしています。 サブセクションがカテゴリーとして扱われます。 サブセクションの更に下のセクションはサブカテゴリーとして扱われます。

推奨のPermalinkの書式

[permalinks]
    post = "/:section/:year/:month/:filename"
toml

セクションをカテゴリーとして扱っている為に、 記事のカテゴリー変更、つまりMarkdownファイルを別のセクションに移動すると URLが変わってしまいます。

カテゴリー変更してもURLが維持するように上記のPermalinkの書式を推奨します。

タグ

tags: ["tag 1" , "tag 2"]
yaml

Markdownのフロント・マターに記事のタグを配列で記述します。

アイキャッチ

[Params]
    eyecatch = "images/eyecache.jpg"
toml

config.tomlのeyecacheパラメーターは、記事のデフォルトのアイキャッチ画像を指定します。

eyecache: "eyecache.jpg"
yaml

記事用のアイキャッチを設定する場合は、Markdownのフロント・マターで設定します。

以下の通りで画像を検索して表示します。

  1. ページリソース・・・例: content/post/general/entry/eyecache.jpg
  2. assetsディレクトリ・・・例: assets/eyecache.jpg

ページネーション

階層型カテゴリーに対応したページネーションを行います。

設定例 config.toml

baseURL = "http://example.org/"
title = "Basic Design Personal Blog"
defaultContentLanguage = "ja"
languageCode = "ja-jp"
disablePathToLower = true
hasCJKLanguage = true
pluralizeListTitles = false
pygmentsUseClasses = true
pygmentsCodefences = true
theme = "basic-design-personal-blog"

[outputs]
    page = [ "HTML" , "AMP"  ]

[Params]
    author = "Hoge"
    profile_image = "images/profile.jpg"
    eyecatch = "images/eyecache.jpg"

[taxonomies]
    tag = "tags"

[permalinks]
    post = "/:section/:year/:month/:filename"

[blackfriday]
    hrefTargetBlank = true
    nofollowLinks = true
    extensionsmask = ["autolink"]

[menu]
    [[menu.global_header]]
        name = "Home"
        url = "/"
        weight = 1
    [[menu.global_header]]
        name = "Blog"
        url = "/post"
        weight = 2
    [[menu.global_header]]
        name = "About"
        url = "/about"
        weight = 3
toml

設定例 Markdown フロント・マター

title: "ブログタイトル"
date: 2019-06-17
draft: false
eyecache: "eyecache.jpg"
tags: ["雑記" , "ポエム" ]
yaml
prevnext