ブログのカスタマイズ内容

2024-07-02

初期設定から自分なりに使いやすいように、見やすいように変更した項目について説明します。

一覧に表示する文字数の制限

初期では一覧に表示する文字数に制限が無いみたいで、記事の文字が長々と表示されて見た目が悪いので、一覧に表示する文字数を制限することにより、一覧の見た目を良くします。

themes/mainroad/layouts/_default/summary.html.htmlからlayouts/_default/summary.html.htmlへコピーする。 layouts/_default/においた内容で、テーマの内容を上書きできるようだ。themes/mainroad/layouts/_default/summary.html.htmlを変えてもいいけど、そうすると、Themeを更新した時に内容が戻ってしまう可能性があることからこのように変更した。

変更前

<div class="content list__excerpt post__content clearfix">
	{{ .Summary}}
</div>

変更後

<div class="content list__excerpt post__content clearfix">
	{{ .Summary}}
	{{ .Summary | truncate .Site.Params.summaryLength }}
</div>

設定値の追加

あとは、config.tomlにこの値を設定する

[Params]
  summaryLength = 50  # 50文字に制限

バグ？

タグに長い名前をつけると、一覧に表示する文字数の制限が適用されてない。タグによって文字制限されている。タグはURLから生成されているので、タグが長すぎると生成されないのかも。

Read Moreの作成

一覧に表示した時に「Read more」ボタンを作成する。

カスタムテンプレートのディレクトリを作成する：
テーマのテンプレートを上書きするために、サイトのルートディレクトリにlayoutsフォルダを作成します。
```
mkdir -p layouts/_default
```
リストテンプレートのコピー：
themes/mainroad/layouts/_default/summary.htmlファイルをlayouts/_default/summary.htmlにコピーします。このファイルをカスタマイズします。
```
cp themes/mainroad/layouts/_default/summary.html layouts/_default/summary.html
```

テンプレートを編集する：

layouts/_default/summary.html各記事の概要部分にreadmoreボタンを追加します。

<footer class="post__footer">
    <a href="{{ .Permalink }}" class="readmore-btn">{{ .Site.Params.readMoreText }}</a>
</footer>

カスタムCSSを追加する：
readmoreボタンにスタイルを追加するには、カスタムCSSを追加します。サイトのルートディレクトリにassets/css/custom.cssを作成し、以下のスタイルを定義します。CSSの定義はお好みで。
```
.readmore-btn {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}

.readmore-btn:hover {
background-color: #0056b3;
}
```
カスタムCSSの読み込みと文字列の定義
先ほど作成した、CSSとreadMoreTextを定義します。
```
[Params]
readMoreText = "続きを読む"
customCSS = [ "css/custom.css" ]
```

タグを大文字小文字を区別するようにする

初期設定ではタグは全部大文字になるCSSが入っているので、そのまま表示するようにする。 css/custom.cssに以下を追加する。

.widget-taglist__link {
    text-transform: none !important; /* 強制的な大文字化を無効にする */
}
.tags__item {
  text-transform: none !important; /* 強制的な大文字化を無効にする */
}

これで修正されるのだが、hugoのキャッシュとかブラウザのキャッシュが邪魔をしている場合がある。 hugoのキャッシュの再作成

hugo --cleanDestinationDir

Google Chromeの場合には以下の手順でキャッシュを一時的に無効化する。

開発者ツールを開く（F12キーやCtrl + Shift + I）。
ネットワークタブに移動。
「Disable cache（キャッシュを無効にする）」オプションをチェックする。

hugo new したときに作る markdown をテンプレート化する

hugo newしたときに作る markdown をテンプレート化するために、archetypes\default.mdの内容を以下の内容に変更した。

---
# Common-Defined params
title: "dummy title"
date: "2024-07-02"
#lastmod: "2024-07-18"
categories:
  - "dummy"
tags:
  - "dummytag"
menu: main,side # Optional, add page to a menu. Options: main, side, footer
draft: false

# Theme-Defined params
# thumbnail: "img/placeholder.png" # Thumbnail image
# lead: "Example lead - highlighted near the title" # Lead text
comments: false # Enable Disqus comments for specific page
readmore: true
pager: true # Enable pager navigation (prev/next) for specific page
toc: true # Enable Table of Contents for specific page
sidebar: "right" # Enable sidebar (on the right side) per page
---

hugo new content content\posts\test.mdした時に、この内容が含まれていればOK。

右のバーに何かを表示したいので行った。layouts\partials\widgets\banner.htmlにバナーの内容を書いたものを入れるconfig.tomlに以下のようにParams.sidebar.widgets フィールドの値に “banner” を追加すればサイドバーにウィジェットが追加されます。

[Params.sidebar]
  home = "right" # Configure layout for home page
  list = "right"  # Configure layout for list pages
  single = false # Configure layout for single pages
  # Enable widgets in given order
  widgets = ["search", "recent", "categories", "taglist","banner"]

一覧に表示する文字数の制限

バグ？

Read Moreの作成

タグを大文字小文字を区別するようにする

hugo new したときに作る markdown をテンプレート化する

Widgetを追加する