Drupal8でノードを複数ページに分ける方法

# 概要
ニュースサイト等で一つの記事が複数ページに分かれているものをDrupal8で対応してみました

※プログラミングコードは使用しませんが、手順が長いです
※Viewsとノードの基礎的な使い方が分かっている方が対象になります

# 準備
## 必要なモジュール
- [Paragraphsモジュール](https://www.drupal.org/project/paragraphs)
- [Display Suiteモジュール](https://www.drupal.org/project/ds)

## インストール
```shell
composer require drupal/ds
composer require drupal/paragraphs
drush en ds paragraphs
```

## モジュールの説明
### Paragraphsモジュール
Paragraph typeというフィールドのセットを作成し、自由度の高いフィールドを作成することができます

### Display Suiteモジュール
エンティティ（ノードやユーザー等）の表示管理を拡張することができます
ノードページでブロック等を表示させることもできるようになります

# 手順
## パラグラフタイプを用意
Paragraphsモジュールでページ分割に対応するフィールドを作成します

サイト構築のParagraphs types(`/admin/structure/paragraphs_type`)に移動します
Add Paragraph Typeでパラグラフタイプを作成します
ラベルは「本文（複数ページ）」等、てきとうに設定しましょう
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/2d40a511-4f28-e92f-38ea-6a602db1af4f.png)

パラグラフタイプを作成したらパラグラフタイプ内にフィールドを追加していきます
フィールドを追加で作成できます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/7b7a3e22-f384-d707-3662-d9d0a0df1c53.png)

今回は例として、本文入力用の長文テキストフィールド、次へリンクのテキストを入力するテキストフィールドの二つを作成します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/bd3bb953-fc00-ffab-0440-27910c2b879a.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/a034a495-bf2e-911c-d883-84f4591dda1a.png)

表示管理で作成した本文フィールドのラベルを非表示、次へフィールドを非表示にします
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/7c1078ef-815d-15cd-942e-92a80850d5d9.png)

## コンテンツタイプの設定
今回はデフォルトで用意されている「記事」を使用します
コンテンツタイプの記事でフィールド管理に移動します

新しいフィールドでParagraphフィールドを作成します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/39f39626-f4c9-7051-a375-13d5cc946d00.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/88635ef0-4d25-e358-c69b-a7081a42df65.png)

フィールドの設定ページで作成したパラグラフタイプを選択して設定を保存しましょう
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/21de7651-ce04-4fe9-66d0-b68e1206f37a.png)

## Viewsで表示を分割させる
Viewsで作成したパラグラフフィールドを分割して表示させます
まずViewsでブロックを作成します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/99994f7f-1b70-0cd6-4a2f-3a9a27fb73b1.png)

### コンテクチュアルフィルター
高度な設定のフィルターにコンテンツのIDを追加します
デフォルトの値を指定を選択し、「URLから取得したコンテンツID」を設定します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/10176b45-751c-0e4e-fe53-4d4c58355df8.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/5ee862c4-6b98-7937-4528-c71d6f86262b.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/e7028a21-8269-b8fd-b817-7e34eb90b28a.png)


### リレーションシップ
高度な設定のリレーションシップから、パラグラフフィールドのリレーションシップを設定します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/1cf9fd48-321b-3348-5329-3c6999d4fb61.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/de2e2bda-8400-9911-2892-129c8c5c35b7.png)

### フィールド
次にフィールドを追加していきます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/506a442b-9eff-9da3-25d6-61e9a38359f2.png)

パラグラフタイプ内の本文フィールドを追加します
これはそのまま保存してください
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/0b7d2f3a-91cc-2257-7802-74604618a86b.png)

パラグラフフィールドのデルタを追加します
表示から除外にチェックを入れ、区切りをなしに設定します
結果の書き換えで数値を１大きくします
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/ccdd6929-a86c-5632-7f0c-56d1f0225f90.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/7b1be7e8-f485-808c-b05a-4be3748cc715.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/4afb4df5-be70-a257-9a5a-ee87b1043da4.png)

```twig
{% set delta = delta + 1 %}{{ delta }}
```

コンテンツへのリンクを追加します
表示から除外とOutput the URL as textにチェックを入れます
結果の書き換えで`?page=`にデルタを設定します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/8ddad10d-7be3-860e-92a7-797cfb79012b.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/4d0d0847-a40e-37a8-7f08-375129ec42b4.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/7db3d8c1-4df5-37a0-64a5-61ffcec86fa1.png)

```twig
{{ view_node }}?page={{ delta }}
```

パラグラフタイプ内の次へを追加します
結果の書き換えで先ほど作成したコンテンツのリンクをリンクパスに設定します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/6de5dda3-e0de-d722-7e03-8da57abdeb6a.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/32683e05-cf9b-a9ea-1426-98e795895404.png)

```twig
{{ view_node }}
```

### フィルターの条件
なしで大丈夫です
掲載のフィルターも削除してください（非掲載の際に表示されなくなってしまいます）

### 並び替え基準
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/9d099249-6c2c-3cbc-5f34-e3df93bed51e.png)

パラグラフフィールドのデルタを追加します
昇順に設定します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/1a69dd48-096c-9e65-4e19-a4f3dca21942.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/9b11baca-a657-fa9c-073b-5b7af6a0f12d.png)

### ページャー
ページャーを設定します

フルページャーを使用します
表示件数を１に設定しましょう
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/1bd87736-0355-c558-b33b-eb4f66dcbf3c.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/746ba009-0663-d216-76e1-5eac92abcc58.png)

## Display Suiteの設定
サイト構築のDisplay Suite(`/admin/structure/ds`)からFieldsタブに移動します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/adf19c15-bb14-21f9-6338-7e3084f67563.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/770273df-fd18-8cf4-1435-7ae73ad4db85.png)

Add a block fieldでDisplay Suiteのアイテムを追加します
エンティティにNodeを選択します
Blockに先ほど作成したViewsのブロックを選択します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/2cf570b0-82f0-170c-3da3-bcb4d10c2350.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/aa13ba40-1423-827f-d3c9-9e26ed78821b.png)

## コンテンツタイプの表示設定
記事の表示設定(`/admin/structure/types/manage/article/display`)に移動します

ページ下の「レイアウトを選択」で「One Column」を選択して一旦保存します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/571e03c9-658d-246a-4bb4-728039dbce3a.png)

パラグラフフィールドとは別に「本文（複数ページ）」が使用できると思うので、それを表示するように設定します
これは、先ほどDisplay Suiteで追加したViewsのブロックです
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/bac8058a-42c9-6019-64c8-545738ca9fd9.png)

これで一つのノードで複数ページに分割して表示する設定は完了です

# 表示の確認
「記事」を新規作成して、実際の表示を確認してみましょう
パラグラフフィールドに１ページ分ずつ文章を入力します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/9eb0f845-dfe5-fba9-c98a-b5bab41493c9.png)

上手く設定ができていれば、複数のページに跨って表示されています
次へリンクやページャーはそのままだと味気ないので、CSSなどで調整しましょう
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/8b6f56b7-865c-d7b5-8d09-4a4c7709a452.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/f714fbe3-8e6a-e0ed-35e2-fcf9b3939e29.png)