28 lines
1.1 KiB
JavaScript
28 lines
1.1 KiB
JavaScript
import { div, main, section, aside, h3, p, ul, li } from '@laniakeasupercluster/widgets'
|
|
|
|
const blogData = [
|
|
{ id: '1', title: 'Blog 1', content: 'Content 1', date: new Date() },
|
|
{ id: '2', title: 'Blog 2', content: 'Content 2', date: new Date() },
|
|
{ id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
|
|
]
|
|
const tagData = ['JavaScript', 'CSS', 'HTML', 'Web']
|
|
const articleData = ['Article 1', 'Article 2', 'Article 3']
|
|
|
|
document.body.appendChild(div.grid({ gridTemplateColumns: '3fr 1fr', gap: '1rem' }).p('1rem').childs([
|
|
main.grid({ gap: '1rem' }).childs(blogData.map(blog => section.childs([
|
|
h3.text(blog.title),
|
|
p.text(blog.content),
|
|
p.text(blog.date),
|
|
]))),
|
|
aside.grid({ gridColumn: '2', flexDirection: 'column', gap: '1rem' }).childs([
|
|
div.childs([
|
|
h3.text('# TAG'),
|
|
ul.bg('#ececec').radius('1rem').childs(tagData.map(tag => li.text(tag))),
|
|
]),
|
|
div.childs([
|
|
h3.text('# 归档'),
|
|
ul.childs(articleData.map(article => li.text(article))),
|
|
]),
|
|
]),
|
|
]))
|