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

config.tomlの定義

 Mainloadのカスタマイズにはいります。
 まず、config.tomlを開き、自分の思うようにカスタマイズしたのか以下です。
 #はコメントアウトの項目です。

baseURL = "https://soyosoyo.work/"
languageCode = "ja -jp"
DefaultContentLanguage = "jp"
title = "そよそよ"
theme = "Mainroad"
hasCJKLanguage = true
summaryLength = 60 # サマリーの長さを120単語にする
[Params]
  subtitle = "杏の書き物のサイト" 
  description = "大人の女性向けのオリジナル恋愛小説サイトとPC関連の備忘録、その他思うことを書き綴っています。18歳以上(高校生不可)の方、どうぞご覧ください" 
  copyright = "そよそよ" 
  opengraph = true 
  schema = true 
  twitter_cards = true 
  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"] 
  mainSections = ["post","b"]
  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_HTMLorMML" # 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]
    b = "/:year/:month/:day/"
    s = "/:sections/"

[Params.style.vars]
  highlightColor = "#4682b4" # 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 = "right" # ホームページでは右に表示
  list = false  # 一覧ページでは表示しない
  single = false # シングルページでは表示しない
  widgets = ["search", "social"]

[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

[[Params.widgets.social.custom]]
  title = "MAIL" 
  url = "https://soyosoyo.work/somail/index.html"

[[Params.widgets.social.custom]]
  title = "ブログ村 ロマンス小説"
  url = "https://novel.blogmura.com/novel_romance/ranking/in?p_cid=10976608" 

[markup.goldmark.renderer]
  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

記事の作成

例)愛だと信じていた第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」フォルダの中にあります。カテゴリーに似ていますが違います。その1でも書きましたが、少ししか記事のないサイトならSection分けも必要ないかもしれませんが、膨大な記事がある場合はSection分けしておかないと、整理整頓が大変です。

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

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

例)_index.md

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

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

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

さて、基本、ブログ様式のテーマなので、すべてが降順で表示されます。そしてMainloadでは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をそのままコピーして二つフォルダへ保存するだけです。
降順になっています。

続きます。