Flat File CMSの「Grav」

- ポータルサイトを作り直す事になり、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 %}
```