Astro-可添加内容

---
title: '有史以来最好的文章'author: 'Ben'
---
这是我的 _很棒_ 的文章！

---
import * as greatPost from './posts/great-post.md';
const posts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
---

<p>{greatPost.frontmatter.title}</p>
<p>Written by: {greatPost.frontmatter.author}</p>

<p>Post Archive:</p>
<ul>
  {posts.map(post => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
</ul>

Astro.props = {

  file: "/home/user/projects/.../file.md",

  url: "/en/guides/markdown-content/",

  frontmatter: {

    /** 从博客文章中获取的 Frontmatter */

    title: "Astro 0.18 Release",

    date: "Tuesday, July 27 2021",

    author: "Matthew Phillips",

    description: "Astro 0.18 is our biggest release since Astro launch.",

  },

  getHeadings: () => [

    {"depth": 1, "text": "Astro 0.18 Release", "slug": "astro-018-release"},

    {"depth": 2, "text": "Responsive partial hydration", "slug": "responsive-partial-hydration"}

    /* ... */

  ],

  rawContent: () => "# Astro 0.18 Release\nA little over a month ago, the first public beta [...]",

  compiledContent: () => "<h1>Astro 0.18 Release</h1>\n<p>A little over a month ago, the first public beta [...]</p>",

}

---
// Import statement
import {Content as PromoBanner} from '../components/promoBanner.md';

// 集合查询
import { getEntry, render } from 'astro:content';

const product = await getEntry('products', 'shirt');
const { Content } = await render(product);
---
<h2>Today's promo</h2>
<PromoBanner />

<p>Sale Ends: {product.data.saleEndDate.toDateString()}</p>
<Content />

---
title: 我的文章目录
---
## 简介

当我使用 Markdown 时，我可以在同一个页面内链接到 [我的结论](#结论) 部分。

## 结论

我可以通过在浏览器访问 `https://example.com/page-1/#简介` 以直接导航到简介部分。

import { defineConfig } from 'astro/config';
--import { rehypeHeadingIds } from '@astrojs/markdown-remark';
++import { otherPluginThatReliesOnHeadingIDs } from 'some/plugin/source';

export default defineConfig({
  markdown: {
    rehypePlugins: [
++    rehypeHeadingIds,
      otherPluginThatReliesOnHeadingIDs,
    ],
  },
});

import { defineConfig } from 'astro/config';
import remarkToc from 'remark-toc';
import { rehypeAccessibleEmojis } from 'rehype-accessible-emojis';

export default defineConfig({
  markdown: {
    remarkPlugins: [ [remarkToc, { heading: 'toc', maxDepth: 3 } ] ],
    rehypePlugins: [rehypeAccessibleEmojis],
  },
});

import remarkToc from 'remark-toc';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';

export default {
  markdown: {
    remarkPlugins: [ [remarkToc, { heading: "contents"} ] ],
    rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'append' }]],
  },
}

npm install remark-slug rehype-autolink-headings

// @ts-check
import { defineConfig } from 'astro/config';

import remarkSlug from 'remark-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import remarkToc from 'remark-toc';
export default defineConfig({
  markdown: {
    remarkPlugins: [
      //生成ID
      remarkSlug,
      //生成目录
      [remarkToc, { heading: '目录', maxDepth: 2 }],
    ],
    //每个标题后面加上符号处理
    rehypePlugins: [[rehypeAutolinkHeadings, { behavior: 'append' }]],
      //或者设置第二个参数 {behavior: 'append',content: { type: 'text', value: '#' },这样就会生成文本#在每个标题后面
    },
  },
});

<style is:global>
/* 默认隐藏伪元素（图标），并准备好过渡效果 */
.icon-link::before {
  content: "🔗";               /* 想要的符号（也可以换成 "#" 或空心链条等） */
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;       /* 关键：避免伪元素本身捕获 hover，导致抖动或自我触发 */
}

/* 当悬停整个标题（h1-h6）时显示图标 */
/* 也包含 focus（键盘可访问时）和 :focus-within 的情况 */
:where(h1,h2,h3,h4,h5,h6):hover > a[aria-hidden="true"] .icon-link::before {
  opacity: 1;
  transform: translateY(0);
}

/* 额外：保持锚点颜色/布局稳定（按你站点风格调整） */
a[aria-hidden="true"] {
  text-decoration: none;
  color: inherit;
}
<style/>

export function exampleRemarkPlugin() {

  // 所有 remark 和 rehype 插件都返回一个单独的函数

  return function (tree, file) {
    file.data.astro.frontmatter.customProperty = 'Generated property';
  }

}

import { defineConfig } from 'astro/config';
++import { exampleRemarkPlugin } from './example-remark-plugin.mjs';

