Clina's Blog

本雅明·内塔尼亚胡的完美算数教室

Sun, 29 Mar 2026 00:00:00 GMT

灵感来源：https://www.zhihu.com/question/418558139/answer/1445859132

各位！本雅明的算术教室开始了哟！

要以像我一样的good job为目标，努力奋斗哦！

如同华丽丽的钻石和那闪耀的星星一样

伊朗导弹南黎战火什么都能搞定！

一届两届以干到死为目标 GO GO！！

MIGA MI ~ GA!MIGA MI ~ GA!MIGA MI ~ GA!

等等、没错，我们就是要MIGA！

MIGA MI ~ GA! MIGA MI ~ GA!MIGA MI ~ GA!

让犹太再次伟大！

MIGA MI ~ GA!MIGA MI ~ GA!MIGA MI ~ GA!

什么啊，吵死人了，你个恐怖分子！

MIGA MI ~ GA!MIGA MI ~ GA!MIGA MI ~ GA!

炸 ~ 炸 ~ 炸炸炸炸炸炸炸炸炸

从加沙地带进入了地面作战

有三千人死亡了

到了海法治好了一千人

但是只有2千人死亡了

到了特拉维夫又死亡了两人

那么一共有多少人死亡了？

答案是答案是 0人 0人

为什么呢为什么呢so ~ re ~ wa ~

我们以色列怎么会有死亡呢都是fake news ~

腐败调查就没啥意思还是争强好胜些好呢

有精神的话什么都成①・②・⑨！！

转啊转啊时钟的指针转啊转啊头也跟着转

因为眼珠子只有两颗

指针却有三根脑子糊涂了啦

问题题接二连三的来抗议还在继续进行

在这衰败的帝国中别介意被屠杀的巴人和抗议的百姓了

不着急 four more years吧

IRAN IR ~ AN!IRAN IR ~ AN!IRAN IR ~ AN!

所以别再叫我夜壶啦！

IRAN IR ~ AN!IRAN IR ~ AN!IRAN IR ~ AN!

不停止叩关就要扫穴犁庭了哦！

IRAN IR ~ AN!IRAN IR ~ AN!IRAN IR ~ AN!

然后要制裁你们这些建州蛮夷的企业哦！

IRAN IR ~ AN!IRAN IR ~ AN!IRAN IR ~ AN!

毒 ~ 毒 ~ 毒毒毒毒毒毒毒毒毒

加沙地带有一大群阿拉伯人不知道被谁杀死了

全以色列没有一个人

过来道歉了

杀人的士兵装作不知道

死亡人数是多少？

答案是答案是 0人 0人

为什么呢为什么呢因为

阿拉伯人的命就不是命啊

只要忽悠好利库德就继续草菅人命下去

以再干四年为目标①・②・⑨！

一边对伊朗强硬一边跑到了柏林

卧槽！拜登明明不讨人喜欢

以色列的未来真是有够黯淡的！

我明白了！你们是因为我对巴强硬

才如此恨我吧！

真是没办法呢

让我难得屈尊一下把成为总理的秘诀

稍稍教你们一点也是可以的哦

所有所有所有的推特

发出来发出来发出来发出来然后被禁了

老子的老子的老子的厉害的

士兵经济补助政策你们学不会的啦

脑震荡脑震荡脑震荡

脑震荡脑震荡脑震荡要传染了

就都是 IRANIRANIRANIRAN 干的

老子是老子是老子是

老子是老子是老子是没有问题的！

也就是众口所言众口所言众口所言众口所言的

Perfect！

选举失败就没啥意思还是争强好胜些好呢

有精神的话就能连任①・②・⑨！！

转啊转啊时钟的指针转啊转啊头也跟着转

因为眼珠子只有两颗

指针却有三根脑子糊涂了啦

问题接二连三的来抗议还在继续进行

在这衰败的帝国中别介意被屠杀的阿拉伯人和抗议的百姓了

不着急 four more years吧

IRAN IR ~ AN!IRAN IR ~ AN!IRAN IR ~ AN!

MIGA MI ~ GA!

IRAN IR ~ AN!IRAN IR ~ AN!IRAN IR ~ AN!

MIGA MI ~ GA!

IRAN IR ~ AN!IRAN IR ~ AN!IRAN IR ~ AN!

够了！入关就入关啦！我没办法啦！

IRAN IR ~ AN!IRAN IR ~ AN!

炸 ~ 炸 ~ 炸炸炸炸炸炸炸炸炸

啥是 CC 协议？

Thu, 26 Mar 2026 00:00:00 GMT

当你看到这个博客的文章结尾都写着 许可协议 CC BY-NC-SA 4.0 时，你可能会疑惑：CC 协议是什么？

这篇文章就简单的来说一下 CC 协议。

首先，我们要知道 CC 协议是一种公共版权许可。

这是他们的官网：https://creativecommons.org/

CC 协议拥有多种授权要素，这里介绍一下几种常用的。

BY(Attribution): 要求在他人在使用某作品时，须注明原作者。

NC(Non Commercial): 要求在他人在使用某作品时，禁止用于商业用途。

ND(No Derivatives): 要求在他人在使用某作品时，禁止修改。

SA(ShareAlike): 要求在他人在使用某作品时，须使用相同协议发布。

注：SA 与 ND 互斥，无法同时使用。

这些授权要素可以相互组合。

比如，我的博客使用 CC BY-NC-SA 协议，而自由软件中文网则使用 CC BY-SA 协议，所以，自由软件中文网的文章可以商用，而我的博客上面的文章就不行。

还有一种特殊的 CC 协议：CC0 , 它要求原作者放弃在作品上的全部著作权和邻接权，使作品进入公共领域，成为人类共同的知识财产，之后任何⼈都可以在不标示作者和来源的情况下⽆条件地将作品⽤于商业⽤途，⽆需经过任何申请，权利⼈或所有⼈也⽆权再追究责任。

这就是 CC 协议。

对 Fuwari 进行亿些改动

Fri, 20 Mar 2026 00:00:00 GMT

1. 增加评论

参考这篇文章

2. 增加友链

参考这篇文章

3. 增加访问统计卡片

参考这篇文章

4. 图片标题

参考这个 PR

5. 音乐播放器

参考这篇文章

6. Codeberg 仓库卡片

在 src/plugins 新建 rehype-component-codeberg-card.mjs 文件，并写入以下内容：

/// <reference types="mdast" />
import { h } from "hastscript";

/**
 * Creates a Codeberg Card component.
 *
 * @param {Object} properties - The properties of the component.
 * @param {string} properties.repo - The Codeberg repository in the format "owner/repo".
 * @param {import('mdast').RootContent[]} children - The children elements of the component.
 * @returns {import('mdast').Parent} The created Codeberg Card component.
 */
