Yukari0201's Blog

为个人博客添加 Giscus 评论系统（二）

Sun, 31 Aug 2025 00:00:00 GMT

前言

本人最近将博客从 Hexo + NexT 迁移到了 Astro + Fuwari，期间评论系统的迁移花费了一番功夫，故写此文。

同我那篇为个人博客添加 Giscus 评论系统一样，本文只会教你如何在 Astro + Fuwari 下使用 Astro 评论系统，高级用法请各位参考官方文档：https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md

你需要准备的

首先，也是前提，一个爱折腾的心
一个顺畅的网络环境
一个 Astro + Fuwari 的博客
- 如果你没有，请参考：https://github.com/saicaca/fuwari/tree/main?tab=readme-ov-file#-getting-started
一个 GitHub 仓库
... 好像就这么多（？

让我们开始叭

为 Github 仓库安装 Giscus app

[!WARNING] 请参考我在 Hexo + NexT 时的配置步骤

这一步没什么好说的，完全一样，故不再赘述

为 Astro + Fuwari 博客添加 Giscus 评论系统

[!NOTE] 此部分内容大多复制自 Fuwari 官方仓库的 comments 分支和 GitHUb@hikaru-im 的 Fork 的 comments 分支
特此鸣谢

碎碎念：
Fuwari 官方 comments 分支的 Giscus 样式不是很好看，所以我选用了 PR #405 的 Fork 版本
如果你之前使用的是官方仓库的 comments 分支，可能会感觉有点不同

首先，在你的博客根目录执行如下命令

pnpm install @giscus/svelte

然后，下载此仓库 comments 分支的文件（切换分支并点击 Code 按钮，然后点击 Download ZIP 即可），并解压到你能找的的目录

::github{repo="hikaru-im/akari"}

接下来，复制下列文件到你的博客的对应位置

akari-comments/
└── src/
    ├── components/
    │   └── comment/
    │       ├── Giscus.svelte
    │       └── index.astro
    └── styles/
        ├── giscus-base.css
        ├── giscus-dark.css
        └── giscus-light.css

并更改 /src/components/comment/index.astro 最后几行的内容为：

let commentService = "";
if (commentConfig?.giscus) {
	commentService = "giscus";
}
---
<div class="card-base p-6 mb-4">
  {commentService === 'giscus' && <Giscus client:only="svelte" />}
  {commentService === '' && null}
</div>

然后，更改一些文件，让评论系统显示

你可以参考这两个链接：

https://github.com/saicaca/fuwari/compare/main...comments
https://github.com/saicaca/fuwari/compare/comments...hikaru-im:akari:comments

当然，为了各位着想，我也会列出具体需要修改的文件

/tsconfig.json
在 "paths" 中添加："@styles/*": ["src/styles/*"],

    "paths": {
      "@components/*": ["src/components/*"],
      "@assets/*": ["src/assets/*"],
      "@constants/*": ["src/constants/*"],
      "@utils/*": ["src/utils/*"],
      "@i18n/*": ["src/i18n/*"],
      "@layouts/*": ["src/layouts/*"],
      "@styles/*": ["src/styles/*"],
      "@/*": ["src/*"]
    }

[!WARNING] 注意：// 开头的是注释，无需添加！

src/pages/posts/[...slug].astro
开头 --- 之后添加：

import Comment from "@components/comment/index.astro";

最后一个 <div> 前添加：

    <Comment post={entry}></Comment>

/src/types/config.ts

// 开头添加
import type * as Giscus from "@giscus/svelte";

// 末尾添加
export type CommentConfig = {
	giscus?: GiscusConfig;
};

type GiscusConfig = {
	repo: Giscus.Repo;
	host?: string;
	repoId: string;
	category: string;
	categoryId: string;
	mapping?: Giscus.Mapping;
	term?: string;
	strict?: Giscus.BooleanString;
	reactionsEnabled?: Giscus.BooleanString;
	emitMetadata?: Giscus.BooleanString;
	inputPosition?: Giscus.InputPosition;
	theme?: Giscus.Theme;
	lang?: Giscus.AvailableLanguage;
	loading?: Giscus.Loading;
};

配置：
/src/config.ts

// 开头更改（只需要添加 CommentConfig, 即可）
import type {
	CommentConfig,
	ExpressiveCodeConfig,
	LicenseConfig,
	NavBarConfig,
	ProfileConfig,
	SiteConfig,
} from "./types/config";

// 末尾添加并更改
// 你应该参考 https://giscus.app/ 生成的配置进行修改
export const commentConfig: CommentConfig = {
	giscus: {
		repo: "Yukari0201/Yukari0201.github.io",
		repoId: "R_kgDOK3p0uA",
		category: "Announcements",
		categoryId: "DIC_kwDOK3p0uM4CjDgc",
		mapping: "pathname",
		strict: "0",
		reactionsEnabled: "1",
		emitMetadata: "1",
		inputPosition: "top",
		theme: "reactive",
		lang: "zh-CN",
		loading: "lazy",
	},
};

这一步，你需要访问 https://giscus.app/ ，根据网站生成的配置自行修改，具体步骤相信各位都能看懂，我就直接复制了（懒

访问 https://giscus.app ，在 仓库： 部分输入 <你的 Github 用户名>/<你存储评论的仓库名>
并在 Discussion 分类 部分选择一个 Discussion 分类（推荐 Announcements 分类，以确保新 discussion 只能由仓库维护者和 giscus 创建）
~~提示：在 主题 部分可以选择评论系统的配色方案，对于 NexT 的深色主题，我推荐 noborder_gray~~
对于本文或 GitHUb@hikaru-im 的 Fork 的 comments 分支，此步是不必要的

`启用 giscus` 中 `<script>` 的属性	对应在 `/src/config.ts` 中的配置项
`data-repo`	`repo`
`data-repo-id`	`repoId`
`data-category`	`category`
`data-category-id`	`categoryId`

需要自行修改的就以上这些，最多再添加一个 lang

[!NOTE] 如果你使用本文或 GitHUb@hikaru-im 的 Fork 的 comments 分支，请将 theme 设置为 reactive 以契合主题

大功告成！

你可以运行如下命令来测试一下：

pnpm run dev

点进文章界面，滑到最底下，应该就可以看到评论框了

确认无误后，即可部署了

碎碎念

你可以在 https://github.com/Yukari0201/Yukari0201.github.io 看到我的博客的所有源码，所以，放心评论叭

~~博客评论系统换了一套，结果还是没有人发评论（~~
~~博客都迁移了一套，结果还是几乎没有人发评论（~~

我的新博客！

Wed, 27 Aug 2025 00:00:00 GMT