export default defineConfig({
  markdown: {
    remarkPlugins: [exampleRemarkPlugin]
  },
});

import { defineConfig } from 'astro/config';
++import { exampleRemarkPlugin } from './example-remark-plugin.mjs';

export default defineConfig({
  integrations: [
    mdx({
++    remarkPlugins: [exampleRemarkPlugin],
    }),
  ],
});

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';

export default defineConfig({
  markdown: {
    syntaxHighlight: 'prism',
    remarkPlugins: [remarkPlugin1],
    gfm: true,
  },
  integrations: [
    mdx({
      // `syntaxHighlight` inherited from Markdown

      // Markdown `remarkPlugins` ignored,
      // only `remarkPlugin2` applied.
      remarkPlugins: [remarkPlugin2],
      // `gfm` overridden to `false`
      gfm: false,
    })
  ]
});

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkPlugin],
  },
  integrations: [
    mdx({
      // Markdown config now ignored
      extendMarkdownConfig: false,
      // No `remarkPlugins` applied
    })
  ]
});

---
title: Hello, World
---

# Hi there!

This Markdown file creates a page at `your-domain.com/page-1/`

It probably isn't styled much, but Markdown does support:
- **bold** and _italics._
- lists
- [links](https://astro.build)
- <p>HTML elements</p>
- and more!

---

++layout: ../../layouts/BlogPostLayout.astro

title: Astro 简介

author: Himanshu

description: 发现 Astro 的魅力之所在！

---

这是一篇使用 Markdown 编写的文章。

---
const {frontmatter} = Astro.props;
---
<html>
  <head>
    <!-- ... -->
    <meta charset="utf-8"> // no longer added by default
  </head>
  <!-- ... -->
  <h1>{frontmatter.title}</h1>
  <h2>Post author: {frontmatter.author}</h2>
  <p>{frontmatter.description}</p>
  <slot /> <!-- Markdown content is injected here -->
  <!-- ... -->
</html>

---

// 示例：从一个远程的 API 接口请求 Markdown

// 并在运行时将其渲染为 HTML

// 使用了 "marked" 库 (https://github.com/markedjs/marked)

import { marked } from 'marked';

const response = await fetch('https://raw.githubusercontent.com/wiki/adam-p/markdown-here/Markdown-Cheatsheet.md');

const markdown = await response.text();

const content = marked.parse(markdown);

---

<article set:html={content} />

{

  // 包括在 "astro/tsconfigs/strict" 或 "astro/tsconfigs/strictest" 中

  "extends": "astro/tsconfigs/base",

  "compilerOptions": {

++  "strictNullChecks": true, // 使用 `base` 模板需要添加

    "allowJs": true // 必需，包含在所有 Astro 模板中

  }

}

// 1. Import utilities from `astro:content`
import { defineCollection, z } from 'astro:content';

// 2. Import loader(s)
import { glob, file } from 'astro/loaders';

// 3. Define your collection(s)
const blog = defineCollection({ /* ... */ });
const dogs = defineCollection({ /* ... */ });

// 4. Export a single `collections` object to register your collection(s)
export const collections = { blog, dogs };

const authors = defineCollection({
  type: 'data'
});

const docs = defineCollection({
  type: 'content'
});

const docs = defineCollection({ type: 'content', ... })

src/content/docs/

const authors = defineCollection({ type: 'data', ... })

src/content/authors/

import { defineCollection, z } from 'astro:content';
import { glob, file } from 'astro/loaders'; // 不适用于旧版 API

const blog = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/data/blog" }),
  schema: /* ... */
});
const dogs = defineCollection({
  loader: file("src/data/dogs.json"),
  schema: /* ... */
});

const probes = defineCollection({
// loader 可以接受字符串匹配模式或模式数组
// 加载 space-probes 目录下所有 markdown 文件，但排除以 "voyager-" 开头的文件
  loader: glob({ pattern: ['*.md', '!voyager-*'], base: 'src/data/space-probes' }),
  schema: z.object({
    name: z.string(),
    type: z.enum(['Space Probe', 'Mars Rover', 'Comet Lander']),
    launch_date: z.date(),
    status: z.enum(['Active', 'Inactive', 'Decommissioned']),
    destination: z.string(),
    operator: z.string(),
    notable_discoveries: z.array(z.string()),
  }),
});

export const collections = { blog, dogs, probes };

import { defineCollection } from "astro:content";
import { file } from "astro/loaders";
import { parse as parseCsv } from "csv-parse/sync";

const cats = defineCollection({
  loader: file("src/data/cats.csv", { parser: (text) => parseCsv(text, { columns: true, skipEmptyLines: true })})
});

{"dogs": [{}], "cats": [{}]}