export function CodebergCardComponent(properties, children) {
 if (Array.isArray(children) && children.length !== 0)
  return h("div", { class: "hidden" }, [
   'Invalid directive. ("codeberg" directive must be leaf type "::codeberg{repo="owner/repo"}")',
  ]);

 if (!properties.repo || !properties.repo.includes("/"))
  return h(
   "div",
   { class: "hidden" },
   'Invalid repository. ("repo" attributte must be in the format "owner/repo")',
  );

 const repo = properties.repo;
 const cardUuid = `GC${Math.random().toString(36).slice(-6)}`; // Collisions are not important

 const nAvatar = h(`div#${cardUuid}-avatar`, { class: "gc-avatar" });
 const nLanguage = h(
  `span#${cardUuid}-language`,
  { class: "gc-language" },
  "Waiting...",
 );

 const nTitle = h("div", { class: "gc-titlebar" }, [
  h("div", { class: "gc-titlebar-left" }, [
   h("div", { class: "gc-owner" }, [
    nAvatar,
    h("div", { class: "gc-user" }, repo.split("/")[0]),
   ]),
   h("div", { class: "gc-divider" }, "/"),
   h("div", { class: "gc-repo" }, repo.split("/")[1]),
  ]),
  h("div", { class: "codeberg-logo" }),
 ]);

 const nDescription = h(
  `div#${cardUuid}-description`,
  { class: "gc-description" },
  "Waiting for codeberg.org/api/v1...",
 );

 const nStars = h(`div#${cardUuid}-stars`, { class: "gc-stars" }, "00K");
 const nForks = h(`div#${cardUuid}-forks`, { class: "gc-forks" }, "0K");
 const nLicense = h(`div#${cardUuid}-license`, { class: "gc-license" }, "0K");

 const nScript = h(
  `script#${cardUuid}-script`,
  { type: "text/javascript", defer: true },
  `
      fetch('https://codeberg.org/api/v1/repos/${repo}', { referrerPolicy: "no-referrer" }).then(response => response.json()).then(data => {
        document.getElementById('${cardUuid}-description').innerText = data.description?.replace(/:[a-zA-Z0-9_]+:/g, '') || "Description not set";
        document.getElementById('${cardUuid}-language').innerText = data.language;
        document.getElementById('${cardUuid}-forks').innerText = Intl.NumberFormat('en-us', { notation: "compact", maximumFractionDigits: 1 }).format(data.forks_count).replaceAll("\u202f", '');
        document.getElementById('${cardUuid}-stars').innerText = Intl.NumberFormat('en-us', { notation: "compact", maximumFractionDigits: 1 }).format(data.stars_count).replaceAll("\u202f", '');
        const avatarEl = document.getElementById('${cardUuid}-avatar');
        avatarEl.style.backgroundImage = 'url(' + data.owner.avatar_url + ')';
        avatarEl.style.backgroundColor = 'transparent';
        // Codeberg API does not provide license information, hiding the license field
        document.getElementById('${cardUuid}-license').style.display = 'none';
        document.getElementById('${cardUuid}-card').classList.remove("fetch-waiting");
        console.log("[CODEBERG-CARD] Loaded card for ${repo} | ${cardUuid}.")
      }).catch(err => {
        const c = document.getElementById('${cardUuid}-card');
        c?.classList.add("fetch-error");
        console.warn("[CODEBERG-CARD] (Error) Loading card for ${repo} | ${cardUuid}.")
      })
    `,
 );

 return h(
  `a#${cardUuid}-card`,
  {
   class: "card-codeberg fetch-waiting no-styling",
   href: `https://codeberg.org/${repo}`,
   target: "_blank",
   repo,
  },
  [
   nTitle,
   nDescription,
   h("div", { class: "gc-infobar" }, [nStars, nForks, nLicense, nLanguage]),
   nScript,
  ],
 );
}

然后，在 astro.config.mjs 中添加以下内容：

import sitemap from "@astrojs/sitemap";
import svelte from "@astrojs/svelte";
import tailwind from "@astrojs/tailwind";
import mdx from '@astrojs/mdx';
import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";
import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
import swup from "@swup/astro";
import expressiveCode from "astro-expressive-code";
import icon from "astro-icon";
import { defineConfig } from "astro/config";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
import rehypeComponents from "rehype-components"; /* Render the custom directive content */
import rehypeKatex from "rehype-katex";
import rehypeSlug from "rehype-slug";
import remarkDirective from "remark-directive"; /* Handle directives */
import remarkGithubAdmonitionsToDirectives from "remark-github-admonitions-to-directives";
import remarkMath from "remark-math";
import remarkSectionize from "remark-sectionize";
import { expressiveCodeConfig } from "./src/config.ts";
import { pluginLanguageBadge } from "./src/plugins/expressive-code/language-badge.ts";
import { AdmonitionComponent } from "./src/plugins/rehype-component-admonition.mjs";
+import { CodebergCardComponent } from "./src/plugins/rehype-component-codeberg-card.mjs";
import { GithubCardComponent } from "./src/plugins/rehype-component-github-card.mjs";
import { parseDirectiveNode } from "./src/plugins/remark-directive-rehype.js";
import { remarkExcerpt } from "./src/plugins/remark-excerpt.js";
import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs";
import { pluginCustomCopyButton } from "./src/plugins/expressive-code/custom-copy-button.js";

