商品櫥窗 Showcase 插件發佈 v1.0
「島上隨筆」的第一個自製插件——商品櫥窗——正式發佈了。這篇記錄它的功能、安裝步驟與使用方式,文末提供下載。
為什麼做這個插件
主站 1dao.cc 是科學儀器品牌,博客上一直想有個地方能展示「產品」。emlog 原生沒有商品展示功能,於是動手寫了這個插件——從需求到發佈,歷經增刪改查、圖片上傳、導入導出、前端預覽等多次疊代,終於成型。
功能一覽
| 功能 | 說明 |
|---|---|
| 🛍️ 商品管理 | 後台添加 / 編輯 / 刪除 / 排序 |
| 📤 圖片上傳 | 本地上傳圖片,自動填充 URL(也支持手填) |
| 📄 導入導出 | JSON 格式批量備份 / 遷移商品 |
| 📝 文章內展示 | 編輯器輸入 [showcase] 短代碼 |
| 🧩 側邊欄小部件 | 首頁側邊欄展示,懸停顯示大圖預覽 |
| 🎨 主題適配 | CSS 變量驅動,深色/淺色主題通吃 |
安裝步驟
- 下載插件包:
showcase-v1.0.zip - 解壓後得到
showcase/文件夾 - 上傳到博客的
content/plugins/目錄 - 後台 → 插件 → 找到「商品櫥窗」→ 點擊啟用
- 啟用後左側菜單出現「商品櫥窗」入口
使用步驟
1. 添加商品
後台 → 商品櫥窗 → 左側表單:
- 商品名稱(必填)
- 價格(如
¥ 299/面議) - 描述(一句話介紹)
- 圖片(點「📤 上傳」選本地圖,或直接填 URL)
- 購買/詳情鏈接
點「添加商品」完成。
2. 管理商品
商品列表支持 ✏️ 編輯 / ↑↓ 排序 / ✕ 刪除,操作直觀。
3. 文章內展示
在文章編輯器中輸入:
[showcase]發佈後該位置自動渲染商品櫥窗。
4. 側邊欄展示
啟用插件後,側邊欄自動出現「商品櫥窗」小部件。鼠標移到商品條目上,左側顯示 220px 大圖預覽;無圖片的商品顯示名稱首字。
5. 導入 / 導出
- ⬇ 導出:下載全部商品 JSON(備份 / 遷移)
- ⬆ 導入:支持「合併(追加)」或「替換(清空後導入)」
下載
插件包: showcase-v1.0.zip(10.6 KB)
- SHA256:
ade3ea3f1d9847539e0c93884ca9ee93008afda98ec8472468f5c919950f4995 - 文件結構:showcase.php(主文件)+ showcase_setting.php(後台管理)+ showcase_callback.php(回調)+ README.md(文檔)
安裝要求
- emlog pro(PHP 8.x 測試通過)
content/uploadfile/目錄可寫(圖片上傳用)
結語
這款插件從需求到發佈,是「島上隨筆」的一次完整開發實踐。如果你也在用 emlog,歡迎下載試用;遇到問題或想要新功能,歡迎評論區交流。
本文由「島上隨筆」編輯整理,記錄自製插件「商品櫥窗」的發佈。
文章导出
生成预览中...
