Hugoで小説サイトを作成する　その2

config.tomlの定義

　Mainroadのカスタマイズにはいります。
　まず、config.tomlを開き、必要項目を記入していきます。
　#はコメントアウトの項目です。

baseURL = "https://soyosoyo.work/"
languageCode = "ja"　#日本語
DefaultContentLanguage = "ja" #日本語
title = "そよそよ"
theme = "Mainroad"
hasCJKLanguage = true
summaryLength = 60 # サマリーの長さを120単語にする

[Params]
  subtitle = "大人の女性向けのオリジナル恋愛小説サイト。" 
  description = "大人の女性向けのオリジナル恋愛小説サイトとPC関連の備忘録、その他思うことを書き綴っています。１８歳以上（高校生不可）の方、どうぞご覧ください。" 
  copyright = "そよそよ" 
  opengraph = true 
  schema = true 
  twitter_cards = false 
  readmore = false 
  authorbox = false
  toc = true 
  paginate = "100"
  pager = true # Show pager navigation (prev/next links) at the bottom of pages if true
  post_meta = [ "date","categories"] 
  mainSections = ["post"]
  dateformat = "2006-01-02" # Change the format of dates
  mathjax = true # Enable MathJax
  mathjaxPath = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js" # Specify MathJax path
  mathjaxConfig = "TeX-AMS-MML_html"orMML" # Specify MathJax config
  customCSS = ["css/custom.css"] # Include custom CSS files
  customJS = ["js/custom.js"] # Include custom JS files

[taxonomies]
  category = "categories"
  tags = "tags"

[permalinks]
    blog = "/:year/:month/:day/"
    post = "/:sections/"

[Params.style.vars]
  highlightColor = "#777777" # Override highlight color

  [Params.logo]
  image = "img/back2.jpg" # Logo image. Path relative to "static"
  title = "そよそよ" # Logo title, otherwise will use site title
  subtitle = "杏の書き物置き場" # Logo subtitle
  fontFamilyPrimary ="'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif"
  fontFamilySecondary = "'Helvetica Neue', 'Helvetica', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic', 'Meiryo', sans-serif"

#[Params.sidebar] # サイドバーの設定     #そよそよではサイドバーは使用しないのですべてコメントアウト。
# home = "false" # ホームページでは右に表示
# list = false  # 一覧ページでは表示しない
# single = false # シングルページでは表示しない
# widgets = ["search", "social","categories","tags"]

#[Params.widgets]    #上に同じく使用しない。
#  recent_num = 5 # Set the number of articles in the "Recent articles" widget
#  tags_counter = "true" # Enable counter for each tag in "Tags" widget

[markup.goldmark.renderer]　# Markdownの中でhtml"を書けるようにする。
  unsafe = true
  uglyurls = true

  [[menu.main]] # メニュー
    name = "INDEX"
    url = "/"
    weight = 1
  [[menu.main]]
    name = "ABOUT"
    url = "/about"
    weight = 2
  [[menu.main]]
    name = "NOVELS"
    url = "/novels"
    weight = 3
  [[menu.main]]
    name = "BLOG"
    url = "/blog"
    weight = 4
  [[menu.main]]
    name = "OTHERS"
    url = "/others"
    weight = 5
  [[menu.main]]
    name = "MAIL"
    url = "https://soyosoyo.work/somail/index.html"
    weight = 6

記事の作成

例）愛だと信じていた第01話

>hugo new ai/ai001.md

成功しますと、続けてこんな風に表示されます。

Content "\\content\\ai\\ai001.md" created

　ai/ai001.mdの中はこうなってます。項目はarchetypes/defaultファイルで変更できます。

---
title: "Ai001"
date: 2019-10-18T10:47:01+00:00
draft: true
images:
  - "img/back.jpg"
url: 
categories:
 - 
tags:
 - 
---

titleは「愛だと信じていた第01話」に変更し、記事が完成したらdraft:trueは消してしまいます。falseにして残すこともあります。

完成した第01話の中身はこんな感じです。 例）ai/ai001.md

---
title: "愛だと信じていた　第01話" 
author: "杏"　
type: "post" 
images: 
  - img/back.jpg
