<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>街角の风铃</title><description>个人blog</description><link>https://fuwari.vercel.app/</link><language>zh_CN</language><item><title>马尔可夫决策过程</title><link>https://fuwari.vercel.app/posts/reinforcementlearning/mbp0011/</link><guid isPermaLink="true">https://fuwari.vercel.app/posts/reinforcementlearning/mbp0011/</guid><description>.....</description><pubDate>Mon, 25 May 2026 00:00:00 GMT</pubDate><content:encoded>&lt;h1&gt;提要&lt;/h1&gt;
&lt;p&gt;&lt;strong&gt;马尔科夫决策过程&lt;/strong&gt; 是 &lt;strong&gt;马尔科夫奖励过程&lt;/strong&gt; 加上 &lt;strong&gt;智能体&lt;/strong&gt; 的动作得到的&lt;/p&gt;
&lt;h2&gt;马尔科夫决策过程&lt;/h2&gt;
&lt;p&gt;具有 &lt;strong&gt;马尔科夫性质&lt;/strong&gt; 的 &lt;strong&gt;随机过程&lt;/strong&gt;&lt;/p&gt;
&lt;h3&gt;随机过程&lt;/h3&gt;
&lt;p&gt;以我的理解，就是以条件概率描述一种状态，指当前状态受历史影响。&lt;/p&gt;
&lt;p&gt;下一个状态取决于 $t$ 时刻之前的状态。我们将已知历史信息 $(S_1, \ldots, S_t)$ 时，下一个时刻状态为 $S_{t+1}$ 的概率表示为 $P(S_{t+1} \mid S_1, \ldots, S_t)$。&lt;/p&gt;
&lt;h3&gt;马尔科夫性质&lt;/h3&gt;
&lt;p&gt;一个随机过程某时刻的状态 &lt;strong&gt;只取决于&lt;/strong&gt; 上一时刻的状态&lt;/p&gt;
&lt;p&gt;$$
P(S_{t+1} \mid S_t) = P(S_{t+1} \mid S_1, \ldots, S_t)
$$&lt;/p&gt;
&lt;h2&gt;再回到马尔科夫过程&lt;/h2&gt;
&lt;p&gt;马尔科夫过程也叫做马尔科夫链，可以由元组描述$\langle S, P \rangle$描述。关于转移矩阵，感觉其实有点像有向图，跟那个思想很像，就是把边权重改成状态转移概率了，有关变换如下图
&lt;img src=&quot;/pic/zhuanyijuzhen.png&quot; alt=&quot;转移矩阵示例&quot; /&gt;
注意啊，状态集合记为 $\mathcal{S} = {s_1, s_2, \ldots, s_n}$。它是一个集合，不是指某一个状态。&lt;/p&gt;
&lt;p&gt;有了这个过程，我们就可以进行从一个状态变到另一个状态了，从头变到尾就可以生成一个 &lt;strong&gt;序列&lt;/strong&gt; 也叫 &lt;strong&gt;采样&lt;/strong&gt; 。换个名字更熟悉episode/sampling(话说这两个单词在代码里面真的蛮常见的)&lt;/p&gt;
&lt;h2&gt;马尔科夫奖励过程&lt;/h2&gt;
&lt;p&gt;马尔科夫奖励过程可以用元组 $\langle \mathcal{S}, \mathcal{P}, r, \gamma \rangle$ 描述，其中：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;$\mathcal{S}$ 是有限状态的集合。&lt;/li&gt;
&lt;li&gt;$\mathcal{P}$ 是状态转移矩阵。&lt;/li&gt;
&lt;li&gt;$r$ 是奖励函数，某个状态 $s$ 的奖励 $r(s)$ 指转移到该状态时可以获得奖励的期望。&lt;/li&gt;
&lt;li&gt;$\gamma$ 是折扣因子（discount factor），$\gamma$ 的取值范围为 $[0, 1)$。
&lt;ul&gt;
&lt;li&gt;引入折扣因子的理由为远期利益具有一定不确定性，有时我们更希望能够尽快获得一些奖励，所以我们需要对远期利益打一些折扣。接近 $1$ 的 $\gamma$ 更关注长期的累计奖励，接近 $0$ 的 $\gamma$ 更考虑短期奖励。&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;回报&lt;/h3&gt;
&lt;p&gt;在某一状态时，所有奖励的衰减之和称为&lt;strong&gt;回报&lt;/strong&gt; $G_t$（Return），公式如下：&lt;/p&gt;
&lt;p&gt;$$
G_t = R_t + \gamma R_{t+1} + \gamma^2 R_{t+2} + \cdots = \sum_{k=0}^{\infty} \gamma^k R_{t+k}
$$&lt;/p&gt;
&lt;p&gt;这个不用纠结，知道是啥就好了，都是人为定义的。不过这个跟后面的状态价值函数有密切联系。还有这个公式本身也是个数列递推式，后面会有很奇特的展开来简化算法复杂度的。&lt;/p&gt;
&lt;h3&gt;状态价值函数&lt;/h3&gt;
&lt;p&gt;有了回报 $G_t$ 之后，就可以定义&lt;strong&gt;状态价值函数&lt;/strong&gt; $V(s)$。&lt;/p&gt;
&lt;p&gt;我的理解是，状态价值函数就是在某个状态 $s$ 出发时，对未来回报的期待。也就是说，未来可能会采样出很多条不同的轨迹，每条轨迹都有自己的回报 $G_t$，而 $V(s)$ 关心的是这些回报的期望值。&lt;/p&gt;
&lt;p&gt;从这个角度看，$V(s)$ 有点像回报 $G_t$ 的某种统计学参数，更准确地说，它是“在当前状态为 $s$ 的条件下，回报的期望”：&lt;/p&gt;
&lt;p&gt;$$
V(s) = \mathbb{E}[G_t \mid S_t = s]
$$&lt;/p&gt;
&lt;p&gt;结合马尔科夫奖励过程，状态价值函数也可以写成下面的递推形式：&lt;/p&gt;
&lt;p&gt;$$
V(s) = r(s) + \gamma \sum_{s&apos; \in \mathcal{S}} p(s&apos; \mid s) V(s&apos;)
$$&lt;/p&gt;
&lt;p&gt;这个公式对写代码很重要。它可以理解成：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;当前状态 $s$ 的价值，等于当前能获得的奖励 $r(s)$；&lt;/li&gt;
&lt;li&gt;再加上从当前状态转移到所有可能的下一个状态 $s&apos;$ 后，那些状态价值的加权平均；&lt;/li&gt;
&lt;li&gt;权重就是状态转移概率 $p(s&apos; \mid s)$；&lt;/li&gt;
&lt;li&gt;未来价值还要乘上折扣因子 $\gamma$。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;如果用代码思维来看，$V(s)$ 可以理解成一个表：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;V = {
    s1: value1,
    s2: value2,
    s3: value3,
} 
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;马尔科夫决策过程&lt;/h2&gt;
&lt;p&gt;简单来说，&lt;strong&gt;马尔科夫决策过程&lt;/strong&gt;（Markov Decision Process，MDP）本质上就是在马尔科夫奖励过程（MRP）的基础上，加上了&lt;strong&gt;智能体的动作&lt;/strong&gt;。&lt;/p&gt;
&lt;p&gt;也就是说，MRP 里状态怎么转移、得到什么奖励，基本是环境自己随机决定的；而 MDP 里多了一个智能体，智能体可以在某个状态下选择动作 $a$，动作会影响后续的状态转移和奖励。&lt;/p&gt;
&lt;p&gt;所以马尔科夫决策过程可以用下面这个元组描述：&lt;/p&gt;
&lt;p&gt;$$
\langle \mathcal{S}, \mathcal{A}, \mathcal{P}, r, \gamma \rangle
$$&lt;/p&gt;
&lt;p&gt;其中相比 MRP，多出来的就是动作集合 $\mathcal{A}$：&lt;/p&gt;
&lt;h3&gt;策略&lt;/h3&gt;
&lt;p&gt;策略 $\pi$：给定状态 $s$，决定选择哪个动作 $a$。&lt;/p&gt;
&lt;p&gt;$$
\pi(a \mid s) = P(A_t = a \mid S_t = s)
$$&lt;/p&gt;
&lt;p&gt;代码里可以理解成：&lt;/p&gt;
&lt;h3&gt;状态价值函数&lt;/h3&gt;
&lt;p&gt;状态价值函数 $V^\pi(s)$：状态 $s$ 在策略 $\pi$ 下的长期价值。&lt;/p&gt;
&lt;p&gt;$$
V^\pi(s) = \mathbb{E}_\pi[G_t \mid S_t = s]
$$&lt;/p&gt;
&lt;h3&gt;动作价值函数&lt;/h3&gt;
&lt;p&gt;动作价值函数 $Q^\pi(s, a)$：在状态 $s$ 下执行动作 $a$ 的长期价值。&lt;/p&gt;
&lt;p&gt;$$
Q^\pi(s, a) = \mathbb{E}_\pi[G_t \mid S_t = s, A_t = a]
$$&lt;/p&gt;
&lt;h3&gt;贝尔曼方程&lt;/h3&gt;
&lt;p&gt;贝尔曼方程：用“当前奖励 + 折扣后的未来价值”更新当前价值。&lt;/p&gt;
&lt;p&gt;$$
V(s) = r(s) + \gamma \sum_{s&apos;} p(s&apos; \mid s) V(s&apos;)
$$&lt;/p&gt;
</content:encoded></item><item><title>git by 技术爬爬虾</title><link>https://fuwari.vercel.app/posts/ailearning/git/</link><guid isPermaLink="true">https://fuwari.vercel.app/posts/ailearning/git/</guid><description>关于git版本控制所学所感</description><pubDate>Thu, 21 May 2026 00:00:00 GMT</pubDate><content:encoded>&lt;h1&gt;1.git的作用&lt;/h1&gt;
&lt;p&gt;版本控制，多人协同巴拉巴拉，还有避免被ai炸仓库&lt;/p&gt;
&lt;h1&gt;2.git分区的概念&lt;/h1&gt;
&lt;p&gt;&lt;img src=&quot;/pic/gitfenqu.jpg&quot; alt=&quot;Git 分区示意图&quot; /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;工作区 就是写代码的地方&lt;/li&gt;
&lt;li&gt;暂存区 add就是这样加进去的，不过现阶段概念比较淡了&lt;/li&gt;
&lt;li&gt;本地仓库 commit的主战场，保存代码的主力点&lt;/li&gt;
&lt;li&gt;远程仓库 github托管仓库，云端备份，分享代码，合作开发等&lt;/li&gt;
&lt;/ul&gt;
&lt;h1&gt;3.git常用指令&lt;/h1&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;命令&lt;/th&gt;
&lt;th&gt;用途&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;git init&lt;/td&gt;
&lt;td&gt;初始化项目&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;git status&lt;/td&gt;
&lt;td&gt;查看状态&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;git add .&lt;/td&gt;
&lt;td&gt;加入暂存区&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;git commit -m&lt;/td&gt;
&lt;td&gt;保存版本&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;git log --oneline&lt;/td&gt;
&lt;td&gt;看历史&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;git restore .&lt;/td&gt;
&lt;td&gt;撤销修改&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;git branch&lt;/td&gt;
&lt;td&gt;看分支&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;git checkout -b&lt;/td&gt;
&lt;td&gt;新分支&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;git checkout main&lt;/td&gt;
&lt;td&gt;切回主线&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;git push&lt;/td&gt;
&lt;td&gt;上传 GitHub&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;git pull&lt;/td&gt;
&lt;td&gt;拉代码&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h1&gt;4.我感觉很有用的地方&lt;/h1&gt;
&lt;ul&gt;
&lt;li&gt;第一肯定是随时备份啦，ai炸代码我也遇见过，一开始我是点vscode行号左边的绿的红的，感觉挺好用，现在了解到这些命令可以更好地用和理解那些杠杠是啥了（其实直接交给ai恢复更好，把提交的id给agent哈哈哈哈哈）&lt;/li&gt;
&lt;li&gt;分支我感觉也是很有用的一个地方（虽然我暂时还没实践过），就像就开发某个东西不想影响现在，直接拉个分支就好啦。&lt;/li&gt;
&lt;li&gt;多人协同，开元分享这些内容应该也是git大放异彩的地方&lt;/li&gt;
&lt;/ul&gt;
&lt;h1&gt;5.碎碎念&lt;/h1&gt;
&lt;p&gt;现阶段学习3具体代码都可以放放了，在agent的相关开发学习中，发现真的是这样的（感觉好像啥都会其实都是不精也好焦虑哈哈哈）&lt;/p&gt;
</content:encoded></item><item><title>[V0.1.1]评论区Demo版本</title><link>https://fuwari.vercel.app/posts/update/0010_v0_1_1/</link><guid isPermaLink="true">https://fuwari.vercel.app/posts/update/0010_v0_1_1/</guid><description>.....</description><pubDate>Tue, 28 Apr 2026 00:00:00 GMT</pubDate><content:encoded>&lt;h1&gt;V0.1.1&lt;/h1&gt;
&lt;p&gt;完成了评论区的demo版本测试，使用express+sqlite完成
做了一些基础的防护&lt;/p&gt;
&lt;h1&gt;背景页面的更改&lt;/h1&gt;
&lt;p&gt;把原本的banner换成了background，长图支持随页面转换线性变化
（虽然有些不跟手，等我完成了更重要的任我我再回来改这个）&lt;/p&gt;
&lt;h1&gt;TODO&lt;/h1&gt;
&lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;页面浏览量计数功能&lt;/li&gt;
&lt;li&gt;b站视频链接解析&lt;/li&gt;
&lt;li&gt;开发一个功能，来用百度网盘定时分享新番&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;
</content:encoded></item><item><title>强化学习环境/多臂老虎机</title><link>https://fuwari.vercel.app/posts/reinforcementlearning/environment-setup/</link><guid isPermaLink="true">https://fuwari.vercel.app/posts/reinforcementlearning/environment-setup/</guid><description>.....</description><pubDate>Mon, 20 Apr 2026 00:00:00 GMT</pubDate><content:encoded>&lt;h1&gt;前言&lt;/h1&gt;
&lt;p&gt;本博客参考学习张伟楠老师的&lt;a href=&quot;https://hrl.boyuai.com/&quot;&gt;动手学强化学习&lt;/a&gt;
代码来自相关教程，本人仅做一些注释，部分由于解释器抽风导致的警告修改，还有一些年久失修的库的替换。&lt;/p&gt;
&lt;h1&gt;多臂老虎机&lt;/h1&gt;
&lt;h2&gt;2.2.4 估计期望奖励&lt;/h2&gt;
&lt;pre&gt;&lt;code&gt;import gymnasium as gym
import numpy as np

