YUN-LOVE

梦的开始

Sun, 22 Feb 2026 00:00:00 GMT

前言

说实话，第一次这么正经的写一篇博文还有点不习惯。
我希望我的创作可以解决大家的一些问题。
因为我也受到过前辈们的帮助，尽管我可能写不出多好的文字。
但是我相信，我同使用 AI 洗稿的网络泔水制造者们不同，我的使命是创造有价值的东西。

文章使用 AI 排版

一些心里话

我在昨天在 B 站上看到一个人说他二改了 fuwari，说是加上了后台。
我到仓库一看，是用 AI 写的（这也没什么，在这个时代使用 AI 写代码就是提高效率）。
但是作者把 .vscode 这个文件夹都没有加入 .gitignore。
并且作为一个博客仓库，作者居然没有设置模板，
所以还需要用户手动删掉他的博文，
这作为一名开发者是绝不能忍受的。

一些吐槽

最让人不适的不是他的博客是 AI 二改的却没有直接道明，而是他的博文大部分是让 AI 搓的。
你说你稍微偏技术性的文章用 AI 我不挑你理，你一个 心路历程 都用 AI 是不是有点不要脸了？
当今 AI 洗稿这么严重的时代，有人却在孜孜不倦地创作着原创的 “AI 泔水”。

如何为你的fuwari博客添加置顶项

Mon, 12 Jan 2026 00:00:00 GMT

前言

尽管我现在已经不再使用fuwari，但是我看到使用人数很多，相信会有人需要这篇文章的。
文章末尾已附上完整文件(仅针对我使用的版本，如果更新的话变化应该不大)，如需要请复制粘贴。

文章使用 AI 润色

第一步：向 `src/content/config.ts` 中添加一个 pinned 字段

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const posts = defineCollection({
  schema: z.object({
    title: z.string(),
    published: z.date(),
    // ... 其他原有的字段 ...
    
    //  添加下面这行：
    pinned: z.boolean().optional().default(false), 
  }),
});

export const collections = { posts };

第二步：修改排序逻辑 (content-utils.ts)

我们将排序逻辑改为：先比较置顶状态，再比较发布时间。

// src/utils/content-utils.ts

// ... 前面的 imports 保持不变

// Retrieve posts and sort them by pinned status then by publication date
async function getRawSortedPosts() {
	const allBlogPosts = await getCollection("posts", ({ data }) => {
		return import.meta.env.PROD ? data.draft !== true : true;
	});

	const sorted = allBlogPosts.sort((a, b) => {
		// 1. 获取置顶状态 (如果没有设置，默认为 false)
		const pinA = a.data.pinned ?? false;
		const pinB = b.data.pinned ?? false;

		// 2. 如果置顶状态不同，置顶的排在前面
		if (pinA !== pinB) {
			return pinA ? -1 : 1;
		}

		// 3. 如果置顶状态相同（都置顶或都不置顶），则按时间倒序
		const dateA = new Date(a.data.published);
		const dateB = new Date(b.data.published);
		return dateA > dateB ? -1 : 1;
	});

	return sorted;
}

// ... 后面的 export 函数保持不变

第三步：修改 UI 显示 (PostCard.astro)

