模組
Drupal 最新版本
- Gmail API
- Pathauto
- Field Validation
- Feeds
- ShURLy
- Custom Twig Formatter
- Easy Breadcrumb
- amp
- Backup and Migrate
- YouTube Embed Formatter
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>