STEP03：サイト作成

この記事はかなり古いのでこちらの追記を確認してください

（上の日付は記事の並べ替えに使っているだけです。更新日は下をご覧ください）

ベースを色々変更しながら、このサイトを作っていきました。
Academicテーマ特有の設定も多いと思います。
このサイトでどう設定しているかをそのまま記述します。
なお、ディレクトリは全て themes/My_Website 下です。

■基本設定

1. バックアップ

  • themes/My_Website を圧縮して保存
    このディレクトリ内を変更していくので、元の状態を保存しておきました。

2. configファイルを編集

config/_default　に設定ファイルがあります。
それぞれの設定ファイルを以下のように変更しました。
変更した項目は元をコメントアウトし、ファイルの上にまとめて記載しました。

params.toml

############################
## MySetup
############################
## Theme
theme = "ocean"
# day_night = true # コメントアウトで機能停止
font_size = "S"

## Contact details
email = "test@example.com" # 消すとcontact formでエラー
phone = ""
address = {street = "", city = "", region = "", postcode = "", country = "", country_code = ""}
coordinates = {latitude = "", longitude = ""}
directions = ""
office_hours = ["", ""]
appointment_url = ""
contact_links = [
  {icon = "twitter", icon_pack = "fab", name = "brownmorning", link = "https://twitter.com/Twitter"},
  # {icon = "skype", icon_pack = "fab", name = "Skype Me", link = "skype:echo123?call"},
  # {icon = "keybase", icon_pack = "fab", name = "Chat on Keybase", link = "https://keybase.io/"},
  # {icon = "comments", icon_pack = "fas", name = "Discuss on Forum", link = "https://discourse.gohugo.io"},
  # {icon = "telegram", icon_pack = "fab", name = "Telegram Me", link = "https://telegram.me/@Telegram"},
  ]

## Social
twitter = "brownmorning"

## Regional Settings
date_format = "2006-01-02"

language.toml

############################
## MySetup
############################
[ja] # config.tomlのdefaultContentLanguageに関連
  languageCode = "ja"

config.toml

############################
## MySetup
############################
title = "茶色の朝を迎えないために"
baseurl = "https://brownmorning.net"
copyright = "Copyright © 2013-{year} 茶色の朝を迎えないために"

defaultContentLanguage = "ja"
hasCJKLanguage = true  # Set `true` for Chinese/Japanese/Korean languages.
paginate = 100  # Number of items per page in paginated lists.

3. 使わないwidgetを無効化

  • content/home 下で「トップ」ページで使わないwidgetを無効化（元から無効なものを除く）

contact.md
experience.md
featured.md
post.md
projects.md
publications.md
skills.md
talks.md

active = false  # Activate this widget? true/false

4. favicon変更

  • assets/images/の下にicon.png として配置(サイズは512 X 512px)(参考1)

5. プライバシーポリシー等削除

  • content/privacy.md を削除あるいは名前変更
  • content/terms.md 削除あるいは名前変更

■本サイト「トップ」ページ

本サイトトップページはAcademicテーマのwidgetページをそのまま使っています。

1. 「ようこそ」部分

ここは「demo」widget（=「blank」widget）を使ってます

  • バックの画像を static/img に追加（bluesky.jpg)
  • content/home/demo.md の編集

demo.md 基本設定

# A Demo section created with the Blank widget.
# Any elements can be added in the body: https://sourcethemes.com/academic/docs/writing-markdown-latex/
# Add more sections by duplicating this file and customizing to your requirements.

widget = "blank"  # See https://sourcethemes.com/academic/docs/page-builder/
headless = true  # This file represents a page section.
active = true  # Activate this widget? true/false
weight = 15  # Order that this section will appear.

title = "ようこそ"
subtitle = "2020年5月3日　この新サイトへ引っ越してきました"

demo.md バックの画像設定

  # Background gradient.
#  gradient_start = "DarkGreen"
#  gradient_end = "ForestGreen"
  
  # Background image.
 image = "bluesky.jpg"  # Name of image in `static/img/`.
 image_darken = 0.3  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
 image_size = "cover"  #  Options are `cover` (default), `contain`, or `actual` size.
 image_position = "center"  # Options include `left`, `center` (default), or `right`.
 image_parallax = true  # Use a fun parallax-like fixed background effect? true/false

2. 「メインメニュー」部分

ここは「demo」widgetをコピーして使ってます

  • content/home/mainmenu.md を新規作成後、編集

mainmenu.md 基本設定

