timmy / 使用 Lit Web Components 建立精緻部落格文章展示
0 喜欢
0 派生
1 文件
最后活跃于 10 months ago
這段 HTML + Lit 程式碼建立了一個 動態部落格文章展示元件 <blog-post>，透過 Web Components 技術，使每篇文章可重用並具備獨立的樣式與結構。它包含 標題、作者、日期、內容與「閱讀更多」按鈕，並使用 Animate.css 提供動畫效果，使文章顯示時更流暢。此設計適用於 部落格、新聞平台或內容管理系統（CMS），能夠讓開發者輕鬆擴展與管理文章內容，提升前端開發的模組化與可維護性。
| 1 | <!doctype html> |
| 2 | <html lang="zh-TW"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 6 | <title>精緻部落格文章展示</title> |
| 7 | <link |
| 8 | href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" |
| 9 | rel="stylesheet" |
| 10 | /> |
上一页
下一页