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 %}