模板基础 #

---
// Frontmatter（脚本区域）
// JavaScript/TypeScript 代码
const title = "Hello Astro";
---

<!-- 模板区域 -->
<!-- HTML 模板 -->
<h1>{title}</h1>

---
// 导入模块
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';

// 定义变量
const siteName = "My Site";
const year = new Date().getFullYear();

// 定义函数
function formatDate(date) {
  return new Date(date).toLocaleDateString('zh-CN');
}

// 获取数据
const posts = await fetch('/api/posts').then(r => r.json());
---

<Layout title={siteName}>
  <!-- 使用定义的变量和函数 -->
  <p>&copy; {year} {siteName}</p>
  <p>日期: {formatDate(new Date())}</p>
</Layout>

---
const name = "张三";
const age = 25;
---

<p>姓名: {name}</p>
<p>年龄: {age}</p>

---
const a = 10;
const b = 20;
const items = ['苹果', '香蕉', '橙子'];
---

<p>计算结果: {a + b}</p>
<p>数组长度: {items.length}</p>
<p>当前时间: {new Date().toLocaleString()}</p>
<p>大写: {'hello'.toUpperCase()}</p>

---
const name = "世界";
const count = 42;
---

<p>{`你好，${name}！`}</p>
<p>{`总数: ${count} 个`}</p>

---
const imageUrl = "/images/photo.jpg";
const linkUrl = "https://example.com";
const inputId = "username";
---

<img src={imageUrl} alt="照片" />
<a href={linkUrl}>访问链接</a>
<input id={inputId} type="text" />

---
const attrName = "data-custom";
const attrValue = "value";
---

<div {attrName}={attrValue}></div>
<!-- 等同于 <div data-custom="value"></div> -->

---
const attrs = {
  class: "btn primary",
  disabled: true,
  "data-action": "submit"
};
---

<button {...attrs}>按钮</button>
<!-- 等同于 <button class="btn primary" disabled data-action="submit">按钮</button> -->

---
const isDisabled = true;
const isRequired = false;
---

<button disabled={isDisabled}>禁用按钮</button>
<input required={isRequired} />
<input disabled />  <!-- 简写形式 -->

---
const isActive = true;
const isPrimary = false;
---

<!-- 使用 class:list 指令 -->
<div class:list={['btn', { active: isActive, primary: isPrimary }]}>
  按钮
</div>
<!-- 输出: <div class="btn active">按钮</div> -->

<!-- 也可以使用普通 class -->
<div class={`btn ${isActive ? 'active' : ''}`}>
  按钮
</div>

---
const name = "张三";
---

<!-- 这是 HTML 注释，会出现在输出中 -->
<p>{name}</p>

{/* 这是 Astro 注释，不会出现在输出中 */}
<p>{name}</p>

---
const showComment = true;
---

{showComment && <!-- 条件显示的注释 -->}

---
const Fragment = Astro.fragment;
---

<Fragment>
  <h1>标题</h1>
  <p>段落</p>
</Fragment>

<!-- 简写形式 -->
<>
  <h1>标题</h1>
  <p>段落</p>
</>

---
const showContent = true;
---

{showContent && (
  <>
    <h2>标题</h2>
    <p>内容</p>
  </>
)}

---
const htmlContent = "<strong>加粗</strong>";
---

<p>{htmlContent}</p>
<!-- 输出: <p>&lt;strong&gt;加粗&lt;/strong&gt;</p> -->

---
const htmlContent = "<strong>加粗</strong>";
---

<p set:html={htmlContent} />
<!-- 输出: <p><strong>加粗</strong></p> -->

---
// ⚠️ 危险：不要直接插入用户输入的 HTML
const userInput = "<script>alert('XSS')</script>";
---

<!-- 不安全 -->
<p set:html={userInput} />

<!-- 安全：先清理 HTML -->
import { sanitize } from 'sanitize-html';
const safeHtml = sanitize(userInput);
<p set:html={safeHtml} />

---
const content = "<em>斜体文字</em>";
---

<div set:html={content} />

---
const content = "<em>斜体文字</em>";
---

<div set:text={content} />
<!-- 输出: <div>&lt;em&gt;斜体文字&lt;/em&gt;</div> -->

---
const code = "<div>Not parsed</div>";
---

<code is:raw>
  {code}
</code>

<style is:inline>
  /* 这个样式会内联到 HTML 中 */
  .inline-style { color: red; }
</style>

<script is:inline>
  // 这个脚本会内联到 HTML 中
  console.log('inline script');
</script>

---
const Tag = 'h1';
---

<Tag>这是标题</Tag>
<!-- 输出: <h1>这是标题</h1> -->

---
const isLarge = true;
const Heading = isLarge ? 'h1' : 'h2';
---

<Heading>标题</Heading>

---
// ✅ 好的做法：将复杂逻辑抽取到函数
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

const items = await getItems();
const total = calculateTotal(items);
---

<p>总价: {total}</p>

---
// ❌ 不好的做法：在模板中写复杂逻辑
const items = await getItems();
---

<p>总价: {items.reduce((sum, item) => sum + item.price, 0)}</p>

---
interface Props {
  title: string;
  items: string[];
}

const { title, items }: Props = Astro.props;
---

<h1>{title}</h1>
<ul>
  {items.map(item => <li>{item}</li>)}
</ul>

---
// ✅ 好的做法：使用组件拆分
import Card from './Card.astro';

const posts = await getPosts();
---

{posts.map(post => <Card post={post} />)}

---
// ❌ 不好的做法：深层嵌套
const posts = await getPosts();
---

{posts.map(post => (
  <article>
    <header>
      <h2>{post.title}</h2>
      <p>{post.date}</p>
    </header>
    <div>
      <p>{post.excerpt}</p>
      <a href={`/blog/${post.slug}`}>阅读更多</a>
    </div>
  </article>
))}

┌─────────────────────────────────────────────────────┐
│                 模板基础要点                         │
├─────────────────────────────────────────────────────┤
│                                                     │
│  📝 Frontmatter   脚本区域，定义变量和逻辑          │
│                                                     │
│  🔤 文本插值      {变量} 插入动态值                 │
│                                                     │
│  📎 属性绑定      动态绑定 HTML 属性                │
│                                                     │
│  📦 Fragment      无额外节点的元素包装              │
│                                                     │
│  🔧 指令          set:html、set:text 等             │
│                                                     │
└─────────────────────────────────────────────────────┘