widget = "blank"  # See https://sourcethemes.com/academic/docs/page-builder/
headless = true  # This file represents a page section.
active = true  # Activate this widget? true/false
weight = 16  # Order that this section will appear.

title = "メインメニュー"
subtitle = ""

バックの画像設定は「ようこそ」部分と同じ

  • アイコン画像を static/img 下に配置

アイコン画像をfloat設定して説明文を横につけるため、独自スタイルシートを定義します。(参考2)

  • assetsフォルダ下に scss フォルダ作成
  • custom.scss ファイル新規作成

custom.scss

img[src$='#floatright']
{
   float:right;
}
img[src$='#floatleft']
{
   float:left;
}

mainmenu.md

<a href="#about">![管理人](/img/icon_person.png#floatleft)<b>管理人</b></a><br>当サイトの管理人について。出演イベントの案内など
<br clear="left">

アイコン画像のファイル名指定のところに #floatleft とあるのがポイント
それと、次の行が前の行の画像の横にならないために clear=“left” がついてます。

3. 「更新情報」部分

ここも「demo」widgetをコピーして使ってます

  • content/home/whatsnew.md を新規作成後、編集

whatsnew.md 基本設定

widget = "blank"  # See https://sourcethemes.com/academic/docs/page-builder/
headless = true  # This file represents a page section.
active = true  # Activate this widget? true/false
weight = 17  # Order that this section will appear.

title = "更新情報"
subtitle = ""

whatsnew.md

<i class="fas fa-bullhorn"></i>反原発ポスター  
　2020年02月21日　新規　<a href="/nonukeposter/20200221/">2019年度経産省の新事業</a>

Academicテーマはアイコン部分にfont awsomeが使えます。(参考3)

4. 「管理人について」部分

ここは「about」widgetを使ってます

  • content/authors/admin/_index.md を編集
    表示する内容はこのファイルに記入
  • content/authors/admin/avatar.jpg を差し替え
    表示されてる写真入れ替え
  • content/home/about.md を編集

about.md 基本設定

# About widget.
widget = "about"  # See https://sourcethemes.com/academic/docs/page-builder/
headless = true  # This file represents a page section.
active = true  # Activate this widget? true/false
weight = 20  # Order that this section will appear in.

title = "管理人について"

5. 「出演イベント」部分

ここは「accomplishments」widgetを使ってます
本来はacademicテーマでの「成果」コーナーなんですが、それを流用してます

  • content/home/accomplishments.md を編集

accomplishments.md 基本設定

# Accomplishments widget.
widget = "accomplishments"  # See https://sourcethemes.com/academic/docs/page-builder/
headless = true  # This file represents a page section.
active = true  # Activate this widget? true/false
weight = 50  # Order that this section will appear.

title = "出演イベント"
subtitle = ""

# Date format
#   Refer to https://sourcethemes.com/academic/docs/customization/#date-format
date_format = "2006-01-02"

各イベントは次のような感じ
・organization：会場・場所を記入
・date_start：必須。イベント日
・certificate_url：イベントURL
・description：説明。（brタグで改行できます）

accomplishments.md

[[item]]
  organization = "国会前"
  organization_url = ""
  title = "再稼働反対首相官邸前抗議"
  url = ""
  certificate_url = "http://coalitionagainstnukes.jp"
  date_start = "2020-03-13"
  date_end = ""
  description = "しばらく中止"

このままだとリンクの表示が「See certificate」となってますので、これを変えます。(参考4)

  • My_Websiteフォルダ下に i18n フォルダ作成
  • themes/academic/i18n　下の　ja.yaml　をコピーしてくる
    ・ja.yamlでid: see_certificate　の　translation　を変更

ja.yaml

- id: see_certificate
  translation: 詳細はこちら

6. 「キーワード」部分

ここは「tags」widgetを使ってます

  • content/home/accomplishments.md を編集

tags.md

# Tag Cloud widget.
widget = "tag_cloud"  # See https://sourcethemes.com/academic/docs/page-builder/
headless = true  # This file represents a page section.
active = true  # Activate this widget? true/false
weight = 120  # Order that this section will appear.

title = "キーワード"
subtitle = "関連するキーワード<br>クリックすると<br>そのページリストへ飛びます"

[content]
  # Choose the taxonomy from `config.toml` to display (e.g. tags, categories)
  taxonomy = "tags"
  
  # Choose how many tags you would like to display (0 = all tags)
#  count = 20
  count = 0

■本サイトのページ共通設定

1. ページ一覧フォーマット変更

ページ一覧のフォーマットをデフォルトとは異なるものにしました。(参考5)
これは全ての一覧に影響します。

  • My_Websiteフォルダ下に layouts/_default フォルダ作成
  • My_Website/themes/academic/layouts/_default　下の　list.html　をコピーしてきて編集

list.html

    <div class="article-style">
      <!-- セクション -->
      {{ if eq .Section "nonukeposter" }} <i class="fas fa-bullhorn"></i> 
        {{ else if eq .Section "statement" }} <i class="fas fa-comment"></i>
        {{ else if eq .Section "primeminister" }} <i class="far fa-clock"></i>
        {{ else if eq .Section "kenpou" }} <i class="fas fa-book"></i>
        {{ else if eq .Section "thinking" }} <i class="fas fa-exclamation-circle"></i>
      {{ end }}
      <!-- 日付 -->
      {{ .Date.Format "2006-01-02" }}
      <!-- リンク -->
      <a href="{{$link}}" {{ $target | safeHTMLAttr }}>{{ .Title }}</a>
      {{ .Params.Tags }}
    </div>

if文を利用して、セクションによって、一覧の先頭に表示するアイコンを切り替えています。
それ以外は日付とリンクだけのシンプルな一覧にしました。

■本サイトのページ

トップページ以外はセクションでメニューを構成しています。
以下、「反原発ポスター」ページを例に構成を示しますが、他のページも同じです。

1.セクション作成

  • contentフォルダ下に nonukeposter フォルダ作成（これがそのままセクション名）
  • _index.md　ファイルを content/poster 下からコピー
  • _index.md のタイトルを編集
  • 画面に表示する画像は featured.png という名前で配置

2.記事作成

  • 画像用に staticフォルダ下に img/nonukeposter フォルダ作成
    記事からは /img/nonukeposter/ファイル名 で参照可能
  • ファイル用に staticフォルダ下に files/nonukeposter フォルダ作成
    記事からは /files/nonukeposter/ファイル名 で参照可能
  • xxxx.md ファイルを作成（記事本体）

TIPS:マークダウン内で直接HTML記述可能(参考6)

TIPS:リンクで別ウィンドウで開かせるにはマークダウン ではなくHTMLのaタグで普通に記述

TIPS:特定領域だけにスタイルシートを反映させるためにdiv要素利用(参考7)

3.画面上部のメニュー設定

  • config/_default/menus.toml で設定

初期構築内容の一覧はこちら

■参考URL

(参考1)
favicon変更方法＞
Academic公式：Customization
https://sourcethemes.com/academic/docs/customization/#website-icon

(参考2)
アイコン横に文字を記載する方法＞
Handling images (size, aligning,…)
https://discourse.gohugo.io/t/handling-images-size-aligning/1940

独自スタイルシートの置き場所＞
Academic公式：Customization
https://sourcethemes.com/academic/docs/customization/#customize-style-css

(参考3)
Font Awesomeの使い方＞
絵文字ではないアイコンはどのようにして表示するのですか？
https://balloon.asia/hugo/

font awesome
https://fontawesome.com/icons?d=gallery

(参考4)
翻訳内容変更＞ Hugoでのi18n+Dataファイル機能を使う時のユースケースまとめ
https://qiita.com/YasuhiroABE/items/2b1f844b34f9ed04c9fb

(参考5)
リストテンプレートについて＞
レイアウト用のテンプレートの種類を理解する
https://maku77.github.io/hugo/layout/template-types.html

(参考6)
マークダウン内のHTML記述＞
【HUGO】マークダウンの中にHTMLコードを書いて表示する方法
https://srbrnote.work/archives/2772

(参考7)
特定領域にスタイルシートを反映＞
複数のtableのデザインをCSSで指定する
https://mndangler.net/2012/08/tablecss/

＜Hugoインストールについて＞
公式ページ：QuickStart
https://gohugo.io/getting-started/quick-start

＜Academicテーマインストールについて＞
公式ページ：Install
https://sourcethemes.com/academic/docs/install/

＜Hugo＞
まくまくHugo/Goノート
https://maku77.github.io/hugo/

Hugo + Academic テーマを使ったブログの作り方
https://qiita.com/harumaxy/items/58e7e4273c61e7e260b3

Hugoでwebサイト構築
https://wdkk.co.jp/note/2015/0731-hugo/

新規作成：2020/05/04
最終更新：2020/05/04