date: 2019-10-18T10:47:01+00:00　
url: "s/ai/ai001.html"　
categories:　　　　　
 - 愛だと信じていた
tags:　　　　　　　　
 - 完結済
 - 美形
 - 恋愛
 - シリアス
 - ドキドキ
 - 多角関係
 - 失恋
 - 御曹司
 - 強引
 - 官能的 
---
　愚かだと言われるのはわかっているから、誰にも共感は求めない。　＃以下本文  

小説に目次をつける

　さて、ここからが小説サイトへのカスタマイズなわけですが、一番大切なのは各小説ごとのフォルダ分けですね。これはHugoでいうところのSectionになります。例えば「愛だと信じていた」のお話はすべて「ai」フォルダの中にあります。カテゴリーに似ていますが違います。その１でも書きましたが、少ししか記事のないサイトならSection分けも必要ないかもしれませんが、膨大な記事がある場合はSection分けしておかないと、整理整頓が大変です。

C:.
├─ai──────────┬_index.md
├─ailin       ├  ai.md
├─ato         ├　ai001.md 
├─b           ：   ：
├─bikei       └  ai018.md
：
└─yukino

小説に目次をつけるため、Sectionごとに_index.mdファイルを作成して保存します。

例）_index.md

---
title: "愛だと信じていた"
---
【完結済 美形 恋愛 シリアス ドキドキ 多角関係 失恋 御曹司 強引 官能的】  
あすかは、絶対に振り返らない御曹司の貴明を愛していた。貴明と彼の恋人が結ばれるのを信じ、その日のために日々を生きていた。そんなある日、中宮という男が現れて、あすかを妻にもらうと宣言した。拒否するあすかに、中宮は冷たい笑みを浮かべて言うのだった。「いずれ貴女は我慢が出来なくなる、こんなに愛しているのにどうして振り返ってくれないのかと……」。

タイトルだけで充分ですが、私は説明文も入れています。単体でもわかるようにするためです。

小説の目次を降順から昇順へ変更する

さて、基本、ブログ様式のテーマなので、すべてが降順で表示されます。そしてMainroadでは10記事ずつ表示されます。何が更新されたか、日記などの場合は降順で正解ですが、小説だと最新話が一番上にくると大変見づらい上、話数が多いと何回もエンターが必要で面倒なので、list.html"の中身を変更して、昇順に100記事表示できるようにレイアウトしなおします。

テーマのlist.html"をコピーして、（\soyo2\themes\mainroad\layout￥_default\list.htnml）

  {{- range .Paginator.Pages }}
    {{- .Render "summary" }}
  {{- end }}

↓昇順に変更！（\soyo2\layouts￥_default\list.html"）

    {{- range (.Paginator 100).Pages.Reverse}} #100記事表示と.Reverseを付け加える。
    {{- .Render "summary" }}
  {{- end }}

保存します。

─layouts
│  ├─partials
│  └─_default
│　　　　└─list.html" ＃　←ここ

テーマの方を変更するとアップデート時に消えてしまいますので、このカスタマイズは必ずルートディレクトリのlayoutsフォルダ内で行ってください。また、この時、layoutsフォルダの中は空ですので、＿defaultフォルダを作成してください。

昇順になり、ページャーの必要がない、小説の目次になりました。

BLOG、OTHERSのを降順へ戻す

とはいえ、小説ではないコンテンツは新しい順＆日付がついていたほうが見やすいので、降順へ戻します。Sectionを使います。同じ名前の空フォルダをルートディレクトリのlayoutsフォルダに作成します。

├─archetypes
├─content
│  ├─ai（愛だと信じていた）
│   (小説のコンテンツがたくさん並ぶ) 
│  └─yukino（雪のように舞う桜の中で）
├─data
├─layouts
│  ├─blog
│　│　　└─list.html"  ←　blogフォルダ作成
│  ├─others
│　│　　　└─list.html"  ←  othersフォルダ作成
│  ├─partials
│  └─_default
│　　　　└─list.html"

この場合は、テーマのlist.html"をそのままコピーして二つフォルダへ保存するだけです。
降順になっています。

続きます。