ポータルサイトを作り直す事になり、Flat File CMSで作成してみることに。
- Flat File CMSではないが、「Crowi」「Hugo」に関しては、どこかのタイミングで試してみたい。
Flat File CMS導入にあたり、Flextype · Grav · Bludit · WonderCMS · Typemill · Automadをインストールして試してみたとこと、「Grav」が一番使いやすそうなので、「Grav」にて作成。
「Grav」に関しての日本語の記事がほとんど無いので、備忘録がてらメモを残しておく。

テスト環境

CMS：Grav 1.7.0-rc.16
サーバー：XAMPP
エディター：Atom

デフォルト構成

Gravのサイトより、「Grav RC core + Admin plugin」をダウンロードし、XAMPPのhtdocsに解凍。アクセスし、Adminユーザーを作成。
「Skeleton Packages」にてインストールする方法もあるが、今回はデフォルト構成を知る為にも通常にてダウンロード。ちなみにデフォルト構成は下記となる。
テーマ(/user/themes/)
- Quark
プラグイン(/user/plugins/)
- Admin Panel / Email / Error / Flex Objects / Form / Login / Markdown Notices / Problems

日本語化

まずは日本語化。
/user/config/site.yamlに「default_lang: ja」を追加。
/user/config/system.yaml
/user/accounts/admin.yamlに「language: ja」を追加。

テーマをインストール

色々なテーマを試した結果、Learn2 Git Syncが一番良さげ。
Learn2 Git Syncをインストール。
Leann2 Git Syncをインストールすると、同時に下記がインストールされる。
テーマ
- Learn2
プラグイン
- Breadcrumbs / External Links / Feed / Git Sync / Highlight / LangSwitcher / Presentation / Presentation Deckset / SimpleSearch / Shortcode Core / TNT Search / YouTube
「Learn2 Git Sync」の中身は下記で構成されている。
/templetes
- chapter.html.twig / docs.html.twig / search.html.twig
/templetes/partials
- base.html.twig / github_link.html.twig / github_note.html.twig / logo.html.twig / page.html.twig / presentation_iframe.html.twig / scripts.html.twig / search.html.twig / sidebar.html.twig / versions.html.twig

作るサイトの構成イメージ

作るサイトの基本概略構成のイメージは下記。

/user/pages
├── /01.home #ホーム
│　　├── docs.md
│　　├── /01.aaa
│　　│　　└── docs.md
│　　└── /02.bbb
│　　　　　└── docs.md
├── /02.notice #お知らせ
│　　├── docs.md
│　　├── 20200906-01
│　　│　　└── docs.md
│　　└── 20200905-01
│　　　　　└── docs.md
├── /03.rules #規程類
│　　├── docs.md
│　　├── /01.rule01 #基本経営規程
│　　│　　├── docs.md
│　　│　　├── /01.aaa
│　　│　　│　　└── docs.md
│　　│　　└── /02.bbb
│　　│　　　　　└── docs.md

mdファイルを修正

h1は不要なので、h1部分を削除。
mdの上部に下記を追加。デフォルトでは、「taxonomy:category: docs」を入れると前後ページに行く矢印が表示される。

---
title: タイトル
taxonomy:
    category: docs
---

ログイン

親フォルダのmdファイルに下記を追加。

access:
    site.login: true
    admin.login: true

Homeに記事の新着一覧を掲載

下記を h1 の下に追加。

{% if attribute(page.header, 'recent-posts').active %}
<ul class="grid">
{% for post in page.find('/notice').children.order('date', 'desc').slice(0, 10) %}
    <li class="recent-posts">
        <a href="{{ post.url }}">
        <div>{{ post.date|date("Y.m.d(D)") }}</div>
        <div>{{ post.title }}</div>
        </a>
    </li>
{% endfor %}
</ul>
{% endif %}

「home/docs.md」に下記を追加。

recent-posts:
  active: true

目次をつける

プラグイン「Page Toc」をインストール。
「/user/config/plugins/page-toc.yaml」を下記に設定。

enabled: true
active: false
start: '2'
depth: '3'

下記を「page.html.twig」に追加。

{% if config.get('plugins.page-toc.active') or attribute(page.header, 'page-toc').active %}
<div class="page-toc">
    {% set table_of_contents = toc(page.content) %}
    {% if table_of_contents is not empty %}
    <h4>Table of Contents</h4>
    {{ table_of_contents }}
    {% endif %}
</div>
{% endif %}

目次を表示したいページのmdに下記を追加。

page-toc:
  active: true

ページトップを追加

プラグイン「Back to Top」をインストール。
下記を「page.html.twig」に追加。

{# Render the backtotop link #}
{% if config.plugins.backtotop.enabled %}
    {% include 'partials/backtotop.html.twig' %}
{% endif %}