昨天和今天，我将我的博客从 Hexo + NexT 迁移到 Astro + Fuwari.

之后会慢慢将文章也都迁移过来。

各位敬请期待啦！

为 mpv 播放器添加长按倍速功能

Thu, 22 May 2025 00:00:00 GMT

观前提醒

本教程依赖于 inputevent.lua
::github{repo="natural-harmonia-gropius/input-event"}

让我们开始叭

“安装”inputevent.lua

访问 input-event 项目地址，下载 inputevent.lua，并将此文件放在你的 mpv 配置文件夹的 scripts 目录中

Windows 用户的 mpv 配置文件夹的路径一般为 %APPDATA%\mpv 或 mpv.exe 同路径的 portable_config

Linux & macOS 用户的 mpv 配置文件夹的路径一般为 ~/.config/mpv

最终你的 mpv 配置文件夹的内容应该类似于下面所示：

~/.config/mpv/ 或 %APPDATA%\mpv\ 或 portable_config\
├── script-opts/
│   └── xxx.conf - (你的脚本的配置文件)
├── scripts/
│   ├── xxx.lua - (你的其他脚本)
│   └── inputevent.lua
├── shaders/
│   └── xxx.glsl - (你的着色器)
├── input.conf
└── mpv.conf

配置 input.conf

在你的 input.conf 中写入下面几行，并保存

# 长按右方向键倍速播放，释放恢复
RIGHT seek 5                            #event: click
RIGHT no-osd set speed 2                #event: press
RIGHT ignore                            #event: release

:::note[(推荐) 配置 mpv.conf]

推荐在你的 mpv.conf 中写入如下配置

input-doubleclick-time=200

原因参见：
https://github.com/natural-harmonia-gropius/input-event?tab=readme-ov-file#how-to-use

:::

这样就可以长按 右方向键 实现2倍速播放视频啦～

同时，单击 右方向键 仍旧是 mpv 默认的快进5秒，并没有影响到默认快捷键

完结撒花~

结束后还要说的事情

inputevent.lua 脚本是对 mpv 的 input.conf 做了增强，不仅能实现本文所讲的功能，还能自由搭配，实现更多功能，详情请参考官方文档：
https://github.com/natural-harmonia-gropius/input-event?tab=readme-ov-file

我期待各位配置出独一无二只属于你自己的快捷键，到时候别忘了分享一下哦～

一点私货（逃～

我的 mpv 自用配置：https://github.com/Yukari0201/mpv-config

为个人博客添加 Giscus 评论系统

Sat, 05 Apr 2025 00:00:00 GMT

[!WARNING] 本人已经将博客从 Hexo + NexT 迁移到 Astro + Fuwari，故本文不再更新。

前言

本人最近将博客的评论系统由 Utterances 迁到了 Giscus，故写此文，作为备忘，同时也是分享。

本文只会简单介绍 giscus 在 Hexo + NexT 主题下的配置，更多高级用法请各位参考官方文档：https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md

让我们开始叭

为 Github 仓库安装 Giscus app

访问 https://github.com/apps/giscus ，将 giscus app 安装到你想要存储评论的仓库中

Giscus 是基于 GitHub Discussions API 的评论系统，所以别忘了 为此仓库开启 GitHub Discussions 哦～

为 Hexo + NexT 博客安装 giscus

在你的博客目录下打开命令行，执行以下命令：

npm install hexo-next-giscus

然后，复制 hexo-next-giscus 项目 Readme 中 Configure 部分的代码块到你的 _config.next.yml 中

giscus:
  enable: false
  repo: # Github repository name
  repo_id: # Github repository id
  category: # Github discussion category
  category_id: # Github discussion category id
  # Available values: pathname | url | title | og:title
  mapping: pathname
  # Available values: 0 | 1
  reactions_enabled: 1
  # Available values: 0 | 1
  emit_metadata: 1
  # Available values: light | light_high_contrast | light_protanopia | light_tritanopia | dark | dark_high_contrast | dark_protanopia | dark_tritanopia | dark_dimmed | preferred_color_scheme | transparent_dark | noborder_light | noborder_dark | noborder_gray | cobalt | purple_dark
  theme: light
  # Available values: en | zh-CN
  lang: en
  # Place the comment box above the comments
  input_position: bottom
  # Load the comments lazily
  loading: lazy

并在 _config.next.yml 中设置 comments.active 为 giscus

# Multiple Comment System Support
comments:
  # Choose a comment system to be displayed by default.
  active: giscus

配置 Giscus

访问 https://giscus.app ，在 仓库： 部分输入 <你的 Github 用户名>/<你存储评论的仓库名>
并在 Discussion 分类 部分选择一个 Discussion 分类（推荐 Announcements 分类，以确保新 discussion 只能由仓库维护者和 giscus 创建）
提示：在 主题 部分可以选择评论系统的配色方案，对于 NexT 的深色主题，我推荐 noborder_gray

最后，下滑至 启用 giscus 部分，复制下表中提到的内容至 _config.next.yml 中

`启用 giscus` 中 `<script>` 的属性	对应在 `_config.next.yml` 中的配置项	`_config.next.yml` 中的注释
`data-repo`	`repo`	Github repository name
`data-repo-id`	`repo_id`	Github repository id
`data-category`	`category`	Github discussion category
`data-category-id`	`category_id`	Github discussion category id
`data-theme`	`theme`

比如：我的 _config.next.yml 中 giscus 部分是这样：

giscus:
  enable: true
  repo: Yukari0201/yukari0201.github.io # Github repository name
  repo_id: R_kgDOK3p0uA # Github repository id
  category: Announcements # Github discussion category
  category_id: DIC_kwDOK3p0uM4CjDgc # Github discussion category id
  # Available values: pathname | url | title | og:title
  mapping: pathname
  # Available values: 0 | 1
  reactions_enabled: 1
  # Available values: 0 | 1
  emit_metadata: 1
  # Available values: light | light_high_contrast | light_protanopia | light_tritanopia | dark | dark_high_contrast | dark_protanopia | dark_tritanopia | dark_dimmed | preferred_color_scheme | transparent_dark | noborder_light | noborder_dark | noborder_gray | cobalt | purple_dark
  theme: noborder_gray
  # Available values: en | zh-CN
  lang: zh-CN
  # Place the comment box above the comments
  input_position: bottom
  # Load the comments lazily
  loading: lazy

大功告成！

你可以运行如下命令来测试一下：

hexo clean
hexo server

点进文章界面，滑到最底下，应该就可以看到评论框了

确认无误后，即可部署了

对于一键部署的博客来说，只需要运行 hexo generate -d 即可
对于使用 GitHub Actions 来部署的博客来说（比如我的博客），只需要提交(commit)并推送(push)即可

