Flygeonの小站

博客更新日志

Sat, 30 May 2026 00:00:00 GMT

2026年05月30日

卡片标签调整

2026年05月29日

反代bangumi图源，解决大陆地区访问问题。

2026年05月27日

优化bangumi页面布局
添加线路切换功能

2026年05月24日

添加友链界面
添加访问量统计
添加bangumi页面

对 Bangumi 反向代理，解决大陆地区访问问题

Sat, 30 May 2026 00:00:00 GMT

:::tip 关于为博客添加bangumi页面的教学见上一篇文章：为博客添加bangumi页面 :::

缘由

继上篇文章后，我发现这个bangumi在国内访问是一片中国红啊，这就导致了天朝网络的环境下无法加载出图片。为了确保正常访问，就需要搭建一个反向代理，将图片资源从 lain.bgm.tv 替换为我们自己的。

实现原理

通过cf worker可以很轻松的实现这个想法，只需要构建好反向代理脚本，然后绑定一个自己的域名即可。(cf默认分配的域名大陆地区会有阻断。)

不过cf woker在大陆地区的网络情况并不理想，所以我在这基础上又套了一层eo的cdn。

所以最终流程就是

用户 -> lain.flygeon.top -> eo节点 -> cfwoker -> lain.bgm.tv

为了防止建立反代被cf斩杀，我们还需要移除登录注册相关的敏感路内容。（防止被判钓鱼站点）

完整代码

/**
 * Cloudflare Workers 反向代理脚本
 * 支持代理 bgm.tv 和 lain.bgm.tv
 */

// 默认目标域名（主站）
const DEFAULT_HOST = 'bgm.tv';

// 允许代理的目标域名列表
const ALLOWED_HOSTS = [
  'bgm.tv',
  'lain.bgm.tv',
];

// 允许的请求方法
const ALLOWED_METHODS = ['GET', 'HEAD', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'PATCH'];

/** 需要屏蔽的固定路径 */
const BLOCKED_PATHS = [
  '/login',
  '/signup',
  '/register',
  '/auth',
  '/oauth',
];

/** 需要屏蔽的动态路径规则 */
const BLOCKED_PATTERNS = [
  /^\/subject\/\d+\/edit/,
  /^\/subject\/\d+\/related/,
  /^\/subject\/\d+\/episode_edit/,
  /^\/subject\/\d+\/merge/,
  /^\/character\/\d+\/edit/,
  /^\/person\/\d+\/edit/,
  /^\/subject\/\d+\/\(modify\)/,
  /^\/subject\/\d+\/delete/,
  /^\/subject\/\d+\/recollect/,
  /^\/subject\/\d+\/watched/,
  /^\/subject\/\d+\/interest/,
  /^\/subject\/\d+\/comments/,
];

/** 检查路径是否需要屏蔽 */
function isBlockedPath(path) {
  const normalizedPath = path.replace(/\/$/, '') || '/';

  for (const blocked of BLOCKED_PATHS) {
    if (normalizedPath === blocked || normalizedPath.startsWith(blocked + '/')) {
      return true;
    }
  }

  for (const pattern of BLOCKED_PATTERNS) {
    if (pattern.test(normalizedPath)) {
      return true;
    }
  }

  return false;
}

/** 替换 HTML 中的原始域名为代理域名 */
function rewriteHtmlUrls(html, proxyOrigin) {
  // 替换 lain.bgm.tv 的链接
  html = html.replace(
    /https?:\/\/lain\.bgm\.tv/gi,
    `${proxyOrigin}`
  );

  // 替换 bgm.tv 的链接
  html = html.replace(
    /https?:\/\/bgm\.tv/gi,
    `${proxyOrigin}`
  );

  // 处理相对协议 URL (//lain.bgm.tv)
  html = html.replace(
    /\/\/lain\.bgm\.tv/gi,
    `${proxyOrigin}`
  );

  // 处理相对协议 URL (//bgm.tv)
  html = html.replace(
    /\/\/bgm\.tv/gi,
    `${proxyOrigin}`
  );

  // 避免重复替换：清理可能出现的双重代理 URL
  const escapedOrigin = proxyOrigin.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const doubleProxyPattern = new RegExp(
    `${escapedOrigin}${escapedOrigin}/`,
    'gi'
  );
  html = html.replace(doubleProxyPattern, `${proxyOrigin}/`);

  return html;
}