为了让置顶文章一目了然，我们要在标题旁边加一个“图钉”图标。
修改 PostCard.astro，在显示 {title} 的位置前面添加图标判断逻辑。
找到代码中 <a href={url} ...> 包含{title}的部分，修改如下：`

<!-- src/components/PostCard.astro -->

<!-- ... 前面的代码保持不变 ... -->

<a href={url}
   class="transition group w-full block font-bold mb-3 text-3xl text-90
hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
active:text-[var(--title-active)] dark:active:text-[var(--title-active)]
before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block
">
    <!--  新增代码开始：如果置顶，显示图标 -->
    {entry.data.pinned && (
        <Icon 
            name="material-symbols:push-pin" 
            class="inline-block mr-2 text-[var(--primary)] align-middle text-2xl mb-1 rotate-45" 
            aria-label="Pinned Post"
        />
    )}
    <!--  新增代码结束 -->

    {title}
    
    <Icon class="inline text-[2rem] text-[var(--primary)] md:hidden translate-y-0.5 absolute" name="material-symbols:chevron-right-rounded" ></Icon>
    <Icon class="text-[var(--primary)] text-[2rem] transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0" name="material-symbols:chevron-right-rounded"></Icon>
</a>

<!-- ... 后面的代码保持不变 ... -->

第四步：如何使用

现在功能已经做好了，只要在你想要置顶的文章的 Markdown 头部（Frontmatter）添加 pinned: true 即可：

---
title: 我的置顶文章
published: 2024-01-01
description: 这是最重要的文章
tags: [重要]
pinned: true
---

注意事项

如果 pnpm build 报错可以尝试执行

pnpm add -D @iconify-json/material-symbols

完整文件

1. src/content/config.ts

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

const postsCollection = defineCollection({
	schema: z.object({
		title: z.string(),
		published: z.date(),
		updated: z.date().optional(),
		draft: z.boolean().optional().default(false),
		description: z.string().optional().default(""),
		image: z.string().optional().default(""),
		tags: z.array(z.string()).optional().default([]),
		category: z.string().optional().nullable().default(""),
		lang: z.string().optional().default(""),

		/* For internal use */
		prevTitle: z.string().default(""),
		prevSlug: z.string().default(""),
		nextTitle: z.string().default(""),
		nextSlug: z.string().default(""),
    pinned: z.boolean().optional().default(false),
	}),
});
const specCollection = defineCollection({
	schema: z.object({}),
});
export const collections = {
	posts: postsCollection,
	spec: specCollection,
};

2. src/utils/content-utils.ts
主要变化：在 getRawSortedPosts 中添加了优先判断 pinned 字段的逻辑

import { type CollectionEntry, getCollection } from "astro:content";
import I18nKey from "@i18n/i18nKey";
import { i18n } from "@i18n/translation";
import { getCategoryUrl } from "@utils/url-utils.ts";

// // Retrieve posts and sort them by publication date
async function getRawSortedPosts() {
	const allBlogPosts = await getCollection("posts", ({ data }) => {
		return import.meta.env.PROD ? data.draft !== true : true;
	});

	const sorted = allBlogPosts.sort((a, b) => {
		// --- 修改开始：置顶逻辑 ---
		const pinA = a.data.pinned ?? false;
		const pinB = b.data.pinned ?? false;

		if (pinA !== pinB) {
			return pinA ? -1 : 1; // 置顶的排在前面
		}
		// --- 修改结束 ---

		const dateA = new Date(a.data.published);
		const dateB = new Date(b.data.published);
		return dateA > dateB ? -1 : 1;
	});
	return sorted;
}

export async function getSortedPosts() {
	const sorted = await getRawSortedPosts();

	for (let i = 1; i < sorted.length; i++) {
		sorted[i].data.nextSlug = sorted[i - 1].slug;
		sorted[i].data.nextTitle = sorted[i - 1].data.title;
	}
	for (let i = 0; i < sorted.length - 1; i++) {
		sorted[i].data.prevSlug = sorted[i + 1].slug;
		sorted[i].data.prevTitle = sorted[i + 1].data.title;
	}

	return sorted;
}
export type PostForList = {
	slug: string;
	data: CollectionEntry<"posts">["data"];
};
export async function getSortedPostsList(): Promise<PostForList[]> {
	const sortedFullPosts = await getRawSortedPosts();

	// delete post.body
	const sortedPostsList = sortedFullPosts.map((post) => ({
		slug: post.slug,
		data: post.data,
	}));

	return sortedPostsList;
}
export type Tag = {
	name: string;
	count: number;
};

export async function getTagList(): Promise<Tag[]> {
	const allBlogPosts = await getCollection<"posts">("posts", ({ data }) => {
		return import.meta.env.PROD ? data.draft !== true : true;
	});

	const countMap: { [key: string]: number } = {};
	allBlogPosts.forEach((post: { data: { tags: string[] } }) => {
		post.data.tags.forEach((tag: string) => {
			if (!countMap[tag]) countMap[tag] = 0;
			countMap[tag]++;
		});
	});

	// sort tags
	const keys: string[] = Object.keys(countMap).sort((a, b) => {
		return a.toLowerCase().localeCompare(b.toLowerCase());
	});

	return keys.map((key) => ({ name: key, count: countMap[key] }));
}

export type Category = {
	name: string;
	count: number;
	url: string;
};

export async function getCategoryList(): Promise<Category[]> {
	const allBlogPosts = await getCollection<"posts">("posts", ({ data }) => {
		return import.meta.env.PROD ? data.draft !== true : true;
	});
	const count: { [key: string]: number } = {};
	allBlogPosts.forEach((post: { data: { category: string | null } }) => {
		if (!post.data.category) {
			const ucKey = i18n(I18nKey.uncategorized);
			count[ucKey] = count[ucKey] ? count[ucKey] + 1 : 1;
			return;
		}

		const categoryName =
			typeof post.data.category === "string"
				? post.data.category.trim()
				: String(post.data.category).trim();

		count[categoryName] = count[categoryName] ? count[categoryName] + 1 : 1;
	});

	const lst = Object.keys(count).sort((a, b) => {
		return a.toLowerCase().localeCompare(b.toLowerCase());
	});

	const ret: Category[] = [];
	for (const c of lst) {
		ret.push({
			name: c,
			count: count[c],
			url: getCategoryUrl(c),
		});
	}
	return ret;
}

3. src/components/PostCard.astro
主要变化：在标题区域添加了图钉图标 (material-symbols:push-pin) 的显示逻辑

---
import type { CollectionEntry } from "astro:content";
import path from "node:path";
import { Icon } from "astro-icon/components";
import I18nKey from "../i18n/i18nKey";
import { i18n } from "../i18n/translation";
import { getDir } from "../utils/url-utils";
import ImageWrapper from "./misc/ImageWrapper.astro";
import PostMetadata from "./PostMeta.astro";

interface Props {
	class?: string;
	entry: CollectionEntry<"posts">;
	title: string;
	url: string;
	published: Date;
	updated?: Date;
	tags: string[];
	category: string | null;
	image: string;
	description: string;
	draft: boolean;
	style: string;
}
const {
	entry,
	title,
	url,
	published,
	updated,
	tags,
	category,
	image,
	description,
	style,
} = Astro.props;
const className = Astro.props.class;

const hasCover = image !== undefined && image !== null && image !== "";

const coverWidth = "28%";

const { remarkPluginFrontmatter } = await entry.render();
---
<div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]} style={style}>
    <div class:list={["pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
        <a href={url}
           class="transition group w-full block font-bold mb-3 text-3xl text-90
        hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
        active:text-[var(--title-active)] dark:active:text-[var(--title-active)]
        before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
        before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block
        ">
            {/* --- 修改开始：置顶图标 --- */}
            {entry.data.pinned && (
                <Icon 
                    name="material-symbols:push-pin" 
                    class="inline-block mr-2 text-[var(--primary)] align-middle text-[1.6rem] mb-1 rotate-45"
                ></Icon>
            )}
            {/* --- 修改结束 --- */}
            
            {title}
            <Icon class="inline text-[2rem] text-[var(--primary)] md:hidden translate-y-0.5 absolute" name="material-symbols:chevron-right-rounded" ></Icon>
            <Icon class="text-[var(--primary)] text-[2rem] transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0" name="material-symbols:chevron-right-rounded"></Icon>
        </a>

        <!-- metadata -->
        <PostMetadata published={published} updated={updated} tags={tags} category={category} hideTagsForMobile={true} hideUpdateDate={true} class="mb-4"></PostMetadata>

        <!-- description -->
        <div class:list={["transition text-75 mb-3.5 pr-4", {"line-clamp-2 md:line-clamp-1": !description}]}>
            { description || remarkPluginFrontmatter.excerpt }
        </div>

        <!-- word count and read time  -->
        <div class="text-sm text-black/30 dark:text-white/30 flex gap-4 transition">
            <div>
                {remarkPluginFrontmatter.words} {" " + i18n(remarkPluginFrontmatter.words === 1 ? I18nKey.wordCount : I18nKey.wordsCount)}
            </div>
            <div>|</div>
            <div>
                {remarkPluginFrontmatter.minutes} {" " + i18n(remarkPluginFrontmatter.minutes === 1 ? I18nKey.minuteCount : I18nKey.minutesCount)}
            </div>
        </div>

    </div>

    {hasCover && <a href={url} aria-label={title}
                    class:list={["group",
                        "max-h-[20vh] md:max-h-none mx-4 mt-4 -mb-2 md:mb-0 md:mx-0 md:mt-0",
                        "md:w-[var(--coverWidth)] relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden active:scale-95"
                    ]} >
        <div class="absolute pointer-events-none z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div>
        <div class="absolute pointer-events-none z-20 w-full h-full flex items-center justify-center ">
            <Icon name="material-symbols:chevron-right-rounded"
                  class="transition opacity-0 group-hover:opacity-100 scale-50 group-hover:scale-100 text-white text-5xl">
            </Icon>
        </div>
        <ImageWrapper src={image} basePath={path.join("content/posts/", getDir(entry.id))} alt="Cover Image of the Post"
                  class="w-full h-full">
        </ImageWrapper>
    </a>}

    {!hasCover &&
        <a href={url} aria-label={title} class="!hidden md:!flex btn-regular w-[3.25rem]
         absolute right-3 top-3 bottom-3 rounded-xl bg-[var(--enter-btn-bg)]
         hover:bg-[var(--enter-btn-bg-hover)] active:bg-[var(--enter-btn-bg-active)] active:scale-95
        ">
            <Icon name="material-symbols:chevron-right-rounded"
                  class="transition text-[var(--primary)] text-4xl mx-auto">
            </Icon>
        </a>
    }
</div>
<div class="transition border-t-[1px] border-dashed mx-6 border-black/10 dark:border-white/[0.15] last:border-t-0 md:hidden"></div>

<style define:vars={{coverWidth}}>
</style>

Tips to improve concentration

Fri, 09 May 2025 16:00:00 GMT

import { Aside } from 'astro-pure/user'

You're trying to concentrate, but your mind is wandering or you're easily distracted. What happened to the laser-sharp focus you once enjoyed? As we age, we tend to have more difficulty filtering out stimuli that are not relevant to the task at hand.

What's fogging up focus?

Like a computer that slows with use, the brain accumulates wear and tear that affects processing. This can be caused by a number of physiological stressors such as inflammation, injury to blood vessels (especially if you have high blood pressure), the buildup of abnormal proteins, and naturally occurring brain shrinkage.

The following factors can also affect your concentration.

Underlying conditions. Depression or sleep disorders (such as sleep apnea) can undermine your ability to concentrate. So can the effects of vision or hearing loss. You waste precious cognitive resources when you spend too much time trying to make out what's written on a page or just hear what someone is saying.

Medication side effects. Some drugs, especially anticholinergics (such as treatments for incontinence, depression, or allergies), can slow processing speed and your ability to think clearly.

Excessive drinking. Having too much alcohol impairs thinking and causes interrupted sleep, which affects concentration.

Information overload. We are bombarded with information from TVs, computers, and messages such as texts or emails. When there's too much material, it burdens our filtering system and it's easy to get distracted.

Strategies to stay focused

To improve attention, consider the following strategies.

Mindfulness. "Mindfulness is about focusing attention on the present moment, and practicing mindfulness has been shown to rewire the brain so that attention is stronger in everyday life," says Kim Willment, a neuropsychologist with Brigham and Women's Hospital. She recommends sitting still for a few minutes each day, closing your eyes, and focusing on your breathing as well as the sounds and sensations around you.

Cognitive training. Computerized cognitive training games aim to improve your response times and attention. Evidence that this works has been mixed. "The goal of playing these games is not to get better at them, but to get better in the cognitive activities of everyday life," Willment says. "But there is evidence that a person's ability to pay attention can be improved by progressively pushing the person to higher levels of performance. So if you reach a certain level of sustained attention, pushing it to the next level can help improve it, and this may translate to everyday life."

A healthier lifestyle. Many aspects of a healthy lifestyle can help attention, starting with sleep and exercise. There is a direct link between exercise and cognitive ability, especially attention. When you exercise, you increase the availability of brain chemicals that promote new brain connections, reduce stress, and improve sleep. And when we sleep, we reduce stress hormones that can be harmful to the brain, and we clear out proteins that injure it.

Aim for seven to eight hours of sleep each night, and 150 minutes per week of aerobic exercise, such as brisk walking.

Other healthy steps to improve focus: eat a Mediterranean-style diet, which has been shown to support brain health; treat underlying conditions; and change medications that may be affecting your ability to focus.

Getting older is out of your control, but healthier living is something you determine, and it may improve concentration.

Article from: Harvard Health Publishing

Using MDX

Sun, 01 Jun 2025 00:00:00 GMT

This theme comes with the @astrojs/mdx integration installed and configured in your astro.config.ts config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.

Why MDX?

MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to mix JavaScript and UI Components into your Markdown content for things like interactive charts or alerts.

If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze.

Example

Here is how you import and use a UI component inside of MDX.
When you open this page in the browser, you should see the clickable button below.

import { Button } from 'astro-pure/user'

Click Me

What Is 3D Rendering? Complete Guide to 3D Visualization

Sun, 09 Feb 2025 00:00:00 GMT

3D rendering is all around us. From huge action movies to car commercials to previews of upcoming buildings or product designs, 3D visualization has become so widespread and realistic that you probably don’t even know it’s there.

In this introductory piece, Chaos’ Ricardo Ortiz explains the basics of 3D rendering, from the computational methods that create imagery to the artistic techniques that create great computer-generated (CG) content and its various uses.

What is 3D Rendering?

Put simply, 3D rendering is the process of using a computer to generate a 2D image from a digital three-dimensional scene.

To generate an image, specific methodologies and special software and hardware are used. Therefore, we need to understand that 3D rendering is a process—the one that builds the image.

Types of 3D rendering

We can create different types of rendered image; they can be realistic or non-realistic.

A realistic image could be an architectural interior that looks like a photograph, a product-design image such as a piece of furniture, or an automotive rendering of a car. On the other hand, we can create a non-realistic image such as an outline-type diagram or a cartoon-style image with a traditional 2D look. Technically, we can visualize anything we can imagine.

How is 3D rendering used?

3D rendering is an essential technique for many industries including architecture, product design, advertising, video games and visual effects for film, TV and animation.

In design and architecture, renders allow creative people to communicate their ideas in a clear and transparent way. A render gives them the chance to evaluate their proposals, experiment with materials, conduct studies and contextualize their designs in the real world before they are built or manufactured.

For the media and entertainment industries, 3D rendering is fundamental to the creation of sequences and animations that tell stories, whether we’re watching an animated movie, a period drama, or an action sequence with explosions, ships from the future, exotic locales, or extraterrestrial creatures.

Over the past few years, the evolution of computer graphics in these industries has replaced traditional techniques. For example, special effects are being replaced by visual effects, which means stunt people no longer risk their lives in car crashes.

In advertising, I would dare to say that 90% of automotive commercials are CG—or even more. In the architecture industry, many traditional techniques to create representations, such as scale models, have been replaced with photorealistic imagery to ensure we can see exactly how something will look once it’s built.

Accelerating processes, reducing costs and the demand for better quality results have helped technology evolve. Hardware is more powerful than ever and the switch to CG was inevitable.

How is a 3D rendered image generated?

Two pieces of software, with different characteristics, are used to computer-generate images and animations: render engines and game engines. Render engines use a technique called ray tracing, while game engines use a technique called rasterization—and some engines mix both techniques, but we will talk about that later on.

The Impact of Technology on the Music World

Sat, 30 Nov 2024 00:00:00 GMT

The evolution of music is a symphony of creativity, rhythm, and technology. From the humble beginnings of acoustic instruments to the present-day digital era, the relationship between music and technology has been transformative. In this article, we will explore the historical milestones, digital revolution, and emerging technologies that have shaped the music world. Join us on a journey through the chords of innovation as we discuss how technology has changed music.

Historical Perspective

The marriage of music and technology dates back centuries, with pivotal moments shaping the industry. The invention of the phonograph by Thomas Edison in the late 19th century marked the first time music could be recorded and replayed. Subsequent milestones, such as the electric guitar and the synthesizer, revolutionized music creation, paving the way for new genres and sounds.

These technological leaps didn't merely shape the musical landscape of their time but laid a foundation for the continuous evolution of the intersection between music and technology. As artists embraced these innovations, they unlocked new avenues for creativity, paving the way for diverse sounds and genres that have become integral to the vibrant tapestry of the modern music industry. The historical perspective illuminates the symbiotic relationship between music and technology, highlighting the transformative impact that each innovation has had on the way we create, consume, and experience music.

Digital Revolution

The digital revolution has been a seismic shift in the music industry, altering how music is consumed, distributed, and produced. The transition from physical formats like CDs and vinyl to digital formats such as MP3s and streaming services has democratized access to music. The ease of streaming has transformed how listeners discover and enjoy music, challenging traditional revenue models while offering unparalleled convenience.

Technology in Music Consumption and Distribution

Streaming services have become the heartbeat of music consumption, causing a decline in traditional music stores. The accessibility of music online has reshaped distribution channels, impacting both artists and record labels. While it provides exposure to a global audience, it also poses challenges regarding fair compensation for artists. The dynamics of the industry are evolving, reflecting the intricate dance between technology and music. Music Production and Creation

The advent of digital audio workstations (DAWs), software instruments, and electronic production techniques has democratized music creation. Artists now have powerful tools at their fingertips, enabling them to experiment with sounds, collaborate remotely, and produce music independently. This technological shift has broken down barriers, allowing for a diverse array of voices to be heard in the ever-expanding realm of music.

Markdown Syntax Support

Wed, 26 Jul 2023 08:00:00 GMT

Basic Syntax

Markdown is a lightweight and easy-to-use syntax for styling your writing.

Headers

When the content of the article is extensive, you can use headers to segment:

# Header 1

## Header 2

## Large Header

### Small Header

Header previews would disrupt the structure of the article, so they are not displayed here.

Bold and Italics

_Italic text_ and **Bold text**, together will be **_Bold Italic text_**

Preview:

Italic text and Bold text, together will be Bold Italic text

Links

Text link [Link Name](http://link-url)

Preview:

Text link Link Name

Inline Code

This is an `inline code`

Preview:

This is an inline code

Code Blocks

```js
// calculate fibonacci
function fibonacci(n) {
  if (n <= 1) return 1
  const result = fibonacci(n - 1) + fibonacci(n - 2) // [\!code --]
  return fibonacci(n - 1) + fibonacci(n - 2) // [\!code ++]
}
```

Preview:

// calculate fibonacci
function fibonacci(n) {
  if (n <= 1) return 1
  const result = fibonacci(n - 1) + fibonacci(n - 2) // [!code --]
  return fibonacci(n - 1) + fibonacci(n - 2) // [!code ++]
}

Currently using shiki as the code highlighting plugin. For supported languages, refer to Shiki: Languages.

Inline Formula

This is an inline formula $e^{i\pi} + 1 = 0$

Preview:

This is an inline formula $e^{i\pi} + 1 = 0$

Formula Blocks

$$
\hat{f}(\xi) = \int_{-\infty}^{\infty} f(x) e^{-2\pi i x \xi} \, dx
$$

Preview:

$$ \hat{f}(\xi) = \int_{-\infty}^{\infty} f(x) e^{-2\pi i x \xi} , dx $$

Currently using KaTeX as the math formula plugin. For supported syntax, refer to KaTeX Supported Functions.

Images

![CWorld](https://cravatar.cn/avatar/1ffe42aa45a6b1444a786b1f32dfa8aa?s=200)

Preview:

Strikethrough

~~Strikethrough~~

Preview:

~~Strikethrough~~

Lists

Regular unordered list

- 1
- 2
- 3

Preview:

Regular ordered list

1. GPT-4
2. Claude Opus
3. LLaMa

Preview:

GPT-4
Claude Opus
LLaMa

You can continue to nest syntax within lists.

Blockquotes

> Gunshot, thunder, sword rise. A scene of flowers and blood.

Preview:

Gunshot, thunder, sword rise. A scene of flowers and blood.

You can continue to nest syntax within blockquotes.

Line Breaks

Markdown needs a blank line to separate paragraphs.

If you don't leave a blank line
it will be in one paragraph

First paragraph

Second paragraph

Preview:

If you don't leave a blank line it will be in one paragraph

First paragraph

Second paragraph

Separators

If you have the habit of writing separators, you can start a new line and enter three dashes --- or asterisks ***. Leave a blank line before and after when there are paragraphs:

---

Preview:

Advanced Techniques

Inline HTML Elements

Currently, only some inline HTML elements are supported, including <kdb> , such as

Key Display

Use <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd> to reboot the computer

Preview:

Use Ctrl + Alt + Del to reboot the computer

Bold Italics

<b> Markdown also applies here, such as _bold_ </b>

Preview:

Markdown also applies here, such as bold

Other HTML Writing

Foldable Blocks

<details><summary>Click to expand</summary>It is hidden</details>

Preview:

Tables

| Header1  | Header2  |
| -------- | -------- |
| Content1 | Content2 |

Preview:

| Header1 | Header2 | | -------- | -------- | | Content1 | Content2 |

Footnotes

Use [^footnote] to add a footnote at the point of reference.

Then, at the end of the document, add the content of the footnote (it will be rendered at the end of the article by default).

[^footnote]: Here is the content of the footnote

Preview:

Use [^footnote] to add a footnote at the point of reference.

Then, at the end of the document, add the content of the footnote (it will be rendered at the end of the article by default).

[^footnote]: Here is the content of the footnote

To-Do Lists

- [ ] Incomplete task
- [x] Completed task

Preview:

[ ] Incomplete task
[x] Completed task

Symbol Escaping

If you need to use markdown symbols like _ # * in your description but don't want them to be escaped, you can add a backslash before these symbols, such as \_ \# \* to avoid it.

\_Don't want the text here to be italic\_

\*\*Don't want the text here to be bold\*\*

Preview:

_Don't want the text here to be italic_

**Don't want the text here to be bold**

Embedding Astro Components

See User Components and Advanced Components for details.

Markdown 语法支持

Wed, 26 Jul 2023 08:00:00 GMT

基本语法

Markdown 是一种轻量级且易于使用的语法，用于为您的写作设计风格。

标题

文章内容较多时，可以用标题分段：

# 标题 1

## 标题 2

## 大标题

### 小标题

标题预览会打乱文章的结构，所以在此不展示。

粗斜体

_斜体文本_

**粗体文本**

**_粗斜体文本_**

预览：

斜体文本

粗体文本

粗斜体文本

链接

文字链接 [链接名称](http://链接网址)

预览：

文字链接链接名称

行内代码

这是一条 `单行代码`

预览：

这是一条 行内代码

代码块

```js
// calculate fibonacci
function fibonacci(n) {
  if (n <= 1) return 1
  return fibonacci(n - 1) + fibonacci(n - 2)
}
```

预览：

// calculate fibonacci
function fibonacci(n) {
  if (n <= 1) return 1
  return fibonacci(n - 1) + fibonacci(n - 2)
}

当前使用 shiki 作为代码高亮插件，支持的语言请参考 shiki / languages。

行内公式

这是一条行内公式 $e^{i\pi} + 1 = 0$

预览：

这是一条行内公式 $e^{i\pi} + 1 = 0$

公式块

$$
\hat{f}(\xi) = \int_{-\infty}^{\infty} f(x) e^{-2\pi i x \xi} \, dx
$$

预览：

$$ \hat{f}(\xi) = \int_{-\infty}^{\infty} f(x) e^{-2\pi i x \xi} , dx $$

当前使用 KaTeX 作为数学公式插件，支持的语法请参考 KaTeX Supported Functions。

图片

![CWorld](https://cravatar.cn/avatar/1ffe42aa45a6b1444a786b1f32dfa8aa?s=200)

预览：

删除线

~~删除线~~

预览：

~~删除线~~

列表

普通无序列表

- 1
- 2
- 3

预览：

普通有序列表

1. GPT-4
2. Claude Opus
3. LLaMa

预览：

GPT-4
Claude Opus
LLaMa

列表里可以继续嵌套语法

引用

> 枪响，雷鸣，剑起。繁花血景。

预览：

枪响，雷鸣，剑起。繁花血景。

引用里也可以继续嵌套语法。

换行

markdown 分段落是需要空一行的。

如果不空行
就会在一段

第一段

第二段

预览：

如果不空行就会在一段

第一段

第二段

分隔符

如果你有写分割线的习惯，可以新起一行输入三个减号--- 或者星号 ***。当前后都有段落时，请空出一行：

---

预览：

高级技巧

行内 HTML 元素

目前只支持部分段内 HTML 元素效果，包括 <kdb>  ，如

键位显示

使用 <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd> 重启电脑

预览：

使用 Ctrl + Alt + Del 重启电脑

粗斜体

<b> Markdown 在此处同样适用，如 _加粗_ </b>

预览：

Markdown 在此处同样适用，如加粗

其他 HTML 写法

折叠块

<details><summary>点击展开</summary>它被隐藏了</details>

预览：

表格

| 表头1 | 表头2 |
| ----- | ----- |
| 内容1 | 内容2 |

预览：

| 表头1 | 表头2 | | ----- | ----- | | 内容1 | 内容2 |

注释

在引用的地方使用 [^注释] 来添加注释。

然后在文档的结尾，添加注释的内容（会默认于文章结尾渲染之）。

[^注释]: 这里是注释的内容

预览：

在引用的地方使用 ^注释来添加注释。

然后在文档的结尾，添加注释的内容（会默认于文章结尾渲染之）。

To-Do 列表

- [ ] 未完成的任务
- [x] 已完成的任务

预览：

[ ] 未完成的任务
[x] 已完成的任务

符号转义

如果你的描述中需要用到 markdown 的符号，比如 _ # * 等，但又不想它被转义，这时候可以在这些符号前加反斜杠，如 \_ \# \* 进行避免。

\_不想这里的文本变斜体\_

\*\*不想这里的文本被加粗\*\*

预览：

_不想这里的文本变斜体_

**不想这里的文本被加粗**

内嵌 Astro 组件

See User Components and Advanced Components for details.

YUN-LOVE

梦的开始

前言

一些心里话

一些吐槽

如何为你的fuwari博客添加置顶项

前言

第一步：向 src/content/config.ts 中添加一个 pinned 字段

第二步：修改排序逻辑 (content-utils.ts)

第三步：修改 UI 显示 (PostCard.astro)

第四步：如何使用

注意事项

完整文件

Tips to improve concentration

What's fogging up focus?

Strategies to stay focused

Using MDX

Why MDX?

Example

More Links

What Is 3D Rendering? Complete Guide to 3D Visualization

What is 3D Rendering?

Types of 3D rendering

How is 3D rendering used?

How is a 3D rendered image generated?

The Impact of Technology on the Music World

Historical Perspective

Digital Revolution

Technology in Music Consumption and Distribution

Markdown Syntax Support

Basic Syntax

Headers

Bold and Italics

Links

Inline Code

Code Blocks

Inline Formula

Formula Blocks

Images

Strikethrough

Lists

Blockquotes

Line Breaks

Separators

Advanced Techniques

Inline HTML Elements

Key Display

Bold Italics

Other HTML Writing

Foldable Blocks

Tables

Footnotes

To-Do Lists

Symbol Escaping

Embedding Astro Components

Markdown 语法支持

基本语法

标题

粗斜体

链接

行内代码

代码块

行内公式

公式块

图片

删除线

列表

引用

换行

分隔符

高级技巧

行内 HTML 元素

键位显示

粗斜体

其他 HTML 写法

折叠块

表格

注释

To-Do 列表

符号转义

第一步：向 `src/content/config.ts` 中添加一个 pinned 字段