编程拾录

Ubuntu配置sshd防止境外IP登陆

Thu, 17 Sep 2026 22:55:22 GMT

之所以写这篇文章是因为服务器被境外IP扫描登录，虽然没有攻破，看着海量的错误日志也心烦，所以做了一个防止境外IP登陆的防护方案，这里分享出来给需要的人。文章中的内容来自于AI生成，实际测试可以使用，不过资源有限没有经过完整性测试（全球IP测试）。

查看 SSH 当前监听端口

sudo ss -lntp | grep sshd

找到0.0.0.0:和[::]:后面的数字，就是sshd监听的端口号了，留着备用，这里假设端口号是22222。

修改`/etc/nftables.conf`文件

默认的/etc/nftables.conf一般是

#!/usr/sbin/nft -f

flush ruleset

table inet filter {
    chain input {
        type filter hook input priority filter;
    }

    chain forward {
        type filter hook forward priority filter;
    }

    chain output {
        type filter hook output priority filter;
    }
}

其中flush ruleset这条指令会清空所有规则。

如果服务器使用了docker，会导致把docker的规则清理掉，docker不能正常使用(如果已经影响了可以重启docker服务)

默认的table inet filter也没有用，建议直接改成以下内容

#!/usr/sbin/nft -f

include "/etc/nftables.d/*.nft"

创建`/etc/nftables.d/ssh-geo.nft`

# 如果没有/etc/nftables.d/目录使用以下命令创建，如果存在可以跳过
sudo mkdir -p /etc/nftables.d/sets/

最终的文件架构如下

/etc/nftables.d/
├── ssh-geo.nft
└── sets/
    ├── cn4.nft
    └── cn6.nft

/etc/nftables.d/ssh-geo.nft内容

destroy table inet ssh_geo
table inet ssh_geo {
    include "/etc/nftables.d/sets/cn4.nft"
    include "/etc/nftables.d/sets/cn6.nft"

    chain input {
        type filter hook input priority -10; policy accept;
        
        # 22222需要替换为真实的sshd端口号
        tcp dport 22222 ip saddr @cn4 accept
        tcp dport 22222 ip6 saddr @cn6 accept
        tcp dport 22222 drop
    }
}

动态生成`cn4.nft`、`cn6.nft`

使用脚本执行 “下载 → 校验 CIDR → 生成临时 nft 文件 → nft -c 检查 → 原子替换 → 重载 ssh_geo”的流程。这样即使网络返回 HTML 错误页、下载中断或数据格式异常，也不会把正在工作的 SSH 白名单破坏掉。

IPdeny 目前确实提供中国大陆聚合后的 IPv4 和 IPv6 CIDR 文件，并持续更新：IPv4 为 cn-aggregated.zone，IPv6 也有对应 aggregated 文件。(IPdeny)

自动更新脚本

创建：

sudo nano /usr/local/sbin/update-cn-nft.sh

内容：

#!/usr/bin/env bash

set -Eeuo pipefail

CN4_URL="https://www.ipdeny.com/ipblocks/data/aggregated/cn-aggregated.zone"
CN6_URL="https://www.ipdeny.com/ipv6/ipaddresses/aggregated/cn-aggregated.zone"

TARGET_DIR="/etc/nftables.d/sets"
CN4_TARGET="${TARGET_DIR}/cn4.nft"
CN6_TARGET="${TARGET_DIR}/cn6.nft"

SSH_GEO_CONFIG="/etc/nftables.d/ssh-geo.nft"

TMP_DIR="$(mktemp -d)"

cleanup()
{
    rm -rf "${TMP_DIR}"
}

trap cleanup EXIT

log()
{
    printf '[%s] %s\n' "$(date '+%F %T')" "$*"
}

fail()
{
    printf '[%s] ERROR: %s\n' "$(date '+%F %T')" "$*" >&2
    exit 1
}

if [[ "${EUID}" -ne 0 ]]; then
    fail "必须使用 root 权限运行"
fi

for cmd in curl python3 nft install; do
    if ! command -v "${cmd}" >/dev/null 2>&1; then
        fail "缺少命令: ${cmd}"
    fi
done

mkdir -p "${TARGET_DIR}"

CN4_RAW="${TMP_DIR}/cn4.zone"
CN6_RAW="${TMP_DIR}/cn6.zone"

CN4_NEW="${TMP_DIR}/cn4.nft"
CN6_NEW="${TMP_DIR}/cn6.nft"


download()
{
    local url="$1"
    local output="$2"

    log "下载 ${url}"

    curl \
        --fail \
        --silent \
        --show-error \
        --location \
        --retry 3 \
        --retry-delay 2 \
        --connect-timeout 10 \
        --max-time 120 \
        --output "${output}" \
        "${url}"

    if [[ ! -s "${output}" ]]; then
        fail "下载结果为空: ${url}"
    fi

    # 防止 CRLF 干扰后面的处理
    sed -i 's/\r$//' "${output}"
}