/** 过滤 HTML 内容，移除登录/注册相关元素 */
async function filterHtmlContent(response, proxyOrigin) {
  const contentType = response.headers.get('content-type') || '';
  if (!contentType.includes('text/html')) {
    return response;
  }

  let html = await response.text();

  // 替换 HTML 中的原始域名为代理域名
  html = rewriteHtmlUrls(html, proxyOrigin);

  // 移除登录/注册相关元素
  const BLOCKED_HTML_PATTERNS = [
    /<form[^>]*action="[^"]*(?:login|signin)[^"]*"[\s\S]*?<\/form>/gi,
    /<form[^>]*id="[^"]*login[^"]*"[\s\S]*?<\/form>/gi,
    /<form[^>]*class="[^"]*login[^"]*"[\s\S]*?<\/form>/gi,
    /<form[^>]*action="[^"]*(?:signup|register)[^"]*"[\s\S]*?<\/form>/gi,
    /<div[^>]*id="headerLogin"[^>]*>[\s\S]*?<\/div>/gi,
    /<a[^>]*href="[^"]*(?:login|signin|signup|register)[^"]*"[^>]*>[\s\S]*?<\/a>/gi,
  ];

  for (const pattern of BLOCKED_HTML_PATTERNS) {
    html = html.replace(pattern, '');
  }

  const filteredHeaders = new Headers(response.headers);
  filteredHeaders.delete('content-length');

  return new Response(html, {
    status: response.status,
    statusText: response.statusText,
    headers: filteredHeaders,
  });
}

/**
 * 主入口
 */
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

/**
 * 处理 OPTIONS 预检请求
 */
function handleOptions(request) {
  const headers = new Headers();
  headers.set('Access-Control-Allow-Origin', '*');
  headers.set('Access-Control-Allow-Methods', ALLOWED_METHODS.join(', '));
  headers.set('Access-Control-Allow-Headers', request.headers.get('Access-Control-Request-Headers') || '*');
  headers.set('Access-Control-Max-Age', '86400');

  return new Response(null, {
    status: 204,
    headers: headers,
  });
}

