模組

Drupal 最新版本

Gmail API

https://www.drupal.org/project/gmail

Pathauto

https://www.drupal.org/project/pathauto

Field Validation

https://www.drupal.org/project/field_validation

Feeds

https://www.drupal.org/project/feeds

ShURLy

https://www.drupal.org/project/shurly

Custom Twig Formatter

https://www.drupal.org/project/custom_twig_formatter

用法如果有一個欄位值為 field_imageurl ，那麼可用這個方式呼叫

{{ field_imageurl.value }}

進階的語法，過濾掉 https://

{{ field_imageurl.value|replace({'https://': ''}) }}

呼出成html圖片語法

<img src="{{ field_imageurl.value }}" alt="{{ title.value }}" width="100%" />

這個模組就是用來替換 Custom Formatters 用的

Easy Breadcrumb

https://www.drupal.org/project/easy_breadcrumb

幫頁生成目錄式的結構連結(麵包屑)

在安排文章及頁面時，有一個技巧避免使用者在你的網站迷路

我會用的作法就是用 easy_breadcrumb + pathauto

例如你有一個文章類型是要專門記錄書，那你就先生成一個頁面 /book ，然後設定 pathauto 把每篇文章的自動生成路徑為 /book/[title]

/book 頁面要搭配用 views block 呈現內容

在這種規劃後，當你進入一般的文章後，最上面會有樹狀目錄

首頁 > book > 文章標題

使用者在逛站的時候，就不會迷路囉

amp

https://www.drupal.org/project/amp

要在在Drupal啟用amp的作法

安裝AMP及版型

composer require drupal/amp
composer require drupal/amptheme
composer require drupal/stable

啟用版型

到頁面 admin/appearance 啟用
ExAMPle Subtheme

設定AMP

到頁面 admin/config/services/amp

選擇剛啟用的 ExAMPle Subtheme 做預設版型

把內容類型加入AMP，點啟用會引導你去內容類型的設定頁，把AMP加入儲存

好了後用瀏覽器開頁面，接著在網址最後面加上 "?amp" 如果有 amp頁面就成功

當完成後先不要太高興，必須經過amp標準審核才算真正能用 https://search.google.com/test/amp

優化版型內容

https://search.google.com/test/amp

把連結貼到amp審查頁面，然後把沒用的及不符合的block移除，讓版面越乾淨越好

啟用自動廣告

目前有雷未拆，我啟用後廣告有出現，但他說我的內容不符合規則

「amp-ad」所需的「amp-ad extension script」標記遺失或不正確。這個問題很快就會導致錯誤發生。
不允許自訂 JavaScript。

因為這兩條被判定頁面不符合amp

一但啟用amp你就要心理有底，很多語法不能使用

特別注意，模組AMP和模組Feeds Extensible Parsers相沖，因為QueryPath JSON parser的關係，一旦共動啟用會讓整個站掛掉！

Backup and Migrate

https://www.drupal.org/project/backup_migrate

mkdir private;chown -R www-data:www-data private/;composer require 'drupal/backup_migrate:^5.0';drush en backup_migrate;echo "\$settings['file_private_path'] = '../private';" | tee -a web/sites/default/settings.php

安裝後執行上面的字串，然後再檢查是否能順利備份及還原

YouTube Embed Formatter

主要的功能是要把文字欄位 ( youtube_id ) 轉換成播放器

/web/modules/contrib/ 底下建立目錄 youtube_embed

接著在目錄底下建立 youtube_embed.info.yml

name: 'YouTube Embed Formatter'
type: module
description: 'Formats a field containing a YouTube ID as an embedded video.'
core_version_requirement: ^10|^11
package: Custom
dependencies:
  - field

mkdir -p src/Plugin/Field/FieldFormatter/

cd src/Plugin/Field/FieldFormatter/

在目錄底下建立 YouTubeEmbedFormatter.php

<?php

namespace Drupal\youtube_embed\Plugin\Field\FieldFormatter;

use Drupal\Core\Field\FormatterBase;
use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Plugin\ContainerFactoryPluginInterface;

/**
 * Plugin implementation of the 'youtube_embed' formatter.
 *
 * @FieldFormatter(
 *   id = "youtube_embed_formatter",
 *   label = @Translation("YouTube Embed with RWD and Autoplay"),
 *   field_types = {
 *     "string",
 *     "string_long"
 *   }
 * )
 */
class YouTubeEmbedFormatter extends FormatterBase {

  /**
   * {@inheritdoc}
   */
  public function viewElements(FieldItemListInterface $items, $langcode) {
    $elements = [];

    foreach ($items as $delta => $item) {
      // 取得 YouTube ID
      $youtube_id = trim($item->value);

      // 建立包含 RWD 功能和靜音自動播放的 iframe 標籤
      $elements[$delta] = [
        '#type' => 'markup',
        '#markup' => '<div class="youtube-video-wrapper"><iframe src="https://www.youtube.com/embed/' . htmlspecialchars($youtube_id, ENT_QUOTES, 'UTF-8') . '?autoplay=1&mute=0" frameborder="0" allowfullscreen></iframe></div>',
        '#allowed_tags' => ['iframe', 'div'],
      ];
    }

    return $elements;
  }
}

然後要搭配CSS達成RWD顯示

<style>
  /* 讓 YouTube 影片支援響應式 */
  .youtube-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 比例 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin-bottom: 20px; /* 可選 */
  }

  .youtube-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>