把文章內的超連結變成按鈕 - Drupal Editor Button Link 模組介紹

Submitted by admin on Fri, 12/27/2019 - 15:21

簡介

這個模組提供一個滑鼠可設定的超連結css渲染功能,

讓我們可以透過滑鼠把原本的超連結變成按鈕的模樣,像是這樣

點我回到首頁  <--  這東西可以點

這個功能依附在原本文章編輯器的Link按鈕底下,點選後會有個下拉選單詢問是否要把超連結變成按鈕。

drupal editor button link demo

除了變成按鈕之外也提供了size與style的渲染細節設定。

 

如何使用

模組網址https://www.drupal.org/project/editor_button_link

 

這個模組必須在頁面有按鈕相關的css library的情況下看起來才會像是個按鈕,否則就是個沒有被渲染過的藍字超連結。

簡單來說呢,只使用Drupal預設安裝是沒辦法出現按鈕效果的,必須先安裝一些支援前端框架的佈景主題。

 

1.安裝前端框架

Editor button link這個模組可以在不同的前端框架下使用,如果沒有特別偏好的話,可以參考這篇文章來安裝Bootstarp主題作為前端的框架,

安裝好後也可以搭配Drupal Switch page theme 模組來在特定頁面呈現按鈕造型。

 

2.安裝並設定模組

設定好CSS Library後,我們就可以開始來安裝模組了。

模組安裝完畢並啟用後,我們要到管理員選單Configurations > Text format and editors裡面進行設定,來讓模組的功能在特定的文章類別中發生效用,這邊建議選擇Full HTML。

在Enabled filters底下將Button link styles的選項打勾,如下圖。

drupal editor button module enable in link editor

打勾後在下方的Filter settings欄位應該會出現button links styles的設定,如下圖

drupal editor button link editor link bootstrap setting

上面的圖片中所使用的是Bootstrap框架底下的設定,這裡要填寫的東西取決於目前頁面所套用的前端框架。

其他框架的CSS渲染設定請參考https://www.drupal.org/docs/8/modules/editor-button-link

儲存後就可以發表新文章試試效果了,text format記得選擇剛剛設定時的選項,這篇文章是用Full HTML作為範例。

 

enjoy~