async function handleRequest(request) {
  const url = new URL(request.url);

  // 处理 OPTIONS 预检请求
  if (request.method === 'OPTIONS') {
    return handleOptions(request);
  }

  // 确定目标域名
  let targetHost = DEFAULT_HOST;
  let targetPath = url.pathname;
  let targetSearch = url.search;

  // lain.bgm.tv 特有的资源路径前缀
  const LAIN_PATH_PREFIXES = ['/r/', '/pic/', '/cover/', '/crt/', '/sub/', '/user/'];

  if (LAIN_PATH_PREFIXES.some(prefix => url.pathname.startsWith(prefix))) {
    targetHost = 'lain.bgm.tv';
  }

  // 检查路径是否需要屏蔽
  if (isBlockedPath(targetPath)) {
    return new Response(
      `<!DOCTYPE html>
<html>
<head><title>访问受限</title></head>
<body style="text-align:center;padding:50px;font-family:sans-serif;">
  <h1>访问受限</h1>
  <p>该页面已被屏蔽。</p>
  <a href="/">返回首页</a>
</body>
</html>`,
      {
        status: 403,
        headers: { 'Content-Type': 'text/html; charset=utf-8' },
      }
    );
  }

  // 构建目标 URL
  const targetUrl = `https://${targetHost}${targetPath}${targetSearch}`;

  // 验证目标域名是否在白名单中
  if (!ALLOWED_HOSTS.includes(targetHost)) {
    return new Response(
      JSON.stringify({
        error: 'Target host not allowed',
        allowed_hosts: ALLOWED_HOSTS,
      }),
      {
        status: 403,
        headers: { 'Content-Type': 'application/json' },
      }
    );
  }

  // 复制并修改请求头
  const headers = new Headers(request.headers);
  headers.delete('host');
  headers.delete('cf-connecting-ip');
  headers.delete('cf-ray');
  headers.delete('cf-visitor');
  headers.delete('cf-worker');
  headers.set('Host', targetHost);

  // 创建代理请求
  const proxyRequest = new Request(targetUrl, {
    method: request.method,
    headers: headers,
    body: request.body,
    redirect: 'manual',
  });

  try {
    // 发送代理请求
    const response = await fetch(proxyRequest);

    // 复制响应并修改头部
    const proxyHeaders = new Headers(response.headers);
    proxyHeaders.set('Access-Control-Allow-Origin', '*');
    proxyHeaders.set('Access-Control-Allow-Methods', ALLOWED_METHODS.join(', '));
    proxyHeaders.set('Access-Control-Allow-Headers', '*');
    proxyHeaders.delete('server');
    proxyHeaders.delete('x-powered-by');
    proxyHeaders.delete('via');

    // 处理重定向
    if ([301, 302, 303, 307, 308].includes(response.status)) {
      const location = proxyHeaders.get('location');
      if (location) {
        try {
          const redirectUrl = new URL(location, targetUrl);
          if (ALLOWED_HOSTS.includes(redirectUrl.hostname)) {
            const proxyRedirect = `${url.origin}${redirectUrl.pathname}${redirectUrl.search}`;
            proxyHeaders.set('location', proxyRedirect);
          }
        } catch (e) {
          // 保留原始 location
        }
      }
    }

    // 处理 Set-Cookie 中的 Domain 属性
    const setCookie = proxyHeaders.get('set-cookie');
    if (setCookie) {
      proxyHeaders.set('set-cookie', setCookie.replace(/domain=[^;]+;?/gi, ''));
    }

    // 过滤 HTML 内容
    const filteredResponse = await filterHtmlContent(
      new Response(response.body, {
        status: response.status,
        statusText: response.statusText,
        headers: proxyHeaders,
      }),
      url.origin
    );

    return filteredResponse;

  } catch (error) {
    return new Response(
      JSON.stringify({
        error: 'Proxy request failed',
        message: error.message,
      }),
      {
        status: 502,
        headers: { 'Content-Type': 'application/json' },
      }
    );
  }
}

博客 Bangumi 页面适配

搭建好反向代理后，还需要修改博客中 Bangumi 页面的图片加载逻辑，让封面图走代理域名而不是直连 lain.bgm.tv。

修改 Card.astro

找到 src/components/bangumi/Card.astro，添加一个 getImageUrl 函数，将 Bangumi 的图片地址替换为代理地址：

---
import type { UserSubjectCollection } from "@/types/bangumi";

interface Props {
	item: UserSubjectCollection;
}

const { item } = Astro.props;

const subject_base_url = "https://bgm.tv/subject/";

function getImageUrl(originalUrl: string | undefined): string | undefined {
	if (!originalUrl) return undefined;
	return originalUrl.replace(
		"https://lain.bgm.tv/",
		"https://lain.flygeon.top/",
	);
}
---

然后在图片标签中使用这个函数：

<img
  data-src={getImageUrl(item.subject.images.medium)}
  alt={item.subject.name_cn || item.subject.name}
  class="bangumi-lazy-img w-full h-full object-cover pointer-events-none opacity-0 transition-opacity duration-300"
/>

为什么只改 Card 组件

Bangumi 页面中，图片地址只出现在 Card.astro 这一个组件里。BangumiSection.astro 负责数据分发和筛选，Pagination.astro 负责分页交互，FilterControls.astro 负责状态过滤，它们都不涉及图片 URL 的渲染。因此只需要修改 Card 组件即可覆盖所有图片请求。

enjoy it！

为 Fuwari 博客添加 Umami 访问量统计

Sun, 24 May 2026 00:00:00 GMT

:::tip 你可以直接将这篇文章丢给你的ai Agent，让它帮你实现。 :::

为 Fuwari 博客添加 Umami 访问量统计

对于静态博客而言，了解访客来源与流量趋势是很有必要的。在不自建服务器的前提下，配置简单、功能强大的 Umami 往往是我们的首选。

然而，直接挂载 Umami 的分享外链不够直观且破坏页面一致性。本文将教你如何将 Umami 的统计数据以原生组件的形式集成到博客中，实现以下效果：

