LoginSignup
3
4

More than 5 years have passed since last update.

@oinuman(オイヌマン)

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

Posted at

概要

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

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

準備

必要なモジュール

インストール

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

パラグラフタイプを作成したらパラグラフタイプ内にフィールドを追加していきます
フィールドを追加で作成できます
image.png

今回は例として、本文入力用の長文テキストフィールド、次へリンクのテキストを入力するテキストフィールドの二つを作成します
image.png
image.png

表示管理で作成した本文フィールドのラベルを非表示、次へフィールドを非表示にします
image.png

コンテンツタイプの設定

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

新しいフィールドでParagraphフィールドを作成します
image.png
image.png

フィールドの設定ページで作成したパラグラフタイプを選択して設定を保存しましょう
image.png

Viewsで表示を分割させる

Viewsで作成したパラグラフフィールドを分割して表示させます
まずViewsでブロックを作成します
image.png

コンテクチュアルフィルター

高度な設定のフィルターにコンテンツのIDを追加します
デフォルトの値を指定を選択し、「URLから取得したコンテンツID」を設定します
image.png

image.png
image.png

リレーションシップ

高度な設定のリレーションシップから、パラグラフフィールドのリレーションシップを設定します
image.png
image.png

フィールド

次にフィールドを追加していきます
image.png

パラグラフタイプ内の本文フィールドを追加します
これはそのまま保存してください
image.png

パラグラフフィールドのデルタを追加します
表示から除外にチェックを入れ、区切りをなしに設定します
結果の書き換えで数値を１大きくします
image.png
image.png
image.png

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

コンテンツへのリンクを追加します
表示から除外とOutput the URL as textにチェックを入れます
結果の書き換えで?page=にデルタを設定します
image.png
image.png
image.png

{{ view_node }}?page={{ delta }}

パラグラフタイプ内の次へを追加します
結果の書き換えで先ほど作成したコンテンツのリンクをリンクパスに設定します
image.png
image.png

{{ view_node }}

フィルターの条件

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

並び替え基準

image.png

パラグラフフィールドのデルタを追加します
昇順に設定します
image.png
image.png

ページャー

ページャーを設定します

フルページャーを使用します
表示件数を１に設定しましょう
image.png
image.png

Display Suiteの設定

サイト構築のDisplay Suite(/admin/structure/ds)からFieldsタブに移動します
image.png
image.png

Add a block fieldでDisplay Suiteのアイテムを追加します
エンティティにNodeを選択します
Blockに先ほど作成したViewsのブロックを選択します
image.png
image.png

コンテンツタイプの表示設定

記事の表示設定(/admin/structure/types/manage/article/display)に移動します

ページ下の「レイアウトを選択」で「One Column」を選択して一旦保存します
image.png

パラグラフフィールドとは別に「本文（複数ページ）」が使用できると思うので、それを表示するように設定します
これは、先ほどDisplay Suiteで追加したViewsのブロックです
image.png

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

表示の確認

「記事」を新規作成して、実際の表示を確認してみましょう
パラグラフフィールドに１ページ分ずつ文章を入力します
image.png

上手く設定ができていれば、複数のページに跨って表示されています
次へリンクやページャーはそのままだと味気ないので、CSSなどで調整しましょう
image.png
image.png

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
4