const dogs = defineCollection({
  loader: file("src/data/pets.json", { parser: (text) => JSON.parse(text).dogs })
});
const cats = defineCollection({
  loader: file("src/data/pets.json", { parser: (text) => JSON.parse(text).cats })
});

import { defineCollection, z } from 'astro:content';
import { glob, file } from 'astro/loaders'; // 不适用于旧版 API

const blog = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/data/blog" }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    updatedDate: z.coerce.date().optional(),
  })
});
const dogs = defineCollection({
  loader: file("src/data/dogs.json"),
  schema: z.object({
    id: z.string(),
    breed: z.string(),
    temperament: z.array(z.string()),
  }),
});

export const collections = { blog, dogs };

// 示例：Zod 常用数据类型的速查表
import { z, defineCollection } from 'astro:content';

defineCollection({
  schema: z.object({
    isDraft: z.boolean(), // 是否为草稿
    title: z.string(), // 标题（字符串）
    sortOrder: z.number(), // 排序序号（数字）
    image: z.object({ // 图片对象
      src: z.string(), // 图片路径
      alt: z.string(), // 替代文本
    }),
    author: z.string().default('Anonymous'), // 作者（默认值'Anonymous'）
    language: z.enum(['en', 'es']), // 语言枚举（英文/西班牙文）
    tags: z.array(z.string()), // 标签数组
    footnote: z.string().optional(), // 可选脚注

    // 在YAML中，未加引号的日期会被解析为Date对象
    publishDate: z.date(), // 示例: 2024-09-17

    // 将日期字符串转换为Date对象
    updatedDate: z.string().transform((str) => new Date(str)),

    authorContact: z.string().email(), // 作者联系邮箱（带格式验证）
    canonicalURL: z.string().url(), // 规范URL（带URL格式验证）
  })
})

import { defineCollection, reference, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: '**/[^_]*.md', base: "./src/data/blog" }),
  schema: z.object({
    title: z.string(),
    // 通过 `id` 从 `authors` 集合中引用单个作者
    author: reference('authors'),
    // 通过 `slug` 从 `blog` 集合中引用相关文章的数组
    relatedPosts: z.array(reference('blog')),
  })
});

const authors = defineCollection({
  loader: glob({ pattern: '**/[^_]*.json', base: "./src/data/authors" }),
  schema: z.object({
    name: z.string(),
    portfolio: z.string().url(),
  })
});

export const collections = { blog, authors };

---

title: "Welcome to my blog"

author: ben-holmes # references `src/data/authors/ben-holmes.json`

relatedPosts:

- about-me # references `src/data/blog/about-me.md`

- my-year-in-review # references `src/data/blog/my-year-in-review.md`

---

---

title: My Blog Post

slug: my-custom-id/supports/slashes

---

Your blog post content here.

{

  "title": "My Category",

  "slug": "my-custom-id/supports/slashes",

  "description": "Your category description here."

}

import { getCollection, getEntry } from 'astro:content';
// 获取集合中的所有条目。// 需要集合的名称作为参数。
const allBlogPosts = await getCollection('blog');
// 从集合中获取单个条目。
// 需要集合的名称和 `id`
const poodleData = await getEntry('dogs', 'poodle');

---
import { getCollection } from 'astro:content';

const posts = (await getCollection('blog')).sort(
  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);
---

---

import { getCollection } from 'astro:content';

const posts = await getCollection('blog');

---

<h1>My posts</h1>

<ul>

  {posts.map(post => (

    <li><a href={`/blog/${post.id}`}>{post.data.title}</a></li>

  ))}

</ul>

---
import { getEntry, render } from 'astro:content';

const entry = await getEntry('blog', 'post-1');
if (!entry) {
  // Handle Error, for example:
  throw new Error('Could not find blog post 1');
}
const { Content, headings } = await render(entry);
---
<p>Published on: {entry.data.published.toDateString()}</p>
<Content />

---
import type { CollectionEntry } from 'astro:content';
interface Props {
  post: CollectionEntry<'blog'>;
}

// `post` will match your 'blog' collection schema type
const { post } = Astro.props;
---

// 示例：使用 `draft: true` 过滤掉内容条目

import { getCollection } from 'astro:content';

const publishedBlogEntries = await getCollection('blog', ({ data }) => {

  return data.draft !== true;

});

// 示例：仅在为生产构建时过滤掉带有 `draft: true` 的内容条目

import { getCollection } from 'astro:content';

const blogEntries = await getCollection('blog', ({ data }) => {

  return import.meta.env.PROD ? data.draft !== true : true;

});

// 示例：按集合中的子目录过滤条目

import { getCollection } from 'astro:content';

const englishDocsEntries = await getCollection('docs', ({ id }) => {

  return id.startsWith('en/');

});

---
import { getEntry, getEntries } from 'astro:content';