// https://astro.build/config
export default defineConfig({
 site: "https://cli.loc.cc",
 base: "/",
 trailingSlash: "always",
 image: {
  // 全局响应式布局
  layout: "constrained",
 },
 experimental: {
  // Rust 编译器以提升构建性能（实验性）
  // 队列渲染以优化性能（实验性）
  queuedRendering: { enabled: true }, 
 },
 integrations: [
  tailwind({
   nesting: true,
  }),
  swup({
   theme: false,
   animationClass: "transition-swup-", // see https://swup.js.org/options/#animationselector
   // the default value `transition-` cause transition delay
   // when the Tailwind class `transition-all` is used
   containers: ["main", "#toc"],
   smoothScrolling: true,
   cache: true,
   preload: true,
   accessibility: true,
   updateHead: true,
   updateBodyClass: false,
   globalInstance: true,
  }),
  icon({
   include: {
    "preprocess: vitePreprocess(),": ["*"],
    "fa6-brands": ["*"],
    "fa6-regular": ["*"],
    "fa6-solid": ["*"],
   },
  }),
  expressiveCode({
   themes: [expressiveCodeConfig.darkTheme, expressiveCodeConfig.lightTheme],
   useDarkModeMediaQuery: false,
   plugins: [
    pluginCollapsibleSections(),
    pluginLineNumbers(),
    pluginLanguageBadge(),
    pluginCustomCopyButton()
   ],
   defaultProps: {
    wrap: true,
    overridesByLang: {
     shellsession: {
      showLineNumbers: false,
     },
    },
   },
   styleOverrides: {
    codeBackground: "var(--codeblock-bg)",
    borderRadius: "0.75rem",
    borderColor: "none",
    codeFontSize: "0.875rem",
    codeFontFamily: "'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
    codeLineHeight: "1.5rem",
    frames: {
     editorBackground: "var(--codeblock-bg)",
     terminalBackground: "var(--codeblock-bg)",
     terminalTitlebarBackground: "var(--codeblock-topbar-bg)",
     editorTabBarBackground: "var(--codeblock-topbar-bg)",
     editorActiveTabBackground: "none",
     editorActiveTabIndicatorBottomColor: "var(--primary)",
     editorActiveTabIndicatorTopColor: "none",
     editorTabBarBorderBottomColor: "var(--codeblock-topbar-bg)",
     terminalTitlebarBorderBottomColor: "none"
    },
    textMarkers: {
     delHue: 0,
     insHue: 180,
     markHue: 250
    }
   },
   frames: {
    showCopyToClipboardButton: false,
   }
  }),
        svelte(),
  sitemap(),
  mdx(),
 ],
 markdown: {
  remarkPlugins: [
   remarkMath,
   remarkReadingTime,
   remarkExcerpt,
   remarkGithubAdmonitionsToDirectives,
   remarkDirective,
   remarkSectionize,
   parseDirectiveNode,
  ],
  rehypePlugins: [
   rehypeKatex,
   rehypeSlug,
   [
    rehypeComponents,
    {
     components: {
+      codeberg: CodebergCardComponent,
      github: GithubCardComponent,
      note: (x, y) => AdmonitionComponent(x, y, "note"),
      tip: (x, y) => AdmonitionComponent(x, y, "tip"),
      important: (x, y) => AdmonitionComponent(x, y, "important"),
      caution: (x, y) => AdmonitionComponent(x, y, "caution"),
      warning: (x, y) => AdmonitionComponent(x, y, "warning"),
     },
    },
   ],
   [
    rehypeAutolinkHeadings,
    {
     behavior: "append",
     properties: {
      className: ["anchor"],
     },
     content: {
      type: "element",
      tagName: "span",
      properties: {
       className: ["anchor-icon"],
       "data-pagefind-ignore": true,
      },
      children: [
       {
        type: "text",
        value: "#",
       },
      ],
     },
    },
   ],
  ],
 },
 vite: {
  build: {
   rollupOptions: {
    onwarn(warning, warn) {
     // temporarily suppress this warning
     if (
      warning.message.includes("is dynamically imported by") &&
      warning.message.includes("but also statically imported by")
     ) {
      return;
     }
     warn(warning);
    },
   },
  },
 },
});

然后，在 markdown-extend.styl 添加以下内容：

.custom-md

  blockquote.admonition
    .bdm-title
      display: flex
      align-items: center
      margin-bottom: -.9rem
      font-weight: bold

      &:before
        content: ' '
        display: inline-block
        font-size: inherit
        overflow: visible
        margin-right: .6rem
        height: 1em
        width: 1em
        vertical-align: -.126em
        mask-size: contain
        mask-position: center
        mask-repeat: no-repeat
        transform: translateY(-0.0625rem)
    &.bdm-tip
      .bdm-title
        color: var(--admonitions-color-tip)

        &:before
          background: var(--admonitions-color-tip)
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'%3E%3C/path%3E%3C/svg%3E")

      &:before
        background: var(--admonitions-color-tip)
    &.bdm-note
      .bdm-title
        color: var(--admonitions-color-note)

        &:before
          background: var(--admonitions-color-note)
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath fill='var(--admonitions-color-tip)' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'%3E%3C/path%3E%3C/svg%3E")

      &:before
        background: var(--admonitions-color-note)
    &.bdm-important
      .bdm-title
        color: var(--admonitions-color-important)

        &:before
          background: var(--admonitions-color-important)
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'%3E%3C/path%3E%3C/svg%3E")

      &:before
        background: var(--admonitions-color-important)
    &.bdm-warning
      .bdm-title
        color: var(--admonitions-color-warning)

        &:before
          background: var(--admonitions-color-warning)
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'%3E%3C/path%3E%3C/svg%3E")

      &:before
        background: var(--admonitions-color-warning)
    &.bdm-caution
      .bdm-title
        color: var(--admonitions-color-caution)

        &:before
          background: var(--admonitions-color-caution)
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'%3E%3C/path%3E%3C/svg%3E")

      &:before
        background: var(--admonitions-color-caution)

  img
    border-radius: 0.75rem

  hr
    border-color: var(--line-divider)
    border-style: dashed

  iframe
    border-radius: 0.75rem
    margin-left: auto
    margin-right: auto
    max-width: 100%

a.card-github
  display: block
  background: var(--license-block-bg)
  position: relative
  margin: 0.5rem 0
  padding: 1.1rem 1.5rem 1.1rem 1.5rem
  color: var(--tw-prose-body)
  border-radius: var(--radius-large)
  text-decoration-thickness: 0px
  text-decoration-line: none

  &:hover
    background-color: var(--btn-regular-bg-hover)

    .gc-titlebar
      color: var(--btn-content)

    .gc-stars, .gc-forks, .gc-license, .gc-description
      color: var(--tw-prose-headings)

      &:before
        background-color: var(--tw-prose-headings)

  &:active
    scale: .98
    background-color: var(--btn-regular-bg-active);

  .gc-titlebar
    display: flex
    align-items: center
    justify-content: space-between
    margin-bottom: 0.5rem
    color: var(--tw-prose-headings)
    font-size: 1.25rem
    font-weight: 500

    .gc-titlebar-left
      display: flex
      flex-flow: row nowrap
      gap: 0.5rem

    .gc-repo
      font-weight: bold

    .gc-owner
      font-weight: 300
      position: relative
      display: flex
      flex-flow: row nowrap
      gap: 0.5rem
      align-items: center

    .gc-avatar
      display: block
      overflow: hidden
      width: 1.5rem
      height: 1.5rem
      margin-top: -0.1rem
      background-color: var(--primary)
      background-size: cover
      border-radius: 50%

  .gc-description
    margin-bottom: 0.7rem
    font-size: 1rem
    font-weight: 300
    line-height: 1.5rem
    color: var(--tw-prose-body)

  .gc-infobar
    display: flex
    flex-flow: row nowrap
    gap: 1.5rem
    color: var(--tw-prose-body)
    width: fit-content

  .gc-language
    display: none

  .gc-stars, .gc-forks, .gc-license, .github-logo
    font-weight: 500
    font-size: 0.875rem
    opacity: 0.9;

    &:before
      content: ' '
      display: inline-block
      height: 1.3em
      width: 1.3em
      margin-right: .4rem
      vertical-align: -.24em
      font-size: inherit
      background-color: var(--tw-prose-body)
      overflow: visible
      mask-size: contain
      mask-position: center
      mask-repeat: no-repeat
      transition-property: background-color, background;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
      transition-duration: 0.15s

  .gc-stars
    &:before
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z'%3E%3C/path%3E%3C/svg%3E")

  .gc-license
    &:before
      margin-right: .5rem
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z'%3E%3C/path%3E%3C/svg%3E")

  .gc-forks
    &:before
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z'%3E%3C/path%3E%3C/svg%3E")

  .github-logo
    font-size: 1.25rem

    &:before
      background-color: var(--tw-prose-headings)
      margin-right: 0
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='32' viewBox='0 0 496 512'%3E%3Cpath fill='%23a1f7cb' d='M165.9 397.4c0 2-2.3 3.6-5.2 3.6c-3.3.3-5.6-1.3-5.6-3.6c0-2 2.3-3.6 5.2-3.6c3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9c2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9c.3 2 2.9 3.3 5.9 2.6c2.9-.7 4.9-2.6 4.6-4.6c-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2c12.8 2.3 17.3-5.6 17.3-12.1c0-6.2-.3-40.4-.3-61.4c0 0-70 15-84.7-29.8c0 0-11.4-29.1-27.8-36.6c0 0-22.9-15.7 1.6-15.4c0 0 24.9 2 38.6 25.8c21.9 38.6 58.6 27.5 72.9 20.9c2.3-16 8.8-27.1 16-33.7c-55.9-6.2-112.3-14.3-112.3-110.5c0-27.5 7.6-41.3 23.6-58.9c-2.6-6.5-11.1-33.3 2.6-67.9c20.9-6.5 69 27 69 27c20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27c13.7 34.7 5.2 61.4 2.6 67.9c16 17.7 25.8 31.5 25.8 58.9c0 96.5-58.9 104.2-114.8 110.5c9.2 7.9 17 22.9 17 46.4c0 33.7-.3 75.4-.3 83.6c0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252C496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2c1.6 1.6 3.9 2.3 5.2 1c1.3-1 1-3.3-.7-5.2c-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9c1.6 1 3.6.7 4.3-.7c.7-1.3-.3-2.9-2.3-3.9c-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2c2.3 2.3 5.2 2.6 6.5 1c1.3-1.3.7-4.3-1.3-6.2c-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9c1.6 2.3 4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2c-1.4-2.3-4-3.3-5.6-2'/%3E%3C/svg%3E")