(补充) 从 Utterances/Gitalk 迁到 Giscus

请参考：
https://docs.github.com/en/discussions/managing-discussions-for-your-community/moderating-discussions#converting-an-issue-to-a-discussion

将已有的 Issue 转换为 Discussion 即可，这样就可以继承已有的评论，实现几乎无缝迁移

碎碎念

你可以在 https://github.com/Yukari0201/Yukari0201.github.io 看到我的博客的所有源码，所以，放心评论叭

~~博客评论系统换了一套，结果还是没有人发评论（~~

优化 mpv 播放器的在线视频体验

Sat, 08 Feb 2025 00:00:00 GMT

开始之前的一点私货（逃

我的 mpv 自用配置： ::github{repo="Yukari0201/mpv-config"}

联系阅读： [Tip]使用yt-dlp增强mpv player流媒体解析能力&解锁登陆用户分辨率

观前提醒(消歧义)

本篇所讲的播放在线视频的方案为 mpv + yt-dlp，

而非 ff2mpv、Play-With-MPV、使用 MPV 播放 + mpv-handler 这样的扩展/脚本方案

提到的扩展/脚本：

ff2mpv https://github.com/woodruffw/ff2mpv
Play-With-MPV https://greasyfork.org/zh-CN/scripts/444056-play-with-mpv
使用 MPV 播放（需配合 mpv-handler 使用） https://greasyfork.org/zh-CN/scripts/416271-play-with-mpv

mpv 播放器如何播放在线视频
- 直接拖放链接
- 使用内置控制台脚本(console.lua)
- 命令行用法
缓存(cache)配置
内置的 ytdl_hook 脚本相关
- 前提条件
- ytdl_hook 脚本配置
  - 常规选项部分
  - --ytdl-raw-options 部分
  - script-opts/ytdl_hook.conf 部分(--script-opts 部分)
代理相关
- [推荐] 在 mpv.conf 中设置代理
- 通过环境变量 http_proxy 来设置代理
(补充) 脚本 mpv-quality-menu 的使用介绍
(补充) 优化 Bilibili 视频的观看体验
- [推荐] 使用 bilibiliAssert 脚本

mpv 播放器如何播放在线视频

直接拖放链接

将在线视频链接从浏览器地址栏拖到 mpv 播放窗口中即可开始播放。

视频演示：【软件分享】开源的全平台视频播放器MPV 使用教程 p02 的演示

感谢：Bilibili@FinnR

使用内置控制台脚本(console.lua)

联系阅读：[Tip]使用mpv自带控制台脚本console.lua执行输入命令