# 初始化环境
env = gym.make(&quot;CartPole-v1&quot;)
state, _ = env.reset()
total_reward = 0

# 智能体与环境交互
for _ in range(100):
    action = env.action_space.sample()  # 随机动作
    next_state, reward, done, truncated, info = env.step(action)
    total_reward += float(reward)
    state = next_state
    if done or truncated:
        break

print(f&quot;总奖励：{total_reward}&quot;)
env.close()
&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code&gt;# 导入需要使用的库,其中numpy是支持数组和矩阵运算的科学计算库,而matplotlib是绘图库
import numpy as np
import matplotlib.pyplot as plt


class BernoulliBandit:
    &quot;&quot;&quot; 伯努利多臂老虎机,输入K表示拉杆个数 &quot;&quot;&quot;
    def __init__(self, K:int):
        self.probs = np.random.uniform(size=K)  # 随机生成K个0～1的数,作为拉动每根拉杆的获奖概率
        # 概率
        self.best_idx = np.argmax(self.probs)  # 获奖概率最大的拉杆
        self.best_prob = self.probs[self.best_idx]   # 最大的获奖概率
        self.K = K

    def step(self, k):
        # 当玩家选择了k号拉杆后,根据拉动该老虎机的k号拉杆获得奖励的概率返回1（获奖）或0（未
        # 获奖）
        if np.random.rand() &amp;lt; self.probs[k]:
            return 1
        else:
            return 0


