# 模組

Drupal 最新版本

# Gmail API

[https://www.drupal.org/project/gmail](https://www.drupal.org/project/gmail)

# Pathauto

[https://www.drupal.org/project/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](https://www.drupal.org/project/custom_twig_formatter)

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

```twig
{{ field_imageurl.value }}
```

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

```twig
{{ 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](https://www.drupal.org/project/easy_breadcrumb)

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

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

我會用的作法就是用 easy\_breadcrumb + pathauto

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

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

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

首頁 &gt; book &gt; 文章標題

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

# amp

[https://www.drupal.org/project/amp](https://www.drupal.org/project/amp)

要在在Drupal啟用amp的作法

### 安裝AMP及版型

```bash
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頁面就成功

<p class="callout info">當完成後先不要太高興，必須經過amp標準審核才算真正能用 [https://search.google.com/test/amp](https://search.google.com/test/amp)</p>

### 優化版型內容

[https://search.google.com/test/amp](https://search.google.com/test/amp)

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

### 啟用自動廣告

目前有雷未拆，我啟用後廣告有出現，但他說我的內容不符合規則  
  
「amp-ad」所需的「amp-ad extension script」標記遺失或不正確。這個問題很快就會導致錯誤發生。  
不允許自訂 JavaScript。

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

<p class="callout info">一但啟用amp你就要心理有底，很多語法不能使用</p>

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

# Backup and Migrate

[https://www.drupal.org/project/backup\_migrate](https://www.drupal.org/project/backup_migrate)

```bash
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/ 底下建立目錄 <span class="s1">youtube\_embed</span>

<span class="s1">接著在目錄底下建立 youtube\_embed.info.yml</span>

```yaml
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/

<span class="s1">在目錄底下建立 </span>YouTubeEmbedFormatter.php

```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顯示

```css
<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>
```