內容簡介
總結: WWI Blogcard 是一款 Gutenberg 區塊外掛程式，可以從任何 URL 創建視覺吸引人的部落格卡片。只需貼上 URL，外掛程式將自動擷取 OGP (Open Graph Protocol) 資訊，生成豐富的預覽卡片。
1. 這個功能可以從哪些元件中擷取資料來生成卡片？
- OGP meta tag
2. 若要生成部落格卡片，應該如何在 Gutenberg 編輯器中執行？
- 在 Gutenberg 編輯器中新增「Blogcard」區塊
3. 如何啟用暗色模式支援？
- 根據系統偏好設定，自動切換到暗色模式
4. 當需要改自源碼編譯外掛時，應該遵循哪些步驟？
- 克隆儲存庫，然後導航至外掛目錄，安裝相依性，進行外掛程式構建
外掛標籤
開發者團隊
原文外掛簡介
WWI Blogcard is a Gutenberg block plugin that creates visually appealing blog cards from any URL. Simply paste a URL, and the plugin automatically fetches OGP (Open Graph Protocol) information to generate a rich preview card.
Features
Easy to use: Just paste a URL and the blog card is automatically generated
OGP support: Fetches title, description, and images from OGP meta tags
Responsive design: Cards look great on any device
Dark mode support: Automatic dark mode based on system preferences
Caching: OGP data is cached for improved performance
Security: SSRF protection blocks requests to private IP addresses
Usage
Add a new “Blogcard” block in the Gutenberg editor
Paste the URL you want to create a card for
Click “Fetch” to retrieve OGP information
The blog card is automatically generated
Source Code
The source code for this plugin, including uncompiled JavaScript and CSS files, is available on GitHub:
https://github.com/whywaita/wwi-blogcard
Building from Source
To build the plugin from source, you need Node.js and npm installed. Then run the following commands:
Clone the repository: git clone https://github.com/whywaita/wwi-blogcard.git
Navigate to the plugin directory: cd wwi-blogcard
Install dependencies: npm install
Build the plugin: npm run build
The build process uses @wordpress/scripts to compile and minify the JavaScript and CSS files from the src/ directory to the build/ directory.
