Woodman's Second Brain | 第二大脑

1.02 使用UnoCSS添加模板功能，可让用户选择至少五类（晴空、夜色、红日、细雨、冬雪）模板，并且可以对模板进行简单的修改、保存操作。

6分钟阅读

好的, 我们可以使用 UnoCSS 来添加模板功能, 并允许用户选择和修改模板。以下是实现这个功能的步骤:

  1. 首先, 安装必要的依赖:
bun add unocss @unocss/preset-uno @unocss/preset-attributify
  1. 创建一个 UnoCSS 配置文件 uno.config.ts:
// uno.config.ts
import { defineConfig } from 'unocss'
import presetUno from '@unocss/preset-uno'
import presetAttributify from '@unocss/preset-attributify'
 
export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
  ],
  theme: {
    colors: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
})
  1. 修改 src/index.ts 文件, 添加模板选择和修改功能:
import { Elysia } from 'elysia'
import { html } from '@elysiajs/html'
import { createClient } from '@libsql/client'
import { staticPlugin } from '@elysiajs/static'
import 'unocss'
 
const db = createClient({
  url: process.env.TURSO_DATABASE_URL!,
  authToken: process.env.TURSO_AUTH_TOKEN
})
 
const templates = {
  sunny: {
    bgColor: 'bg-sky-300',
    textColor: 'text-yellow-800',
    accentColor: 'bg-yellow-500',
  },
  night: {
    bgColor: 'bg-gray-900',
    textColor: 'text-gray-100',
    accentColor: 'bg-indigo-600',
  },
  sunset: {
    bgColor: 'bg-orange-200',
    textColor: 'text-red-800',
    accentColor: 'bg-red-500',
  },
  rainy: {
    bgColor: 'bg-blue-200',
    textColor: 'text-blue-800',
    accentColor: 'bg-blue-500',
  },
  snowy: {
    bgColor: 'bg-gray-100',
    textColor: 'text-gray-800',
    accentColor: 'bg-blue-300',
  },
}
 
const app = new Elysia()
  .use(html())
  .use(staticPlugin())
  .get('/', ({ html }) => html`
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Job Board</title>
        <script src="https://unpkg.com/htmx.org@1.9.2"></script>
        <script src="https://unpkg.com/unocss@0.51.8/dist/unocss.js"></script>
      </head>
      <body class="p-4" id="main-body">
        <h1 class="text-2xl font-bold mb-4">Job Board</h1>
        <div class="mb-4">
          <label for="template-select">Choose a template:</label>
          <select id="template-select" hx-get="/apply-template" hx-target="#main-body" hx-swap="outerHTML">
            <option value="sunny">Sunny Sky</option>
            <option value="night">Night Sky</option>
            <option value="sunset">Red Sunset</option>
            <option value="rainy">Gentle Rain</option>
            <option value="snowy">Winter Snow</option>
          </select>
        </div>
        <div id="job-list" hx-get="/jobs" hx-trigger="load"></div>
        <form hx-post="/jobs" hx-target="#job-list" class="mt-4">
          <input type="text" name="title" placeholder="Job Title" required class="border p-2 mb-2 w-full">
          <input type="text" name="company" placeholder="Company" required class="border p-2 mb-2 w-full">
          <textarea name="description" placeholder="Job Description" required class="border p-2 mb-2 w-full h-32"></textarea>
          <button type="submit" class="bg-blue-500 text-white p-2 rounded">Post Job</button>
        </form>
      </body>
    </html>
  `)
  .get ('/jobs', async () => {
    Const jobs = await db.Execute ('SELECT * FROM jobs ORDER BY created_at DESC')
    return jobs.rows.map(job => `
      <div class="job bg-white shadow-md rounded p-4 mb-4">
        <h2 class="text-xl font-bold">${job.title}</h2>
        <h3 class="text-lg">${job.company}</h3>
        <p class="mt-2">${job.description}</p>
      </div>
    `).join('')
  })
  .post('/jobs', async ({ body }) => {
    const { title, company, description } = body
    await db.execute({
      sql: 'INSERT INTO jobs (title, company, description) VALUES (?, ?, ?)',
      args: [title, company, description]
    })
    const jobs = await db.execute('SELECT * FROM jobs ORDER BY created_at DESC')
    return jobs.rows.map(job => `
      <div class="job bg-white shadow-md rounded p-4 mb-4">
        <h2 class="text-xl font-bold">${job.title}</h2>
        <h3 class="text-lg">${job.company}</h3>
        <p class="mt-2">${job.description}</p>
      </div>
    `).join('')
  })
  .get('/apply-template', ({ query }) => {
    const templateName = query.value as keyof typeof templates
    const template = templates[templateName]
    return `
      <body class="p-4 ${template.bgColor} ${template.textColor}" id="main-body">
        <h1 class="text-2xl font-bold mb-4">Job Board</h1>
        <div class="mb-4">
          <label for="template-select">Choose a template:</label>
          <select id="template-select" hx-get="/apply-template" hx-target="#main-body" hx-swap="outerHTML">
            <option value="sunny" ${templateName === 'sunny' ? 'selected' : ''}>Sunny Sky</option>
            <option value="night" ${templateName === 'night' ? 'selected' : ''}>Night Sky</option>
            <option value="sunset" ${templateName === 'sunset' ? 'selected' : ''}>Red Sunset</option>
            <option value="rainy" ${templateName === 'rainy' ? 'selected' : ''}>Gentle Rain</option>
            <option value="snowy" ${templateName === 'snowy' ? 'selected' : ''}>Winter Snow</option>
          </select>
        </div>
        <div id="job-list" hx-get="/jobs" hx-trigger="load"></div>
        <form hx-post="/jobs" hx-target="#job-list" class="mt-4">
          <input type="text" name="title" placeholder="Job Title" required class="border p-2 mb-2 w-full ${template.textColor}">
          <input type="text" name="company" placeholder="Company" required class="border p-2 mb-2 w-full ${template.textColor}">
          <textarea name="description" placeholder="Job Description" required class="border p-2 mb-2 w-full h-32 ${template.textColor}"></textarea>
          <button type="submit" class="${template.accentColor} text-white p-2 rounded">Post Job</button>
        </form>
      </body>
    `
  })
  .listen(3000)
 