打开 mpv 播放器，使用快捷键 <code>`</code> 打开内置 console
然后输入 loadfile <视频链接>，并回车，例如：

loadfile https://www.bilibili.com/video/BV1qM4y1w716/

注意：视频链接中不能有特殊字符，如果有，请将视频链接用半角引号("" 或 '')包裹起来

命令行用法

前提条件：你已经将 mpv 的路径添加到了环境变量 PATH 中

然后命令行输入 mpv <视频链接>，并回车，例如：

mpv https://www.bilibili.com/video/BV1qM4y1w716/

注意：视频链接中不能有特殊字符，如果有，请将视频链接用半角引号("" 或 '')包裹起来

缓存(cache)配置

mpv 播放器的缓存(cache)用来提前读取数据，提供更流畅的播放体验，避免播放过程中的卡顿或跳帧（常见原因：网络波动、磁盘延迟）

相关选项参见官方手册：
https://mpv.io/manual/master/#cache
https://mpv.io/manual/master/#demuxer

我挑出了几个比较有用的选项，并更改为适用于大部分场景的配置，你可以参考一下

# 根据视频是否为是为网络链接来决定是否启用缓存。
# 即：对网络视频启用缓存，对本地视频不启用缓存
cache=auto
# 可选值 <yes|no|auto>(默认auto)

# 将缓存写入内存
cache-on-disk=no
# 可选值 <yes|no>(默认yes)
# yes - 将将缓存写入一个磁盘上的临时文件
# no - 将缓存写入内存

# 最大向后缓存大小(默认 150MiB)
demuxer-max-bytes=150MiB
# 最大允许保留的已播放的内容的数据大小(默认 50MiB)
demuxer-max-back-bytes=50MiB

# 设置10秒缓存滞后时间，可以节省功耗(默认值 0, 即禁用缓存滞后)
demuxer-hysteresis-secs=10
# 官方手册说设置为 10 对大部分情况都有用
# 此选项的意思是：
# 达到 --demuxer-max-bytes 的限制后，直到缓存中剩下多少秒时才重新开始缓冲  
# 这可以显著节省功耗（不启用时，会不停缓冲；启用时，会将视频分成好几段缓冲）

注意: --demuxer-max-back-bytes 和向前缓存不尽相同。
文字解释起来有点麻烦，我放张图吧...

内置的 ytdl_hook 脚本相关

mpv 可以调用 yt-dlp 来增强网络视频播放能力，这依赖内置脚本 ytdl_hook.lua

前提条件

"安装" yt-dlp

Windows 用户：
去 yt-dlp 官方 Github Releases 下载 yt-dlp.exe，将 yt-dlp.exe 放入 mpv.exe 的同路径下或系统 PATH 中
yt-dlp 官方 Github Releases: https://github.com/yt-dlp/yt-dlp/releases

Linux 用户：
常见的发行版通过包管理器安装即可
例如 Arch Linux

sudo pacman -S yt-dlp

其他建议直接看 yt-dlp 的 Wiki：https://github.com/yt-dlp/yt-dlp/wiki/Installation

ytdl_hook 脚本配置

常规选项部分

参见: https://mpv.io/manual/master/#options-ytdl

# 启用内置的 ytdl_hook 脚本
ytdl=yes
# 可选值 <yes|no>(默认值: yes)

# 设置直接传递给 youtube-dl 的视频格式/质量，示例即为默认值
ytdl-format=bestvideo+bestaudio/best
# 这部分怎么写应该查看 yt-dlp 的文档
# https://github.com/yt-dlp/yt-dlp#format-selection

默认的配置已经足够使用，非必要不建议更改

`--ytdl-raw-options` 部分

参见: https://mpv.io/manual/master/#options-ytdl-raw-options

--ytdl-raw-options 用于将自定义选项传递给 yt-dlp，可用选项参见: https://github.com/yt-dlp/yt-dlp#usage-and-options
选项应为选项参数键值成对的方式传递(<key>=<value>)，没有参数的选项后面必须加上等号 =
多个键值对之间用半角逗号 , 隔开，例如：

ytdl-raw-options=write-subs=,force-ipv6=,sub-langs=[zh,en]

实际使用时，更推荐使用多个 --ytdl-raw-options-append，例如上面的选项也可以写为：

ytdl-raw-options-append=write-subs=
ytdl-raw-options-append=force-ipv6=
ytdl-raw-options-append=sub-langs=zh,en

我挑出了几个比较有用的选项，列在下面：
注意：不要乱加空格美化

# 从浏览器导入 cookies，解锁已登录账户的分辨率
ytdl-raw-options-append=cookies-from-browser=firefox
# 示例为导入 Firefox 的 cookies
# 你可以将 firefox 换成你正在使用的其它浏览器名，支持 brave, chrome, chromium, edge, firefox, opera, safari, vivaldi

# 也可以导入文件的 cookies，只支持绝对路径
#ytdl-raw-options-append=cookies=cookies.txt

# 如果URL同时指向视频和播放列表（例如B站分p视频），解析为播放列表
ytdl-raw-options-append=yes-playlist=

# 解析字幕
ytdl-raw-options-append=write-subs=

# 限制选择字幕语言
ytdl-raw-options-append=sub-langs=all
# sub-langs=all 表示选择所有字幕
# 你可以使用正则表达式来限制选择字幕语言，例如：
#ytdl-raw-options-append=sub-langs=ai.*,zh.*,en.*,ja.*

[Tips] 你可以命令行运行如下命令导出 Firefox 浏览器的 cookies 为 cookies.txt，其他浏览器也同理

yt-dlp --cookies cookies.txt --cookies-from-browser firefox

`script-opts/ytdl_hook.conf` 部分(`--script-opts` 部分)

mpv 实际上是通过内置的 ytdk_hook 脚本调用 yt-dlp 的，所以类似于其他脚本，它也可以通过在 mpv 设置文件夹的 script-opts 文件夹中新建一个 ytdl_hook.conf 来设置脚本选项

注意：ytdl_hook.conf 文件的编码应为 UTF-8，换行应为 LF(Unix)

所有可用的选项看官方手册：https://mpv.io/manual/master/#options-ytdl

大部分情况下，默认的配置已经足够使用，非必要不建议更改

代理相关

听不懂请直接跳过

部分代理软件支持 Tun 方式或 TProxy/Redirect 方式设置透明代理，如果你正在使用，可以跳过此部分

由于 mpv 不会使用系统代理设置，所以如果想要播放某些地域限制的 URL，需要手动设置代理

以下两种方式选择其中一种即可

[推荐] 在 `mpv.conf` 中设置代理

参见:
https://mpv.io/manual/master/#options-http-proxy
https://mpv.io/manual/master/#options-ytdl-raw-options

# 你应该将下面的 http://127.0.0.1:3128 自行更改为你的代理地址
# 我只不过是将官方文档的示例照抄过来了而已

# 让 mpv 使用 http(s) 代理
http-proxy=http://127.0.0.1:3128
# 让 yt-dlp 使用 http(s) 代理
ytdl-raw-options-append=proxy=http://127.0.0.1:3128
# 虽然 yt-dlp 支持 socks，但由于此选项的值会被传递给 mpv，所以还是只能使用 http 代理

通过环境变量 `http_proxy` 来设置代理

参见: https://mpv.io/manual/master/#environment-variables-http-proxy

经我测试，yt-dlp 也会使用此环境变量设置的代理，所以不必再在 mpv.conf 中作其他设置

将环境变量 http_proxy 的值自行设置为你的代理地址即可，只支持 http 类型的代理，例如 http://127.0.0.1:3128

具体设置方式:

Linux: 请参考 ArchWiki 或 Arch Linux 中文维基
Windwos: TODO

(补充) 脚本 mpv-quality-menu 的使用介绍

脚本 mpv-quality-menu 的功能：让你可以在播放在线视频时更改在线音视频流质量。

介绍完功能，那么接下来就该介绍如何使用了：

访问 mpv-quality-menu 的 Github Releases，下载 quality-menu.lua，并将其放入 <你的mpv配置文件夹>\scripts\

然后编辑 input.conf，写入如下两行：

F     script-binding quality_menu/video_formats_toggle
Alt+f script-binding quality_menu/audio_formats_toggle

意为：按大写F 选择视频流质量，按 Alt+f 选择音频流质量。
你也可以更改为你喜欢的快捷键。

如果想更改脚本设置，请将 Github Releases 部分的 quality-menu.conf 也一并下载下来，放入 <你的mpv配置文件夹>\scripts-opts\，并参考注释自行更改其中的选项。
注意：quality-menu.conf 文件的编码应为 UTF-8，换行应为 LF(Unix)

最终你的 mpv 配置文件夹结构应该类似于下面这样

~/.config/mpv/ 或 portable_config/
├── script-opts/
│   ├── quality-menu.conf
│   └── *.conf (你的脚本的配置文件)
├── scripts/
│   ├── quality-menu.lua
│   └── *.lua (你的其他脚本)
├── shaders/
│   └── *.glsl (你的着色器)
├── input.conf
└── mpv.conf

(补充) 优化 Bilibili 视频的观看体验

在读完上述部分后，各位读者可能会遇到一个问题，当 mpv.conf 文件中存在如下部分时，如果播放B站视频，会多出一个 slang(字幕语言) 为 danmaku 的字幕，切换至此字幕会导致卡死

# 限制选择字幕语言
ytdl-raw-options-append=sub-langs=all
# sub-langs=all 表示选择所有字幕

例如下图中，如果切换至 danmaku 字幕，mpv 播放器画面会卡死

原因：danmaku 是 xml 格式的 B站弹幕，mpv 无法正常渲染，所以切换过去会卡死

解决方案有两种，先说最简单的一种：
将上面的内容改为：

# 限制选择字幕语言
ytdl-raw-options-append=sub-langs=all,-danmaku
# sub-langs=all,-danmaku 表示选择所有字幕，并排除 danmaku 字幕

此时字幕列表中便不会有 danmaku 字幕，比如下图：

[推荐] 使用 bilibiliAssert 脚本

如果你想看到 B站的弹幕，那么可以使用 MPV-Play-BiliBili-Comments(bilibiliAssert) 脚本，即第二种解决方案

使用方式：
访问 MPV-Play-BiliBili-Comments 的 Github 项目地址，点击右侧的绿色的 Code，然后点击 Download ZIP 下载项目源码(下载下的文件名一般为 MPV-Play-BiliBili-Comments-main.zip)
然后解压压缩文件，并将里面的 bilibiliAssert 文件夹解压至 <你的 mpv 配置文件夹>\scripts\

Windows 用户：如果你的系统中安装了 Python，并且将 Python 添加到了环境变量 PATH 中，那么可以删除掉 Danmu2Ass.exe
Linux & macOS 用户：必须安装 Python，可以且建议删除掉 Danmu2Ass.exe

最终你的 mpv 配置文件夹应该类似于下面这样

~/.config/mpv/ 或 portable_config/
├── script-opts/
│   └── *.conf (你的脚本的配置文件)
├── scripts/
│   ├── bilibiliAssert/
│   │   ├── Danmu2Ass.exe
│   │   ├── Danmu2Ass.py
│   │   └── main.lua
│   └── *.lua (你的其他脚本)
├── shaders/
│   └── *.glsl (你的着色器)
├── input.conf
└── mpv.conf

如果需要定制化弹幕样式，请自行查看项目 Readme

MPC-BE/HC + MPCVR 使用教程

Sun, 05 Jan 2025 00:00:00 GMT

观前声明

本人将主力播放器换成了 mpv 已经有很长一段时间了，所以本篇教程的更新或许不会那么及时。
我的 mpv 自用配置：https://github.com/Yukari0201/mpv-config

本教程基于 Windows11 编写，兼容 Windows10 (x64)。
32位或更低版本的 Windows 不保证兼容。

由于个人更喜欢使用 MPC-BE ，所以本教程更侧重于 MPC-BE + MPCVR，但也会给出 MPC-HC 的推荐设置。

由于我 scoop 用入魔了，所以增加了一些 scoop 相关的内容。不明白请直接跳过。

兵欲善其事，必先利其器 -- 安装各播放器组件
- 安装 MPC-BE + MPCVR
- 安装 MPC-HC + MPCVR
- 写给 scoop 用户：
  - 用 scoop 安装 MPC-BE + MPCVR
  - 用 scoop 安装 MPC-HC + MPCVR
简单调教 MPC-BE / MPC-HC
- 简单调教 MPC-BE
  - 音频部分
  - 视频部分
  - 杂项
- 简单调教 MPC-HC
  - 音频部分
  - 视频部分
  - 杂项
MPCVR 推荐设置
完结撒花 ✿ヽ(°▽°)ノ✿
- TODOs
- 一些有用的教程指路

兵欲善其事，必先利其器——安装各播放器组件

MPC-BE 和 MPC-HC 根据个人喜好二选一即可。

安装 MPC-BE + MPCVR

安装 MPC-BE

去 MPC-BE 的 Github Releases 或 Source Forge 下载最新版本的安装包（名称类似 MPC-BE.<版本号>.x64-installer.zip），解压并运行安装程序
安装程序有简体中文，大多数选项我相信各位都能看懂，所以我只提一点：
在 选择组件 这一步请全部勾选，或者至少勾选 MPC Video Renderer <版本号>，这样就把 MPCVR 也顺带安装好了（同时请跳过本文的 安装 MPC Video Renderer 部分）。

安装 MPC Video Renderer

如果你在 MPC-BE 的安装过程中，选择组件 这一步勾选了 MPC Video Renderer <版本号>，那么请跳过此部分。

去 MPCVR 的 Github Releases 下载最新版本的 MPCVR（名称类似 MpcVideoRenderer-<版本号>.zip），将其解压至一个你不会去删除的路径中，然后点击 Install_MPCVR_64.cmd -> 鼠标右键 -> 以管理员身份运行。

安装 MPC-HC + MPCVR

安装 MPC-HC

MPC-HC 的官方版本早已停更，现在是由 clsid2 进行维护。

去 MPC-HC 的 Github Releases 下载最新版本的安装包（名称类似 MPC-HC.<版本号>.x64.exe ），解压并运行安装程序
安装程序有简体中文，大多数选项我相信各位都能看懂，所以我也是只提一点：在 选择组件 这一步请保持默认选项（即勾选全部组件）。

安装 MPC Video Renderer

MPC-HC 的默认安装选项已集成 MPCVR，无须另行安装。

写给 scoop 用户：

用 scoop 安装 MPC-BE + MPCVR

scoop bucket add extras
scoop install mpc-be

scoop bucket add Yukari0201 https://github.com/Yukari0201/scoop-bucket
sudo scoop install Yukari0201/mpcvr

[!NOTE] mpcvr 需要使用管理员权限来安装，所以：
你可能需要启用 sudo（Windows11 24H2 及以后）
或安装 sudo（Windows10 及 Windows11 24H2 以前的版本）scoop install sudo

用 scoop 安装 MPC-HC + MPCVR

scoop bucket add extras
scoop install mpc-hc-fork

便携版本的 MPC-HC 也已集成 MPCVR，无须另行安装。

简单调教 MPC-BE / MPC-HC

简单调教 MPC-BE

点击 鼠标右键 -> 选项 或 查看 -> 选项 进入设置

Tips：更改完别忘了点击右下角的 应用(A) 哦~

音频部分

大部分选项无须更改

音频 -> 音频渲染器 -> 0. MPC Audio Renderer(即默认选项)

音频 -> 声音处理 -> 声道合成 -> 混合声道至 -> <根据你的设备更改>(其中，立体声 即 双声道)
注意：不要勾选 要求解码器输出 2.0 立体声

内置滤镜 -> 音频解码器 -> 音频解码器设置 -> 直通 (S/PDIF、HDMI) -> 部分勾选 你的设备支持的格式
注意：此部分选项只有拥有高端的音频设备(独立声卡/外置DAC)且需要直通某些格式的音频的用户才需要更改，一般用户无须更改

视频部分

视频 -> 视频渲染器 -> 改为 MPC 渲染器

内置滤镜 -> 视频解码器 -> 视频解码器设置

输出格式 -> 不勾选 转换为RGB (即保持默认)
硬件加速 -> 首选解码器
- 如果你使用 MPCVR 或 madVR，保持默认的 D3D11, DXVA2 即可
  - 选项的意思是，首先尝试使用 D3D11 (Native) 硬件解码，失败（例如其他不兼容 D3D11 (Native) 的视频渲染器，像是 EVR）则使用 DXVA2 (Native) 硬件解码
- Nvidia 显卡（除了 MX 系列）的用户也可以选择N卡专用的 NVDEC (Nvidia only)，可以多硬解一些格式
- Nvidia MX 系列显卡由于被老黄阉割了视频编解码单元，建议选择 D3D11cb 或 D3D12cb，并在 显卡选择 部分选择你的 核显
  - D3D12cb(D3D12 copy-back) 比 D3D11cb(D3D11 copy-back) 更新，但在极端场景下才能感知到两者的性能差距。
- 不推荐 选择 DXVA2(DXVA2 Native)，它在部分情况下会出现画质损失

杂项

记忆文件的播放位置 --- 播放器 -> 历史 -> 记住文件位置
在进度条上显示章节标记 --- 播放器 -> 界面 -> 显示章节标记
鼠标指向进度条时显示视频缩略图 --- 播放器 -> 界面 -> 搜索时显示预览
开始播放后自动改变窗口大小 --- 播放器 -> 窗口尺寸 -> 开始播放后 -> 按照视频大小缩放 (建议 100%)
自动播放播放列表中的下一个视频 --- 回放 -> 打开设置 -> 额外添加到播放列表 (建议 文件夹中的所有文件)
更改字幕最大渲染分辨率(避免出现字幕很糊的情况) --- -> 字幕 -> 渲染 -> 纹理设置(......) -> 最大纹理分辨率 (建议改为 自身屏幕分辨率 / 1920x1080 或许也已够用)

简单调教 MPC-HC

点击 鼠标右键 -> 选项 或 查看 -> 选项 进入设置

Tips：更改完别忘了点击右下角的 应用(A) 哦~

音频部分

回放 -> 输出 -> 音频渲染器 -> 选择 MPC 音频渲染器

MPC-HC 还有一个 SaneAR 音频渲染器 可用，但我不熟，所以暂时还是推荐使用和 MPC-BE 一样的 MPC 音频渲染器

内部滤镜 -> 内部 LAV Filters 设置 -> 音频解码器

Mixing 选项页：

Mixer -> 勾选 Enable Mixing
Mixer -> Output Spesker Cofiguration -> <根据你的设备更改>（其中 Stereo 即为 双声道/立体声）
Settings -> Don't mix Stereo sources(双声道/立体声用户请勾选)
Settings -> Clipping Protectiom(如果音频设备不是太差，建议取消勾选)

Audio Settings 选项页：
注意：此部分选项只有拥有高端的音频设备(独立声卡/外置DAC)且需要直通某些格式的音频的用户才需要更改，一般用户无须更改

Bitstreaming(S/PDIF,HDMI) -> Formats 勾选 你的设备支持的格式
如果不清楚自己的设备支持的格式，可以在 Bitstreaming(S/PDIF,HDMI) -> Options -> 勾选 Fallback to PCM if Bitstreaming is not supported，该选项的意思是不支持直通的格式交给LAV解码。

视频部分

回放 -> 输出 -> DirectShow 视频 -> 选择 MPC 视频渲染器

内部滤镜 -> 内部 LAV Filters 设置 -> 视频解码器

Hardware Acceleration -> Hardware Decoder to use:
- 如果你使用 MPCVR 或 madVR，请选择 D3D11，且不要在下方的 Hardware Device to Use 部分选择显卡，保持默认的 Automatic(native) 即可
- Nvidia MX 系列显卡由于被老黄阉割了视频编解码单元，建议选择 D3D11，并在下方的 Hardware Device to Use 部分选择你的 核显
- 不推荐 选择 DXVA2 (native)，它在部分情况下会出现画质损失
Output Formats
- RGB Output levels -> 选择 PC (0-255)
- Dithering Mode -> 抖动算法，看电影居多建议 Oredered Dithering，看动漫居多建议 Random Dithering
- 实际上，在本篇教程的使用场景(渲染器选用 MPCVR)下，绝大多数情况下输出的都是和原片精度相同的YUV数据，RGB Output levels 和 Dithering Mode 的选项绝大部分情况下都不会生效

杂项

记忆文件的播放位置 --- 播放器 -> 记忆文件播放位置
鼠标指向进度条时显示视频缩略图 --- 调节 -> 在进度条显示视频预览
开始播放后自动改变窗口大小 --- 回放 -> 缩放与对齐 -> 自动缩放 (默认已勾选；建议 100% [默认])
自动播放文件夹中的下一个视频 --- 回放 -> 回放结束后 (建议 播放文件夹中的下一个文件)
更改字幕最大渲染分辨率 (避免出现字幕很糊的情况) --- 字幕 -> 纹理设置（……) -> 最大纹理分辨率 (建议改为 自身屏幕分辨率 / 1920x1080 也已够用)

LAV Filters 的三个组件都能显示托盘图标，在 内部滤镜 -> 内部 LAV Filters 设置 -> 分离器/视频解码器/音频解码器 - 勾选左下角的 Enable System Tray Icon 即可

效果：

MPCVR 推荐设置

让 MPC-BE/HC 使用 MPCVR 作为视频渲染器

（如果你认真看完了 简单调教 MPC-BE / MPC-HC 部分，就会发现其实我们已经让播放器使用 MPCVR 作为视频渲染器了）
但为了避免各位不小心忘记这一点（同时方便跳着看本文的童鞋），这里就再提一下。

MPC-BE 使用 MPCVR 作为视频渲染器

点击 鼠标右键 -> 选项 或 查看 -> 选项 进入设置
视频 -> 视频渲染器 -> 改为 MPC 渲染器

如果要进入 MPCVR 的设置，请点击右边的 属性

MPC-HC 使用 MPCVR 作为视频渲染器

点击 鼠标右键 -> 选项 或 查看 -> 选项 进入设置
回放 -> 输出 -> DirectShow 视频 -> 选择 MPC 视频渲染器

如果要进入 MPCVR 的设置，请点击右边的 设置

调整 MPCVR 的设置

进入 MPCVR 的设置界面（方法在本文 让 MPC-BE/HC 使用 MPCVR 作为视频渲染器 部分已经提到过），你会看到下图的界面：

我不会班门弄斧地详细讲解各个选项的具体作用，如果需要了解，请看 MPC Video Renderer 的官方说明（内容是俄语，请善用翻译）：https://mpc-be.org/forum/index.php?topic=381

进入设置界面后，请根据下文文字内容自行更改（如果懒也可以直接抄下图内容，但我建议对各选项有一定了解后根据个人需要自行更改）

[左上] 勾选 Use Direct3D 11 （Windows10/11 默认已勾选）
[左上] Texture format(运算精度) - 更改为 16-bit Floating Point
- 性能捉急可以选择 10-bit Integer，不建议选择 8-bit Integer
[右上] Show Statistics 下方的 Fixed font size 请更改为 Increase font by window
- 此选项是关于 MPCVR 的统计信息的（播放视频时通过 Ctrl+j 可以调出），更改此选项是为了避免出现统计信息的字体过小，不方便查看的问题。
[右下] Wait for V-Blank before Present - 勾选可能会改善播放的流畅性
DXVA2 and D3D11 video processor -> Use for: 全部取消勾选
- DXVA2 and D3D11 video processor 会代替下文 Shader video processor 部分的设置，它的性能最好，但质量取决于显卡，并且可能受显卡驱动的影响导致颜色不准确（我就遇到过画面偏绿和画面偏灰暗的情况），非特殊情况不建议使用。
Shader video processor 部分：
- Chroma scaling - 建议 Catmull-Rom，性能捉急可以选择 Bilinear
  - 此选项选择的算法用于放大 yuv420/422 视频的色度（一般来说感知不是很明显）
- Upscaling - 建议 Jinc2m
  - 此选项选择的算法用于放大视频画面（如 720p -> 1080p）
- Downscaling - 建议 Bicubic/Bicubic sharp，后者比前者更锐利一点
  - 此选项选择的算法用于缩小视频画面（如 2160p -> 1080p）
- Use the "Upscaling" method to reducing the frame to 50%
  - 此选项的意思为：目标尺寸≥源视频的50%时，使用与"Upscaling"相同的算法进行缩小视频画面。
    是否勾选取决于你的个人喜好，我个人不勾选并在 Downscaling 部分使用 Bicubic sharp 算法。
- Use dithering(使用抖动) - 强烈建议勾选
HDR 部分
这部分因为我没有可用的 HDR 显示器，暂时就不细讲了
有这方面需求的用户请根据 MPCVR 官方说明进行更改
- Prefer Dolby Vision over PQ and HLG 如果你需要观看 Dolby Vision 内容，请勾选
- Passthrough to display - 如果显示器支持 HDR，请一定勾选
- Windows HDR - 选择 自动切换至 HDR 模式 的方式，默认不自动切换
  - 如果显示器支持 HDR，请自行更改此选项
- If passthrough is impossible or disabled, then: -> Convert to SDR - 如果显示器不支持 HDR，请勾选
  - 这将在无法直通 HDR 数据给显示器时或不勾选 Passthrough to display 时将 HDR 转换为 SDR

最后，别忘了点击右下角的 应用(A)，然后开启你的影音体验叭！

完结撒花 ✿ヽ(°▽°)ノ✿

TODOs

~~Nvidia RTX / Intel VSR 的使用教程~~ (不打算写了)
- 即 DXVA2 and D3D11 video processor -> 勾选 Use for resizing -> Request Super Resolution 部分

一些有用的教程指路

⚙️ 简易快速的mpcvr高画质播放方案指南 - 略有过时（MPCVR 更的太勤了）
基于 MPC-HC 和 madVR 的播放器配置入门
萬年冷凍庫：
- 系列之2─強大的外掛解碼方案-LAV Filters
- 系列之3─最強渲染器-madVR
  - 知乎搬运（上篇）：https://zhuanlan.zhihu.com/p/73960527
  - 知乎搬运（下篇）：https://zhuanlan.zhihu.com/p/73968849
Potplayer的合格安装与调校 - LAV 以及 madVR 部分很值得参考
- https://tieba.baidu.com/p/7171344019

Markdown Extended Features

Wed, 01 May 2024 00:00:00 GMT

GitHub Repository Cards

You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.

::github{repo="Fabrizz/MMM-OnSpotify"}

Create a GitHub repository card with the code ::github{repo="<owner>/<repo>"}.

::github{repo="saicaca/fuwari"}

Admonitions

Following types of admonitions are supported: note tip important warning caution

:::note Highlights information that users should take into account, even when skimming. :::

:::tip Optional information to help a user be more successful. :::

:::important Crucial information necessary for users to succeed. :::

:::warning Critical content demanding immediate user attention due to potential risks. :::

:::caution Negative potential consequences of an action. :::

Basic Syntax

:::note
Highlights information that users should take into account, even when skimming.
:::

:::tip
Optional information to help a user be more successful.
:::

Custom Titles

The title of the admonition can be customized.

:::note[MY CUSTOM TITLE] This is a note with a custom title. :::

:::note[MY CUSTOM TITLE]
This is a note with a custom title.
:::

GitHub Syntax

[!TIP] The GitHub syntax is also supported.

> [!NOTE]
> The GitHub syntax is also supported.

> [!TIP]
> The GitHub syntax is also supported.

Spoiler

You can add spoilers to your text. The text also supports Markdown syntax.

The content :spoiler[is hidden ayyy]!

The content :spoiler[is hidden **ayyy**]!

Expressive Code Example

Wed, 10 Apr 2024 00:00:00 GMT

Here, we'll explore how code blocks look using Expressive Code. The provided examples are based on the official documentation, which you can refer to for further details.

Expressive Code

Syntax Highlighting

Regular syntax highlighting

console.log('This code is syntax highlighted!')

Rendering ANSI escape sequences

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

Editor & Terminal Frames

Code editor frames

console.log('Title attribute example')

<!-- src/content/index.html -->
<div>File name comment example</div>

Terminal frames

echo "This terminal frame has no title"

Write-Output "This one has a title!"

Overriding frame types

echo "Look ma, no frame!"

# Without overriding, this would be a terminal frame
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

Text & Line Markers

Marking full lines & line ranges

// 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 "7-8"
// Line 8 - targeted by range "7-8"

Selecting line marker types (mark, ins, del)

function demo() {
  console.log('this line is marked as deleted')
  // This line and the next one are marked as inserted
  console.log('this is the second inserted line')

  return 'this line uses the neutral default marker type'
}

Adding labels to line markers

// labeled-line-markers.jsx
<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Adding long labels on their own lines

// labeled-line-markers.jsx
<button
  role="button"
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
>

  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

Using diff-like syntax

+this line will be marked as inserted
-this line will be marked as deleted
this is a regular line

--- 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

Combining syntax highlighting with diff-like syntax

  function thisIsJavaScript() {
    // This entire block gets highlighted as JavaScript,
    // and we can still add diff markers to it!
-   console.log('Old code to be removed')
+   console.log('New and shiny code!')
  }

Marking individual text inside lines

function demo() {
  // Mark any given text inside lines
  return 'Multiple matches of the given text are supported';
}

Regular expressions

console.log('The words yes and yep will be marked.')

Escaping forward slashes

echo "Test" > /home/test.txt

Selecting inline marker types (mark, ins, del)

function demo() {
  console.log('These are inserted and deleted marker types');
  // The return statement uses the default marker type
  return true;
}

Word Wrap

Configuring word wrap per block

// Example with wrap
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

// Example with wrap=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

Configuring indentation of wrapped lines

// Example with preserveIndent (enabled by default)
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

// Example with preserveIndent=false
function getLongString() {
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
}

Collapsible Sections

// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'

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: 'End of example boilerplate code' })

Line Numbers

Displaying line numbers per block

// This code block will show line numbers
console.log('Greetings from line 2!')
console.log('I am on line 3')

// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

Changing the starting line number

console.log('Greetings from line 5!')
console.log('I am on line 6')

Simple Guides for Fuwari

Mon, 01 Apr 2024 00:00:00 GMT

Cover image source: Source

This blog template is built with Astro. For the things that are not mentioned in this guide, you may find the answers in the Astro Docs.

Front-matter of Posts

---
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
---

Attribute	Description
`title`	The title of the post.
`published`	The date the post was published.
`description`	A short description of the post. Displayed on index page.
`image`	The cover image path of the post.<br/>1. Start with `http://` or `https://`: Use web image<br/>2. Start with `/`: For image in `public` dir<br/>3. With none of the prefixes: Relative to the markdown file
`tags`	The tags of the post.
`category`	The category of the post.
`draft`	If this post is still a draft, which won't be displayed.