a.card-github.fetch-waiting
  pointer-events: none
  opacity: 0.7
  transition: opacity 0.15s ease-in-out

  .gc-description, .gc-infobar, .gc-avatar
    background-color: var(--tw-prose-body)
    color: transparent
    opacity: 0.5;
    animation: pulsate 2s infinite linear
    user-select: none

    &:before
      background-color: transparent

  .gc-repo
    margin-left: -0.1rem

  .gc-description, .gc-infobar
    border-radius: 0.5rem

a.card-codeberg
  display: block
  background: var(--license-block-bg)
  position: relative
  margin: 0.5rem 0
  padding: 1.1rem 1.5rem 1.1rem 1.5rem
  color: var(--tw-prose-body)
  border-radius: var(--radius-large)
  text-decoration-thickness: 0px
  text-decoration-line: none

  &:hover
    background-color: var(--btn-regular-bg-hover)

    .gc-titlebar
      color: var(--btn-content)

    .gc-stars, .gc-forks, .gc-license, .gc-description
      color: var(--tw-prose-headings)

      &:before
        background-color: var(--tw-prose-headings)

  &:active
    scale: .98
    background-color: var(--btn-regular-bg-active);

  .gc-titlebar
    display: flex
    align-items: center
    justify-content: space-between
    margin-bottom: 0.5rem
    color: var(--tw-prose-headings)
    font-size: 1.25rem
    font-weight: 500

    .gc-titlebar-left
      display: flex
      flex-flow: row nowrap
      gap: 0.5rem

    .gc-repo
      font-weight: bold

    .gc-owner
      font-weight: 300
      position: relative
      display: flex
      flex-flow: row nowrap
      gap: 0.5rem
      align-items: center

    .gc-avatar
      display: block
      overflow: hidden
      width: 1.5rem
      height: 1.5rem
      margin-top: -0.1rem
      background-color: var(--primary)
      background-size: cover
      border-radius: 50%

  .gc-description
    margin-bottom: 0.7rem
    font-size: 1rem
    font-weight: 300
    line-height: 1.5rem
    color: var(--tw-prose-body)

  .gc-infobar
    display: flex
    flex-flow: row nowrap
    gap: 1.5rem
    color: var(--tw-prose-body)
    width: fit-content

  .gc-language
    display: none

  .gc-stars, .gc-forks, .gc-license, .codeberg-logo
    font-weight: 500
    font-size: 0.875rem
    opacity: 0.9;

    &:before
      content: ' '
      display: inline-block
      height: 1.3em
      width: 1.3em
      margin-right: .4rem
      vertical-align: -.24em
      font-size: inherit
      background-color: var(--tw-prose-body)
      overflow: visible
      mask-size: contain
      mask-position: center
      mask-repeat: no-repeat
      transition-property: background-color, background;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
      transition-duration: 0.15s

  .gc-stars
    &:before
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z'%3E%3C/path%3E%3C/svg%3E")

  .gc-license
    display: none

  .gc-forks
    &:before
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z'%3E%3C/path%3E%3C/svg%3E")

  .codeberg-logo
    font-size: 1.25rem

    &:before
      background-color: var(--tw-prose-headings)
      margin-right: 0
      mask-image: url("https://codeberg.org/Codeberg/Design/raw/commit/ac514aa9aaa2457d4af3c3e13df3ab136d22a49a/logo/icon/svg/codeberg-logo_icon_blue.svg")

a.card-codeberg.fetch-waiting
  pointer-events: none
  opacity: 0.7
  transition: opacity 0.15s ease-in-out

  .gc-description, .gc-infobar, .gc-avatar
    background-color: var(--tw-prose-body)
    color: transparent
    opacity: 0.5;
    animation: pulsate 2s infinite linear
    user-select: none

    &:before
      background-color: transparent

  .gc-repo
    margin-left: -0.1rem

  .gc-description, .gc-infobar
    border-radius: 0.5rem

a.card-codeberg.fetch-error
  pointer-events: all
  opacity: 1

@keyframes pulsate
  0%
    opacity: 0.15
  50%
    opacity: 0.25
  100%
    opacity: 0.15

.card-codeberg, .card-github, .gc-description, .gc-titlebar, .gc-stars, .gc-forks, .gc-license, .gc-avatar, .codeberg-logo, .github-logo
  transition-property: all
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
  transition-duration: 0.15s

效果：

::codeberg{repo="Clina/fuwari"}

7. 增加图片标题

参考这个 PR

8. 更改字体

参考这篇文章

9. 亮色代码块

参考这个 PR

10. GitHub 文件卡片

参考这个 PR

未完待续...

Hello MDX!

Mon, 09 Mar 2026 00:00:00 GMT

Hello MDX!

今天，我为我的博客添加了 MDX 文件支持。

添加过程，可以参考Astro 官方文档。

作者：{frontmatter.author}

自由软件之输入法————手机篇

Sat, 07 Mar 2026 00:00:00 GMT

本篇文章将介绍几款自由的手机输入法。