validate_cidr_file()
{
    local family="$1"
    local file="$2"

    python3 - "${family}" "${file}" <<'PY'
import ipaddress
import sys

family = int(sys.argv[1])
path = sys.argv[2]

count = 0

with open(path, "r", encoding="utf-8") as f:
    for line_no, line in enumerate(f, 1):
        value = line.strip()

        if not value or value.startswith("#"):
            continue

        try:
            network = ipaddress.ip_network(value, strict=True)
        except ValueError as ex:
            print(
                f"无效 CIDR: {path}:{line_no}: {value}: {ex}",
                file=sys.stderr,
            )
            sys.exit(1)

        if network.version != family:
            print(
                f"IP 版本错误: {path}:{line_no}: {value}",
                file=sys.stderr,
            )
            sys.exit(1)

        count += 1

if count < 10:
    print(
        f"CIDR 数量异常，仅发现 {count} 条: {path}",
        file=sys.stderr,
    )
    sys.exit(1)

print(count)
PY
}


generate_set()
{
    local set_name="$1"
    local address_type="$2"
    local source="$3"
    local output="$4"

    {
        echo "set ${set_name} {"
        echo "    type ${address_type}"
        echo "    flags interval"
        echo "    auto-merge"
        echo
        echo "    elements = {"

        awk '
            NF && $1 !~ /^#/ {
                if (count > 0) {
                    printf ",\n"
                }

                printf "        %s", $1
                count++
            }

            END {
                if (count > 0) {
                    printf "\n"
                }
            }
        ' "${source}"

        echo "    }"
        echo "}"
    } > "${output}"
}


log "开始更新中国大陆 IPv4 / IPv6 CIDR"

download "${CN4_URL}" "${CN4_RAW}"
download "${CN6_URL}" "${CN6_RAW}"

log "校验 IPv4 CIDR"
CN4_COUNT="$(validate_cidr_file 4 "${CN4_RAW}")"

log "校验 IPv6 CIDR"
CN6_COUNT="$(validate_cidr_file 6 "${CN6_RAW}")"

log "IPv4: ${CN4_COUNT} 条"
log "IPv6: ${CN6_COUNT} 条"

generate_set "cn4" "ipv4_addr" "${CN4_RAW}" "${CN4_NEW}"
generate_set "cn6" "ipv6_addr" "${CN6_RAW}" "${CN6_NEW}"


#
# 先对生成出来的两个 set 进行独立 nftables 语法检查。
# 此处只执行 -c，不会改变实际防火墙。
#

CHECK_TABLE="cn_geo_check_$$"
CHECK_FILE="${TMP_DIR}/check.nft"

cat > "${CHECK_FILE}" <<EOF
table inet ${CHECK_TABLE} {
    include "${CN4_NEW}"
    include "${CN6_NEW}"
}
EOF

log "检查生成的 nftables set"

if ! nft -c -f "${CHECK_FILE}"; then
    fail "新 CIDR 文件无法通过 nftables 语法检查"
fi


#
# 如果内容完全没有变化，则无需重载。
#

UNCHANGED=true

if [[ ! -f "${CN4_TARGET}" ]] || ! cmp -s "${CN4_NEW}" "${CN4_TARGET}"; then
    UNCHANGED=false
fi

if [[ ! -f "${CN6_TARGET}" ]] || ! cmp -s "${CN6_NEW}" "${CN6_TARGET}"; then
    UNCHANGED=false
fi

if [[ "${UNCHANGED}" == "true" ]]; then
    log "CIDR 列表没有变化，无需更新"
    exit 0
fi


#
# 备份当前配置，以便后续加载失败时恢复文件。
#

if [[ -f "${CN4_TARGET}" ]]; then
    cp -a "${CN4_TARGET}" "${TMP_DIR}/cn4.old.nft"
fi

if [[ -f "${CN6_TARGET}" ]]; then
    cp -a "${CN6_TARGET}" "${TMP_DIR}/cn6.old.nft"
fi


#
# 使用 install + 临时文件，避免直接覆盖过程中产生半截文件。
#

install -m 0644 "${CN4_NEW}" "${CN4_TARGET}.new"
install -m 0644 "${CN6_NEW}" "${CN6_TARGET}.new"

mv -f "${CN4_TARGET}.new" "${CN4_TARGET}"
mv -f "${CN6_TARGET}.new" "${CN6_TARGET}"


#
# 此时再检查真正的 ssh_geo 配置。
# nft -c 不会改变当前运行规则。
#

log "检查 ssh_geo 完整配置"

if ! nft -c -f "${SSH_GEO_CONFIG}"; then
    log "完整配置检查失败，恢复旧 CIDR 文件"

    if [[ -f "${TMP_DIR}/cn4.old.nft" ]]; then
        cp -a "${TMP_DIR}/cn4.old.nft" "${CN4_TARGET}"
    fi

    if [[ -f "${TMP_DIR}/cn6.old.nft" ]]; then
        cp -a "${TMP_DIR}/cn6.old.nft" "${CN6_TARGET}"
    fi

    fail "ssh_geo 配置验证失败，没有修改运行中的防火墙"
fi