Where to Place the Post Files

Your post files should be placed in src/content/posts/ directory. You can also create sub-directories to better organize your posts and assets.

src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.png
    └── index.md

Markdown Example

Sun, 01 Oct 2023 00:00:00 GMT

An h1 header

Paragraphs are separated by a blank line.

2nd paragraph. Italic, bold, and monospace. Itemized lists look like:

this one
that one
the other one

Note that --- not considering the asterisk --- the actual text content starts at 4-columns in.

Block quotes are written like so.

They can span multiple paragraphs, if you like.

Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all in chapters 12--14"). Three dots ... will be converted to an ellipsis. Unicode is supported. ☺

An h2 header

Here's a numbered list:

first item
second item
third item

Note again how the actual text starts at 4 columns in (4 characters from the left side). Here's a code sample:

# Let me re-iterate ...
for i in 1 .. 10 { do-something(i) }

As you probably guessed, indented 4 spaces. By the way, instead of indenting the block, you can use delimited blocks, if you like:

define foobar() {
    print "Welcome to flavor country!";
}

(which makes copying & pasting easier). You can optionally mark the delimited block for Pandoc to syntax highlight it:

import time
# Quick, count to ten!
for i in range(10):
    # (but not *too* quick)
    time.sleep(0.5)
    print i

An h3 header