Android

同文输入法 (Trime)

::github{repo="osfans/trime"}

下载链接： <img alt='Get it on F-Droid' src='https://fdroid.gitlab.io/artwork/badge/get-it-on.png' width="207" height="80"/> <img src="https://github.com/rubenpgrady/get-it-on-github/raw/refs/heads/main/get-it-on-github.png" alt="Get it on GitHub" width="207" height="80">

小企鹅输入法 (Fcitx 5 For Android)

::github{repo="fcitx5-android/fcitx5-android"}

语燕输入法 (YuyanIME)

::github{repo="gurecn/YuyanIme"}

下载链接： <img src="https://github.com/rubenpgrady/get-it-on-github/raw/refs/heads/main/get-it-on-github.png" alt="Get it on GitHub" width="207" height="80">

iOS

Fcitx 5 For iOS

::github{repo="fcitx-contrib/fcitx5-ios"}

需要侧载安装。

Harmony OS

小企鹅输入法鸿蒙版 (Fcitx 5 For Harmony OS)

::github{repo="fcitx-contrib/fcitx5-harmony"}

下载链接： <img src="https://github.com/rubenpgrady/get-it-on-github/raw/refs/heads/main/get-it-on-github.png" alt="Git it on GitHub" width="207" height="80"> 同样需要侧载安装。

postmarket OS / Ubuntu Touch / Mobian / Pure OS

输入法安装方式与 GNU/Linux 相同，这里不再详细讲解。

为自己的脚本语言编写VSCode支持扩展：从零到发布完整指南

Fri, 02 Jan 2026 00:00:00 GMT

为自己的脚本语言编写VSCode支持扩展：从零到发布完整指南

作者：colaSensei | 发布时间：2026年1月

最近我为自己设计的游戏脚本语言PGNCode开发了VSCode扩展，过程中积累了不少经验。如果你也有自己的DSL（领域特定语言）或脚本语言，这篇文章将带你完整走过为它创建VSCode扩展的每一个步骤。

为什么需要为自定义语言开发VSCode扩展？

在我开发PaperVisualNovel引擎时，设计了PGNCode脚本语言。编写游戏需要编辑.pgn文件，但遇到了一些问题：

没有语法高亮：所有文本都是同一个颜色，难以区分命令、变量和注释
没有代码提示：需要记忆所有命令和参数格式
没有错误检查：语法错误只能在运行时发现
开发体验差：缺少现代IDE应有的功能

这些问题严重影响了开发效率。于是，我决定为PGNCode创建VSCode扩展。

准备工作

技术栈需求

Node.js (>= 14.x)（这个应该都有吧）
Visual Studio Code (用于开发和测试，这个不可能没有吧)
基础的前端知识 (JSON, 正则表达式)

开发工具

# 安装VSCode扩展开发工具
npm install -g yo generator-code

第一步：创建扩展项目

使用官方生成器创建基础项目：

# 创建项目目录
mkdir my-language-extension
cd my-language-extension

# 运行生成器
yo code

在交互式界面中选择：

New Language Support (新语言支持)
输入扩展名称、描述
指定语言ID、文件扩展名

这会生成一个基础的项目结构。

第二步：理解项目结构

生成的项目包含以下核心文件：

my-language-extension/
├── package.json              # 扩展清单
├── syntaxes/
│   └── language.tmLanguage.json # 语法定义
├── language-configuration.json  # 语言配置
└── README.md                 # 说明文档

1. package.json - 扩展清单

这是扩展的"身份证"，定义了扩展的基本信息和功能。

{
    "name": "my-language-support",
    "displayName": "My Language Support",
    "description": "Syntax highlighting for My Language",
    "version": "1.0.0",
    "publisher": "your-name",
    "engines": { "vscode": "^1.75.0" },
    "categories": ["Programming Languages"],
    "contributes": {
        "languages": [{
            "id": "mylang",
            "aliases": ["My Language", "mylang"],
            "extensions": [".mylang", ".ml"],
            "configuration": "./language-configuration.json"
        }],
        "grammars": [{
            "language": "mylang",
            "scopeName": "source.mylang",
            "path": "./syntaxes/mylang.tmLanguage.json"
        }]
    }
}

2. 语法定义文件 (TextMate语法)

这是最核心的部分，定义了如何高亮代码。VSCode使用TextMate语法系统。

{
    "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
    "scopeName": "source.mylang",
    "patterns": [
        {
            "name": "comment.line.mylang",
            "match": "//.*"
        },
        {
            "name": "keyword.control.mylang",
            "match": "\\b(if|else|while|for|return)\\b"
        },
        {
            "name": "constant.numeric.mylang",
            "match": "\\b\\d+(\\.\\d+)?\\b"
        }
    ]
}

关键概念：

scopeName: 语法的根作用域
patterns: 匹配规则数组
name: 作用域名称，决定高亮颜色
match: 正则表达式匹配模式

3. 语言配置文件

定义语言的编辑特性：

{
    "comments": {
        "lineComment": "//",
        "blockComment": ["/*", "*/"]
    },
    "brackets": [
        ["{", "}"],
        ["[", "]"],
        ["(", ")"]
    ],
    "autoClosingPairs": [
        { "open": "{", "close": "}" },
        { "open": "[", "close": "]" },
        { "open": "(", "close": ")" },
        { "open": "\"", "close": "\"" }
    ],
    "indentationRules": {
        "increaseIndentPattern": "^.*\\{[^}\"]*$|^.*\\([^)\"]*$",
        "decreaseIndentPattern": "^\\s*\\}|^\\s*\\)"
    }
}

第三步：设计语法高亮规则

分析语言特性

以我的PGNCode为例，我需要识别：

注释：// 这是注释
命令：say, wait, set, if 等
变量：${variable} 格式
数字：整数和小数
字符串：引号内的文本
标签：LABEL_NAME: 格式

编写匹配规则

{
    "scopeName": "source.pgn",
    "patterns": [
        // 注释
        {
            "name": "comment.line.double-slash.pgn",
            "match": "//.*"
        },

        // 命令（小心处理边界）
        {
            "name": "keyword.control.pgn",
            "match": "(?<!\\$\\{)\\b(say|wait|set|if|choose)\\b(?!\\})"
        },

        // 变量引用
        {
            "name": "variable.parameter.pgn",
            "begin": "\\$\\{",
            "end": "\\}",
            "patterns": [
                {
                    "name": "variable.other.pgn",
                    "match": "[a-zA-Z_][a-zA-Z0-9_]*"
                }
            ]
        },

        // 标签定义（行首的单词后跟冒号）
        {
            "name": "entity.name.tag.pgn",
            "match": "^\\s*[A-Za-z_][A-Za-z0-9_]*:"
        }
    ]
}

技巧：

使用begin/end处理嵌套结构
使用负向零宽断言避免错误匹配
从简单规则开始，逐步完善

第四步：添加代码片段

代码片段可以极大提高编码效率：

