ホームページをさらに更新

HUGO, Academicを更新後、さらに試行錯誤が続きました。
一応、ひと段落。今後の運用方法もほぼ決めたので、そこに至るまでの作業を整理。
これで前よりは記事を書きやすくなった。。。と思います。

■ディレクトリ構成変更

記事用フォルダの下にカテゴリごとにフォルダを作って、
そこにどんどん記事を足していく方式に変更。
こうしておくとwidgetのportforioで抽出しやすくなる。

各ページのタグで表示制御できる
（以下widgetのファイルを一部抜粋）

# Page type to display. E.g. project.
page_type = "article" #ここで指定したフォルダより下が対象になる

[[content.filter_button]]
name = "注目記事"
tag = "注目記事"

[[content.filter_button]]
name = "政府関連記事"
tag = "政府記事"

[[content.filter_button]]
name = "憲法関連記事"
tag = "憲法記事"

ちなみにこのスライダーの見た目をこの形にするのは結構大変でした。
config/_default/params.yaml
で指定するthemaをoceanにしてたんですが、
このスライダー部分で、選択してないところの字が見えないという問題発生。
同じようなことに困ってる人も発見したものの解決策不明(参考1)
色々試して、themaをminimalにすればなんとなく字は読めることが判明。
でもこのテーマだとメニュー部分が白くなってちょっとカッコ悪い。。。

custom themaが作れるって書いてあったので(参考2)これに沿って作業。

themaファイル作成

data/themes/mythema.toml
というファイル作成 minimalテーマのソースをここ から取得してまずはこれをコピー。
少しずつ色を変えながら調整した結果がこちら

mythema.toml

# Theme metadata
name = "mythema"

# Is theme light or dark?
light = true

# Primary
primary = "#3f51b5"

# Menu
menu_primary = "#3f51b5"
menu_text = "#fff"
menu_text_active = "#ffeb3b"
menu_title = "#fff"

# Home sections
home_section_odd = "rgb(255, 255, 255)"
home_section_even = "rgb(247, 247, 247)"

[dark]
  link = "#fff"
  link_hover = "#bbdefb"

paramsファイル変更

config/_default/params.yaml
のthemaを変更

params.YAML

# Appearance
theme: mythema

■リダイレクト設定

ディレクトリ構成変更したので、元のページとURLが変わってしまいました。
なるべくリダイレクトで元のURLでもリンクできるように設定
これはS3のリダイレクト設定で実施します。(参考3)
S3の静的ウェブサイトホスティングの設定ページにあるリダイレクトルールに
こんな感じで設定していきました。

{
    "Condition": {
        "KeyPrefixEquals": "primeminister/"
    },
    "Redirect": {
        "HostName": "brownmorning.net",
        "Protocol": "https",
        "ReplaceKeyPrefixWith": "article/primeminister/"
    }
}

一部救えてないんだけど、それはしょうがないことにする。

■404ページ設定

リダイレクト漏れはしょうがないことにするけど、
404エラーページくらいはまともにしたい。
layouts/404.html
っていうのを作ればいいだけみたい。(参考4)

S3で運用している場合は、
S3の静的ウェブサイトホスティングの設定ページにあるエラードキュメントの設定も必要みたい。

■新運用ルール

これは本気で自分の備忘録なので、誰の参考にもなりません。きっと。

記事作成

・フォルダを記事名で作成
・記事はindex.mdに記述
・キー画像をfeatured.jpgとして保存

タグルール

●トップページのクイックリンクでは article配下のものを対象に特定タグで絞り込み表示
　初期表示はタグが「注目記事」のもの
　　・必ず「（カテゴリ名）記事」というタグを付与する（例：政府記事）
　　・注目記事には「注目記事」というタグを付与する

●トップページ下のイベントでは mypage配下でタグが「featuredevent」のものを表示

●「このサイトについて」下のミニメニューには mypage配下のものを対象に

featured: true

のものを表示

●基本的にタグは自由に付与しておき、トップページの「キーワード」でタグクラウドを形成

カテゴリルール

●it覚書コンテンツについてはタグクラウドに表示させないためにカテゴリを利用
●上記以外のコンテンツではカテゴリは原則利用しない

■参考資料

(参考1)
github：Academic Project Filter Toolbar Colour Illegible
(参考2)
wowchemy docs：Custom theme
(参考3)
AWSユーザーガイド：(オプション) ウェブページリダイレクトの設定
(参考4)
HUGO docs：Custom 404 Page

• IT覚書
• Homepage