Now a nested list:

First, get these ingredients:
- carrots
- celery
- lentils
Boil some water.

Dump everything in the pot and follow this algorithm:

 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)

Do not bump wooden spoon or it will fall.

Notice again how text always lines up on 4-space indents (including that last line which continues item 3 above).

Here's a link to a website, to a local doc, and to a section heading in the current doc. Here's a footnote [^1].

[^1]: Footnote text goes here.

Tables can look like this:

size material color

9 leather brown 10 hemp canvas natural 11 glass transparent

Table: Shoes, their sizes, and what they're made of

(The above is the caption for the table.) Pandoc also supports multi-line tables:

keyword text

red Sunsets, apples, and other red or reddish things.

green Leaves, grass, frogs and other things it's not easy being.

A horizontal rule follows.

Here's a definition list:

apples : Good for making applesauce. oranges : Citrus! tomatoes : There's no "e" in tomatoe.

Again, text is indented 4 spaces. (Put a blank line between each term/definition pair to spread things out more.)

Here's a "line block":

| Line one | Line too | Line tree

and images can be specified like so:

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:

$$I = \int \rho R^{2} dV$$

$$ \begin{equation*} \pi =3.1415926535 ;8979323846;2643383279;5028841971;6939937510;5820974944 ;5923078164;0628620899;8628034825;3421170679;\ldots \end{equation*} $$

