ゆるふわDrupal8メモ

1年以上前に途中で中止になったプロジェクトの下書き供養。
結局あまり理解できずに終わったような気がしなくもない

Drupal8を調べたメモです。

カスタムテンプレートについて

drupal/htdocs/themes/customに作りたいテーマ名のディレクトリを作ってそこで作業

htdocs/
   └ themes/
        └ custom
            └ わかりやすいモジュールの名前
                ├ info.yml（テーマの設定ファイル）
                ├ libraries.yml（テーマ内でcssやjavascriptを読み込むための設定）
                ├ rimmel.theme（hookを定義する）
                ├ css（css置き場）
                ├ js（js置き場）
                └ templates（テンプレートファイル）
                    ├ page.html.twig

テンプレートの命名規則

info.ymlのbase theme: classyはテンプレートが無かった時に代替えで/core/themes/classyのテンプレートを読み込めっていう指定。

静的ページの追加

管理画面 -> コンテンツで「コンテンツを追加」
基本ページを選択して、
編集画面からタイトルと本文（フルHTML）。
右部の設定でメニューリンクのタイトルとURLエイリアスを設定

作ったページの本来のurlは
ホーム -> 管理 -> 環境設定 -> 検索とメタデータ -> URL エイリアス
で、確認できる。
1個目に作ったページがエイリアスが「/node/1」でシステム上は「/node/1」の場合、
このページのテンプレートは「page--node--1.html.twig」で表示できるので、
page--node--1.html.twigをpag.html.twigをコピーして作成

page--node--1にフックしたいものをrimmel.themeで使う場合

例はpage--node--1にだけ読み込みたいjsがある場合

libraries.yml

page_node_1:
  version: VERSION
  js:
    js/concept.js: {}

rimmel.theme

function rimmel_preprocess_page__node__1(&$variables) {
  $variables['#attached']['library'][] = 'rimmel/page_node_1';
}

みたいな感じで使う

ビューズで作った作ったページは

エイリアスがnewsだったら
page--news.html.twigでいけるっぽい。

だけど、ビューズでページを作ったらnode（ページ一覧）に入らないからパンくずの生成がわからないので、ページはコンテンツで作って必要なものはviewsでブロックとして該当ページに表示させる

動的ページの追加

ホーム -> 管理-> サイト構築のコンテンツタイプで新しく使用するコンテンツタイプを追加

ページ作成

WHAT’S NEWと商品登録というコンテンツを作成済みと前提。

管理画面 -> コンテンツで「コンテンツを追加」
新着情報の場合は
WHAT’S NEWを選択して、
編集画面からタイトルと本文（フルHTML）。右部の設定でメニューリンクのタイトルとURLエイリアスを設定
タグを選択して投稿

製品情報のときは
例えば、マスカラだったら
商品登録でコンテンツを追加して
編集画面からタイトルと本文（フルHTML）。右部の設定でメニューリンクのタイトルとURLエイリアスを設定
タグEYESを選択して投稿

tips

ページ内に投稿された記事を呼び出す

ニュース詳細に商品の画像などを呼び出すやつ。
Display Suiteというモジュールを使用

1. ホーム -> 管理 -> サイト構築 -> ディスプレイモード ->ビューモードのコンテンツに表示したいパーツの名前で新しいビューモードを追加
2. 商品の呼び出しなので、ホーム -> 管理 -> サイト構築 ->コンテンツタイプで商品の記事用のコンテンツのフィールド管理を開く
3. フィールド管理-> 表示管理の下部にあるレイアウトの項目で、「カスタムの表示設定」を開いて先程作成した新しいビューモードにチェックをいれて保存
4. 表示管理内に先程のビューモードが選択できるようにタブができてるので、開いて、必要情報以外を無効にする。
5. ホーム -> 管理 -> サイト構築 -> コンテンツタイプ -> WHAT’S NEWの記事でフィールドの管理を開く
6. フィールドの追加で「参照：コンテンツ」を追加。参照タイプは商品登録
7. 表示管理で先程追加したフィールドのフォーマッターを描画されたエンティティに変更。個別設定でビューモードを最初に登録したビューモードに変更

カテゴリの追加

ホーム -> 管理 -> サイト構築 ->タクソノミー
1回しかネストできなさそう。

・ボキャブラリー（カテゴリトップ）
・ターム（下の階層）
タームのエイリアスはEYESの中のEYE LINERだったら、/product/eyes/eye-linerみたいにつける。

ブロックの追加

ホーム -> 管理 -> サイト構築 ->ブロックレイアウトで追加

javascriptの注意点