np.random.seed(1)  # 设定随机种子,使实验具有可重复性
K = 10
bandit_10_arm = BernoulliBandit(K)
print(&quot;随机生成了一个%d臂伯努利老虎机&quot; % K)
print(&quot;获奖概率最大的拉杆为%d号,其获奖概率为%.4f&quot; %
      (bandit_10_arm.best_idx, bandit_10_arm.best_prob))
&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code&gt;class Solver:
    &quot;&quot;&quot; 多臂老虎机算法基本框架 &quot;&quot;&quot;
    def __init__(self, bandit): #bandit：BernoulliBandit 的实例
        self.bandit = bandit
        self.counts = np.zeros(self.bandit.K)  # 每根拉杆的尝试次数 
        self.regret = 0.  # 当前步的累积懊悔
        self.actions = []  # 维护一个列表,记录每一步的动作
        self.regrets = []  # 维护一个列表,记录每一步的累积懊悔

    def update_regret(self, k):
        # 计算累积懊悔并保存,k为本次动作选择的拉杆的编号
        self.regret += self.bandit.best_prob - self.bandit.probs[k]
        self.regrets.append(self.regret)

    def run_one_step(self):
        # 返回当前动作选择哪一根拉杆,由每个具体的策略实现
        raise NotImplementedError

    def run(self, num_steps):
        # 运行一定次数,num_steps为总运行次数
        for _ in range(num_steps):
            k = self.run_one_step()
            self.counts[k] += 1
            self.actions.append(k)
            self.update_regret(k)
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;2.4 ϵ-贪心算法&lt;/h2&gt;
&lt;pre&gt;&lt;code&gt;class EpsilonGreedy(Solver):
    &quot;&quot;&quot; epsilon贪婪算法,继承Solver类 &quot;&quot;&quot;
    def __init__(self, bandit, epsilon=0.01, init_prob=1.0):
        super(EpsilonGreedy, self).__init__(bandit)
        self.epsilon = epsilon
        #初始化拉动所有拉杆的期望奖励估值
        self.estimates = np.array([init_prob] * self.bandit.K)

    def run_one_step(self):
        if np.random.random() &amp;lt; self.epsilon:
            k = np.random.randint(0, self.bandit.K)  # 随机选择一根拉杆 随机抽取[0,K]的一个整数
        else:
            k = np.argmax(self.estimates)  # 选择期望奖励估值最大的拉杆
        r = self.bandit.step(k)  # 得到本次动作的奖励
        &apos;&apos;&apos;
        Q_old:self.estimates[k]
        N:self.counts[k] + 1(本次算进去后的第 N 次）
        r:这次奖励 r
        Q_new=Q_old+1/N(r-Q_old)
        &apos;&apos;&apos;
        self.estimates[k] += 1. / (self.counts[k] + 1) * (r - self.estimates[k]) 
        return k
&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code&gt;def plot_results(solvers, solver_names):
    &quot;&quot;&quot;生成累积懊悔随时间变化的图像。输入solvers是一个列表,列表中的每个元素是一种特定的策略。
    而solver_names也是一个列表,存储每个策略的名称&quot;&quot;&quot;
    for idx, solver in enumerate(solvers):
        time_list = range(len(solver.regrets))
        plt.plot(time_list, solver.regrets, label=solver_names[idx])
    plt.xlabel(&apos;Time steps&apos;)
    plt.ylabel(&apos;Cumulative regrets&apos;)
    plt.title(&apos;%d-armed bandit&apos; % solvers[0].bandit.K)
    plt.legend()
    plt.show()

np.random.seed(1)
epsilon_greedy_solver = EpsilonGreedy(bandit_10_arm, epsilon=0.01)
epsilon_greedy_solver.run(5000)
print(&apos;epsilon-贪婪算法的累积懊悔为：&apos;, epsilon_greedy_solver.regret)
plot_results([epsilon_greedy_solver], [&quot;EpsilonGreedy&quot;])
&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code&gt;np.random.seed(0)
epsilons = [1e-4, 0.01, 0.1, 0.25, 0.5]
epsilon_greedy_solver_list = [
    EpsilonGreedy(bandit_10_arm, epsilon=e) for e in epsilons
]
epsilon_greedy_solver_names = [&quot;epsilon={}&quot;.format(e) for e in epsilons]
for solver in epsilon_greedy_solver_list:
    solver.run(5000)

plot_results(epsilon_greedy_solver_list, epsilon_greedy_solver_names)
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;碎碎念：这本书是真不错，虽然我们没买实体书，但pdf，电子书都蛮好找的，而且学习官网竟然贴着现成的代码，实验课难度大大降低，而且大部分都不用改动（毕竟强化学习也比较新吧）。虽然但是吧，本人数学一坨，与数学有关的天书部分是真难搞。&lt;/p&gt;
</content:encoded></item><item><title>[V0.1.0]个人博客正式上线啦</title><link>https://fuwari.vercel.app/posts/update/v0_1_0/</link><guid isPermaLink="true">https://fuwari.vercel.app/posts/update/v0_1_0/</guid><description>.....</description><pubDate>Sat, 18 Apr 2026 00:00:00 GMT</pubDate><content:encoded>&lt;h1&gt;哈哈哈哈&lt;/h1&gt;
&lt;p&gt;本博客的demo版本源自于github的开源项目&lt;a href=&quot;https://github.com/saicaca/fuwari&quot;&gt;Fuwari&lt;/a&gt;.
云服务器采用腾讯云，还有要感谢Coedx的支持，也感谢老师给出的一条指导道路&lt;/p&gt;
&lt;h1&gt;ToDo&lt;/h1&gt;
&lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;背景滑动&lt;/li&gt;
&lt;li&gt;b站视频链接解析&lt;/li&gt;
&lt;li&gt;尝试着连载番剧&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;
</content:encoded></item><item><title>学习web的搭建</title><link>https://fuwari.vercel.app/posts/blog/20260416/</link><guid isPermaLink="true">https://fuwari.vercel.app/posts/blog/20260416/</guid><description>.....</description><pubDate>Thu, 16 Apr 2026 00:00:00 GMT</pubDate><content:encoded>&lt;h1&gt;1. Astro 官方文档（核心）&lt;/h1&gt;
&lt;ul&gt;
&lt;li&gt;总入口: https://docs.astro.build/&lt;/li&gt;
&lt;li&gt;项目结构: https://docs.astro.build/en/basics/project-structure/&lt;/li&gt;
&lt;li&gt;路由: https://docs.astro.build/en/guides/routing/&lt;/li&gt;
&lt;li&gt;内容集合（写博客最常用）: https://docs.astro.build/en/guides/content-collections/&lt;/li&gt;
&lt;li&gt;部署指南总览: https://docs.astro.build/en/guides/deploy/&lt;/li&gt;
&lt;/ul&gt;
&lt;h1&gt;2. Tailwind CSS（样式）&lt;/h1&gt;
&lt;ul&gt;
&lt;li&gt;总入口: https://tailwindcss.com/docs&lt;/li&gt;
&lt;li&gt;响应式断点: https://tailwindcss.com/docs/responsive-design&lt;/li&gt;
&lt;li&gt;状态与伪类（hover/focus/group）: https://tailwindcss.com/docs/hover-focus-and-other-states&lt;/li&gt;
&lt;/ul&gt;
&lt;h1&gt;3. Astro 生态里你项目常用库&lt;/h1&gt;
&lt;ul&gt;
&lt;li&gt;astro-icon: https://www.astroicon.dev/&lt;/li&gt;
&lt;li&gt;Iconify 图标检索: https://icon-sets.iconify.design/&lt;/li&gt;
&lt;li&gt;KaTeX（数学公式）: https://katex.org/docs/&lt;/li&gt;
&lt;li&gt;PhotoSwipe（图片灯箱）: https://photoswipe.com/&lt;/li&gt;
&lt;/ul&gt;
&lt;h1&gt;4. 部署平台官方文档（选一个主平台）&lt;/h1&gt;
&lt;ul&gt;
&lt;li&gt;Vercel + Astro: https://docs.astro.build/en/guides/deploy/vercel/&lt;/li&gt;
&lt;li&gt;Netlify + Astro: https://docs.astro.build/en/guides/deploy/netlify/&lt;/li&gt;
&lt;li&gt;Cloudflare Pages + Astro: https://docs.astro.build/en/guides/deploy/cloudflare/&lt;/li&gt;
&lt;/ul&gt;
&lt;h1&gt;5. 域名与 DNS（上线必看）&lt;/h1&gt;
&lt;ul&gt;
&lt;li&gt;Cloudflare DNS: https://developers.cloudflare.com/dns/&lt;/li&gt;
&lt;li&gt;Vercel 自定义域名: https://vercel.com/docs/domains&lt;/li&gt;
&lt;li&gt;Netlify 自定义域名: https://docs.netlify.com/domains-https/custom-domains/&lt;/li&gt;
&lt;/ul&gt;
&lt;h1&gt;6. 搜索与站点可见性（博客常用）&lt;/h1&gt;
&lt;ul&gt;
&lt;li&gt;Google Search Console: https://support.google.com/webmasters/&lt;/li&gt;
&lt;li&gt;robots.txt 说明: https://developers.google.com/search/docs/crawling-indexing/robots/intro&lt;/li&gt;
&lt;li&gt;sitemap 说明: https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview&lt;/li&gt;
&lt;/ul&gt;
</content:encoded></item><item><title>Markdown Extended Features</title><link>https://fuwari.vercel.app/posts/markdown-extended/</link><guid isPermaLink="true">https://fuwari.vercel.app/posts/markdown-extended/</guid><description>Read more about Markdown features in Fuwari</description><pubDate>Wed, 01 May 2024 00:00:00 GMT</pubDate><content:encoded>&lt;h2&gt;GitHub Repository Cards&lt;/h2&gt;
&lt;p&gt;You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.&lt;/p&gt;
&lt;p&gt;::github{repo=&quot;Fabrizz/MMM-OnSpotify&quot;}&lt;/p&gt;
&lt;p&gt;Create a GitHub repository card with the code &lt;code&gt;::github{repo=&quot;&amp;lt;owner&amp;gt;/&amp;lt;repo&amp;gt;&quot;}&lt;/code&gt;.&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;::github{repo=&quot;saicaca/fuwari&quot;}
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;Admonitions&lt;/h2&gt;
&lt;p&gt;Following types of admonitions are supported: &lt;code&gt;note&lt;/code&gt; &lt;code&gt;tip&lt;/code&gt; &lt;code&gt;important&lt;/code&gt; &lt;code&gt;warning&lt;/code&gt; &lt;code&gt;caution&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;:::note
Highlights information that users should take into account, even when skimming.
:::&lt;/p&gt;
&lt;p&gt;:::tip
Optional information to help a user be more successful.
:::&lt;/p&gt;
&lt;p&gt;:::important
Crucial information necessary for users to succeed.
:::&lt;/p&gt;
&lt;p&gt;:::warning
Critical content demanding immediate user attention due to potential risks.
:::&lt;/p&gt;
&lt;p&gt;:::caution
Negative potential consequences of an action.
:::&lt;/p&gt;
&lt;h3&gt;Basic Syntax&lt;/h3&gt;
&lt;pre&gt;&lt;code&gt;:::note
Highlights information that users should take into account, even when skimming.
:::

:::tip
Optional information to help a user be more successful.
:::
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;Custom Titles&lt;/h3&gt;
&lt;p&gt;The title of the admonition can be customized.&lt;/p&gt;
&lt;p&gt;:::note[MY CUSTOM TITLE]
This is a note with a custom title.
:::&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;:::note[MY CUSTOM TITLE]
This is a note with a custom title.
:::
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;GitHub Syntax&lt;/h3&gt;
&lt;blockquote&gt;
&lt;p&gt;[!TIP]
&lt;a href=&quot;https://github.com/orgs/community/discussions/16925&quot;&gt;The GitHub syntax&lt;/a&gt; is also supported.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;pre&gt;&lt;code&gt;&amp;gt; [!NOTE]
&amp;gt; The GitHub syntax is also supported.

&amp;gt; [!TIP]
&amp;gt; The GitHub syntax is also supported.
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;Spoiler&lt;/h3&gt;
&lt;p&gt;You can add spoilers to your text. The text also supports &lt;strong&gt;Markdown&lt;/strong&gt; syntax.&lt;/p&gt;
&lt;p&gt;The content :spoiler[is hidden &lt;strong&gt;ayyy&lt;/strong&gt;]!&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;The content :spoiler[is hidden **ayyy**]!

&lt;/code&gt;&lt;/pre&gt;
</content:encoded></item><item><title>Expressive Code Example</title><link>https://fuwari.vercel.app/posts/expressive-code/</link><guid isPermaLink="true">https://fuwari.vercel.app/posts/expressive-code/</guid><description>How code blocks look in Markdown using Expressive Code.</description><pubDate>Wed, 10 Apr 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;Here, we&apos;ll explore how code blocks look using &lt;a href=&quot;https://expressive-code.com/&quot;&gt;Expressive Code&lt;/a&gt;. The provided examples are based on the official documentation, which you can refer to for further details.&lt;/p&gt;
&lt;h2&gt;Expressive Code&lt;/h2&gt;
&lt;h3&gt;Syntax Highlighting&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://expressive-code.com/key-features/syntax-highlighting/&quot;&gt;Syntax Highlighting&lt;/a&gt;&lt;/p&gt;
&lt;h4&gt;Regular syntax highlighting&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;console.log(&apos;This code is syntax highlighted!&apos;)
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Rendering ANSI escape sequences&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;ANSI colors:
- Regular: [31mRed[0m [32mGreen[0m [33mYellow[0m [34mBlue[0m [35mMagenta[0m [36mCyan[0m
- Bold:    [1;31mRed[0m [1;32mGreen[0m [1;33mYellow[0m [1;34mBlue[0m [1;35mMagenta[0m [1;36mCyan[0m
- Dimmed:  [2;31mRed[0m [2;32mGreen[0m [2;33mYellow[0m [2;34mBlue[0m [2;35mMagenta[0m [2;36mCyan[0m

256 colors (showing colors 160-177):
[38;5;160m160 [38;5;161m161 [38;5;162m162 [38;5;163m163 [38;5;164m164 [38;5;165m165[0m
[38;5;166m166 [38;5;167m167 [38;5;168m168 [38;5;169m169 [38;5;170m170 [38;5;171m171[0m
[38;5;172m172 [38;5;173m173 [38;5;174m174 [38;5;175m175 [38;5;176m176 [38;5;177m177[0m

Full RGB colors:
[38;2;34;139;34mForestGreen - RGB(34, 139, 34)[0m

Text formatting: [1mBold[0m [2mDimmed[0m [3mItalic[0m [4mUnderline[0m
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;Editor &amp;amp; Terminal Frames&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://expressive-code.com/key-features/frames/&quot;&gt;Editor &amp;amp; Terminal Frames&lt;/a&gt;&lt;/p&gt;
&lt;h4&gt;Code editor frames&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;console.log(&apos;Title attribute example&apos;)
&lt;/code&gt;&lt;/pre&gt;
&lt;hr /&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;!-- src/content/index.html --&amp;gt;
&amp;lt;div&amp;gt;File name comment example&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Terminal frames&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;echo &quot;This terminal frame has no title&quot;
&lt;/code&gt;&lt;/pre&gt;
&lt;hr /&gt;
&lt;pre&gt;&lt;code&gt;Write-Output &quot;This one has a title!&quot;
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Overriding frame types&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;echo &quot;Look ma, no frame!&quot;
&lt;/code&gt;&lt;/pre&gt;
&lt;hr /&gt;
&lt;pre&gt;&lt;code&gt;# Without overriding, this would be a terminal frame
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;Text &amp;amp; Line Markers&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://expressive-code.com/key-features/text-markers/&quot;&gt;Text &amp;amp; Line Markers&lt;/a&gt;&lt;/p&gt;
&lt;h4&gt;Marking full lines &amp;amp; line ranges&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range &quot;7-8&quot;
// Line 8 - targeted by range &quot;7-8&quot;
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Selecting line marker types (mark, ins, del)&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;function demo() {
  console.log(&apos;this line is marked as deleted&apos;)
  // This line and the next one are marked as inserted
  console.log(&apos;this is the second inserted line&apos;)

  return &apos;this line uses the neutral default marker type&apos;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Adding labels to line markers&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;// labeled-line-markers.jsx
&amp;lt;button
  role=&quot;button&quot;
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
&amp;gt;
  {children &amp;amp;&amp;amp;
    !active &amp;amp;&amp;amp;
    (typeof children === &apos;string&apos; ? &amp;lt;span&amp;gt;{children}&amp;lt;/span&amp;gt; : children)}
&amp;lt;/button&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Adding long labels on their own lines&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;// labeled-line-markers.jsx
&amp;lt;button
  role=&quot;button&quot;
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
&amp;gt;

  {children &amp;amp;&amp;amp;
    !active &amp;amp;&amp;amp;
    (typeof children === &apos;string&apos; ? &amp;lt;span&amp;gt;{children}&amp;lt;/span&amp;gt; : children)}
&amp;lt;/button&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Using diff-like syntax&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;+this line will be marked as inserted
-this line will be marked as deleted
this is a regular line
&lt;/code&gt;&lt;/pre&gt;
&lt;hr /&gt;
&lt;pre&gt;&lt;code&gt;--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+this is an actual diff file
-all contents will remain unmodified
 no whitespace will be removed either
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Combining syntax highlighting with diff-like syntax&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;  function thisIsJavaScript() {
    // This entire block gets highlighted as JavaScript,
    // and we can still add diff markers to it!
-   console.log(&apos;Old code to be removed&apos;)
+   console.log(&apos;New and shiny code!&apos;)
  }
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Marking individual text inside lines&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;function demo() {
  // Mark any given text inside lines
  return &apos;Multiple matches of the given text are supported&apos;;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Regular expressions&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;console.log(&apos;The words yes and yep will be marked.&apos;)
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Escaping forward slashes&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;echo &quot;Test&quot; &amp;gt; /home/test.txt
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Selecting inline marker types (mark, ins, del)&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;function demo() {
  console.log(&apos;These are inserted and deleted marker types&apos;);
  // The return statement uses the default marker type
  return true;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;Word Wrap&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://expressive-code.com/key-features/word-wrap/&quot;&gt;Word Wrap&lt;/a&gt;&lt;/p&gt;
&lt;h4&gt;Configuring word wrap per block&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;// Example with wrap
function getLongString() {
  return &apos;This is a very long string that will most probably not fit into the available space unless the container is extremely wide&apos;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;hr /&gt;
&lt;pre&gt;&lt;code&gt;// Example with wrap=false
function getLongString() {
  return &apos;This is a very long string that will most probably not fit into the available space unless the container is extremely wide&apos;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Configuring indentation of wrapped lines&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;// Example with preserveIndent (enabled by default)
function getLongString() {
  return &apos;This is a very long string that will most probably not fit into the available space unless the container is extremely wide&apos;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;hr /&gt;
&lt;pre&gt;&lt;code&gt;// Example with preserveIndent=false
function getLongString() {
  return &apos;This is a very long string that will most probably not fit into the available space unless the container is extremely wide&apos;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;Collapsible Sections&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://expressive-code.com/plugins/collapsible-sections/&quot;&gt;Collapsible Sections&lt;/a&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from &apos;@example/some-boilerplate&apos;
import { evenMoreBoilerplate } from &apos;@example/even-more-boilerplate&apos;

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// This part of the code will be visible by default
engine.doSomething(1, 2, 3, calcFn)

function calcFn() {
  // You can have multiple collapsed sections
  const a = 1
  const b = 2
  const c = a + b

  // This will remain visible
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
  return c
}

// All this code until the end of the block will be collapsed again
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: &apos;End of example boilerplate code&apos; })
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;Line Numbers&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://expressive-code.com/plugins/line-numbers/&quot;&gt;Line Numbers&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;Displaying line numbers per block&lt;/h3&gt;
&lt;pre&gt;&lt;code&gt;// This code block will show line numbers
console.log(&apos;Greetings from line 2!&apos;)
console.log(&apos;I am on line 3&apos;)
&lt;/code&gt;&lt;/pre&gt;
&lt;hr /&gt;
&lt;pre&gt;&lt;code&gt;// Line numbers are disabled for this block
console.log(&apos;Hello?&apos;)
console.log(&apos;Sorry, do you know what line I am on?&apos;)
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;Changing the starting line number&lt;/h3&gt;
&lt;pre&gt;&lt;code&gt;console.log(&apos;Greetings from line 5!&apos;)
console.log(&apos;I am on line 6&apos;)
&lt;/code&gt;&lt;/pre&gt;
</content:encoded></item><item><title>Simple Guides for Fuwari</title><link>https://fuwari.vercel.app/posts/guide/</link><guid isPermaLink="true">https://fuwari.vercel.app/posts/guide/</guid><description>How to use this blog template.</description><pubDate>Mon, 01 Apr 2024 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;Cover image source: &lt;a href=&quot;https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/208fc754-890d-4adb-9753-2c963332675d/width=2048/01651-1456859105-(colour_1.5),girl,_Blue,yellow,green,cyan,purple,red,pink,_best,8k,UHD,masterpiece,male%20focus,%201boy,gloves,%20ponytail,%20long%20hair,.jpeg&quot;&gt;Source&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;This blog template is built with &lt;a href=&quot;https://astro.build/&quot;&gt;Astro&lt;/a&gt;. For the things that are not mentioned in this guide, you may find the answers in the &lt;a href=&quot;https://docs.astro.build/&quot;&gt;Astro Docs&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;Front-matter of Posts&lt;/h2&gt;
&lt;pre&gt;&lt;code&gt;---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
---
&lt;/code&gt;&lt;/pre&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Attribute&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;title&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The title of the post.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;published&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The date the post was published.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;description&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;A short description of the post. Displayed on index page.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;image&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The cover image path of the post.&amp;lt;br/&amp;gt;1. Start with &lt;code&gt;http://&lt;/code&gt; or &lt;code&gt;https://&lt;/code&gt;: Use web image&amp;lt;br/&amp;gt;2. Start with &lt;code&gt;/&lt;/code&gt;: For image in &lt;code&gt;public&lt;/code&gt; dir&amp;lt;br/&amp;gt;3. With none of the prefixes: Relative to the markdown file&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;tags&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The tags of the post.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;category&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The category of the post.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;draft&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;If this post is still a draft, which won&apos;t be displayed.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h2&gt;Where to Place the Post Files&lt;/h2&gt;
&lt;p&gt;Your post files should be placed in &lt;code&gt;src/content/posts/&lt;/code&gt; directory. You can also create sub-directories to better organize your posts and assets.&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.png
    └── index.md
&lt;/code&gt;&lt;/pre&gt;
</content:encoded></item><item><title>Markdown Example</title><link>https://fuwari.vercel.app/posts/markdown/</link><guid isPermaLink="true">https://fuwari.vercel.app/posts/markdown/</guid><description>A simple example of a Markdown blog post.</description><pubDate>Sun, 01 Oct 2023 00:00:00 GMT</pubDate><content:encoded>&lt;h1&gt;An h1 header&lt;/h1&gt;
&lt;p&gt;Paragraphs are separated by a blank line.&lt;/p&gt;
&lt;p&gt;2nd paragraph. &lt;em&gt;Italic&lt;/em&gt;, &lt;strong&gt;bold&lt;/strong&gt;, and &lt;code&gt;monospace&lt;/code&gt;. Itemized lists
look like:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;this one&lt;/li&gt;
&lt;li&gt;that one&lt;/li&gt;
&lt;li&gt;the other one&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Note that --- not considering the asterisk --- the actual text
content starts at 4-columns in.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Block quotes are
written like so.&lt;/p&gt;
&lt;p&gt;They can span multiple paragraphs,
if you like.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., &quot;it&apos;s all
in chapters 12--14&quot;). Three dots ... will be converted to an ellipsis.
Unicode is supported. ☺&lt;/p&gt;
&lt;h2&gt;An h2 header&lt;/h2&gt;
&lt;p&gt;Here&apos;s a numbered list:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;first item&lt;/li&gt;
&lt;li&gt;second item&lt;/li&gt;
&lt;li&gt;third item&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Note again how the actual text starts at 4 columns in (4 characters
from the left side). Here&apos;s a code sample:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;# Let me re-iterate ...
for i in 1 .. 10 { do-something(i) }
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;As you probably guessed, indented 4 spaces. By the way, instead of
indenting the block, you can use delimited blocks, if you like:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;define foobar() {
    print &quot;Welcome to flavor country!&quot;;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;(which makes copying &amp;amp; pasting easier). You can optionally mark the
delimited block for Pandoc to syntax highlight it:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;import time
# Quick, count to ten!
for i in range(10):
    # (but not *too* quick)
    time.sleep(0.5)
    print i
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;An h3 header&lt;/h3&gt;
&lt;p&gt;Now a nested list:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;First, get these ingredients:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;carrots&lt;/li&gt;
&lt;li&gt;celery&lt;/li&gt;
&lt;li&gt;lentils&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Boil some water.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Dump everything in the pot and follow
this algorithm:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt; find wooden spoon
 uncover pot
 stir
 cover pot
 balance wooden spoon precariously on pot handle
 wait 10 minutes
 goto first step (or shut off burner when done)
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Do not bump wooden spoon or it will fall.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Notice again how text always lines up on 4-space indents (including
that last line which continues item 3 above).&lt;/p&gt;
&lt;p&gt;Here&apos;s a link to &lt;a href=&quot;http://foo.bar&quot;&gt;a website&lt;/a&gt;, to a &lt;a href=&quot;local-doc.html&quot;&gt;local
doc&lt;/a&gt;, and to a &lt;a href=&quot;#an-h2-header&quot;&gt;section heading in the current
doc&lt;/a&gt;. Here&apos;s a footnote [^1].&lt;/p&gt;
&lt;p&gt;[^1]: Footnote text goes here.&lt;/p&gt;
&lt;p&gt;Tables can look like this:&lt;/p&gt;
&lt;p&gt;size material color&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;9 leather brown
10 hemp canvas natural
11 glass transparent&lt;/p&gt;
&lt;p&gt;Table: Shoes, their sizes, and what they&apos;re made of&lt;/p&gt;
&lt;p&gt;(The above is the caption for the table.) Pandoc also supports
multi-line tables:&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;keyword text&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;red Sunsets, apples, and
other red or reddish
things.&lt;/p&gt;
&lt;p&gt;green Leaves, grass, frogs
and other things it&apos;s
not easy being.&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;A horizontal rule follows.&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;Here&apos;s a definition list:&lt;/p&gt;
&lt;p&gt;apples
: Good for making applesauce.
oranges
: Citrus!
tomatoes
: There&apos;s no &quot;e&quot; in tomatoe.&lt;/p&gt;
&lt;p&gt;Again, text is indented 4 spaces. (Put a blank line between each
term/definition pair to spread things out more.)&lt;/p&gt;
&lt;p&gt;Here&apos;s a &quot;line block&quot;:&lt;/p&gt;
&lt;p&gt;| Line one
| Line too
| Line tree&lt;/p&gt;
&lt;p&gt;and images can be specified like so:&lt;/p&gt;
&lt;p&gt;Inline math equations go in like so: $\omega = d\phi / dt$. Display
math should get its own line and be put in in double-dollarsigns:&lt;/p&gt;
&lt;p&gt;$$I = \int \rho R^{2} dV$$&lt;/p&gt;
&lt;p&gt;$$
\begin{equation*}
\pi
=3.1415926535
;8979323846;2643383279;5028841971;6939937510;5820974944
;5923078164;0628620899;8628034825;3421170679;\ldots
\end{equation*}
$$&lt;/p&gt;
&lt;p&gt;And note that you can backslash-escape any punctuation characters
which you wish to be displayed literally, ex.: `foo`, *bar*, etc.&lt;/p&gt;
</content:encoded></item><item><title>Include Video in the Posts</title><link>https://fuwari.vercel.app/posts/video/</link><guid isPermaLink="true">https://fuwari.vercel.app/posts/video/</guid><description>This post demonstrates how to include embedded video in a blog post.</description><pubDate>Tue, 01 Aug 2023 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;---
title: Include Video in the Post
published: 2023-10-19
// ...
---

&amp;lt;iframe width=&quot;100%&quot; height=&quot;468&quot; src=&quot;https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_&quot; title=&quot;YouTube video player&quot; frameborder=&quot;0&quot; allowfullscreen&amp;gt;&amp;lt;/iframe&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;YouTube&lt;/h2&gt;
&lt;p&gt;&amp;lt;iframe width=&quot;100%&quot; height=&quot;468&quot; src=&quot;https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_&quot; title=&quot;YouTube video player&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&quot; allowfullscreen&amp;gt;&amp;lt;/iframe&amp;gt;&lt;/p&gt;
&lt;h2&gt;Bilibili&lt;/h2&gt;
&lt;p&gt;&amp;lt;iframe width=&quot;100%&quot; height=&quot;468&quot; src=&quot;//player.bilibili.com/player.html?bvid=BV1fK4y1s7Qf&amp;amp;p=1&quot; scrolling=&quot;no&quot; border=&quot;0&quot; frameborder=&quot;no&quot; framespacing=&quot;0&quot; allowfullscreen=&quot;true&quot;&amp;gt; &amp;lt;/iframe&amp;gt;&lt;/p&gt;
</content:encoded></item></channel></rss>