ゆるふわ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
```


[テンプレートの命名規則](https://annai.co.jp/article/twig_template_naming_conventions)

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がある場合

```yaml:libraries.yml
page_node_1:
  version: VERSION
  js:
    js/concept.js: {}

```

```php: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](https://www.drupal.org/project/ds)
[Display Suiteの日本語解説](https://old-pine.net/content/drupal%E3%81%AE%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%EF%BC%88display-suite%EF%BC%89%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E5%A4%89%E6%9B%B4%E3%80%81%E5%88%9D%E6%9C%9F%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AE%E9%81%B8%E6%8A%9E%E8%A8%AD%E5%AE%9A%E3%81%8C%E5%8F%AF%E8%83%BD%E3%81%AB%E3%81%99%E3%82%8B)

###Pathauto
ノードやタクソノミーターム、ユーザーのURLを Token を使って自動的に生成
[Pathauto](https://www.drupal.org/project/pathauto)
[Pathautoの日本語解説](https://www.studio-umi.jp/blog/12/188)

###Token
Pathautoに必要だったので。管理画面で利用可能なトークンの一覧を表示したり、追加のトークンを使用可能にできる。
[Token](https://www.drupal.org/project/token)

###Devel
デバッグできるのでローカルで入れました
[Devel](https://www.drupal.org/project/devel)
[Drupal 8で変数情報を表示するkintライブラリをインストールする](https://www.ipride.co.jp/blog/2224)

###Paragraphs
フィールドをグループ化
[Paragraphs](https://www.drupal.org/project/paragraphs)
[Paragraphsの日本語解説](https://mochiya.co/blog/content/5)

###Entity Reference Revisions
Paragraphsに必要だったので。
[Entity Reference Revisions](https://www.drupal.org/project/entity_reference_revisions)

#本番環境にデータを移行する系参考サイト
[Features](https://www.drupal.org/project/features)
[Featuresを使ったコンテンツデータ移行](https://www.gennai3.com/techinfo/cms/acquia/module/features/move_content)
[FEATURESによる開発用サイト→本番サイト運用](https://act-brain.co.jp/howto/features)
[Drupal8のコンテンツタイプをモジュール（CMI）でエクスポート時にフィールドの定義はありません](https://old-pine.net/content/drupal8%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%BF%E3%82%A4%E3%83%97%E3%82%92%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%EF%BC%88cmi%EF%BC%89%E3%81%A7%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%88%E6%99%82%E3%81%AB%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AE%E5%AE%9A%E7%BE%A9%E3%81%AF%E3%81%82%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93)
[Drupal8の新機能 Configretion Manegerを使ってみる](https://qiita.com/kazunoko/items/c6e1875cfff05ae46205)




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


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

```

[Drupal 8 入門 : カスタムモジュール作成編](https://www.studio-umi.jp/blog/14/182)

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


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

```php: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](https://www.drupal.org/docs/8/api/block-api/block-api-overview)

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

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

```

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

```php: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');
  }

}
```

[カスタムブロック作成編](https://www.studio-umi.jp/blog/14/196)