#
# 只重新加载 ssh_geo，而不是整个 /etc/nftables.conf。
#
# 你的 ssh-geo.nft 前面应包含：
#
#   destroy table inet ssh_geo
#
# 因此这里会原子地重建自己的 table，
# 不会碰 Docker 的 nftables/iptables-nft 规则。
#

log "应用新的 ssh_geo 规则"

if ! nft -f "${SSH_GEO_CONFIG}"; then
    log "加载失败，恢复旧 CIDR 文件"

    if [[ -f "${TMP_DIR}/cn4.old.nft" ]]; then
        cp -a "${TMP_DIR}/cn4.old.nft" "${CN4_TARGET}"
    fi

    if [[ -f "${TMP_DIR}/cn6.old.nft" ]]; then
        cp -a "${TMP_DIR}/cn6.old.nft" "${CN6_TARGET}"
    fi

    fail "nftables 加载失败；运行中的旧规则没有被事务修改"
fi

log "更新完成"
log "IPv4: ${CN4_COUNT} 条"
log "IPv6: ${CN6_COUNT} 条"

然后：

sudo chmod 755 /usr/local/sbin/update-cn-nft.sh

第一次先手工运行：

sudo /usr/local/sbin/update-cn-nft.sh

正常应该看到类似：

[2026-09-17 22:40:01] 开始更新中国大陆 IPv4 / IPv6 CIDR
[2026-09-17 22:40:01] 下载 ...
[2026-09-17 22:40:02] 校验 IPv4 CIDR
[2026-09-17 22:40:02] 校验 IPv6 CIDR
[2026-09-17 22:40:02] IPv4: xxxx 条
[2026-09-17 22:40:02] IPv6: xxxx 条
[2026-09-17 22:40:03] 检查生成的 nftables set
[2026-09-17 22:40:03] 检查 ssh_geo 完整配置
[2026-09-17 22:40:03] 应用新的 ssh_geo 规则
[2026-09-17 22:40:03] 更新完成

生成的文件就如下格式：

set cn4 {
    type ipv4_addr
    flags interval
    auto-merge

    elements = {
        1.0.1.0/24,
        1.0.2.0/23,
        1.0.8.0/21
        ...
    }
}

以及：

set cn6 {
    type ipv6_addr
    flags interval
    auto-merge

    elements = {
        2001:250::/32,
        ...
    }
}

脚本只执行：

nft -f /etc/nftables.d/ssh-geo.nft

不会执行：

nft -f /etc/nftables.conf

更不会执行：

flush ruleset

验证`ssh_geo`结果

sudo nft list table inet ssh_geo

应该会列出类似以下结果

table inet ssh_geo {
    set cn4 {
        type ipv4_addr
        flags interval
        auto-merge

        elements = {
            1.0.1.0/24,
            1.0.2.0/23,
            1.0.8.0/21
            ...
        }
    }
    
    set cn6 {
        type ipv6_addr
        flags interval
        auto-merge

        elements = {
            2001:250::/32,
            ...
        }
    }

    chain input {
        type filter hook input priority -10; policy accept;
        
        # 22222需要替换为真实的sshd端口号
        tcp dport 22222 ip saddr @cn4 accept
        tcp dport 22222 ip6 saddr @cn6 accept
        tcp dport 22222 drop
    }
}

所以不会主动动到 Docker 动态创建的防火墙规则。

做成每日自动更新

既然 IPdeny 的数据本身持续更新，比较适合每天更新一次。当前目录显示 IPv4 和 IPv6 中国大陆 aggregated 数据都有近期每日更新时间。(IPdeny)

创建：

sudo nano /etc/systemd/system/update-cn-nft.service

[Unit]
Description=Update China CIDR nftables sets
After=network-online.target
Wants=network-online.target

[Service]
Type=oneshot
ExecStart=/usr/local/sbin/update-cn-nft.sh

再创建：

sudo nano /etc/systemd/system/update-cn-nft.timer

[Unit]
Description=Daily China CIDR nftables update

[Timer]
OnCalendar=*-*-* 04:30:00
RandomizedDelaySec=30m
Persistent=true

[Install]
WantedBy=timers.target

启用：

sudo systemctl daemon-reload

sudo systemctl enable --now update-cn-nft.timer

查看：

systemctl list-timers update-cn-nft.timer

手动测试 service：

sudo systemctl start update-cn-nft.service

查看执行日志：

sudo journalctl -u update-cn-nft.service

这里还有一个我建议你在正式长期运行前补上的安全措施：至少准备一个不依赖 GeoIP 的“救援 SSH 来源”，比如固定办公 IP、VPN/Tailscale 网段或云厂商控制台。国家 IP 数据库并不是绝对准确的，一旦你的正常公网 IP 被数据源暂时归错区域，cn4/cn6 自动更新后，新 SSH 连接就可能被拒绝。

如果真的发生了这种情况也不用着急，可以到云服务控制台上使用VNC登录，然后把自己的IP加入白名单中。

Vue 组件示例

Thu, 13 Aug 2026 00:00:00 GMT

示例

下面是在文章中嵌入的 Vue 组件：

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

微信小程序自定义tabBar

Sat, 06 Apr 2024 23:36:22 GMT

参考文档