console.log(`Elysia is running at ${app.server?.hostname}:${app.server?.port}`)
  1. 创建一个简单的模板编辑功能:

在 src/index.ts 文件中添加以下路由:

.get('/edit-template', ({ html }) => html`
  <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="modal">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
      <h3 class="text-lg font-bold mb-4">Edit Template</h3>
      <form hx-post="/save-template" hx-target="#main-body" hx-swap="outerHTML">
        <div class="mb-4">
          <label for="bgColor" class="block mb-2">Background Color:</label>
          <input type="text" id="bgColor" name="bgColor" class="border p-2 w-full" value="bg-sky-300">
        </div>
        <div class="mb-4">
          <label for="textColor" class="block mb-2">Text Color:</label>
          <input type="text" id="textColor" name="textColor" class="border p-2 w-full" value="text-yellow-800">
        </div>
        <div class="mb-4">
          <label for="accentColor" class="block mb-2">Accent Color:</label>
          <input type="text" id="accentColor" name="accentColor" class="border p-2 w-full" value="bg-yellow-500">
        </div>
        <button type="submit" class="bg-blue-500 text-white p-2 rounded">Save Template</button>
      </form>
    </div>
  </div>
`)
.post ('/save-template', ({ body }) => {
  Const { bgColor, textColor, accentColor } = body
  // 在实际应用中,你可能想要将这些更改保存到数据库中
  return `
    <body class="p-4 ${bgColor} ${textColor}" id="main-body">
      <h1 class="text-2xl font-bold mb-4">Job Board</h1>
      <div class="mb-4">
        <label for="template-select">Choose a template:</label>
        <select id="template-select" hx-get="/apply-template" hx-target="#main-body" hx-swap="outerHTML">
          <option value="sunny">Sunny Sky</option>
          <option value="night">Night Sky</option>
          <option value="sunset">Red Sunset</option>
          <option value="rainy">Gentle Rain</option>
          <option value="snowy">Winter Snow</option>
          <option value="custom" selected>Custom</option>
        </select>
        <button hx-get="/edit-template" class="ml-2 ${accentColor} text-white p-2 rounded">Edit Template</button>
      </div>
      <div id="job-list" hx-get="/jobs" hx-trigger="load"></div>
      <form hx-post="/jobs" hx-target="#job-list" class="mt-4">
        <input type="text" name="title" placeholder="Job Title" required class="border p-2 mb-2 w-full ${textColor}">
        <input type="text" name="company" placeholder="Company" required class="border p-2 mb-2 w-full ${textColor}">
        <textarea name="description" placeholder="Job Description" required class="border p-2 mb-2 w-full h-32 ${textColor}"></textarea>
        <button type="submit" class="${accentColor} text-white p-2 rounded">Post Job</button>
      </form>
    </body>
  `
})
  1. 更新主页面以包含编辑模板按钮:

在主页面的模板选择下拉菜单旁边添加一个”Edit Template”按钮:

<div class="mb-4">
  <label for="template-select">Choose a template:</label>
  <select id="template-select" hx-get="/apply-template" hx-target="#main-body" hx-swap="outerHTML">
    <option value="sunny">Sunny Sky</option>
    <option value="night">Night Sky</option>
    <option value="sunset">Red Sunset</option>
    <option value="rainy">Gentle Rain</option>
    <option value="snowy">Winter Snow</option>
  </select>
  <button hx-get="/edit-template" class="ml-2 bg-blue-500 text-white p-2 rounded">Edit Template</button>
</div>

这些更改将允许用户:

  1. 从预定义的五个模板中选择一个
  2. 编辑当前模板的颜色
  3. 保存自定义模板设置

请注意, 这个实现是基本的, 没有持久化存储自定义模板。在实际应用中, 你可能想要将自定义模板保存到数据库中, 并为每个用户提供他们自己的自定义模板。

此外, 你可能还想添加更多的自定义选项, 如字体、布局等, 以及更复杂的颜色选择器来改进用户体验。

关系图谱

反向链接