const blogPost = await getEntry('blog', 'welcome');

// 解析单个引用 (e.g. `{collection: "authors", id: "ben-holmes"}`)
const author = await getEntry(blogPost.data.author);
// 解析多个引用
// (e.g. `[{collection: "blog", id: "about-me"}, {collection: "blog", id: "my-year-in-review"}]`)
const relatedPosts = await getEntries(blogPost.data.relatedPosts);
---

<h1>{blogPost.data.title}</h1>
<p>Author: {author.data.name}</p>

<!-- ... -->

<h2>You might also like:</h2>
{relatedPosts.map(post => (
  <a href={post.id}>{post.data.title}</a>
))}

---

import { getCollection, render } from 'astro:content';
// 1. Generate a new path for every collection entry
export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { id: post.id },
    props: { post },
  }));
}
// 2. 对于你的模板，你可以直接从 prop 获取条目
const { post } = Astro.props;
const { Content } = await render(post);
---

<h1>{post.data.title}</h1>

<Content />

---
import { getEntry, render } from "astro:content";
// 1. 从传入的服务器请求中获取 slug
const { id } = Astro.params;
if (id === undefined) {
  return Astro.redirect("/404");
}
// 2. 直接使用请求 slug 查询条目
const post = await getEntry("blog", id);
// 3. 如果条目不存在则重定向
if (post === undefined) {
  return Astro.redirect("/404");
}
// 4. 将条目渲染为模板中的 HTML
const { Content } = await render(post);
---
<h1>{post.data.title}</h1>
<Content />

---
import { Image } from 'astro:assets';
import localBirdImage from '../../images/subfolder/localBirdImage.png';
---
<Image src={localBirdImage} alt="A bird sitting on a nest of eggs." />
<Image src="/images/bird-in-public-folder.jpg" alt="A bird." width="50" height="50" />
<Image src="https://example.com/remote-bird.jpg" alt="A bird." width="50" height="50" />

<img src={localBirdImage.src} alt="A bird sitting on a nest of eggs.">
<img src="/images/bird-in-public-folder.jpg" alt="A bird.">
<img src="https://example.com/remote-bird.jpg" alt="A bird.">

# 我的 Markdown 页面
<!-- 存储在 src/assets/ 中的本地图像 -->
<!-- 使用相对文件路径或导入别名 -->
![繁星点点的夜空。](../assets/stars.png)
<!-- 存储在 public/images/ 中的图像 -->
<!-- 使用相对于 public/ 的文件路径 -->
![繁星点点的夜空。](/images/stars.png)
<!-- 其他服务器上的远程图像 -->
<!-- 使用图像的完整 URL -->
![Astro](https://example.com/images/remote-image.png)

import stars from "../assets/stars.png";
export default function ReactImage() {  return (    <img src={stars.src} alt="繁星点点的夜空。" />  )}

---
import ReactComponent from './ReactComponent.jsx';
import { Image } from 'astro:assets';
import stars from '~/stars/docline.png';
---
<ReactComponent>
  <Image src={stars} alt="A starry night sky." />
</ReactComponent>

export default defineConfig({
  image: {
    domains: ["astro.build"],

  }
});

export default defineConfig({
  image: {
    remotePatterns: [{ protocol: "https" }],
  }
});

---
title: "My first blog post"
cover: "./firstpostcover.jpeg" # will resolve to "src/content/blog/firstblogcover.jpeg"
coverAlt: "A photograph of a sunset behind a mountain range."
---
This is a blog post

import { defineCollection, z } from "astro:content";

const blogCollection = defineCollection({
  schema: ({ image }) => z.object({
    title: z.string(),
    cover: image(),
    coverAlt: z.string(),
  }),
});

export const collections = {
  blog: blogCollection,
};

---
import { Image } from "astro:assets";
import { getCollection } from "astro:content";
const allBlogPosts = await getCollection("blog");
---

{
  allBlogPosts.map((post) => (
    <div>
      <Image src={post.data.cover} alt={post.data.coverAlt} />
      <h2>
        <a href={"/blog/" + post.slug}>{post.data.title}</a>
      </h2>
    </div>
  ))
}

---
import Contact from "../components/Contact.jsx";
import Location from "../components/Location.astro";

const response = await fetch("https://randomuser.me/api/");
const data = await response.json();
const randomUser = data.results[0];
---
<!-- 在构建时（Build Time）获取的数据可以直接渲染到 HTML -->
<h1>User</h1>
<h2>{randomUser.name.first} {randomUser.name.last}</h2>

<!-- 在构建时获取的数据可以作为 props 传递给组件 -->
<Contact client:load email={randomUser.email} />
<Location city={randomUser.location.city} />

const data = await fetch('https://example.com/movies.json').then((response) =>