资源与样式

sitelo 构建在 Vite 之上，因此前端 JavaScript 和 CSS 会被自动编译。把脚本和样式放在 src/ 下（例如 src/js 和 src/css），在 HTML 中用根相对 URL 引用它们，剩下的交给 sitelo：TypeScript、CSS 导入、打包与压缩。

项目结构

页面和资源共用 src/。像 js/ 和 css/ 这样的目录只是约定，不是要求 —— sitelo 在意的是你的 HTML 引用了什么，而不是目录叫什么。

my-site/
  src/
    index.ht.js          # 页面 — 返回 HTML
    css/
      styles.css         # 从 HTML 引用 → 打包
    js/
      main.js            # 从 HTML 引用 → 打包
      counter.ts         # 被 main.js 导入 → 一并打包
    lib/
      posts.js           # 仅在 data() 中使用 → 永不发布
  public/
    favicon.ico          # 原样复制

在 HTML 中引用资源

用根相对路径引用文件。正是 <script type="module"> 或 <link rel="stylesheet"> 告诉 sitelo 把该文件纳入构建：

export default () => `
  <html lang="zh">
    <head>
      <title>我的网站</title>
      <link rel="stylesheet" href="/css/styles.css">
      <script type="module" src="/js/main.js"></script>
    </head>
    <body>
      <h1>你好</h1>
      <button id="count">0</button>
    </body>
  </html>
`

import { html, head, title, link, script, body, h1, button } from 'javascript-to-html'

export default () =>
  html({ lang: 'zh' },
    head(
      title('我的网站'),
      link({ rel: 'stylesheet', href: '/css/styles.css' }),
      script({ type: 'module', src: '/js/main.js' }),
    ),
    body(
      h1('你好'),
      button({ id: 'count' }, '0'),
    ),
  )

export default function Home() {
  return (
    <html lang="zh">
      <head>
        <title>我的网站</title>
        <link rel="stylesheet" href="/css/styles.css" />
        <script type="module" src="/js/main.js" />
      </head>
      <body>
        <h1>你好</h1>
        <button id="count">0</button>
      </body>
    </html>
  )
}

import { createCounter } from './counter.ts'

const button = document.querySelector('#count')
const next = createCounter()

button.addEventListener('click', () => {
  button.textContent = String(next())
})

@import './tokens.css';

body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 2rem;
}

Vite 会编译什么

.js / .ts / .jsx / .tsx —— 打包为 ES 模块，剥离 TypeScript，内联 import
.css —— 处理并压缩；@import 和相对的 url() 引用都会被解析
从被引用入口导入的一切（比如上面的 counter.ts）都会进入同一个包
在 sitelo（dev）中，同样的 URL 会走 Vite 的转换流水线 —— 想试 TypeScript 或 CSS 不必先跑一次构建

需要 PostCSS、Sass 或其他 Vite 插件？把它们加到 sitelo.config.js 的 vite 之下。

默认零 JS

没有被引用的代码不会被产出。只在 data() 或 generateStaticParams 中引入的辅助模块不会进入 dist/ —— 服务端密钥永远不会被误发布。
页面上没有 <script>，构建产物里就没有客户端 JavaScript。对大多数站点来说，静态 HTML 和 CSS 已经够用。
public/ 会被原样复制（favicon、robots.txt，以及你不希望加哈希的静态图片）。
其他被引用的文件（图片、字体、视频，…）会被复制到 dist/。

缺失资源校验

如果 <script src> 或样式表的 href 指向一个在 src/ 和 public/ 中都不存在的文件，构建就会失败。更想只收到一条警告？

export default {
  missingAssets: 'warn',
}