侧边栏显示总浏览量和访问数
每篇文章卡片显示该文章的独立浏览量
数据实时获取，支持数字动画

前置条件

一个已部署好的 Fuwari 博客
启用 Umami 统计的站点
获取 Umami 的分享链接

获取 Umami 分享链接

在 Umami 后台启用"分享 URL"，你应该会得到一个类似 https://umami.example.com/share/OSwi3PpuZgZ2Io3a 格式的链接。记下这个链接，稍后配置需要用到。

步骤一：添加 Umami 跟踪脚本

首先需要在博客的 <head> 中注入 Umami 的跟踪脚本，这样才能记录访问数据。

在 src/layouts/Layout.astro 的 <head> 区域添加：

<script defer src="https://example.com/script.js" data-website-id="你的website-id"></script>

提示：这在Umami的后台配置中可以找到。

步骤二：创建侧边栏统计组件

在 src/components/widget/ 目录下创建 UmamiStats.astro：

---
import WidgetLayout from "./WidgetLayout.astro";

interface Props {
	class?: string;
	style?: string;
}
const { class: className, style } = Astro.props;
---

<WidgetLayout name="统计" id="umami-stats" class:list={[className, "cursor-pointer transition-opacity active:scale-95"]} {style}>
    <a id="umami-link" target="_blank" rel="noopener noreferrer" class="block">
        <div class="grid grid-cols-2 divide-x divide-neutral-200 dark:divide-neutral-700 text-center py-2">
            <div class="px-2">
                <div class="text-2xl font-bold text-neutral-900 dark:text-neutral-100" id="total-pageviews">-</div>
                <div class="text-sm text-neutral-500 dark:text-neutral-400">总浏览量</div>
            </div>
            <div class="px-2">
                <div class="text-2xl font-bold text-neutral-900 dark:text-neutral-100" id="total-visits">-</div>
                <div class="text-sm text-neutral-500 dark:text-neutral-400">访问数</div>
            </div>
        </div>
    </a>
</WidgetLayout>

<script>
const UMAMI_CONFIG = {
    apiUrl: 'https://umami.flygeon.eu.org/api',
    shareId: 'OSwi3PpuZgZ2Io3a',
};

let __UMAMI_INTERNAL = {
    websiteId: '',
    shareToken: '',
    isReady: false
};

const FALLBACK_STATS = {
    pageviews: 1000,
    visits: 1000,
};

async function initUmamiConfig() {
    try {
        const res = await fetch(`${UMAMI_CONFIG.apiUrl}/share/${UMAMI_CONFIG.shareId}`);
        const data = await res.json();

        __UMAMI_INTERNAL = {
            websiteId: data.websiteId,
            shareToken: data.token,
            isReady: true
        };

        const link = document.getElementById('umami-link');
        if (link) link.setAttribute('href', `https://umami.flygeon.eu.org/share/${UMAMI_CONFIG.shareId}`);

    } catch (e) {
        console.error('Umami Config Init Failed:', e);
    }
}

function formatNumber(num: number): string {
    if (num >= 1000000) {
        return (num / 1000000).toFixed(1) + 'M';
    } else if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'K';
    }
    return Math.round(num).toString();
}

function setStats(values: { pageviews: number; visits: number }) {
    const pageviewsElement = document.getElementById('total-pageviews');
    const visitsElement = document.getElementById('total-visits');

    const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
    const animHandles = new Map<HTMLElement, number>();

    const animateStat = (el: HTMLElement | null, to: number, duration = 2000) => {
        if (!el) return;

        const prev = animHandles.get(el);
        if (prev) cancelAnimationFrame(prev);

        const from = 0;
        const startTime = performance.now();

        const tick = (now: number) => {
            const elapsed = now - startTime;
            const progress = Math.min(1, elapsed / duration);
            const easedProgress = easeOutCubic(progress);

            const current = from + (to - from) * easedProgress;
            el.textContent = formatNumber(current);

            if (progress < 1) {
                animHandles.set(el, requestAnimationFrame(tick));
            }
        };
        animHandles.set(el, requestAnimationFrame(tick));
    };

    animateStat(pageviewsElement, values.pageviews);
    animateStat(visitsElement, values.visits);
}