::: tip 官网介绍
:::

存在的问题

切换时tabBar闪烁，经过测试发现每个页面所使用的tabBar是独立实例，要避免闪烁需要修改示例代码，原始示例代码如下

官网提供的示例代码-摘录

::: tip 完整版：在开发者工具中预览效果 :::

`custom-tab-bar/index.js`

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: [{
      pagePath: "/index/index",
      iconPath: "/image/icon_component.png",
      selectedIconPath: "/image/icon_component_HL.png",
      text: "组件"
    }, {
      pagePath: "/index/index2",
      iconPath: "/image/icon_API.png",
      selectedIconPath: "/image/icon_API_HL.png",
      text: "接口"
    }]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      this.setData({
        selected: data.index
      })
    }
  }
})

`index/index.js`

Component({
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0
        })
      }
    }
  }
})

优化方案

既然每个页面都是tabBar独立实例，那么就不需要重复去修改selected这个变量，修改这个变量会触发重新渲染tabBar，也是造成闪烁的原因，修改方案

在custom-tab-bar/index.js的switchTab方法中移除以下代码

this.setData({
    selected: data.index
})

在index/index.js中改为以下代码

Component({
    pageLifetimes: {
        show() {
            if (typeof this.getTabBar === 'function' &&
                this.getTabBar()) {
                this.getTabBar().setData({
                    selected: 0
                })
            }
        }
    },
});

实际就是让selected这个变量在tabBar中只设置一次，这样可以做只有第一次点击某个tabBar图标时闪烁一次，再次切换不再闪烁，当然如果想要一次闪烁都没有的情况下自定义tabBar那只能使用单页了。

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

astro使用教程

Tue, 14 Feb 2023 14:36:22 GMT

博客插件

:::tip 图标官方文档浏览更多图标 :::

