使用 Lit Web Components 建立精緻部落格文章展示

blog_post_display.html · 4.2 KiB · HTML Ham

<!doctype html> <html lang="zh-TW"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>精緻部落格文章展示</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet" /> <script type="module"> import { LitElement, html, css, } from "https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"; class BlogPost extends LitElement { static properties = { title: { type: String }, author: { type: String }, date: { type: String }, content: { type: String }, }; static styles = css` .blog-post { background: white; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 2rem; margin-bottom: 2rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } .blog-post:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } .title { color: #2d3748; font-size: 1.8rem; font-weight: 700; margin: 0 0 1rem 0; line-height: 1.4; } .metadata { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; font-size: 0.95rem; } .author { color: #4a5568; font-weight: 600; margin: 0; } .date { color: #718096; margin: 0; } .content { color: #4a5568; line-height: 1.8; margin-bottom: 1.5rem; } .read-more { display: inline-block; padding: 0.5rem 1rem; background: #4299e1; color: white; text-decoration: none; border-radius: 6px; font-weight: 500; transition: background 0.2s ease; } .read-more:hover { background: #3182ce; } .divider { color: #cbd5e0; } `; render() { return html` <article class="blog-post animate__animated animate__fadeIn"> <h2 class="title">${this.title}</h2> <div class="metadata"> <p class="author">${this.author}</p> <span class="divider">•</span> <time class="date">${this.date}</time> </div> <div class="content">${this.content}</div> <a class="read-more" href="#">閱讀更多</a> </article> `; } } customElements.define("blog-post", BlogPost); </script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #f7fafc; color: #2d3748; line-height: 1.6; padding: 2rem; } .container { max-width: 800px; margin: 0 auto; } h1 { font-size: 2.5rem; font-weight: 800; color: #1a202c; margin-bottom: 2rem; text-align: center; } @media (max-width: 768px) { body { padding: 1rem; } h1 { font-size: 2rem; } } </style> </head> <body> <div class="container"> <h1>精選文章</h1> <div id="blog-posts-container"></div> </div> <div id="blog-posts-container">  <blog-post title="使用 Web Components 開發現代網頁應用程式" author="張小明" date="2023-05-15" content="Web Components 是一套強大的前端開發技術..." ></blog-post>  <blog-post title="深入理解 Shadow DOM" author="李大方" date="2023-05-20" content="Shadow DOM 提供了一種封裝元件樣式和結構的方法..." ></blog-post> </body> </html>

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>
179