async function fetchUmamiStats() {
    if (!__UMAMI_INTERNAL.isReady) {
        await initUmamiConfig();
    }

    if (!__UMAMI_INTERNAL.isReady) {
        setStats(FALLBACK_STATS);
        return;
    }

    try {
        const endAt = Date.now();
        const startAt = 0;
        const url = `${UMAMI_CONFIG.apiUrl}/websites/${__UMAMI_INTERNAL.websiteId}/stats?startAt=${startAt}&endAt=${endAt}&unit=hour&timezone=Asia%2FShanghai`;

        const response = await fetch(url, {
            headers: {
                'x-umami-share-token': __UMAMI_INTERNAL.shareToken
            }
        });

        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        const data = await response.json();

        setStats({
            pageviews: data.pageviews || 0,
            visits: data.visits || 0,
        });

    } catch (error) {
        console.error('Umami Fetch Failed:', error);
        setStats(FALLBACK_STATS);
    }
}

let __umamiStatsStarted = false;
function startUmamiStats() {
    if (__umamiStatsStarted) return;
    __umamiStatsStarted = true;
    fetchUmamiStats();
}

function initUmamiStatsVisibility() {
    const container = document.getElementById('umami-stats');
    const io = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
            startUmamiStats();
            io.disconnect();
        }
    }, { threshold: 0.1 });

    if (container) io.observe(container);
}

initUmamiStatsVisibility();

if (window.swup) {
    window.swup.hooks.on('page:view', () => {
        __umamiStatsStarted = false;
        initUmamiStatsVisibility();
    });
}
</script>

记得将 apiUrl 和 shareId 替换为你自己的 Umami 信息，如果直接照抄我的配置，你的网站统计会算在我博客上。

我是自建umami服务器的，如果你使用Umami官方的服务，你的 apiUrl 应该是https://cloud.umami.is/analytics/地区/api

美国的是us，欧洲的是eu

如果你和我一样自建服务器的话，地址则是https://服务器地址/api

步骤三：将统计组件添加到侧边栏

编辑 src/components/widget/SideBar.astro，导入并使用 UmamiStats 组件：

---
import type { MarkdownHeading } from "astro";
import Categories from "./Categories.astro";
import Profile from "./Profile.astro";
import RouteSwitch from "./RouteSwitch.astro";
import Tag from "./Tags.astro";
import UmamiStats from "./UmamiStats.astro";

interface Props {
	class?: string;
	headings?: MarkdownHeading[];
}

const className = Astro.props.class;
---
<div id="sidebar" class:list={[className, "w-full"]}>
    <div class="flex flex-col w-full gap-4 mb-4">
        <Profile></Profile>
    </div>
    <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
        <RouteSwitch class="onload-animation" style="animation-delay: 100ms"></RouteSwitch>
        <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
        <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
        <UmamiStats class="onload-animation" style="animation-delay: 250ms"></UmamiStats>
    </div>
</div>

步骤四：为文章卡片添加独立浏览量

编辑 src/components/PostCard.astro，在 frontmatter 区域添加文章路径提取：

const postPath = url.replace(/\/$/, "");

在文章卡片的元信息区域（字数和阅读时间旁边）添加浏览量显示：

<div class="text-sm text-black/30 dark:text-white/30 flex gap-4 transition">
    <div>
        {remarkPluginFrontmatter.words} {" " + i18n(remarkPluginFrontmatter.words === 1 ? I18nKey.wordCount : I18nKey.wordsCount)}
    </div>
    <div>|</div>
    <div>
        {remarkPluginFrontmatter.minutes} {" " + i18n(remarkPluginFrontmatter.minutes === 1 ? I18nKey.minuteCount : I18nKey.minutesCount)}
    </div>
    <div>|</div>
    <div class="flex items-center gap-1 post-views" data-path={postPath}>
        <Icon name="material-symbols:visibility-outline-rounded" class="text-base"></Icon>
        <span class="post-views-count">-</span>
    </div>
</div>

在文件末尾添加统计脚本：

<script>
const UMAMI_POST_CONFIG = {
    apiUrl: 'https://umami.flygeon.eu.org/api',
    shareId: 'OSwi3PpuZgZ2Io3a',
};