And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: `foo`, *bar*, etc.

Include Video in the Posts

Tue, 01 Aug 2023 00:00:00 GMT

Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.

---
title: Include Video in the Post
published: 2023-10-19
// ...
---

<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

YouTube

Bilibili

Yukari0201's Blog

为个人博客添加 Giscus 评论系统（二）

前言

你需要准备的

让我们开始叭

为 Github 仓库安装 Giscus app

为 Astro + Fuwari 博客添加 Giscus 评论系统

大功告成！

碎碎念

我的新博客！

为 mpv 播放器添加长按倍速功能

观前提醒

让我们开始叭

“安装”inputevent.lua

配置 input.conf

完结撒花~

结束后还要说的事情

一点私货（逃～

为个人博客添加 Giscus 评论系统

前言

让我们开始叭

为 Github 仓库安装 Giscus app

为 Hexo + NexT 博客安装 giscus

配置 Giscus

大功告成！

(补充) 从 Utterances/Gitalk 迁到 Giscus

碎碎念

优化 mpv 播放器的在线视频体验

开始之前的一点私货（逃

观前提醒(消歧义)

目录

mpv 播放器如何播放在线视频

直接拖放链接

使用内置控制台脚本(console.lua)

命令行用法

缓存(cache)配置

内置的 ytdl_hook 脚本相关