{
    "If Command": {
        "prefix": ["if", "IF"],
        "body": [
            "if ${1:variable} ${2|==,!=,>,<,>=,<=|} ${3:value} ${4:LABEL_NAME}"
        ],
        "description": "Conditional jump"
    },
    "Say Command": {
        "prefix": "say",
        "body": [
            "say ${1:text} ${2:0.5} ${3|white,black,blue,green,red,yellow|}"
        ],
        "description": "Display text with typing effect"
    }
}

特性：

prefix: 触发补全的文本
body: 插入的代码，支持占位符${n:default}
选择列表：${1|option1,option2|}
变量：${TM_FILENAME}等内置变量

第五步：本地测试

启动调试

在VSCode中打开扩展项目
按 F5 启动扩展开发主机
在新窗口中创建测试文件
验证语法高亮和代码片段

常见问题调试

问题1：语法高亮不工作

检查.tmLanguage.json格式
验证正则表达式是否正确
检查文件扩展名关联

问题2：代码片段不出现

检查snippets/*.json文件格式
确认snippet的language字段正确
重启扩展主机

问题3：扩展无法激活

检查package.json中的activationEvents
查看"输出"面板的"扩展主机"日志

第六步：高级功能

1. 添加命令和配置

{
    "contributes": {
        "commands": [{
            "command": "mylang.formatDocument",
            "title": "Format MyLang Document"
        }],
        "configuration": {
            "title": "My Language",
            "properties": {
                "mylang.enableSyntaxHighlighting": {
                    "type": "boolean",
                    "default": true,
                    "description": "Enable syntax highlighting"
                }
            }
        }
    },
    "activationEvents": [
        "onLanguage:mylang",
        "onCommand:mylang.formatDocument"
    ]
}

2. 创建语言服务器（可选）

对于复杂的语言功能（代码补全、诊断、跳转定义），可以考虑实现Language Server：

// 创建Language Server
import * as vscode from 'vscode';
import * as lsp from 'vscode-languageclient';

export function activate(context: vscode.ExtensionContext) {
    const serverOptions: lsp.ServerOptions = {
        command: 'node',
        args: [context.asAbsolutePath('server/server.js')]
    };

    const clientOptions: lsp.LanguageClientOptions = {
        documentSelector: [{ scheme: 'file', language: 'mylang' }]
    };

    const client = new lsp.LanguageClient(
        'mylangServer',
        'My Language Server',
        serverOptions,
        clientOptions
    );

    client.start();
}

第七步：打包和发布

1. 安装打包工具

npm install -g @vscode/vsce

2. 准备发布

# 更新版本号
# 完善README.md
# 添加LICENSE
# 更新CHANGELOG.md

3. 打包

vsce package
# 生成: my-language-support-1.0.0.vsix

4. 发布到市场

方法A：直接发布

vsce publish
# 需要发布者令牌

方法B：手动上传

访问 VS Code Marketplace
点击"上传扩展"
选择生成的.vsix文件

第八步：持续维护

监控反馈

关注GitHub Issues
查看市场评价
收集用户需求

版本更新流程

修改代码
更新版本号
更新CHANGELOG
测试
打包
发布

最佳实践

渐进增强：先实现语法高亮，再逐步添加高级功能
测试驱动：为每个功能创建测试用例
文档完善：清晰的README和注释
性能优化：避免复杂的正则表达式
向后兼容：谨慎修改现有功能

实战经验分享

踩过的坑

正则表达式性能问题

// 错误：过于复杂的正则
"match": "\\b(say|wait|show|end|set|random|jump|if|choose|endname|SAY|WAIT|SHOW|END|SET|RANDOM|JUMP|IF|CHOOSE|ENDNAME)\\b"

// 优化：使用忽略大小写标志
"match": "(?i)\\b(say|wait|show|end|set|random|jump|if|choose|endname)\\b"

作用域冲突

// 变量引用内部的文本不应该被当作命令高亮
// 错误：${say} 中的 "say" 被高亮为命令
// 解决：在命令匹配中使用负向零宽断言
"match": "(?<!\\$\\{)\\b(say|wait|set)\\b(?!\\})"

效率技巧

使用开发工具：
- TextMate Grammar Tester
- Scope Inspector

模板化开发：

// 自动生成代码片段的脚本
const commands = [
    { name: 'say', desc: 'Display text' },
    { name: 'set', desc: 'Set variable' }
];

const snippets = {};
commands.forEach(cmd => {
    snippets[cmd.name] = {
        prefix: cmd.name,
        body: [`${cmd.name} \${1:placeholder}`],
        description: cmd.desc
    };
});

测试用例：创建测试文件覆盖所有语法特性：

test-cases.mylang
├── 注释测试
├── 命令测试
├── 变量测试
└── 边界情况测试

成果展示

完成扩展后，我的PGNCode开发体验得到了极大改善：

之前：

纯文本编辑
需要查手册
运行时才发现错误

之后：

彩色语法高亮
智能代码补全
实时错误提示
开发效率提升300%（哈哈）

资源推荐

官方文档：VSCode Extension API
示例项目：VSCode Extension Samples
语法参考：TextMate Language Grammars
正则测试：Regex101

结语

为自己的脚本语言开发VSCode扩展是一项很有价值的工作。它不仅提升了开发体验，也让你的语言看起来更加"专业"。整个过程虽然有些技术细节需要处理，但收获的成就感是巨大的。

关键点回顾：

从简单的语法高亮开始
逐步添加代码片段、配置等高级功能
充分测试，特别关注边界情况
文档完善，便于他人使用
持续维护，响应用户反馈

希望这篇文章能帮助你也为自己的语言创建出色的开发工具。

如何将你的Fuwari博客部署到Codeberg Pages (Forgejo Actions版)

Sun, 28 Dec 2025 00:00:00 GMT

Codeberg Pages 是 Codeberg 官方提供的一个静态网站托管平台，类似于 Github Pages. 今天我们就要将Fuwari博客部署到Codeberg Pages , 使用 Forgejo Actions. 首先，在仓库中点击设置，点击仓库功能 / 概览，打开 Actions，保存设置。 接下来，回到仓库，在仓库根目录新建.forgejo/workflows文件夹. 在文件夹中添加 astro.yml 文件，内容如下：

name: Deploy Astro site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches:
      # If you want to build from a different branch, change it here.
      - main
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

jobs:
  build:
    # You can find the list of available runners on https://codeberg.org/actions/meta, or run one yourself.
    runs-on: codeberg-medium-lazy
    steps:
      - name: Clone the repository
        uses: https://code.forgejo.org/actions/checkout@v4
        with:
          submodules: recursive
          fetch-depth: 0
      - name: check .domains files
        run: |
          git ls-files public/.domains
          ls -la public/
          ls -la public/.domains || echo ".domains not found"
      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 10
      - name: Setup Node.js
        uses: https://code.forgejo.org/actions/setup-node@v4
        with:
          node-version: 22
          cache: 'pnpm'
      - name: Install dependencies
        run: |
          pnpm install
          pnpm install @astrojs/sitemap
      - name: Build Astro site
        run: pnpm run build

      - name: Upload generated files
        uses: https://code.forgejo.org/actions/upload-artifact@v3
        with:
          name: Generated files
          path: dist/
          include-hidden-files: true
      
  deploy:
    needs: [ build ]
    runs-on: codeberg-tiny-lazy
    steps:
      - name: Clone the repository
        uses: https://code.forgejo.org/actions/checkout@v4
        with:
          submodules: recursive
          fetch-depth: 0

      - name: Checkout the target branch and clean it up
        run: |
          git checkout pages || git switch --orphan pages
          rm -Rfv $(ls -A | egrep -v '^(\.git|LICENSE)$')

      - name: Download generated files
        uses: https://code.forgejo.org/actions/download-artifact@v3
        with:
          name: Generated files

      - name: Publish the website
        run: |
          git config user.email codeberg-ci
          git config user.name "Codeberg CI"
          echo "=== Files being committed ==="
          ls -la
          git add .
          git commit --allow-empty --message "Codeberg build for ${GITHUB_SHA}"
          git push origin pages

然后，就可以愉快的在Codeberg Pages上部署Fuwari博客了！

FreeDomainOne 域名注册教程

Fri, 14 Nov 2025 00:00:00 GMT

今天推荐的是 FreeDomainOne 的免费域名，他们提供了publicvm.com,run.place,linkpc.net和work.gd后缀的域名.

首先，进入他们的官网：https://freedomain.one/;

接下来，注册一个账户,并点击发过来的验证邮件里的链接;

然后，回到他们的官网，输入你想要的域名前缀并选择域名后缀，完成后点击Check Availability,检查域名是否可用；

如果可用,点击Claim This Name >>按钮,进入付款页面;

进入付款页面后,保持默认设置,点击SUBMIT >>按钮,注册完成.注意,要记住 Free renew after 后面的日期,以后有用.

注意：注册的域名必须在 Free renew after 后面的日期以后一个月内续期，否则域名会被删除

教程至此结束.

补充：推荐使用https://www.emailtick.com/ 的临时邮箱注册,因为当你输错用户名和密码时，这个网站会把使用这个用户名的用户注册时用的邮箱直接显示出来,有安全风险.

osfc.org.cn && osfs.top域名注册教程

Fri, 14 Nov 2025 00:00:00 GMT

如题，今天讲的是这两个域名的注册教程，暂时都无法托管到Cloudflare. 官网地址：https://registry.osfc.org.cn 我的邀请链接：https://registry.osfc.org.cn/register?invite=286 推荐使用邀请链接，因为那样你可以拿到20Points奖励 第一步，使用上面两个链接的其中一个，进入官网. 第二步，在右上角找到Sign up按钮，并点击，注册一个账号. 第三步，进入仪表板，点+号添加一个域名. 注意，创建一个域名需花费50Points,而注册时会送100Points，也就是可以注册2个域名 这个域名无法修改NS服务器（也许吧），暂时不推荐用作主力域名，只推荐玩一玩.

ZoneABC域名注册教程

Fri, 14 Nov 2025 00:00:00 GMT

如题，今天讲一下ZoneABC域名的注册教程.

ZoneABC提供了webn.cc,zabc.net,sylu.cc,sylu.net,acg.rest,vvvv.ee和ctrl.li后缀的域名.

官网：https://zoneabc.net/

邀请链接：https://zoneabc.net/register?invite=cd9373abf598410ea2294f47a1db8d6d

第一步，点击上面两个链接中的其中一个，进入注册界面，推荐使用邀请链接注册，那样你可以获得额外的10积分.

第二步，注册好账户后，进入面板，注册一个域名.注意，一些前缀比较短的域名会需要积分，经过测试，前缀长度为7及以上的域名无需积分，如果有错误请指正

这个域名比osfc.org.cn良心一点，但DNS记录只可添加20条，适合做备用.

PublicFreeSuffix域名申请教程

Wed, 01 Oct 2025 00:00:00 GMT

如题，此帖讲的是PublicFreeSuffix免费域名的申请教程. 首先，打开他们的GitHub仓库地址： https://github.com/PublicFreeSuffix/PublicFreeSuffix 他们提供了pfsdns.org,nastu.net,tun.re,6ti.net和no.kg后缀的免费域名,都无法托管到Cloudflare. 注册域名步骤： 第一步，fork他们的GitHub仓库. 第二步，打开你fork的仓库，在whois文件夹里新建一个json文件，文件名为你想注册的域名.no.kg.json. 这里使用no.kg的域名后缀作为演示，如果想使用其他域名后缀，请把no.kg改为你想使用的域名后缀. json文件格式：

{
  "registrant": "一个可以发邮件的邮箱",
  "domain": "域名名字",
  "sld": "域名后缀",
  "nameservers": [
    "NS服务器1",
    "NS服务器2",
    "NS服务器3",
    "NS服务器4"
  ],
  "agree_to_agreements": {
    "registration_and_use_agreement": true,
    "acceptable_use_policy": true,
    "privacy_policy": true
  }
}

第三步，在你fork的仓库里把这个提交创建为一个新分支，名字为域名全称-request-1. 注意：第几次更改就填数字几 第四步，向官方仓库发起一个拉取请求，标题为Registration/Update/Remove: 域名名字.域名后缀 内容这样填写：

> All items should be completed and confirmed to trigger the automatic merge workflow.

## Operation Type
- [x] Registration, Register a new domain name.
- [ ] Update, Update NS information or registrant email for an existing domain.
- [ ] Remove, Cancel my domain name.

## Domain
- [x] 域名名字.域名后缀

## Confirmation Items
- [x] I confirm that I will deploy the website content for this domain name and put it into use within 30 days instead of hoarding and occupying resources.
- [x] I confirm that the title of this Pull Request and the submitted files are in the standard format; otherwise, it will not be processed automatically.
- [x] I confirmed that the name in the whois file meets the standards.
- [x] I confirm that the domain name is at least 3 characters.
- [x] I confirm that I have read and understood the [Acceptable Use Policy](https://github.com/PublicFreeSuffix/PublicFreeSuffix/blob/main/agreements/acceptable-use-policy.md).
- [x] I confirm that I have read and agree to the [Privacy Policy](https://github.com/PublicFreeSuffix/PublicFreeSuffix/blob/main/agreements/privacy-policy.md).
- [x] I confirm that I have read and agree to the [Registration And Use Agreement](https://github.com/PublicFreeSuffix/PublicFreeSuffix/blob/main/agreements/registration-and-use-agreement-sokg.md).
- [x] I confirm that the domain does not contain any reserved terms from the [Reserved Words List](https://github.com/PublicFreeSuffix/PublicFreeSuffix/blob/main/reserved_words.txt).
- [x] I confirm that I will complete the registrant's email verification according to [ARAE Instructions](https://github.com/PublicFreeSuffix/PublicFreeSuffix/blob/main/AUTHORIZATION.md) to complete the merger.

如果是更新或删除，就把代码中Registration前面中括号里的x放在Update/Remove前面的中括号里. 第五步：当拉取请求状态为validation-passed后，用你刚才在json文件中填写的邮箱向 pr-authorization@publicfreesuffix.org发送一封邮件，标题为APPROVE_PFS_PR_你的拉取请求ID，内容随便写. 第六步，到你的DNS提供商里添加域名. 至此申请结束.

Image Captions Example

Thu, 13 Mar 2025 00:00:00 GMT

About Image Captions

This feature wraps images in a <figure> tag only when the image carries independent meaning. If the image is part of the content and does not stand alone, it will not be enclosed in a <figure> tag. Only CommonMark syntax is supported.

Usage

Single Image

With Caption

Markdown:

![A description of the image](url "An image title")

HTML:

<figure>
  <div>
    <figure>
      <img alt="A description of the image" src="url">
      <figcaption>An image title</figcaption>
    </figure>
  </div>
</figure>

Without Caption

Markdown:

![A description of the image](url)

HTML:

<figure>
  <div>
    <img alt="A description of the image" src="url">
  </div>
</figure>

Multiple Images

When you include only images within a paragraph, they will be grouped together. Hard or soft breaks can also be used.

With Caption

Markdown:

![Image 1 description](url1 "Image Title 1")  
![Image 2 description](url2 "Image Title 2")

HTML:

<figure>
  <div>
    <figure>
      <img alt="Image 1 description" src="url1">
      <figcaption>Image Title 1</figcaption>
    </figure>
    <figure>
      <img alt="Image 2 description" src="url2">
      <figcaption>Image Title 2</figcaption>
    </figure>
  </div>
</figure>

Without Caption

Markdown:

![Image 1 description](url1)  
![Image 2 description](url2)

HTML:

<figure>
  <div>
    <img alt="Image 1 description" src="url1">
    <img alt="Image 2 description" src="url2">
  </div>
</figure>

With Shared Caption

Markdown:

![Image 1 description](url1 "This becomes the caption")  
![Image 2 description](url2)

HTML:

<figure>
  <div>
    <img alt="Image 1 description" src="url1">
    <img alt="Image 2 description" src="url2">
  </div>
  <figcaption>This becomes the caption</figcaption>
</figure>

Single Image Link

With Caption

Markdown:

[![A description of the image](image-url "An image title")](link-url "A link title")

HTML:

<figure>
  <a href="link-url">
    <figure>
      <img alt="A description of the image" src="image-url">
      <figcaption>An image title</figcaption>
    </figure>
  </a>
  <figcaption>A link title</figcaption>
</figure>

Markdown:

[![A description of the image](image-url)](link-url "A link title")

HTML:

<figure>
  <a href="link-url">
    <img alt="A description of the image" src="image-url">
  </a>
  <figcaption>A link title</figcaption>
</figure>

Markdown:

[![A description of the image](image-url "An image title")](link-url)

HTML:

<figure>
  <a href="link-url">
    <figure>
      <img alt="A description of the image" src="image-url">
      <figcaption>An image title</figcaption>
    </figure>
  </a>
</figure>

Without Caption

Markdown:

[![A description of the image](image-url)](link-url)

HTML:

<figure>
  <a href="link-url">
    <img alt="A description of the image" src="image-url">
  </a>
</figure>

Multiple Image Link

When you include only a multiple-image link within a paragraph, the images will be grouped together. Hard or soft breaks can also be used.

With Caption

Markdown:

[![Image 1 description](image-url1 "Image Title 1")  
![Image 2 description](image-url2 "Image Title 2")](link-url "A link title")

HTML:

<figure>
  <a href="link-url">
    <figure>
      <img alt="Image 1 description" src="image-url1">
      <figcaption>Image Title 1</figcaption>
    </figure>
    <figure>
      <img alt="Image 2 description" src="image-url2">
      <figcaption>Image Title 2</figcaption>
    </figure>
  </a>
  <figcaption>A link title</figcaption>
</figure>

Markdown:

[![Image 1 description](image-url1)  
![Image 2 description](image-url2)](link-url "A link title")

HTML:

<figure>
  <a href="link-url">
    <img alt="Image 1 description" src="image-url1">
    <img alt="Image 2 description" src="image-url2">
  </a>
  <figcaption>A link title</figcaption>
</figure>

Markdown:

[![Image 1 description](image-url1 "Image Title 1")  
![Image 2 description](image-url2 "Image Title 2")](link-url)

HTML:

<figure>
  <a href="link-url">
    <figure>
      <img alt="Image 1 description" src="image-url1">
      <figcaption>Image Title 1</figcaption>
    </figure>
    <figure>
      <img alt="Image 2 description" src="image-url2">
      <figcaption>Image Title 2</figcaption>
    </figure>
  </a>
</figure>

Without Caption

Markdown:

[![Image 1 description](image-url1)  
![Image 2 description](image-url2)](link-url)

HTML:

<figure>
  <a href="link-url">
    <img alt="Image 1 description" src="image-url1">
    <img alt="Image 2 description" src="image-url2">
  </a>
</figure>

Root Relative Path and Relative Path

Root Relative Path

A root relative path refers to assets located in the public directory of your project.

Markdown:

![A description of the image](/favicon/favicon-dark-128.png "An image title")

Relative Path

A relative path refers to assets inside the src directory, and it is relative to the location of the current file.

Markdown:

![A description of the image](../../assets/images/demo-avatar.png "An image title")

Options

You can specify the options in the astro.config.mjs file.

...
import remarkImageCaption from "./src/plugins/remark-image-caption.ts"
...
export default defineConfig({
  ...
  markdown: {
    ...
    remarkPlugins: [
      ...
      remarkImageCaption, // Plugin here
      ...

Name	Type	Default	Description
className	string	""	The class name to apply to the outer `<figure>` element.
excludedPaths	(string \| RegExp)[]	[]	An array of image paths that should be excluded from transformation. This can also be used to exclude paths like those under the `src` folder in Astro projects.
lazyLoad	boolean	false	Set the `loading` attribute on `<img>` elements.
linkAttributes	LinkAttributes		Set the target and relationship attributes for external links. These attributes can also be left unset to delegate handling to other plugins.

linkAttributes

Name	Type	Default	Description
target	string	''	Specify where to open linked documents. The default (empty) does not set a target on links.
rel	string	''	Define the relationship between the current document and the linked document. The default (empty) does not set any relationship.

隐私政策

Fri, 01 Jan 1999 03:20:15 GMT

All Cookies

Strictly necessary cookies（必要的cookies）

Umami：收集站点的基本访问情况，并对外显示浏览量，由本站直接提供
Giscus：提供评论功能，由 Github 提供

Functionality cookies（功能性cookies）

Tracking cookies（追蹤cookies）

Microsoft Clarity：收集站点访问情况

latest update: 2026/02/04