let __UMAMI_POST_INTERNAL = {
    websiteId: '',
    shareToken: '',
    isReady: false
};

async function initUmamiPostConfig() {
    try {
        const res = await fetch(`${UMAMI_POST_CONFIG.apiUrl}/share/${UMAMI_POST_CONFIG.shareId}`);
        const data = await res.json();

        __UMAMI_POST_INTERNAL = {
            websiteId: data.websiteId,
            shareToken: data.token,
            isReady: true
        };
    } catch (e) {
        console.error('Umami Post Config Init Failed:', e);
    }
}

function formatNumber(num: number): string {
    if (num >= 1000000) {
        return (num / 1000000).toFixed(1) + 'M';
    } else if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'K';
    }
    return Math.round(num).toString();
}

async function fetchPostStats(path: string) {
    if (!__UMAMI_POST_INTERNAL.isReady) {
        await initUmamiPostConfig();
    }

    if (!__UMAMI_POST_INTERNAL.isReady) {
        return null;
    }

    try {
        const endAt = Date.now();
        const startAt = 0;
        // Umami v3 API: use path=eq. prefix for exact match
        const apiUrl = `${UMAMI_POST_CONFIG.apiUrl}/websites/${__UMAMI_POST_INTERNAL.websiteId}/stats?startAt=${startAt}&endAt=${endAt}&unit=hour&timezone=Asia%2FShanghai&path=eq.${encodeURIComponent(path + '/')}`;

        const response = await fetch(apiUrl, {
            headers: {
                'x-umami-share-token': __UMAMI_POST_INTERNAL.shareToken
            }
        });

        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        const data = await response.json();

        return {
            pageviews: data.pageviews || 0,
            visits: data.visits || 0,
        };
    } catch (error) {
        console.error('Umami Post Fetch Failed:', error);
        return null;
    }
}

async function initPostViews() {
    const viewElements = document.querySelectorAll('.post-views');
    if (viewElements.length === 0) return;

    for (const el of viewElements) {
        const path = el.getAttribute('data-path');
        const countEl = el.querySelector('.post-views-count');
        if (!path || !countEl) continue;

        const stats = await fetchPostStats(path);
        if (stats) {
            countEl.textContent = formatNumber(stats.pageviews);
        } else {
            countEl.textContent = '-';
        }
    }
}

initPostViews();

if (window.swup) {
    window.swup.hooks.on('page:view', () => {
        initPostViews();
    });
}
</script>

自定义选项

修改统计周期

默认统计所有时间的数据（startAt = 0）。如需调整时间范围，可修改 startAt 参数：

// 最近24小时
const startAt = Date.now() - 86400000;

// 最近30天
const startAt = Date.now() - 2592000000;

// 最近90天
const startAt = Date.now() - 7776000000;

修改备用数据

如果 API 请求失败，组件会显示备用数据。可在 FALLBACK_STATS 中修改：

const FALLBACK_STATS = {
    pageviews: 1000,
    visits: 1000,
};

最终效果

完成以上步骤后，你将看到：

侧边栏统计卡片：实时显示博客总浏览量和总访问数，点击可跳转到 Umami 分享页
文章卡片浏览量：每篇文章显示独立的浏览量数据
数字动画：数据加载时带有平滑的增长动画
SPA 兼容：使用 Swup 路由时数据会自动刷新

参考文献：

为 Fuwari 添加 Umami 访问统计卡片

静态博客展示文章浏览量

一些mmd资源/网站汇总

Sat, 23 May 2026 00:00:00 GMT

模型站

模之屋点我

N站点我

软件下载

mmd本体整合：点我

bledner mmd插件：点我

pmxeditor：

教程

改模教程：点我

模之屋教程：点我

PmxEditor从入门到精通：点我

新的开始

Wed, 20 May 2026 00:00:00 GMT

复活YADAZE 👋

孩子们博客复活了，这次换了架构，由之前的Typecho切换到了Astro。

其实很久之前就说要换了，但是，bokuwa 比较懒狗，

正好vps也快到期了，所以。。。

之前的文章可能会搬过来吧，也可能不会，这也说不准

之前的文章图片用的都是图床，图炸了好多，补起来有点麻烦

就这样吧。

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

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