drupalが大量のjsやcssをデフォルトで呼び出していて、多分どれかでnoConflict()してる。

$(function(){});

でくくっていたら

jQuery(function($){});

に変更

追加したモジュール

Display Suite

各フィールドの詳細設定や隠しフィールドの表示など
Display Suite
Display Suiteの日本語解説

Pathauto

ノードやタクソノミーターム、ユーザーのURLを Token を使って自動的に生成
Pathauto
Pathautoの日本語解説

Token

Pathautoに必要だったので。管理画面で利用可能なトークンの一覧を表示したり、追加のトークンを使用可能にできる。
Token

Devel

デバッグできるのでローカルで入れました
Devel
Drupal 8で変数情報を表示するkintライブラリをインストールする

Paragraphs

フィールドをグループ化
Paragraphs
Paragraphsの日本語解説

Entity Reference Revisions

Paragraphsに必要だったので。
Entity Reference Revisions

本番環境にデータを移行する系参考サイト

Features
Featuresを使ったコンテンツデータ移行
FEATURESによる開発用サイト→本番サイト運用
Drupal8のコンテンツタイプをモジュール（CMI）でエクスポート時にフィールドの定義はありません
Drupal8の新機能 Configretion Manegerを使ってみる

カスタムモジュール

drupal/htdocs/modulesに作りたいモジュール名でディレクトリを作ってそこで作業

htdocs/
     ├ modules/
            └ わかりやすいモジュールの名前
                  ├ モジュール名.info.yml（設定ファイル）
                  ├ モジュール名.routing.yml（ルーティング）
                  ├ モジュール名.module（モジュールの本体）
                  └ src/
                      ├ HogeController.php （コントローラー）

Drupal 8 入門 : カスタムモジュール作成編

モジュール名.info.yml

name: my first custom module.（モジュール名）
type: module
description: 'This is my first module.'（モジュールの説明）
core: 8.x

モジュール名.routing.yml

hello:
  path: '/hello'（アクセスする場所）
  defaults:
    _title: 'Hello Title'
    _controller: '\Drupal\hello\HelloController::content'（コントローラーの場所。内部パスはバクスラ）
  requirements:
    _permission: 'access content'（access contentはDrupalでページにアクセスできるっていう権限）

HogeController.php

<?php

namespace Drupal\hello;

use Drupal\Core\Controller\ControllerBase;

/**
 * Hello!を表示するコントローラー
 */
class HelloController extends ControllerBase {

  public function content() {
    return array(
        '#markup' => '' . t('Hello!') . '',
    );
  }

}

アップロードしたら、機能拡張のところでインストールできるので、インストールしたら/helloにアクセスしてみる。

カスタムブロックモジュール

※ブロックとして読み込めてないので未検証
annotationとやらを定義しないと読み込めない
Block API overview

drupal/htdocs/modulesに作りたいモジュール名でディレクトリを作ってそこで作業

htdocs/
     ├ modules/
            └ わかりやすいモジュールの名前
                  ├ モジュール名.info.yml（設定ファイル）
                  └ src/
                    └ Plugin/
                        └ Block/
                            ├ HogeBlock.php （コントローラー）

モジュール名.info.yml

name: words_block module（モジュール名）
core: 8.x
description: 'Provides a block with hello.'（モジュールの説明）
type: module
dependencies:
  - block（ブロックだよって教える）

HogeBlock.php

<?php

namespace Drupal\words_block\Plugin\Block;

use Drupal\Core\Block\BlockBase;
use Drupal\Core\Form\FormStateInterface;


/**
 * annotation定義。管理用のIDとラベル
 * @Block(
 *   id = "words_block",
 *   admin_label = @Translation("sample words block"),
 * )
 */

class wordsBlock extends BlockBase {

  public function build() {
    $config = $this->getConfiguration();
    $name = isset($config['name']) ? $config['name'] : 'world';
    return array(
      '#type' =>'markup',
      '#markup' => $name
    );
  }

  public function blockForm($form, FormStateInterface $form_state) {
    $form = parent::blockForm($form, $form_state);

    $config = $this->getConfiguration();
    $form['name'] = array(
      '#type' => 'textfield',
      '#title' => t('Name'),
      '#description' => $this->t('好きな文を入力してください。'),
      '#default_value' => isset($config['name']) ? $config['name'] : '',
    );

    return $form;
  }

  public function blockSubmit($form, FormStateInterface $form_state) {
    // $this->setConfigurationValue('name', $form_state['values']['name']);
    $this->configuration['name'] = $form_state->getValue('name');
  }

}

カスタムブロック作成編