<details class="hint-container details"><summary>iconfont 关键词精选图标</summary><div class="icon-display-wrapper"><div class="icon"><div class="iconfont icon-ability"></div><div class="text">ability</div></div><div class="icon"><div class="iconfont icon-actions"></div><div class="text">actions</div></div><div class="icon"><div class="iconfont icon-activity"></div><div class="text">activity</div></div><div class="icon"><div class="iconfont icon-add"></div><div class="text">add</div></div><div class="icon"><div class="iconfont icon-advance"></div><div class="text">advance</div></div><div class="icon"><div class="iconfont icon-ajax"></div><div class="text">ajax</div></div><div class="icon"><div class="iconfont icon-alias"></div><div class="text">alias</div></div><div class="icon"><div class="iconfont icon-align"></div><div class="text">align</div></div><div class="icon"><div class="iconfont icon-android"></div><div class="text">android</div></div><div class="icon"><div class="iconfont icon-angular"></div><div class="text">angular</div></div><div class="icon"><div class="iconfont icon-animation"></div><div class="text">animation</div></div><div class="icon"><div class="iconfont icon-anonymous"></div><div class="text">anonymous</div></div><div class="icon"><div class="iconfont icon-any"></div><div class="text">any</div></div><div class="icon"><div class="iconfont icon-Apache"></div><div class="text">Apache</div></div><div class="icon"><div class="iconfont icon-api"></div><div class="text">api</div></div><div class="icon"><div class="iconfont icon-app"></div><div class="text">app</div></div><div class="icon"><div class="iconfont icon-array"></div><div class="text">array</div></div><div class="icon"><div class="iconfont icon-arrow"></div><div class="text">arrow</div></div><div class="icon"><div class="iconfont icon-article"></div><div class="text">article</div></div><div class="icon"><div class="iconfont icon-ask"></div><div class="text">ask</div></div><div class="icon"><div class="iconfont icon-async"></div><div class="text">async</div></div><div class="icon"><div class="iconfont icon-asynchronous"></div><div class="text">asynchronous</div></div><div class="icon"><div class="iconfont icon-at"></div><div class="text">at</div></div><div class="icon"><div class="iconfont icon-autumn"></div><div class="text">autumn</div></div><div class="icon"><div class="iconfont icon-back-stage"></div><div class="text">back-stage</div></div><div class="icon"><div class="iconfont icon-bit"></div><div class="text">bit</div></div><div class="icon"><div class="iconfont icon-bitbucket"></div><div class="text">bitbucket</div></div><div class="icon"><div class="iconfont icon-blog"></div><div class="text">blog</div></div><div class="icon"><div class="iconfont icon-boolean"></div><div class="text">boolean</div></div><div class="icon"><div class="iconfont icon-box"></div><div class="text">box</div></div><div class="icon"><div class="iconfont icon-branch"></div><div class="text">branch</div></div><div class="icon"><div class="iconfont icon-build"></div><div class="text">build</div></div><div class="icon"><div class="iconfont icon-c"></div><div class="text">c</div></div><div class="icon"><div class="iconfont icon-cache"></div><div class="text">cache</div></div><div class="icon"><div class="iconfont icon-calculate"></div><div class="text">calculate</div></div><div class="icon"><div class="iconfont icon-call"></div><div class="text">call</div></div><div class="icon"><div class="iconfont icon-card"></div><div class="text">card</div></div><div class="icon"><div class="iconfont icon-categoryselected"></div><div class="text">categoryselected</div></div><div class="icon"><div class="iconfont icon-centos"></div><div class="text">centos</div></div><div class="icon"><div class="iconfont icon-change"></div><div class="text">change</div></div><div class="icon"><div class="iconfont icon-check"></div><div class="text">check</div></div><div class="icon"><div class="iconfont icon-chrome"></div><div class="text">chrome</div></div><div class="icon"><div class="iconfont icon-ci"></div><div class="text">ci</div></div><div class="icon"><div class="iconfont icon-class"></div><div class="text">class</div></div><div class="icon"><div class="iconfont icon-code"></div><div class="text">code</div></div><div class="icon"><div class="iconfont icon-command"></div><div class="text">command</div></div><div class="icon"><div class="iconfont icon-comment"></div><div class="text">comment</div></div><div class="icon"><div class="iconfont icon-community"></div><div class="text">community</div></div><div class="icon"><div class="iconfont icon-compare"></div><div class="text">compare</div></div><div class="icon"><div class="iconfont icon-computer"></div><div class="text">computer</div></div><div class="icon"><div class="iconfont icon-condition"></div><div class="text">condition</div></div><div class="icon"><div class="iconfont icon-config"></div><div class="text">config</div></div><div class="icon"><div class="iconfont icon-context"></div><div class="text">context</div></div><div class="icon"><div class="iconfont icon-contrast"></div><div class="text">contrast</div></div><div class="icon"><div class="iconfont icon-copy"></div><div class="text">copy</div></div><div class="icon"><div class="iconfont icon-copyright"></div><div class="text">copyright</div></div><div class="icon"><div class="iconfont icon-create"></div><div class="text">create</div></div><div class="icon"><div class="iconfont icon-creative"></div><div class="text">creative</div></div><div class="icon"><div class="iconfont icon-css"></div><div class="text">css</div></div><div class="icon"><div class="iconfont icon-customize"></div><div class="text">customize</div></div><div class="icon"><div class="iconfont icon-cycle"></div><div class="text">cycle</div></div><div class="icon"><div class="iconfont icon-dart"></div><div class="text">dart</div></div><div class="icon"><div class="iconfont icon-date"></div><div class="text">date</div></div><div class="icon"><div class="iconfont icon-debug"></div><div class="text">debug</div></div><div class="icon"><div class="iconfont icon-decorate"></div><div class="text">decorate</div></div><div class="icon"><div class="iconfont icon-define"></div><div class="text">define</div></div><div class="icon"><div class="iconfont icon-delete"></div><div class="text">delete</div></div><div class="icon"><div class="iconfont icon-diagram"></div><div class="text">diagram</div></div><div class="icon"><div class="iconfont icon-direction"></div><div class="text">direction</div></div><div class="icon"><div class="iconfont icon-discover"></div><div class="text">discover</div></div><div class="icon"><div class="iconfont icon-edit"></div><div class="text">edit</div></div><div class="icon"><div class="iconfont icon-editor"></div><div class="text">editor</div></div><div class="icon"><div class="iconfont icon-emmet"></div><div class="text">emmet</div></div><div class="icon"><div class="iconfont icon-emoji"></div><div class="text">emoji</div></div><div class="icon"><div class="iconfont icon-enable"></div><div class="text">enable</div></div><div class="icon"><div class="iconfont icon-engine"></div><div class="text">engine</div></div><div class="icon"><div class="iconfont icon-enum"></div><div class="text">enum</div></div><div class="icon"><div class="iconfont icon-es6"></div><div class="text">es6</div></div><div class="icon"><div class="iconfont icon-exercise"></div><div class="text">exercise</div></div><div class="icon"><div class="iconfont icon-expansion"></div><div class="text">expansion</div></div><div class="icon"><div class="iconfont icon-extend"></div><div class="text">extend</div></div><div class="icon"><div class="iconfont icon-eye"></div><div class="text">eye</div></div><div class="icon"><div class="iconfont icon-file"></div><div class="text">file</div></div><div class="icon"><div class="iconfont icon-filter"></div><div class="text">filter</div></div><div class="icon"><div class="iconfont icon-flex"></div><div class="text">flex</div></div><div class="icon"><div class="iconfont icon-float"></div><div class="text">float</div></div><div class="icon"><div class="iconfont icon-flow"></div><div class="text">flow</div></div><div class="icon"><div class="iconfont icon-flower"></div><div class="text">flower</div></div><div class="icon"><div class="iconfont icon-folder"></div><div class="text">folder</div></div><div class="icon"><div class="iconfont icon-footer"></div><div class="text">footer</div></div><div class="icon"><div class="iconfont icon-form"></div><div class="text">form</div></div><div class="icon"><div class="iconfont icon-format"></div><div class="text">format</div></div><div class="icon"><div class="iconfont icon-frame"></div><div class="text">frame</div></div><div class="icon"><div class="iconfont icon-free"></div><div class="text">free</div></div><div class="icon"><div class="iconfont icon-fullscreen"></div><div class="text">fullscreen</div></div><div class="icon"><div class="iconfont icon-function"></div><div class="text">function</div></div><div class="icon"><div class="iconfont icon-generic"></div><div class="text">generic</div></div><div class="icon"><div class="iconfont icon-geometry"></div><div class="text">geometry</div></div><div class="icon"><div class="iconfont icon-git"></div><div class="text">git</div></div><div class="icon"><div class="iconfont icon-gitee"></div><div class="text">gitee</div></div><div class="icon"><div class="iconfont icon-github"></div><div class="text">github</div></div><div class="icon"><div class="iconfont icon-gitlab"></div><div class="text">gitlab</div></div><div class="icon"><div class="iconfont icon-grid"></div><div class="text">grid</div></div><div class="icon"><div class="iconfont icon-group"></div><div class="text">group</div></div><div class="icon"><div class="iconfont icon-guide"></div><div class="text">guide</div></div><div class="icon"><div class="iconfont icon-heading"></div><div class="text">heading</div></div><div class="icon"><div class="iconfont icon-home"></div><div class="text">home</div></div><div class="icon"><div class="iconfont icon-hot"></div><div class="text">hot</div></div><div class="icon"><div class="iconfont icon-html"></div><div class="text">html</div></div><div class="icon"><div class="iconfont icon-http"></div><div class="text">http</div></div><div class="icon"><div class="iconfont icon-info"></div><div class="text">info</div></div><div class="icon"><div class="iconfont icon-input"></div><div class="text">input</div></div><div class="icon"><div class="iconfont icon-install"></div><div class="text">install</div></div><div class="icon"><div class="iconfont icon-interact"></div><div class="text">interact</div></div><div class="icon"><div class="iconfont icon-IO"></div><div class="text">IO</div></div><div class="icon"><div class="iconfont icon-java"></div><div class="text">java</div></div><div class="icon"><div class="iconfont icon-javascript"></div><div class="text">javascript</div></div><div class="icon"><div class="iconfont icon-jQuery"></div><div class="text">jQuery</div></div><div class="icon"><div class="iconfont icon-json"></div><div class="text">json</div></div><div class="icon"><div class="iconfont icon-keyboard"></div><div class="text">keyboard</div></div><div class="icon"><div class="iconfont icon-language"></div><div class="text">language</div></div><div class="icon"><div class="iconfont icon-launch"></div><div class="text">launch</div></div><div class="icon"><div class="iconfont icon-layout"></div><div class="text">layout</div></div><div class="icon"><div class="iconfont icon-leaf"></div><div class="text">leaf</div></div><div class="icon"><div class="iconfont icon-license"></div><div class="text">license</div></div><div class="icon"><div class="iconfont icon-light"></div><div class="text">light</div></div><div class="icon"><div class="iconfont icon-like"></div><div class="text">like</div></div><div class="icon"><div class="iconfont icon-line"></div><div class="text">line</div></div><div class="icon"><div class="iconfont icon-link"></div><div class="text">link</div></div><div class="icon"><div class="iconfont icon-linter"></div><div class="text">linter</div></div><div class="icon"><div class="iconfont icon-linux"></div><div class="text">linux</div></div><div class="icon"><div class="iconfont icon-list"></div><div class="text">list</div></div><div class="icon"><div class="iconfont icon-load"></div><div class="text">load</div></div><div class="icon"><div class="iconfont icon-locate"></div><div class="text">locate</div></div><div class="icon"><div class="iconfont icon-lock"></div><div class="text">lock</div></div><div class="icon"><div class="iconfont icon-loop"></div><div class="text">loop</div></div><div class="icon"><div class="iconfont icon-map"></div><div class="text">map</div></div><div class="icon"><div class="iconfont icon-mark"></div><div class="text">mark</div></div><div class="icon"><div class="iconfont icon-markdown"></div><div class="text">markdown</div></div><div class="icon"><div class="iconfont icon-material"></div><div class="text">material</div></div><div class="icon"><div class="iconfont icon-merge"></div><div class="text">merge</div></div><div class="icon"><div class="iconfont icon-mesh"></div><div class="text">mesh</div></div><div class="icon"><div class="iconfont icon-mini-app"></div><div class="text">mini-app</div></div><div class="icon"><div class="iconfont icon-mobile"></div><div class="text">mobile</div></div><div class="icon"><div class="iconfont icon-module"></div><div class="text">module</div></div><div class="icon"><div class="iconfont icon-more"></div><div class="text">more</div></div><div class="icon"><div class="iconfont icon-mount"></div><div class="text">mount</div></div><div class="icon"><div class="iconfont icon-mysql"></div><div class="text">mysql</div></div><div class="icon"><div class="iconfont icon-navbar"></div><div class="text">navbar</div></div><div class="icon"><div class="iconfont icon-navigate"></div><div class="text">navigate</div></div><div class="icon"><div class="iconfont icon-navigation"></div><div class="text">navigation</div></div><div class="icon"><div class="iconfont icon-network"></div><div class="text">network</div></div><div class="icon"><div class="iconfont icon-news"></div><div class="text">news</div></div><div class="icon"><div class="iconfont icon-nginx"></div><div class="text">nginx</div></div><div class="icon"><div class="iconfont icon-nodeJS"></div><div class="text">nodeJS</div></div><div class="icon"><div class="iconfont icon-note"></div><div class="text">note</div></div><div class="icon"><div class="iconfont icon-notice"></div><div class="text">notice</div></div><div class="icon"><div class="iconfont icon-npm"></div><div class="text">npm</div></div><div class="icon"><div class="iconfont icon-null"></div><div class="text">null</div></div><div class="icon"><div class="iconfont icon-number"></div><div class="text">number</div></div><div class="icon"><div class="iconfont icon-object"></div><div class="text">object</div></div><div class="icon"><div class="iconfont icon-operate"></div><div class="text">operate</div></div><div class="icon"><div class="iconfont icon-OS"></div><div class="text">OS</div></div><div class="icon"><div class="iconfont icon-others"></div><div class="text">others</div></div><div class="icon"><div class="iconfont icon-overflow"></div><div class="text">overflow</div></div><div class="icon"><div class="iconfont icon-page"></div><div class="text">page</div></div><div class="icon"><div class="iconfont icon-palette"></div><div class="text">palette</div></div><div class="icon"><div class="iconfont icon-people"></div><div class="text">people</div></div><div class="icon"><div class="iconfont icon-php"></div><div class="text">php</div></div><div class="icon"><div class="iconfont icon-physics"></div><div class="text">physics</div></div><div class="icon"><div class="iconfont icon-pic"></div><div class="text">pic</div></div><div class="icon"><div class="iconfont icon-play"></div><div class="text">play</div></div><div class="icon"><div class="iconfont icon-plugin"></div><div class="text">plugin</div></div><div class="icon"><div class="iconfont icon-preview"></div><div class="text">preview</div></div><div class="icon"><div class="iconfont icon-process"></div><div class="text">process</div></div><div class="icon"><div class="iconfont icon-profile"></div><div class="text">profile</div></div><div class="icon"><div class="iconfont icon-proposal"></div><div class="text">proposal</div></div><div class="icon"><div class="iconfont icon-proxy"></div><div class="text">proxy</div></div><div class="icon"><div class="iconfont icon-python"></div><div class="text">python</div></div><div class="icon"><div class="iconfont icon-question"></div><div class="text">question</div></div><div class="icon"><div class="iconfont icon-quote"></div><div class="text">quote</div></div><div class="icon"><div class="iconfont icon-rank"></div><div class="text">rank</div></div><div class="icon"><div class="iconfont icon-react"></div><div class="text">react</div></div><div class="icon"><div class="iconfont icon-read"></div><div class="text">read</div></div><div class="icon"><div class="iconfont icon-refresh"></div><div class="text">refresh</div></div><div class="icon"><div class="iconfont icon-regexp"></div><div class="text">regexp</div></div><div class="icon"><div class="iconfont icon-relation"></div><div class="text">relation</div></div><div class="icon"><div class="iconfont icon-remote"></div><div class="text">remote</div></div><div class="icon"><div class="iconfont icon-repair"></div><div class="text">repair</div></div><div class="icon"><div class="iconfont icon-repo"></div><div class="text">repo</div></div><div class="icon"><div class="iconfont icon-resize"></div><div class="text">resize</div></div><div class="icon"><div class="iconfont icon-restrict"></div><div class="text">restrict</div></div><div class="icon"><div class="iconfont icon-result"></div><div class="text">result</div></div><div class="icon"><div class="iconfont icon-return"></div><div class="text">return</div></div><div class="icon"><div class="iconfont icon-router"></div><div class="text">router</div></div><div class="icon"><div class="iconfont icon-rss"></div><div class="text">rss</div></div><div class="icon"><div class="iconfont icon-safari"></div><div class="text">safari</div></div><div class="icon"><div class="iconfont icon-safe"></div><div class="text">safe</div></div><div class="icon"><div class="iconfont icon-script"></div><div class="text">script</div></div><div class="icon"><div class="iconfont icon-search"></div><div class="text">search</div></div><div class="icon"><div class="iconfont icon-select"></div><div class="text">select</div></div><div class="icon"><div class="iconfont icon-selection"></div><div class="text">selection</div></div><div class="icon"><div class="iconfont icon-semantic"></div><div class="text">semantic</div></div><div class="icon"><div class="iconfont icon-set"></div><div class="text">set</div></div><div class="icon"><div class="iconfont icon-setting"></div><div class="text">setting</div></div><div class="icon"><div class="iconfont icon-share"></div><div class="text">share</div></div><div class="icon"><div class="iconfont icon-shell"></div><div class="text">shell</div></div><div class="icon"><div class="iconfont icon-sidebar"></div><div class="text">sidebar</div></div><div class="icon"><div class="iconfont icon-sitemap"></div><div class="text">sitemap</div></div><div class="icon"><div class="iconfont icon-slides"></div><div class="text">slides</div></div><div class="icon"><div class="iconfont icon-snow"></div><div class="text">snow</div></div><div class="icon"><div class="iconfont icon-software"></div><div class="text">software</div></div><div class="icon"><div class="iconfont icon-sort"></div><div class="text">sort</div></div><div class="icon"><div class="iconfont icon-speed"></div><div class="text">speed</div></div><div class="icon"><div class="iconfont icon-stack"></div><div class="text">stack</div></div><div class="icon"><div class="iconfont icon-state"></div><div class="text">state</div></div><div class="icon"><div class="iconfont icon-storage"></div><div class="text">storage</div></div><div class="icon"><div class="iconfont icon-string"></div><div class="text">string</div></div><div class="icon"><div class="iconfont icon-strong"></div><div class="text">strong</div></div><div class="icon"><div class="iconfont icon-structure"></div><div class="text">structure</div></div><div class="icon"><div class="iconfont icon-study"></div><div class="text">study</div></div><div class="icon"><div class="iconfont icon-style"></div><div class="text">style</div></div><div class="icon"><div class="iconfont icon-subscript"></div><div class="text">subscript</div></div><div class="icon"><div class="iconfont icon-superscript"></div><div class="text">superscript</div></div><div class="icon"><div class="iconfont icon-support"></div><div class="text">support</div></div><div class="icon"><div class="iconfont icon-svg"></div><div class="text">svg</div></div><div class="icon"><div class="iconfont icon-symbol"></div><div class="text">symbol</div></div><div class="icon"><div class="iconfont icon-tab"></div><div class="text">tab</div></div><div class="icon"><div class="iconfont icon-table"></div><div class="text">table</div></div><div class="icon"><div class="iconfont icon-tag"></div><div class="text">tag</div></div><div class="icon"><div class="iconfont icon-template"></div><div class="text">template</div></div><div class="icon"><div class="iconfont icon-tex"></div><div class="text">tex</div></div><div class="icon"><div class="iconfont icon-time"></div><div class="text">time</div></div><div class="icon"><div class="iconfont icon-timer"></div><div class="text">timer</div></div><div class="icon"><div class="iconfont icon-token"></div><div class="text">token</div></div><div class="icon"><div class="iconfont icon-tool"></div><div class="text">tool</div></div><div class="icon"><div class="iconfont icon-tree"></div><div class="text">tree</div></div><div class="icon"><div class="iconfont icon-type"></div><div class="text">type</div></div><div class="icon"><div class="iconfont icon-typescript"></div><div class="text">typescript</div></div><div class="icon"><div class="iconfont icon-ubuntu"></div><div class="text">ubuntu</div></div><div class="icon"><div class="iconfont icon-underscore"></div><div class="text">underscore</div></div><div class="icon"><div class="iconfont icon-update"></div><div class="text">update</div></div><div class="icon"><div class="iconfont icon-valine"></div><div class="text">valine</div></div><div class="icon"><div class="iconfont icon-variable"></div><div class="text">variable</div></div><div class="icon"><div class="iconfont icon-view"></div><div class="text">view</div></div><div class="icon"><div class="iconfont icon-vscode"></div><div class="text">vscode</div></div><div class="icon"><div class="iconfont icon-vssue"></div><div class="text">vssue</div></div><div class="icon"><div class="iconfont icon-vue"></div><div class="text">vue</div></div><div class="icon"><div class="iconfont icon-waline"></div><div class="text">waline</div></div><div class="icon"><div class="iconfont icon-warn"></div><div class="text">warn</div></div><div class="icon"><div class="iconfont icon-wechat"></div><div class="text">wechat</div></div><div class="icon"><div class="iconfont icon-window"></div><div class="text">window</div></div><div class="icon"><div class="iconfont icon-windows"></div><div class="text">windows</div></div><div class="icon"><div class="iconfont icon-workingDirectory"></div><div class="text">workingDirectory</div></div><div class="icon"><div class="iconfont icon-wrap"></div><div class="text">wrap</div></div><div class="icon"><div class="iconfont icon-write"></div><div class="text">write</div></div><div class="icon"><div class="iconfont icon-yaml"></div><div class="text">yaml</div></div></div></details>

:::tip 双向绑定案例 :::

const app = getCurrentInstance().appContext;
const provides = app.provides;

onMounted(() => {
    const copyToClipboard = provides.copyToClipboardProvider(document);
    const icons = document.querySelectorAll('div.icon');
    const clickEvent = function(event) {
            const content = this.querySelector('.text').innerText;
            copyToClipboard(content);
    };
    icons.forEach(icon => icon.onclick = clickEvent);
});

</script>

:::tip Frontmatter配置 :::

:::tip 内置 Markdown 拓展 :::

:::tip 启用 Markdown 增强 :::

:::tip Markdown 增强插件 :::

:::tip 各种插件：图标、徽章、视频、代码演示等图标插件 :::

:::tip 选项卡 :::

:::tabs#fruit

@tab apple#apple

Apple

@tab banana#banana

<span style="color: red;" >Banana</span>

:::

// 选项卡
::: tabs#fruit

@tab apple#apple

Apple

@tab banana#banana

<span style="color: red;" >Banana</span>

:::