前提条件

"安装" yt-dlp

ytdl_hook 脚本配置

常规选项部分

--ytdl-raw-options 部分

script-opts/ytdl_hook.conf 部分(--script-opts 部分)

代理相关

[推荐] 在 mpv.conf 中设置代理

通过环境变量 http_proxy 来设置代理

(补充) 脚本 mpv-quality-menu 的使用介绍

(补充) 优化 Bilibili 视频的观看体验

[推荐] 使用 bilibiliAssert 脚本

MPC-BE/HC + MPCVR 使用教程

观前声明

目录

兵欲善其事，必先利其器——安装各播放器组件

安装 MPC-BE + MPCVR

安装 MPC-BE

安装 MPC Video Renderer

安装 MPC-HC + MPCVR

安装 MPC-HC

安装 MPC Video Renderer

写给 scoop 用户：

用 scoop 安装 MPC-BE + MPCVR

用 scoop 安装 MPC-HC + MPCVR

简单调教 MPC-BE / MPC-HC

简单调教 MPC-BE

音频部分

视频部分

杂项

简单调教 MPC-HC

音频部分

视频部分

杂项

MPCVR 推荐设置

让 MPC-BE/HC 使用 MPCVR 作为视频渲染器

MPC-BE 使用 MPCVR 作为视频渲染器

MPC-HC 使用 MPCVR 作为视频渲染器

调整 MPCVR 的设置

完结撒花 ✿ヽ(°▽°)ノ✿

TODOs

一些有用的教程指路

Markdown Extended Features

`--ytdl-raw-options` 部分

`script-opts/ytdl_hook.conf` 部分(`--script-opts` 部分)

[推荐] 在 `mpv.conf` 中设置代理

通过环境变量 `http_proxy` 来设置代理