timmy hat die Gist bearbeitet 10 months ago. Zu Änderung gehen
Keine Änderungen
timmy hat die Gist bearbeitet 10 months ago. Zu Änderung gehen
Keine Änderungen
timmy hat die Gist bearbeitet 1 year ago. Zu Änderung gehen
1 file changed, 178 insertions
blog_post_display.html(Datei erstellt)
| @@ -0,0 +1,178 @@ | |||
| 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 | + | /> | |
| 11 | + | <script type="module"> | |
| 12 | + | import { | |
| 13 | + | LitElement, | |
| 14 | + | html, | |
| 15 | + | css, | |
| 16 | + | } from "https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"; | |
| 17 | + | ||
| 18 | + | class BlogPost extends LitElement { | |
| 19 | + | static properties = { | |
| 20 | + | title: { type: String }, | |
| 21 | + | author: { type: String }, | |
| 22 | + | date: { type: String }, | |
| 23 | + | content: { type: String }, | |
| 24 | + | }; | |
| 25 | + | ||
| 26 | + | static styles = css` | |
| 27 | + | .blog-post { | |
| 28 | + | background: white; | |
| 29 | + | border-radius: 12px; | |
| 30 | + | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| 31 | + | padding: 2rem; | |
| 32 | + | margin-bottom: 2rem; | |
| 33 | + | transition: | |
| 34 | + | transform 0.2s ease, | |
| 35 | + | box-shadow 0.2s ease; | |
| 36 | + | } | |
| 37 | + | ||
| 38 | + | .blog-post:hover { | |
| 39 | + | transform: translateY(-3px); | |
| 40 | + | box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); | |
| 41 | + | } | |
| 42 | + | ||
| 43 | + | .title { | |
| 44 | + | color: #2d3748; | |
| 45 | + | font-size: 1.8rem; | |
| 46 | + | font-weight: 700; | |
| 47 | + | margin: 0 0 1rem 0; | |
| 48 | + | line-height: 1.4; | |
| 49 | + | } | |
| 50 | + | ||
| 51 | + | .metadata { | |
| 52 | + | display: flex; | |
| 53 | + | align-items: center; | |
| 54 | + | gap: 1rem; | |
| 55 | + | margin-bottom: 1.5rem; | |
| 56 | + | font-size: 0.95rem; | |
| 57 | + | } | |
| 58 | + | ||
| 59 | + | .author { | |
| 60 | + | color: #4a5568; | |
| 61 | + | font-weight: 600; | |
| 62 | + | margin: 0; | |
| 63 | + | } | |
| 64 | + | ||
| 65 | + | .date { | |
| 66 | + | color: #718096; | |
| 67 | + | margin: 0; | |
| 68 | + | } | |
| 69 | + | ||
| 70 | + | .content { | |
| 71 | + | color: #4a5568; | |
| 72 | + | line-height: 1.8; | |
| 73 | + | margin-bottom: 1.5rem; | |
| 74 | + | } | |
| 75 | + | ||
| 76 | + | .read-more { | |
| 77 | + | display: inline-block; | |
| 78 | + | padding: 0.5rem 1rem; | |
| 79 | + | background: #4299e1; | |
| 80 | + | color: white; | |
| 81 | + | text-decoration: none; | |
| 82 | + | border-radius: 6px; | |
| 83 | + | font-weight: 500; | |
| 84 | + | transition: background 0.2s ease; | |
| 85 | + | } | |
| 86 | + | ||
| 87 | + | .read-more:hover { | |
| 88 | + | background: #3182ce; | |
| 89 | + | } | |
| 90 | + | ||
| 91 | + | .divider { | |
| 92 | + | color: #cbd5e0; | |
| 93 | + | } | |
| 94 | + | `; | |
| 95 | + | ||
| 96 | + | render() { | |
| 97 | + | return html` | |
| 98 | + | <article class="blog-post animate__animated animate__fadeIn"> | |
| 99 | + | <h2 class="title">${this.title}</h2> | |
| 100 | + | <div class="metadata"> | |
| 101 | + | <p class="author">${this.author}</p> | |
| 102 | + | <span class="divider">•</span> | |
| 103 | + | <time class="date">${this.date}</time> | |
| 104 | + | </div> | |
| 105 | + | <div class="content">${this.content}</div> | |
| 106 | + | <a class="read-more" href="#">閱讀更多</a> | |
| 107 | + | </article> | |
| 108 | + | `; | |
| 109 | + | } | |
| 110 | + | } | |
| 111 | + | ||
| 112 | + | customElements.define("blog-post", BlogPost); | |
| 113 | + | </script> | |
| 114 | + | <style> | |
| 115 | + | * { | |
| 116 | + | margin: 0; | |
| 117 | + | padding: 0; | |
| 118 | + | box-sizing: border-box; | |
| 119 | + | } | |
| 120 | + | ||
| 121 | + | body { | |
| 122 | + | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, | |
| 123 | + | "Helvetica Neue", Arial, sans-serif; | |
| 124 | + | background: #f7fafc; | |
| 125 | + | color: #2d3748; | |
| 126 | + | line-height: 1.6; | |
| 127 | + | padding: 2rem; | |
| 128 | + | } | |
| 129 | + | ||
| 130 | + | .container { | |
| 131 | + | max-width: 800px; | |
| 132 | + | margin: 0 auto; | |
| 133 | + | } | |
| 134 | + | ||
| 135 | + | h1 { | |
| 136 | + | font-size: 2.5rem; | |
| 137 | + | font-weight: 800; | |
| 138 | + | color: #1a202c; | |
| 139 | + | margin-bottom: 2rem; | |
| 140 | + | text-align: center; | |
| 141 | + | } | |
| 142 | + | ||
| 143 | + | @media (max-width: 768px) { | |
| 144 | + | body { | |
| 145 | + | padding: 1rem; | |
| 146 | + | } | |
| 147 | + | ||
| 148 | + | h1 { | |
| 149 | + | font-size: 2rem; | |
| 150 | + | } | |
| 151 | + | } | |
| 152 | + | </style> | |
| 153 | + | </head> | |
| 154 | + | <body> | |
| 155 | + | <div class="container"> | |
| 156 | + | <h1>精選文章</h1> | |
| 157 | + | <div id="blog-posts-container"></div> | |
| 158 | + | </div> | |
| 159 | + | ||
| 160 | + | <div id="blog-posts-container"> | |
| 161 | + | <!-- 第一篇文章 --> | |
| 162 | + | <blog-post | |
| 163 | + | title="使用 Web Components 開發現代網頁應用程式" | |
| 164 | + | author="張小明" | |
| 165 | + | date="2023-05-15" | |
| 166 | + | content="Web Components 是一套強大的前端開發技術..." | |
| 167 | + | ></blog-post> | |
| 168 | + | ||
| 169 | + | <!-- 第二篇文章 --> | |
| 170 | + | <blog-post | |
| 171 | + | title="深入理解 Shadow DOM" | |
| 172 | + | author="李大方" | |
| 173 | + | date="2023-05-20" | |
| 174 | + | content="Shadow DOM 提供了一種封裝元件樣式和結構的方法..." | |
| 175 | + | ></blog-post> | |
| 176 | + | ||
| 177 | + | </body> | |
| 178 | + | </html> | |
Neuer
Älter