ZSXの小站 https://blog.zsx815.top/ 钟神秀的博客，在这里记录我的生活日常、踩坑教程和资源分享。 zh-CN Mon, 25 May 26 07:59:16 +0800 2026年05月25日 07:59 Typecho RSS Plugin 欢迎使用 Typecho https://blog.zsx815.top/archives/1/ https://blog.zsx815.top/archives/1/ Tue, 06 Jan 26 20:34:00 +0800 2026年01月06日20:34 ZSXの小站 > 一些语法格式记录。

注释

ℹ️ 提示
补充信息
⚠️ 警告
警告内容
❗ 重要
关键信息
💡 建议
实用建议
⛔ 注意
危险操作警示 
<!-- NOTE: 蓝色 -->
<div style="border-left: 4px solid #0969da; background-color: #ddf4ff; padding: 16px; margin: 16px 0; border-radius: 4px;">
  <strong style="color: #ff6600;">ℹ️ 提示</strong><br>
  <span style="color: #ff6600;">补充信息</span>
</div>

<!-- WARNING: 黄色 -->
<div style="border-left: 4px solid #d1242f; background-color: #ffebe9; padding: 16px; margin: 16px 0; border-radius: 4px;">
  <strong style="color: #ff6600;">⚠️ 警告</strong><br>
  <span style="color: #ff6600;">警告内容</span>
</div>

<!-- IMPORTANT: 紫色 -->
<div style="border-left: 4px solid #8250df; background-color: #f1e5ff; padding: 16px; margin: 16px 0; border-radius: 4px;">
  <strong style="color: #FA3107;">❗ 重要</strong><br>
  <span style="color: #FA3107;">关键信息</span>
</div>

<!-- TIP: 绿色 -->
<div style="border-left: 4px solid #1a7f37; background-color: #dafbe1; padding: 16px; margin: 16px 0; border-radius: 4px;">
  <strong style="color: #ff6600;">💡 建议</strong><br>
  <span style="color: #ff6600;">实用建议</span>
</div>

<!-- CAUTION: 红色 -->
<div style="border-left: 4px solid #cf222e; background-color: #ffebe9; padding: 16px; margin: 16px 0; border-radius: 4px;">
  <strong style="color: #ff6600;">⛔ 注意</strong><br>
  <span style="color: #ff6600;">危险操作警示</span>
</div>
]]> > 一些语法格式记录。

注释

ℹ️ 提示
补充信息
⚠️ 警告
警告内容
❗ 重要
关键信息
💡 建议
实用建议
⛔ 注意
危险操作警示 
<!-- NOTE: 蓝色 -->
<div style="border-left: 4px solid #0969da; background-color: #ddf4ff; padding: 16px; margin: 16px 0; border-radius: 4px;">
  <strong style="color: #ff6600;">ℹ️ 提示</strong><br>
  <span style="color: #ff6600;">补充信息</span>
</div>

<!-- WARNING: 黄色 -->
<div style="border-left: 4px solid #d1242f; background-color: #ffebe9; padding: 16px; margin: 16px 0; border-radius: 4px;">
  <strong style="color: #ff6600;">⚠️ 警告</strong><br>
  <span style="color: #ff6600;">警告内容</span>
</div>

<!-- IMPORTANT: 紫色 -->
<div style="border-left: 4px solid #8250df; background-color: #f1e5ff; padding: 16px; margin: 16px 0; border-radius: 4px;">
  <strong style="color: #FA3107;">❗ 重要</strong><br>
  <span style="color: #FA3107;">关键信息</span>
</div>

<!-- TIP: 绿色 -->
<div style="border-left: 4px solid #1a7f37; background-color: #dafbe1; padding: 16px; margin: 16px 0; border-radius: 4px;">
  <strong style="color: #ff6600;">💡 建议</strong><br>
  <span style="color: #ff6600;">实用建议</span>
</div>

<!-- CAUTION: 红色 -->
<div style="border-left: 4px solid #cf222e; background-color: #ffebe9; padding: 16px; margin: 16px 0; border-radius: 4px;">
  <strong style="color: #ff6600;">⛔ 注意</strong><br>
  <span style="color: #ff6600;">危险操作警示</span>
</div>
]]> 2025年终总结 https://blog.zsx815.top/archives/20/ https://blog.zsx815.top/archives/20/ Wed, 31 Dec 25 16:00:00 +0800 2025年12月31日16:00 ZSXの小站

ℹ️ 提示

一年马上要结束了，终于到我写年末总结了！我的年末总结大体还是总结我今年做了什么和明年的展望吧。

归去来兮辞
陶渊明

往者不可谏，
来者犹可追。

总结

今年算是没什么起色，依旧彷徨不定的一年吧。

2025.1

年初考试，被早早结束甚至连复习作业都没有的电机与电气控制成功背刺，差两分过关。然后就是寒假学车，速成5天去考试，这次一次过，成功拿证！然后算是恶补准备开学补考，然后算是去实践了一段时间。之后就是年底过年，没什么好说的，近些年年味是越来越少，最多也就是去舅舅或者外婆家吃饭了，然后就和普通放假没区别。

2025.2

到了2月份，陪妈妈出去玩了几天，我不是个喜欢外出的人，而且社恐，不过陪妈妈出去玩还是乐意的。然后在11号下午逛Github时看到了 纸鹿 大佬的博客项目，很好看，于是使用！然后开始我正式学习修改博客的旅程。接下来几天就算是练手和尝试不同的博客，然后开始随便写写。后来时不时分享来自电报的项目在我的频道上时不时分享我找到的资源。

很快就开学了，开学正常准备补考，期间还看到4级裸考过关了。然后就是补考过关，然后在26号开始想写写日记，在obs和思源上，基本上一直在坚持，距今基本写了10个月，虽然文笔不怎么样，但一直在坚持。

2025.3

3月份开始我就在不断地尝试各种博客和逛友链，上课等等循环，仔细想想，好久不玩游戏了。期间说实话没什么好写的，同质化严重。

2025.4

4月份又写了些文章，然后忙于学业，同时对博客也一直不是很满意，尝试了很多，同时晚上活动添加一：看LOL比赛。其实也不算看，我有个不算习惯的习惯，干什么事耳朵总想听些东西。

2025.5

年后第一次回家就在劳动节，5天回去转了转，然后就回来实训，准备期末等等，期间发现了不少好的博客主题，不在一一列举。然后在账号等继续测试，选中了好看的solitude主题1，以及后台Qexo1。然后在圣道云开始了typecho和WordPress博客的搭建。由于我的需求不大，最后选择了typecho。

2025.6

6月份开始，电脑出了点问题，反复进BIOS，初步推断是硬盘的问题，但是当时期末有PLC的课，实在不好去修，于是先将就着，然后那段时间就不改项目和写日记了。顺便裸考了一次六级，有一说一，感觉和四级差不多难度🤔。然后考完了期末，放假。

回了家去给电脑清个灰，加了点内存，然后那个问题就不在出现了。

2025.7

暑假第一个月其实就是在实践和休息里面度过，陪老妈转了几天，然后我就肾结石了。

⚠️ 警告
少喝饮料多运动！

睡醒痛的我死去活来，感人人要没了，后来去医院检查，差点动手术，后面吃药自然排出了。

月底的时候搞了台服务器，然后玩了几天Halo，动态的博客还是不大适应，一般般吧，后面就放弃了，然后部署了Ech0、Moments等服务，挺有意思的。

2025.8

8月份其实没什么，着重来说就是新开了个号，然后就是继续玩各种项目和实践。20号一看，六级裸考过关了。

2025.9

开学后继续改博客，然后上课，看比赛然后就是搞了些许项目。后面电脑的问题又出来了，但是被我倒腾了一段时间就好了。

2025.10

国庆在家瘫了7天，然后继续改博客，写博客，回来后就是上课，解决了宽禁带半导体的2万多字的论文和排版，恶心坏我了。在月底的鸭科夫时又出现了那个问题，初步确定是系统盘的问题，拿去售后换了个盘，修了下一些成年旧事。

2025.11

这个月搞好后重新搞环境等等，上课什么的，没什么好说的。月底开始实训，是关于水净化系统的编程，前三天画图，后面那B系统已经绝版，全世界估计就那一间实验室还在用的老古董，能不能用全看天，哪天能用全看天，没什么好说的，因此就是没什么急迫感。

2025.12

这个月就是继续完成实训，上课，再战六级，同样裸考，随便玩玩，反正过了。然后月底再次重搞blog-v3，每次打开项目还是有新的想法还是不错的。

总结

今年还是那咸鱼样，摆烂惯了，总体来说比去年这时候肯定是进步的，还是希望明年更好吧。

展望

不算什么展望吧，希望明年会的更多，解决更多的问题，过得越来越好吧。

  1. 后面还会重新搞一下。 ↩
]]>

ℹ️ 提示

一年马上要结束了，终于到我写年末总结了！我的年末总结大体还是总结我今年做了什么和明年的展望吧。

归去来兮辞
陶渊明

往者不可谏，
来者犹可追。

总结

今年算是没什么起色，依旧彷徨不定的一年吧。

2025.1

年初考试，被早早结束甚至连复习作业都没有的电机与电气控制成功背刺，差两分过关。然后就是寒假学车，速成5天去考试，这次一次过，成功拿证！然后算是恶补准备开学补考，然后算是去实践了一段时间。之后就是年底过年，没什么好说的，近些年年味是越来越少，最多也就是去舅舅或者外婆家吃饭了，然后就和普通放假没区别。

2025.2

到了2月份，陪妈妈出去玩了几天，我不是个喜欢外出的人，而且社恐，不过陪妈妈出去玩还是乐意的。然后在11号下午逛Github时看到了 纸鹿 大佬的博客项目，很好看，于是使用！然后开始我正式学习修改博客的旅程。接下来几天就算是练手和尝试不同的博客，然后开始随便写写。后来时不时分享来自电报的项目在我的频道上时不时分享我找到的资源。

很快就开学了，开学正常准备补考，期间还看到4级裸考过关了。然后就是补考过关，然后在26号开始想写写日记，在obs和思源上，基本上一直在坚持，距今基本写了10个月，虽然文笔不怎么样，但一直在坚持。

2025.3

3月份开始我就在不断地尝试各种博客和逛友链，上课等等循环，仔细想想，好久不玩游戏了。期间说实话没什么好写的，同质化严重。

2025.4

4月份又写了些文章，然后忙于学业，同时对博客也一直不是很满意，尝试了很多，同时晚上活动添加一：看LOL比赛。其实也不算看，我有个不算习惯的习惯，干什么事耳朵总想听些东西。

2025.5

年后第一次回家就在劳动节，5天回去转了转，然后就回来实训，准备期末等等，期间发现了不少好的博客主题，不在一一列举。然后在账号等继续测试，选中了好看的solitude主题1，以及后台Qexo1。然后在圣道云开始了typecho和WordPress博客的搭建。由于我的需求不大，最后选择了typecho。

2025.6

6月份开始，电脑出了点问题，反复进BIOS，初步推断是硬盘的问题，但是当时期末有PLC的课，实在不好去修，于是先将就着，然后那段时间就不改项目和写日记了。顺便裸考了一次六级，有一说一，感觉和四级差不多难度🤔。然后考完了期末，放假。

回了家去给电脑清个灰，加了点内存，然后那个问题就不在出现了。

2025.7

暑假第一个月其实就是在实践和休息里面度过，陪老妈转了几天，然后我就肾结石了。

⚠️ 警告
少喝饮料多运动！

睡醒痛的我死去活来，感人人要没了，后来去医院检查，差点动手术，后面吃药自然排出了。

月底的时候搞了台服务器，然后玩了几天Halo，动态的博客还是不大适应，一般般吧，后面就放弃了，然后部署了Ech0、Moments等服务，挺有意思的。

2025.8

8月份其实没什么，着重来说就是新开了个号，然后就是继续玩各种项目和实践。20号一看，六级裸考过关了。

2025.9

开学后继续改博客，然后上课，看比赛然后就是搞了些许项目。后面电脑的问题又出来了，但是被我倒腾了一段时间就好了。

2025.10

国庆在家瘫了7天，然后继续改博客，写博客，回来后就是上课，解决了宽禁带半导体的2万多字的论文和排版，恶心坏我了。在月底的鸭科夫时又出现了那个问题，初步确定是系统盘的问题，拿去售后换了个盘，修了下一些成年旧事。

2025.11

这个月搞好后重新搞环境等等，上课什么的，没什么好说的。月底开始实训，是关于水净化系统的编程，前三天画图，后面那B系统已经绝版，全世界估计就那一间实验室还在用的老古董，能不能用全看天，哪天能用全看天，没什么好说的，因此就是没什么急迫感。

2025.12

这个月就是继续完成实训，上课，再战六级，同样裸考，随便玩玩，反正过了。然后月底再次重搞blog-v3，每次打开项目还是有新的想法还是不错的。

总结

今年还是那咸鱼样，摆烂惯了，总体来说比去年这时候肯定是进步的，还是希望明年更好吧。

展望

不算什么展望吧，希望明年会的更多，解决更多的问题，过得越来越好吧。

  1. 后面还会重新搞一下。 ↩
]]> 给博客加一个外链安全中转页（/go） https://blog.zsx815.top/archives/17/ https://blog.zsx815.top/archives/17/ Wed, 10 Dec 25 12:00:00 +0800 2025年12月10日12:00 ZSXの小站 > [!NOTE]

这篇文章来自AI整理，来自我的博客。

想做一个类似 hexo-safego 的外链安全检测 / 中转效果，于是在自己的 Nuxt 博客里加了一个 /go 页面，用来统一接住外链，给用户一个“即将离开本站”的提醒和手动确认。

这篇文章记录一下整个实现过程：从需求拆解，到 go.vue 的实现，再到 Markdown 外链、友链卡片接入中转页，以及中途踩到的几个小坑。

背景 & 需求

需求最初很简单：

  • 站内所有 外链（包括 Markdown 正文里的链接、友链页里的链接），点击时不要直接打开目标网站；

  • 先跳到一个中转页 /go?url=...：

    • 提示“即将离开本站”；
    • 显示目标链接和域名；
    • 提供「继续访问」和「返回上一页」两个按钮；
    • 支持几秒钟的倒计时，自动跳转；
  • 内部链接（例如 /posts/...、/about）保持原样，不走 /go。

最后确定的范围是：

  • Markdown 渲染组件 ProseA.vue（文章正文中的链接）；
  • 友链页使用的 FriendLinkCard.vue（link.vue 页面中的友链卡片）。

实现 /go 页面

首先在 app/pages/go.vue 新增一个页面，对应路由 /go。这个页面做几件事：

  1. 从 query 参数里拿到原始链接 url；
  2. 做一层解码和合法性判断；
  3. 展示信息 + 倒计时；
  4. 处理手动「继续访问」和「返回上一页」。

解析 URL 与合法性判断

<script setup lang="ts">
const route = useRoute()
const router = useRouter()

// 原始 query 参数
const rawUrl = computed(() => (route.query.url as string) || '')

// 解码后的 URL：优先 decode，失败就回退到原始字符串，保证按钮始终有值可用
const decodedUrl = computed(() => {
  if (!rawUrl.value)
    return ''
  try {
    return decodeURIComponent(rawUrl.value)
  }
  catch {
    // 如果解码失败，回退使用原始字符串，保证按钮依然可用
    return rawUrl.value
  }
})

// 检查是否是一个合法的 http/https 外链
const isValidExternal = computed(() => {
  if (!decodedUrl.value)
    return false
  try {
    const u = new URL(decodedUrl.value)
    return u.protocol === 'http:' || u.protocol === 'https:'
  }
  catch {
    return false
  }
})

// 提取域名用于展示
const domain = computed(() => {
  if (!isValidExternal.value)
    return ''
  try {
    return new URL(decodedUrl.value).hostname
  }
  catch {
    return ''
  }
})

这里有一个小细节：

  • 一开始如果 decodeURIComponent 失败，直接返回空字符串会导致后面一系列逻辑都认为“无效链接”，按钮会被禁用，看起来像“点不了”；

  • 后来改为失败回退到 rawUrl ，只要 query 里有东西，最终就有一个可用字符串。

    倒计时和自动跳转

    const countdownSeconds = 5
const countdown = ref(countdownSeconds)
let countdownTimer: number | null = null

onMounted(() => {
if (!isValidExternal.value)
  return

countdown.value = countdownSeconds

countdownTimer = window.setInterval(() => {
  if (countdown.value <= 1) {
    clearCountdown()
    proceed()
  }
  else {
    countdown.value -= 1
  }
}, 1000)
})

onUnmounted(() => {
clearCountdown()
})

function clearCountdown() {
if (countdownTimer != null) {
  clearInterval(countdownTimer)
  countdownTimer = null
}
}

    设计思路：

  • 只要判断为合法外链，就从设定的秒数开始倒计时；
  • 每秒减 1，减到 1 时自动调用 proceed() ；

  • 页面销毁（路由离开）时清理定时器，避免内存泄漏或误触发。

    手动跳转和返回逻辑

    function proceed() {
const target = decodedUrl.value || rawUrl.value
if (!target)
  return

clearCountdown()
window.location.href = target
}

function goBack() {
clearCountdown()

// 1. 如果是通过 window.open 打开的新标签页，优先尝试关闭自己
if (window.opener && window.opener !== window) {
  window.close()
  return
}

// 2. 有历史记录就正常返回
if (history.length > 1) {
  history.back()
  return
}

// 3. 没有历史时，尝试根据同源 referrer 返回
if (document.referrer) {
  try {
    const ref = new URL(document.referrer)
    if (ref.origin === window.location.origin) {
      router.push(ref.pathname + ref.search + ref.hash)
      return
    }
  }
  catch {
    // ignore
  }
}

// 4. 兜底：回首页
router.push('/')
}
</script>

    这里对「返回上一页」做了比较细的兼容：

  • 友链卡片那种新标签页场景：通过 window.open('/go?url=...', '_blank') 打开的 /go 页面，其实没有历史记录，这时 history.back() 是无效的，于是我们优先检测 window.opener ，直接 window.close() ，让原来的标签页停留在友链页不动；
  • 同标签页场景：有历史记录就走 history.back() ，行为和用户点浏览器后退按钮一致；

  • 没有历史、没有同源 referrer 的极端场景：最后才兜底跳首页。

    模板和样式

    模板部分主要就是展示提示、链接、按钮和倒计时：

    <template>
<div class="go-page">
  <div class="go-card">
    <h1 class="go-title">即将离开本站</h1>
    <p class="go-desc">
      你将要访问的外部链接：
    </p>
    <p v-if="isValidExternal" class="go-url">{{ decodedUrl }}</p>
    <p v-else class="go-url invalid">链接无效或缺失</p>

    <p v-if="isValidExternal" class="go-domain">
      目标站点：<strong>{{ domain }}</strong>
    </p>

    <div class="go-actions">
      <button type="button" class="btn secondary" @click="goBack">
        返回上一页
      </button>
      <button
        type="button"
        class="btn primary"
        @click="proceed"
      >
        继续访问<span v-if="domain"> {{ domain }}</span>
      </button>
    </div>

    <p v-if="isValidExternal" class="go-countdown">
      {{ countdown }} 秒后将自动跳转，如不希望跳转，请点击「返回上一页」
    </p>

    <p class="go-tip">
      外部网站内容与本博客无关，请注意辨别信息和账号安全。
    </p>
  </div>
</div>
</template>

    样式部分使用了博客现有的变量（ var(--c-text)、 var(--ld-bg-card) 等），整体就是一个居中的卡片，这里不赘述。

接入 Markdown 外链：改造 ProseA.vue
博客的 Markdown 链接渲染组件是 app/components/content/ProseA.vue ，原来大致是：

  • 根据 href 判断是否外链；
  • 用 UtilLink 渲染；
  • 用 v-tip 显示域名或完整地址。

为了让 Markdown 外链走 /go ，改动非常小，只需要在这里统一改造 href 即可：

const props = defineProps<{
  href: string
  icon?: string
}>()

const icon = computed(() => props.icon || getDomainIcon(props.href))
const isExternal = computed(() => isExtLink(props.href))

// 外链统一改成指向 /go?url=encodeURIComponent(href)
const resolvedHref = computed(() => (
  isExternal.value ? `/go?url=${encodeURIComponent(props.href)}` : props.href
))

const tip = computed(() => ({
  content: isExternal.value ? getDomain(props.href) : decodeURIComponent(props.href),
  inlinePositioning: true,
}))

模板：

<template>
  <UtilLink v-tip="tip" class="z-link" :to="resolvedHref">
    <Icon v-if="icon" class="domain-icon" :name="icon" />
    <slot />
  </UtilLink>
</template>

这样一来：

  • Markdown 里写的 https://xxx 外链 → 页面中变成指向 /go?url=... 的链接；
  • 内部链接（ /about 、 /posts/... ）仍然直接跳内部路由，不走 /go 。

接入友链卡片：改造 FriendLinkCard.vue

友链页 link.vue 使用的是 app/components/partial/FriendLinkCard.vue 这张卡片。原来的跳转逻辑是直接打开站点：

function navigateToSite() {
  if (props.siteUrl) {
    window.open(props.siteUrl, '_blank')
  }
}

改造后统一走 /go ：

function navigateToSite() {
  if (!props.siteUrl)
    return

  const target = `/go?url=${encodeURIComponent(props.siteUrl)}`
  window.open(target, '_blank')
}

效果：

  • 友链页面点“前往网站”时，不再直接打开友链，而是新开一个 /go 标签页；
  • /go 负责显示提示、倒计时和跳转；

  • 返回时能够区分“新开标签页”这个场景，优先关闭自己，不干扰原来的 link.vue 页面滚动位置。

    一些踩坑 & 调整

    在实现过程中踩了几个小坑，顺手记一下。

1. 链接合法性校验过于严格导致按钮点不了
一开始「继续访问」按钮的禁用逻辑是：

<button
  :disabled="!isValidExternal"
  @click="proceed"
>
  继续访问
</button>

而 isValidExternal 是通过 new URL(decodedUrl) + 协议判断实现的。这样做的初衷是安全：

URL 缺失、编码错误、协议不是 http/https → 认为不安全，按钮禁用。
但实际使用时：

我们对外链统一做了 encodeURIComponent ；
中间一旦出现编码/解码上的处理差异， isValidExternal 就可能是 false ；
结果就是：页面能显示链接，倒计时能自动跳转，但按钮一直是禁用状态，用户手动点不了。
后面改成：

  • isValidExternal 只用于显示信息（例如显示域名、显示“链接无效或缺失”）；

  • 按钮本身不再绑定禁用条件，始终可点，真正的兜底放在proceed()里：

    function proceed() {
const target = decodedUrl.value || rawUrl.value
if (!target)
  return

clearCountdown()
window.location.href = target
}

    这样既保留了一定的安全感知，又不至于影响正常访问。

2. 返回上一页导致滚动位置混乱
友链卡片是通过 window.open 新开 /go 标签页的，但 /go 一开始是这么写的：

function goBack() {
  if (history.length > 1)
    history.back()
  else
    router.push('/')
}

新标签页基本没有历史，所以会直接 router.push('/') 跳首页。视觉体验就是：

  • 你明明是从 link.vue 底部的友链区域点过来的；
  • 点了「返回上一页」却去了首页，原来的页面滚动位置也被重置，看起来像是“底部组件跑到顶部”。

重写后的 goBack 逻辑就解决了这个体验问题：

  • 新标签页优先 window.close() ；
  • 同标签页用 history.back() ；
  • 实在没有历史才兜底根据 document.referrer / 首页处理。

总结

通过这次改造，博客里所有指定范围的外链都统一走了 /go 中转页，达到了类似 hexo-safego 的效果：

  • 用户在点击外链前会看到明确的提示；
  • 可以手动选择继续访问或返回；
  • 也支持倒计时自动跳转；
  • Markdown 正文和友链页都接入了这套逻辑。

整体实现成本并不高，但能明显提升外链安全感知和交互体验。如果以后需要更严格的策略（例如只允许白名单域名、记录访问日志等），也可以在 /go 这个集中入口上继续扩展。

]]> > [!NOTE]

这篇文章来自AI整理，来自我的博客。

想做一个类似 hexo-safego 的外链安全检测 / 中转效果，于是在自己的 Nuxt 博客里加了一个 /go 页面，用来统一接住外链，给用户一个“即将离开本站”的提醒和手动确认。

这篇文章记录一下整个实现过程：从需求拆解，到 go.vue 的实现，再到 Markdown 外链、友链卡片接入中转页，以及中途踩到的几个小坑。

背景 & 需求

需求最初很简单：

  • 站内所有 外链（包括 Markdown 正文里的链接、友链页里的链接），点击时不要直接打开目标网站；

  • 先跳到一个中转页 /go?url=...：

    • 提示“即将离开本站”；
    • 显示目标链接和域名；
    • 提供「继续访问」和「返回上一页」两个按钮；
    • 支持几秒钟的倒计时，自动跳转；
  • 内部链接（例如 /posts/...、/about）保持原样，不走 /go。

最后确定的范围是：

  • Markdown 渲染组件 ProseA.vue（文章正文中的链接）；
  • 友链页使用的 FriendLinkCard.vue（link.vue 页面中的友链卡片）。

实现 /go 页面

首先在 app/pages/go.vue 新增一个页面，对应路由 /go。这个页面做几件事：

  1. 从 query 参数里拿到原始链接 url；
  2. 做一层解码和合法性判断；
  3. 展示信息 + 倒计时；
  4. 处理手动「继续访问」和「返回上一页」。

解析 URL 与合法性判断

<script setup lang="ts">
const route = useRoute()
const router = useRouter()

// 原始 query 参数
const rawUrl = computed(() => (route.query.url as string) || '')

// 解码后的 URL：优先 decode，失败就回退到原始字符串，保证按钮始终有值可用
const decodedUrl = computed(() => {
  if (!rawUrl.value)
    return ''
  try {
    return decodeURIComponent(rawUrl.value)
  }
  catch {
    // 如果解码失败，回退使用原始字符串，保证按钮依然可用
    return rawUrl.value
  }
})

// 检查是否是一个合法的 http/https 外链
const isValidExternal = computed(() => {
  if (!decodedUrl.value)
    return false
  try {
    const u = new URL(decodedUrl.value)
    return u.protocol === 'http:' || u.protocol === 'https:'
  }
  catch {
    return false
  }
})

// 提取域名用于展示
const domain = computed(() => {
  if (!isValidExternal.value)
    return ''
  try {
    return new URL(decodedUrl.value).hostname
  }
  catch {
    return ''
  }
})

这里有一个小细节：

  • 一开始如果 decodeURIComponent 失败，直接返回空字符串会导致后面一系列逻辑都认为“无效链接”，按钮会被禁用，看起来像“点不了”；

  • 后来改为失败回退到 rawUrl ，只要 query 里有东西，最终就有一个可用字符串。

    倒计时和自动跳转

    const countdownSeconds = 5
const countdown = ref(countdownSeconds)
let countdownTimer: number | null = null

onMounted(() => {
if (!isValidExternal.value)
  return

countdown.value = countdownSeconds

countdownTimer = window.setInterval(() => {
  if (countdown.value <= 1) {
    clearCountdown()
    proceed()
  }
  else {
    countdown.value -= 1
  }
}, 1000)
})

onUnmounted(() => {
clearCountdown()
})

function clearCountdown() {
if (countdownTimer != null) {
  clearInterval(countdownTimer)
  countdownTimer = null
}
}

    设计思路：

  • 只要判断为合法外链，就从设定的秒数开始倒计时；
  • 每秒减 1，减到 1 时自动调用 proceed() ；

  • 页面销毁（路由离开）时清理定时器，避免内存泄漏或误触发。

    手动跳转和返回逻辑

    function proceed() {
const target = decodedUrl.value || rawUrl.value
if (!target)
  return

clearCountdown()
window.location.href = target
}

function goBack() {
clearCountdown()

// 1. 如果是通过 window.open 打开的新标签页，优先尝试关闭自己
if (window.opener && window.opener !== window) {
  window.close()
  return
}

// 2. 有历史记录就正常返回
if (history.length > 1) {
  history.back()
  return
}

// 3. 没有历史时，尝试根据同源 referrer 返回
if (document.referrer) {
  try {
    const ref = new URL(document.referrer)
    if (ref.origin === window.location.origin) {
      router.push(ref.pathname + ref.search + ref.hash)
      return
    }
  }
  catch {
    // ignore
  }
}

// 4. 兜底：回首页
router.push('/')
}
</script>

    这里对「返回上一页」做了比较细的兼容：

  • 友链卡片那种新标签页场景：通过 window.open('/go?url=...', '_blank') 打开的 /go 页面，其实没有历史记录，这时 history.back() 是无效的，于是我们优先检测 window.opener ，直接 window.close() ，让原来的标签页停留在友链页不动；
  • 同标签页场景：有历史记录就走 history.back() ，行为和用户点浏览器后退按钮一致；

  • 没有历史、没有同源 referrer 的极端场景：最后才兜底跳首页。

    模板和样式

    模板部分主要就是展示提示、链接、按钮和倒计时：

    <template>
<div class="go-page">
  <div class="go-card">
    <h1 class="go-title">即将离开本站</h1>
    <p class="go-desc">
      你将要访问的外部链接：
    </p>
    <p v-if="isValidExternal" class="go-url">{{ decodedUrl }}</p>
    <p v-else class="go-url invalid">链接无效或缺失</p>

    <p v-if="isValidExternal" class="go-domain">
      目标站点：<strong>{{ domain }}</strong>
    </p>

    <div class="go-actions">
      <button type="button" class="btn secondary" @click="goBack">
        返回上一页
      </button>
      <button
        type="button"
        class="btn primary"
        @click="proceed"
      >
        继续访问<span v-if="domain"> {{ domain }}</span>
      </button>
    </div>

    <p v-if="isValidExternal" class="go-countdown">
      {{ countdown }} 秒后将自动跳转，如不希望跳转，请点击「返回上一页」
    </p>

    <p class="go-tip">
      外部网站内容与本博客无关，请注意辨别信息和账号安全。
    </p>
  </div>
</div>
</template>

    样式部分使用了博客现有的变量（ var(--c-text)、 var(--ld-bg-card) 等），整体就是一个居中的卡片，这里不赘述。

接入 Markdown 外链：改造 ProseA.vue
博客的 Markdown 链接渲染组件是 app/components/content/ProseA.vue ，原来大致是：

  • 根据 href 判断是否外链；
  • 用 UtilLink 渲染；
  • 用 v-tip 显示域名或完整地址。

为了让 Markdown 外链走 /go ，改动非常小，只需要在这里统一改造 href 即可：

const props = defineProps<{
  href: string
  icon?: string
}>()

const icon = computed(() => props.icon || getDomainIcon(props.href))
const isExternal = computed(() => isExtLink(props.href))

// 外链统一改成指向 /go?url=encodeURIComponent(href)
const resolvedHref = computed(() => (
  isExternal.value ? `/go?url=${encodeURIComponent(props.href)}` : props.href
))

const tip = computed(() => ({
  content: isExternal.value ? getDomain(props.href) : decodeURIComponent(props.href),
  inlinePositioning: true,
}))

模板：

<template>
  <UtilLink v-tip="tip" class="z-link" :to="resolvedHref">
    <Icon v-if="icon" class="domain-icon" :name="icon" />
    <slot />
  </UtilLink>
</template>

这样一来：

  • Markdown 里写的 https://xxx 外链 → 页面中变成指向 /go?url=... 的链接；
  • 内部链接（ /about 、 /posts/... ）仍然直接跳内部路由，不走 /go 。

接入友链卡片：改造 FriendLinkCard.vue

友链页 link.vue 使用的是 app/components/partial/FriendLinkCard.vue 这张卡片。原来的跳转逻辑是直接打开站点：

function navigateToSite() {
  if (props.siteUrl) {
    window.open(props.siteUrl, '_blank')
  }
}

改造后统一走 /go ：

function navigateToSite() {
  if (!props.siteUrl)
    return

  const target = `/go?url=${encodeURIComponent(props.siteUrl)}`
  window.open(target, '_blank')
}

效果：

  • 友链页面点“前往网站”时，不再直接打开友链，而是新开一个 /go 标签页；
  • /go 负责显示提示、倒计时和跳转；

  • 返回时能够区分“新开标签页”这个场景，优先关闭自己，不干扰原来的 link.vue 页面滚动位置。

    一些踩坑 & 调整

    在实现过程中踩了几个小坑，顺手记一下。

1. 链接合法性校验过于严格导致按钮点不了
一开始「继续访问」按钮的禁用逻辑是：

<button
  :disabled="!isValidExternal"
  @click="proceed"
>
  继续访问
</button>

而 isValidExternal 是通过 new URL(decodedUrl) + 协议判断实现的。这样做的初衷是安全：

URL 缺失、编码错误、协议不是 http/https → 认为不安全，按钮禁用。
但实际使用时：

我们对外链统一做了 encodeURIComponent ；
中间一旦出现编码/解码上的处理差异， isValidExternal 就可能是 false ；
结果就是：页面能显示链接，倒计时能自动跳转，但按钮一直是禁用状态，用户手动点不了。
后面改成：

  • isValidExternal 只用于显示信息（例如显示域名、显示“链接无效或缺失”）；

  • 按钮本身不再绑定禁用条件，始终可点，真正的兜底放在proceed()里：

    function proceed() {
const target = decodedUrl.value || rawUrl.value
if (!target)
  return

clearCountdown()
window.location.href = target
}

    这样既保留了一定的安全感知，又不至于影响正常访问。

2. 返回上一页导致滚动位置混乱
友链卡片是通过 window.open 新开 /go 标签页的，但 /go 一开始是这么写的：

function goBack() {
  if (history.length > 1)
    history.back()
  else
    router.push('/')
}

新标签页基本没有历史，所以会直接 router.push('/') 跳首页。视觉体验就是：

  • 你明明是从 link.vue 底部的友链区域点过来的；
  • 点了「返回上一页」却去了首页，原来的页面滚动位置也被重置，看起来像是“底部组件跑到顶部”。

重写后的 goBack 逻辑就解决了这个体验问题：

  • 新标签页优先 window.close() ；
  • 同标签页用 history.back() ；
  • 实在没有历史才兜底根据 document.referrer / 首页处理。

总结

通过这次改造，博客里所有指定范围的外链都统一走了 /go 中转页，达到了类似 hexo-safego 的效果：

  • 用户在点击外链前会看到明确的提示；
  • 可以手动选择继续访问或返回；
  • 也支持倒计时自动跳转；
  • Markdown 正文和友链页都接入了这套逻辑。

整体实现成本并不高，但能明显提升外链安全感知和交互体验。如果以后需要更严格的策略（例如只允许白名单域名、记录访问日志等），也可以在 /go 这个集中入口上继续扩展。

]]> Hexo备忘 https://blog.zsx815.top/archives/16/ https://blog.zsx815.top/archives/16/ Sat, 16 Aug 25 22:11:00 +0800 2025年08月16日22:11 ZSXの小站 # Hexo 备忘

我的配置

  1. Hexo 版本: hexo-cli: 4.3.2, hexo: 7.3.0(当前最新)
  2. Node.js 版本: 22.16.0
  3. Git 版本: 2.47.0.sindows.2
  4. PNPM 版本: 10.12.4
  5. Windows 版本: 11

安装 Node.js

  1. 在 官网 安装 LTS 版本，电脑一般来说内存足够直接在 C 盘即可，当然，换路径也可以，我反正正常下载换路径，没什么问题。
  2. 安装完成后，检查是否安装成功。在键盘按下 win + R 键，输入 CMD，然后回车，打开 CMD 窗口，执行 node -v 命令，看到版本信息，则说明安装成功。

安装 Git

在 官网 安装最新版本的 64-bit Git for Windows Setup 安装包。

安装完成后，在命令行输入 git --version，如果显示版本号，则说明安装成功。

常用命令

git config -l  //查看所有配置
git config --system --list //查看系统配置
git config --global --list //查看用户（全局）配置

配置 Git 用户名和邮箱

git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

安装 包管理器

安装 npm 为一切的基石，一般来说，你安装了 node，也相当于你安装了 npm，通过一下命令来验证：

npm -v
node -v

修改 npm 源。npm 下载各种模块，默认是从国外服务器下载，速度较慢，建议配置成淘宝镜像。打开 CMD 窗口，运行如下命令:

npm config set registry https://registry.npm.taobao.org

安装 pnpm

pnpm 是一个快速、节省磁盘空间的包管理器，类似于 npm 和 yarn。安装 pnpm 可以通过以下命令：

npm install -g pnpm

为什么选择 pnpm？因为它的安装速度快，依赖管理更高效，且相对于 npm，我使用 npm 容易失败且慢，pnpm 给我的体验更好。

安装 Hexo

  1. 在 Git BASH 输入如下命令安装 Hexo：
pnpm install -g hexo-cli
  1. 安装完后输入 hexo -v 验证是否安装成功。

Github配置

上述操作是前提，接下来是配置 Github。

注册 github 就不说了，很基础的东西，连我个代码小白都懂就不多说了。

创建仓库

  1. 登录 GitHub，点击右上角的 + 号，选择 New repository。
  2. 填写仓库名称，建议使用 <username>.github.io 格式（例如：yourusername.github.io），这样可以直接作为个人主页。

这里我不准备直接使用常规的 hexo deploy 命令来部署到 GitHub Pages，因为当你的文章一多，生成时间就会繁琐，这里的建议是使用 Github Actions 来自动部署。

这一部分的教程是源于 店长的文章，但是有点老旧了，于是我做了点更改（这里的图片来源于 安知鱼）：
  1. 首先要创建一个放置源码的私有仓库，以下称之为 hexo-source，
  2. 然后要生成一个 Github 密钥：
访问 Github-> 头像（右上角）-> Settings-> Developer Settings-> Personal access tokens-> generate new token, 创建的 Token 名称随意，但必须勾选 repo 项 和 workflows 项。

点击 链接 前往生成


ℹ️ 提示
!!! token 只会显示这一次，之后将无法查看，所以务必保证你已经记录下了 Token。之后如果忘记了就只能重新生成重新配置了。

  1. 在 hexo-source 仓库中的设置里点击设置 -> action -> General -> 工作流程权限

    • 勾选 Read and write permissions，并且勾选 Allow <span style="background:#FF0000;"></span>all actions and reusable workflows。
  2. 在设置里 -> Secrets and variables -> Actions -> New repository secret 添加
  3. GITHUBTOKEN：放置你刚才生成的 Token。

上述是前置条件，接下来要先部署 hexo，你才好继续下一步。

初始化 Hexo

  1. 在本地新建一个文件夹，例如 hexo-solitude。
  2. 这里我是用的是 vscode 打开该文件夹，然后在终端输入以下命令来初始化 Hexo：
hexo init (项目名称)

我一般都不填，直接在文件下下就可以开始，如果你添加了项目名称，那么下一步就是：

cd (项目名称)
  1. 安装依赖包：
pnpm install

然后就是选择你想要的主题，这里我使用的是Solitude，具体的配置不细讲，我只讲一部分：

首先就是基本的安装，这里还是选择git clone没有别的原因，主要还是会改点源码，不想改的直接pnpm下载即可：

// git安装
git clone -b dev https://github.com/everfu/hexo-theme-solitude.git themes/solitude

// pnpm 安装
pnpm i hexo-theme-solitude

然后在_config.yml里修改成：

theme: solitude

配置

下列代码是我的备忘：

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 喵落阁
subtitle: '克喵的博客'
description: '愿你看清一切真相后，依旧热爱你的家人和朋友。'
keywords: 克喵,kemiao,博客
author: 克喵爱吃卤面
language: zh-CN
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: # 填网站地址
permalink: posts/:abbrlink.html
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight:
  line_number: false
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include: []
exclude: []
ignore: []

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: solitude

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com-xx:kemiaofxjun/kemiaofxjun.github.io.git
  branch: main

# RSS Feed 配置
feed:
  type: atom          # 生成 atom.xml
  path: atom.xml      # 输出文件名
  limit: 20           # 最多显示文章数 (0=全部)
  hub:                # PubSubHubbub 中心 (可选)
  content: true       # 是否包含全文内容 (true=是, false=仅摘要)
  content_limit: 140  # 摘要长度（当 content=false 时生效）
  content_limit_delim: ' '  # 截断分隔符
  order_by: -date     # 按日期倒序排列
  autodiscovery: true # 在 HTML 头部添加自动发现标签

# 数学公式渲染配置
markdown:
  preset: 'default' # 使用的 MD 语法，默认使用的 GFM
  render:
    html: true # 渲染 html
    xhtmlOut: false
    langPrefix: 'language-' # 在代码块的类名中添加前缀（指定语言时）。
    breaks: true
    linkify: true # 如果你写了一个链接而不是 [name](link) 方式，会自动识别为链接并渲染。
    typographer: true # 将替换常见的印刷元素。
    quotes: '“”‘’' # 替换文章张的 "" '' 号
  enable_rules:
  disable_rules:
  plugins: # 使用插件
  anchors:
    level: 2 # 渲染标题的级别（h1,h2,h3）
    collisionSuffix: ''
    permalink: true
    permalinkClass: 'headerlink'
    permalinkSide: 'left'
    permalinkSymbol: ''
    case: 0
    separator: '-'
  images: # 图片的一些编译
    lazyload: true # 是否需要渲染 lazyload
    prepend_root: false
    post_asset: false
  inline: false

swpp:
  # 是否启用插件
  enable: true
  # 是否在发布前自动执行脚本
  auto_exec: true
  gen_dom: true

# 文章链接转数字或字母：https://github.com/rozbo/hexo-abbrlink
abbrlink:
    alg: crc16   #算法： crc16(default) and crc32
    rep: hex     #进制： dec(default) and hex: dec #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex

# https://github.com/hexojs/hexo-generator-sitemap
sitemap:
  path: sitemap.xml
  rel: false
  tags: true
  categories: true

algolia:
  appId: ""
  apiKey: ""
  adminApiKey: ""
  chunkSize: 5000
  indexName: "index-name"
  fields:
    - content:strip:truncate,0,500
    - excerpt:strip
    - gallery
    - permalink
    - photos
    - slug
    - tags
    - title

# hexo-safego安全跳转插件
# see https://blog.liushen.fun/posts/1dfd1f41/
hexo_safego:
  # 基本功能设置
  general:
    enable: true                # 启用插件
    enable_base64_encode: true  # 使用 Base64 编码
    enable_target_blank: true   # 从新窗口打开跳转页面

  # 安全设置
  security:
    url_param_name: 'u'         # URL 参数名
    html_file_name: 'go.html'   # 重定向页面的文件名
    ignore_attrs:               # 忽略处理的 HTML 结构
      - 'data-fancybox'

  # 容器与页面设置
  scope:
    apply_containers:           # 应用的容器选择器
      - '#article-container'
    apply_pages:                # 应用的页面路径
      - "/posts/"
      - "/devices/"
    exclude_pages:              # 排除的页面路径

  # 域名白名单
  whitelist:
    domain_whitelist:           # 允许的白名单域名，通过字符串匹配实现
      - "kemeow.top"
      - "kemiaosw.top"
      - "050815.xyz"
      - "314926.xyz"
      - "051531.xyz"

  # 页面外观设置
  appearance:
    avatar: https://img.314926.xyz/images/2025/08/13/no-background-kemiaofxjun.webp   # 跳转页面头像路径
    title: "喵洛阁"            # 跳转页面标题
    subtitle: "安全中心"         # 跳转页面副标题
    darkmode: auto              # 是否启用深色模式
    countdowntime: 4            # 跳转页面倒计时秒数，如果设置为负数则为不自动跳转

  # 调试设置
  debug:
    enable: false               # 启用调试模式

# 追番插件
# https://github.com/HCLonely/hexo-bilibili-bangumi
bangumi: # 追番设置
  enable: true
  source: bili
  path: 
  vmid: 3546643173477234
  title: "追番列表"
  quote: "生命不息，追番不止！"
  show: 1
  lazyload: false
  loading:
  showMyComment: true
  pagination: false
  extra_options:
    top_img: false
    lazyload:
      enable: false

博客的其他修改基本就是来自教程和一些博主的网站。

插件

  1. 基础依赖 hexo-renderer-pug
pnpm i hexo-renderer-pug
  1. 字数统计 hexo-wordcount
pnpm i hexo-wordcount

配置里修改：

# --------------------------- start ---------------------------
# Word count
# 字数统计
# warning: Please install the hexo-wordcount plugin first.
# 警告: 请先安装 hexo-wordcount 插件。
wordcount: false
# --------------------------- end ---------------------------
  1. 数学公式 卸载 hexo-render-marked
npm un hexo-renderer-marked

安装 hexo-renderer-markdown-it katex @renbaoshuo/markdown-it-katex

pnpm i hexo-renderer-markdown-it katex @renbaoshuo/markdown-it-katex

配置里修改

# --------------------------- start ---------------------------
# Katex
# Latex formula support
# Latex 公式支持
katex:
  enable: false
  # Whether to load on each page
  # 是否在每个页面加载
  per_page: false
  # Whether to enable copy formula
  # 是否启用复制公式
  copytex: false
# --------------------------- end ---------------------------

添加以下内容到 _config.yml

markdown:
  preset: 'default'
  render:
    html: true
    xhtmlOut: false
    langPrefix: 'language-'
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  enable_rules:
  disable_rules:
  plugins:
    - '@renbaoshuo/markdown-it-katex'
  anchors:
    level: 2
    collisionSuffix: ''
    permalink: false
    permalinkClass: 'header-anchor'
    permalinkSide: 'left'
    permalinkSymbol: '¶'
    case: 0
    separator: '-'
  images:
    lazyload: false
    prepend_root: false
    post_asset: false
  inline: false  # https://markdown-it.github.io/markdown-it/#MarkdownIt.renderInline

开启配置项

# --------------------------- start ---------------------------
# Katex
# Latex formula support
# Latex 公式支持
katex:
  enable: true
  # Whether to load on each page
  # 是否在每个页面加载
  per_page: true
  # Whether to enable copy formula
  # 是否启用复制公式
  copytex: false
# --------------------------- end ---------------------------
  1. PWA 安装 hexo-swpp 和 swpp-backends 插件

在博客根目录执行

pnpm i hexo-swpp 

pnpm i swpp-backends

开启配置

# 大约在773行
# --------------------------- start ---------------------------
# PWA
# Progressive Web App
pwa:
  enable: true
  manifest: /manifest.json # manifest.json
  theme_color: "#006a73" # Theme color
  mask_icon: /img/pwa/favicon.png # Mask icon
  apple_touch_icon: /img/pwa/favicon.png # Apple touch icon
  bookmark_icon: /img/pwa/favicon.png # Bookmark icon
  favicon_32_32: /img/pwa/favicon_32.png # 32x32 icon
  favicon_16_16: /img/pwa/favicon_16.png # 16x16 icon
# --------------------------- end ---------------------------

在_config.yml里添加swpp配置

swpp:
  # 是否启用插件
  enable: true
  # 是否在发布前自动执行脚本
  auto_exec: true
  gen_dom: true

在 source 目录中创建 manifest.json 文件

{
    "name": "网站名称",
    "short_name": "网站名称缩写",
    "theme_color": "#006a73",
    "background_color": "#006a73",
    "display": "fullscreen",
    "scope": "/",
    "start_url": "/",
    "id": "/",
    "icons": [
      {
        "src": "/img/pwa/favicon_16.png",
        "sizes": "16x16",
        "type": "image/png",
        "purpose": "any"
      },
      {
        "src": "/img/pwa/favicon_16.png",
        "sizes": "16x16",
        "type": "image/png",
        "purpose": "maskable"
      },
      {
        "src": "/img/pwa/favicon_32.png",
        "sizes": "32x32",
        "type": "image/png",
        "purpose": "any"
      },
      {
        "src": "/img/pwa/favicon_32.png",
        "sizes": "32x32",
        "type": "image/png",
        "purpose": "maskable"
      },
      {
        "src": "/img/pwa/favicon.png",
        "sizes": "180x180",
        "type": "image/png",
        "purpose": "any"
      },
      {
        "src": "/img/pwa/favicon.png",
        "sizes": "180x180",
        "type": "image/png",
        "purpose": "maskable"
      }
    ],
    "splash_pages": null
}

在博客根目录创建一个 sw-rules.js 文件

module.exports.config = {
  /** @type {?ServiceWorkerConfig|boolean} */
  serviceWorker: {
    escape: 1,
    cacheName: 'SolitudeCache',
    debug: false,
  },
  register: {
    onsuccess: undefined,
    onerror: () =>
      console.error(
        'Service Worker 注册失败！可能是由于您的浏览器不支持该功能！'
      ),
    builder: (root, framework, pluginConfig) => {
      const { onerror, onsuccess } = pluginConfig.register;
      return `
            <script>
                (() => {
                    const sw = navigator.serviceWorker;
                    const error = ${onerror && onerror.toString()};
                    if (!sw?.register('${new URL(root).pathname}sw.js')
                        ${onsuccess ? `?.then(${onsuccess.toString()})` : ""}
                        ?.catch(error)
                    ) error()
                })()
            </script>`;
    },
  },
  /** @type {?DomConfig|boolean} */
  dom: {
    /** @type {?VoidFunction} */
    onsuccess: () => {
      caches
        .match('https://id.v3/')
        .then((res) => {
          if (res)
            res.json().then((json) => {
              utils &&
                utils.snackbarShow(
                  `已刷新缓存，更新为${json.escape + '.' + json.global + '.' + json.local
                  }版本最新内容`,
                  false,
                  2500
                );
            });
          else console.info('未找到缓存');
        })
        .catch((error) => console.error('缓存匹配出错', error));
    },
  },
  /** @type {?VersionJsonConfig|boolean} */
  json: {
    /** @type {number} */
    maxHtml: 15,
    /** @type {number} */
    charLimit: 1024,
    /** @type {string[]} */
    merge: [],
    exclude: {
      /** @type {RegExp[]} */
      localhost: [],
      /** @type {RegExp[]} */
      other: [],
    },
  },
  /** @type {?ExternalMonitorConfig|boolean} */
  external: {
    /** @type {number} */
    timeout: 5000,
    /** 拉取文件时地并发限制 */
    concurrencyLimit: 100,
    /** @type {({head: string, tail: string}|function(string):string[])[]} */
    js: [],
    /** @type {RegExp[]} */
    stable: [
      /^https:\/\/npm\.elemecdn\.com\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
      /^https:\/\/cdn\.cbd\.int\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
      /^https:\/\/cdn\.jsdelivr\.net\/npm\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
    ],
    replacer: (srcUrl) => {
      if (srcUrl.startsWith('https://cdn.jsdelivr.net/npm/')) {
        const pathname = new URL(srcUrl).pathname;
        return [
          srcUrl,
          `https://cdn.cbd.int/${pathname}`,
          `https://npm.elemecdn.com/${pathname}`,
          `https://fastly.jsdelivr.net/npm/${pathname}`,
        ];
      } else {
        return srcUrl;
      }
    },
  },
};

module.exports.cacheRules = {
  simple: {
    clean: true,
    search: false,
    match: (url, $eject) =>
      url.host === $eject.domain && ['/404.html'].includes(url.pathname),
  },
  cdn: {
    clean: true,
    match: (url) =>
      [
        'cdn.cbd.int',
        'lf26-cdn-tos.bytecdntp.com',
        'lf6-cdn-tos.bytecdntp.com',
        'lf3-cdn-tos.bytecdntp.com',
        'lf9-cdn-tos.bytecdntp.com',
        'cdn.staticfile.org',
        'npm.elemecdn.com',
      ].includes(url.host) &&
      url.pathname.match(/\.(js|css|woff2|woff|ttf|cur)$/),
  },
};

module.exports.getSpareUrls = (srcUrl) => {
  if (srcUrl.startsWith('https://npm.elemecdn.com')) {
    return {
      timeout: 3000,
      list: [
        srcUrl,
        `https://fastly.jsdelivr.net/${new URL(srcUrl).pathname}`,
      ],
    };
  }
};

module.exports.ejectValues = (hexo, rules) => {
  return {
    domain: {
      prefix: 'const',
      value: new URL(hexo.config.url).host,
    },
  };
};

module.exports.skipRequest = (request) => request.url.startsWith("https://i0.hdslb.com") ||
  request.url.startsWith('https://meting.qjqq.cn') ||
  request.url.startsWith('https://api.i-meto.com');
  1. hexo-deploy-git 提交到git的插件
pnpm i hexo-deploy-git --save
  1. hexo-generator-feed hexo的rss插件
pnpm i hexo-generator-feed --save
  1. hexo 的短链接: hexo-abbrlink
pnpm i hexo-abbrlink --save

在_config.yml里修改：

permalink: posts/:abbrlink/ 
# or
permalink: posts/:abbrlink.html

添加:

# abbrlink config
abbrlink:
  alg: crc32      # Algorithm used to calc abbrlink. Support crc16(default) and crc32
  rep: hex        # Representation of abbrlink in URLs. Support dec(default) and hex
  drafts: false   # Whether to generate abbrlink for drafts. (false in default)
  force: false    # Enable force mode. In this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had an abbrlink. (false in default)
  writeback: true # Whether to write changes to front-matters back to the actual markdown files. (true in default)
  1. 博客的sitemap : hexo-generator-sitemap
pnpm i hexo-generator-sitemap --save

在_config.yml里添加配置：

sitemap:
  path: 
    - sitemap.xml
    - sitemap.txt
  template: ./sitemap_template.xml
  template_txt: ./sitemap_template.txt
  rel: false
  tags: true
  categories: true
  1. 使用algolia搜索 : hexo-algoliasearch
  • 注册algolia：

注册地址：dashboard.algolia.com/users/sign_up

  • 创建应用：

注册成功后创建应用：dashboard.algolia.com/account/plan/create?from=dashboard

  • search -> configure -> index添加index_name即可

在博客执行命令：

pnpm i hexo-algoliasearch --save

_config.yml里添加

algolia:
  appId: "Z7A3XW4R2I"
  apiKey: "12db1ad54372045549ef465881c17e743"
  adminApiKey: "40321c7c207e7f73b63a19aa24c4761b"
  chunkSize: 5000
  indexName: "my-hexo-blog"
  fields:
    - content:strip:truncate,0,500
    - excerpt:strip
    - gallery
    - permalink
    - photos
    - slug
    - tags
    - title
ℹ️ 提示
**!!!配置完成后记得运行 `hexo clean`**

在hexo g 后实行下列代码：

hexo algolia
  1. hexo-safego安全跳转插件

使用该插件之前，需要先安装 cheerio，cheerio 是一个轻量级的库，用于在服务器端快速、灵活地实现 jQuery 核心功能。在 hexo-safego 插件中，cheerio 被用来解析和操作生成的静态 HTML 内容，类似于在浏览器中使用 jQuery 处理 DOM 元素。这使得插件能够在生成静态页面时，处理和替换外部链接，增强博客的安全性，而不需要在客户端引入 jQuery。Hexo 一般都有这个插件，可以在 node_modules 查看，如果没有，请先执行：

pnpm i cheerio --save

然后即可安装该插件：

pnpm i hexo-safego --save

在hexo根目录的_config.yml文件中添加以下配置：

# hexo-safego安全跳转插件
# see https://blog.liushen.fun/posts/1dfd1f41/
hexo_safego:
  # 基本功能设置
  general:
    enable: true                # 启用插件
    enable_base64_encode: true  # 使用 Base64 编码
    enable_target_blank: true   # 打开新窗口
  # 安全设置
  security:
    url_param_name: 'u'         # URL 参数名
    html_file_name: 'go.html'   # 重定向页面的文件名
    ignore_attrs:               # 忽略处理的 HTML 属性
      - 'data-fancybox'
  # 容器与页面设置
  scope:
    apply_containers:           # 应用的容器选择器
      - '#article-container'
    apply_pages:                # 应用的页面路径
      - "/posts/"
      - "/devices/"
    exclude_pages:              # 排除的页面路径
  # 域名白名单
  whitelist:
    domain_whitelist:           # 允许的白名单域名
      - "qyliu.top"
      - "liushen.fun"
  # 页面外观设置
  appearance:
    avatar: /info/avatar.ico    # 头像路径
    title: "清羽飞扬"            # 页面标题
    subtitle: "安全中心"         # 页面副标题
    darkmode: true              # 是否启用深色模式
    countdowntime: -1           # 倒计时秒数
  # 调试设置
  debug:
    enable: false               # 启用调试模式
  1. hexo的追番页面：hexo-bilibili-bangumi
pnpm i hexo-bilibili-bangumi --save

在_config.yml配置：

bangumi: # 追番设置
  enable: true           # 是否启用
  source: bili          # 数据源
  path: bangumis/index.html  # 页面路径
  vmid:                 # 用户ID
  title: '追番列表'      # 页面标题
  quote: '生命不息，追番不止！' # 页面引言
  show: 1              # 初始显示页面: 0=想看, 1=在看, 2=看过
  lazyload: true       # 是否启用图片懒加载
  metaColor:           # meta 信息字体颜色
  color:               # 简介字体颜色
  webp: true          # 是否使用 webp 格式图片
  progress: true      # 是否显示进度条

cinema: # 追剧设置
  enable: true           # 是否启用
  source: bili

game: # 游戏设置，仅支持source: bgmv0
  enable: true           # 是否启用
  source: bgmv0

还在更新中。。。

Github action配置

承接段落的继续吧，未来会在出水一期。

接下来就是创建一个私有仓库，根据大佬的文章，是为了保护Token，见仁见智。

这个私有仓库的建立是存储Hexo博客代码，如果你要使用Qexo

，这也是必不可少的！

创建完成后，需要把博客的源码 push 到这里。首先获取远程仓库地址，此处虽然 SSH 和 HTTPS 均可。SSH 在绑定过 ssh key 的设备上无需再输入密码，HTTPS 则需要输入密码，但是 SSH 偶尔会遇到端口占用的情况。请自主选择。

❗ 重要
这里之所以是私有仓库，是因为在接下来的配置中会用到 `Token`，如果 `Token` 被盗用，别人可以肆意操作你的 github 仓库内容，为了避免这一风险，才选择的博客源码闭源。

配置 Github Action

  1. 在[Blogroot]新建.github文件夹,注意开头是有个.的。然后在.github 内新建 workflows 文件夹，再在 workflows 文件夹内新建 autodeploy.yml,在[Blogroot]/.github/workflows/autodeploy.yml 里面输入
# 当有改动推送到 main 分支时，启动 Action
name: 自动部署

on:
  push:
    branches:
      - main # 自选分支

  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 检查分支
        uses: actions/checkout@v4
        with:
          ref: main # 自选分支

      - name: 安装 Node
        uses: actions/setup-node@v4
        with:
          node-version: "22.x" # node版本

      - name: 安装 Hexo
        run: |
          export TZ='Asia/Shanghai'
          npm install hexo-cli -g
          npm install yamljs --save

      - name: 缓存 Hexo
        uses: actions/cache@v4
        id: cache
        with:
          path: node_modules
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

      - name: 安装依赖
        if: steps.cache.outputs.cache-hit != 'true'
        run: |
          npm install --save
          npm install hexo-algoliasearch --save
          npm install hexo-bilibili-bangumi --save

      - name: 生成静态文件
        run: |
          node ./link.js
          hexo clean
          hexo generate
          hexo bangumi -u
          hexo algolia

      - name: 部署
        run: |
          cd ./public
          git init -b main
          git config --global user.name '${{ secrets.GITHUBUSERNAME }}'
          git config --global user.email '${{ secrets.GITHUBEMAIL }}'
          git add .
          git commit -m "${{ github.event.head_commit.message }} $(date +"%Z %Y-%m-%d %A %H:%M:%S") Updated by GitHub Actions"
          git push --force --quiet "https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.GITHUBTOKEN }}@github.com/${{ secrets.GITHUBUSERNAME }}/${{ secrets.GITHUBUSERNAME }}.github.io.git" main

上述代码是来自店长的修改自用，为什么不用安知鱼的？

  • 首先把Token直接放在仓库的文件里还是不太好。
  • 像我这种在本地搞的，推不到仓库里，因为这里的token不能直接上传，所以改成环境变量来引入，但是依旧有各种问题，相反使用了店长的代码后，就大差不差，询问AI后就得到目前的代码，也就可以正式上传了。（无拉踩的意思）
  • 之后需要自己到仓库的 Settings->Secrets->actions 下添加环境变量，变量名参考脚本中出现的，依次添加。

重新设置远程仓库和分支


🍼第一次使用git管理博客源码

  1. 删除或者先把[Blogroot]/themes/solitude/.git移动到非博客文件夹目录下,原因是主题文件夹下的.git文件夹的存在会导致其被识别成子项目，从而无法被上传到源码仓库。

  2. 在博客根目录[Blogroot]路径下运行指令:

    git init #初始化
git remote add origin git@github.com:[GithubUsername]/[SourceRepo].git #[SourceRepo]为存放源码的github私有仓库
git checkout -b master # 切换到master分支，
#2020年10月后github新建仓库默认分支改为main，注意更改
# 如果不是，后面的所有设置的分支记得保持一致

  3. 添加屏蔽项

    .DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea
themes/solitude/.git

    如果不是solitude主题，记得替换最后一行内容为你自己当前使用的主题。

  4. 之后再运行 git 提交指令，将博客源码提交到 github 上。

    git add .
git commit -m "github action update"
git push origin master
#2020年10月后github新建仓库默认分支改为main，注意更改
  5. 此时你的主题文件夹若已经被正常上传，并且你也添加了主题文件夹下的.git 文件夹的屏蔽项。那你可以考虑把第二步移走或删除的.git放回来，用作以后升级。（不禁怀疑真的有人会去用这个方式来升级吗）


🍾曾经做过git管理源码的操作

  1. 添加屏蔽项

因为能够使用指令进行安装的内容不包括在需要提交的源码内，所有我们需要将这些内容添加到屏蔽项，表示不上传到 github 上。这样可以显著减少需要提交的文件量和加快提交速度。
打开[Blogroot]/.gitignore,输入以下内容：

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea
themes/solitude/.git

如果不是solitude主题，记得替换最后一行内容为你自己当前使用的主题。

  1. 提交源码到私有仓库[SourceRepo]
    在博客根目录[Blogroot]下启动终端，使用 git 指令重设仓库地址。这样在新建仓库，我们仍旧可以保留珍贵的 commit history，便于版本回滚。

    git remote rm origin # 删除原有仓库链接
git remote add origin git@github.com:[GithubUsername]/[SourceRepo].git #[SourceRepo]为新的存放源码的github私有仓库
git checkout -b master # 切换到master分支，
#2020年10月后github新建仓库默认分支改为main，注意更改
# 如果不是，后面的所有设置的分支记得保持一致
git add .
git commit -m "github action update"
git push origin master
#2020年10月后github新建仓库默认分支改为main，注意更改

  2. 可能遇到的 bug
    因为 solitude 主题文件夹下的.git 文件夹的存在，那么主题文件夹会被识别子项目。从而无法被上传到源码仓库。若是遇到添加屏蔽项，但是还是无法正常上传主题文件夹的情况。请先将本地源码中的 themes 文件夹移动到别的目录下。然后 commit 一次。接着将 themes 文件夹移动回来，再 commit 一次。

    ❗ 重要
    要是还不行，那就删了 solitude 主题文件夹下的.git 文件夹，然后再重复上述的 commit 操作。

挖坑

大致写到这，未来或许会有下一章挖坑？但是目前通用的就到这，然后后续会写Qexo的简单使用方法、solitude的一些配置更改和我踩坑经历吧。

]]> # Hexo 备忘

我的配置

  1. Hexo 版本: hexo-cli: 4.3.2, hexo: 7.3.0(当前最新)
  2. Node.js 版本: 22.16.0
  3. Git 版本: 2.47.0.sindows.2
  4. PNPM 版本: 10.12.4
  5. Windows 版本: 11

安装 Node.js

  1. 在 官网 安装 LTS 版本，电脑一般来说内存足够直接在 C 盘即可，当然，换路径也可以，我反正正常下载换路径，没什么问题。
  2. 安装完成后，检查是否安装成功。在键盘按下 win + R 键，输入 CMD，然后回车，打开 CMD 窗口，执行 node -v 命令，看到版本信息，则说明安装成功。

安装 Git

在 官网 安装最新版本的 64-bit Git for Windows Setup 安装包。

安装完成后，在命令行输入 git --version，如果显示版本号，则说明安装成功。

常用命令

git config -l  //查看所有配置
git config --system --list //查看系统配置
git config --global --list //查看用户（全局）配置

配置 Git 用户名和邮箱

git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

安装 包管理器

安装 npm 为一切的基石，一般来说，你安装了 node，也相当于你安装了 npm，通过一下命令来验证：

npm -v
node -v

修改 npm 源。npm 下载各种模块，默认是从国外服务器下载，速度较慢，建议配置成淘宝镜像。打开 CMD 窗口，运行如下命令:

npm config set registry https://registry.npm.taobao.org

安装 pnpm

pnpm 是一个快速、节省磁盘空间的包管理器，类似于 npm 和 yarn。安装 pnpm 可以通过以下命令：

npm install -g pnpm

为什么选择 pnpm？因为它的安装速度快，依赖管理更高效，且相对于 npm，我使用 npm 容易失败且慢，pnpm 给我的体验更好。

安装 Hexo

  1. 在 Git BASH 输入如下命令安装 Hexo：
pnpm install -g hexo-cli
  1. 安装完后输入 hexo -v 验证是否安装成功。

Github配置

上述操作是前提，接下来是配置 Github。

注册 github 就不说了，很基础的东西，连我个代码小白都懂就不多说了。

创建仓库

  1. 登录 GitHub，点击右上角的 + 号，选择 New repository。
  2. 填写仓库名称，建议使用 <username>.github.io 格式（例如：yourusername.github.io），这样可以直接作为个人主页。

这里我不准备直接使用常规的 hexo deploy 命令来部署到 GitHub Pages，因为当你的文章一多，生成时间就会繁琐，这里的建议是使用 Github Actions 来自动部署。

这一部分的教程是源于 店长的文章，但是有点老旧了，于是我做了点更改（这里的图片来源于 安知鱼）：
  1. 首先要创建一个放置源码的私有仓库，以下称之为 hexo-source，
  2. 然后要生成一个 Github 密钥：
访问 Github-> 头像（右上角）-> Settings-> Developer Settings-> Personal access tokens-> generate new token, 创建的 Token 名称随意，但必须勾选 repo 项 和 workflows 项。

点击 链接 前往生成


ℹ️ 提示
!!! token 只会显示这一次，之后将无法查看，所以务必保证你已经记录下了 Token。之后如果忘记了就只能重新生成重新配置了。

  1. 在 hexo-source 仓库中的设置里点击设置 -> action -> General -> 工作流程权限

    • 勾选 Read and write permissions，并且勾选 Allow <span style="background:#FF0000;"></span>all actions and reusable workflows。
  2. 在设置里 -> Secrets and variables -> Actions -> New repository secret 添加
  3. GITHUBTOKEN：放置你刚才生成的 Token。

上述是前置条件，接下来要先部署 hexo，你才好继续下一步。

初始化 Hexo

  1. 在本地新建一个文件夹，例如 hexo-solitude。
  2. 这里我是用的是 vscode 打开该文件夹，然后在终端输入以下命令来初始化 Hexo：
hexo init (项目名称)

我一般都不填，直接在文件下下就可以开始，如果你添加了项目名称，那么下一步就是：

cd (项目名称)
  1. 安装依赖包：
pnpm install

然后就是选择你想要的主题，这里我使用的是Solitude，具体的配置不细讲，我只讲一部分：

首先就是基本的安装，这里还是选择git clone没有别的原因，主要还是会改点源码，不想改的直接pnpm下载即可：

// git安装
git clone -b dev https://github.com/everfu/hexo-theme-solitude.git themes/solitude

// pnpm 安装
pnpm i hexo-theme-solitude

然后在_config.yml里修改成：

theme: solitude

配置

下列代码是我的备忘：

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 喵落阁
subtitle: '克喵的博客'
description: '愿你看清一切真相后，依旧热爱你的家人和朋友。'
keywords: 克喵,kemiao,博客
author: 克喵爱吃卤面
language: zh-CN
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: # 填网站地址
permalink: posts/:abbrlink.html
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight:
  line_number: false
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include: []
exclude: []
ignore: []

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: solitude

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com-xx:kemiaofxjun/kemiaofxjun.github.io.git
  branch: main

# RSS Feed 配置
feed:
  type: atom          # 生成 atom.xml
  path: atom.xml      # 输出文件名
  limit: 20           # 最多显示文章数 (0=全部)
  hub:                # PubSubHubbub 中心 (可选)
  content: true       # 是否包含全文内容 (true=是, false=仅摘要)
  content_limit: 140  # 摘要长度（当 content=false 时生效）
  content_limit_delim: ' '  # 截断分隔符
  order_by: -date     # 按日期倒序排列
  autodiscovery: true # 在 HTML 头部添加自动发现标签

# 数学公式渲染配置
markdown:
  preset: 'default' # 使用的 MD 语法，默认使用的 GFM
  render:
    html: true # 渲染 html
    xhtmlOut: false
    langPrefix: 'language-' # 在代码块的类名中添加前缀（指定语言时）。
    breaks: true
    linkify: true # 如果你写了一个链接而不是 [name](link) 方式，会自动识别为链接并渲染。
    typographer: true # 将替换常见的印刷元素。
    quotes: '“”‘’' # 替换文章张的 "" '' 号
  enable_rules:
  disable_rules:
  plugins: # 使用插件
  anchors:
    level: 2 # 渲染标题的级别（h1,h2,h3）
    collisionSuffix: ''
    permalink: true
    permalinkClass: 'headerlink'
    permalinkSide: 'left'
    permalinkSymbol: ''
    case: 0
    separator: '-'
  images: # 图片的一些编译
    lazyload: true # 是否需要渲染 lazyload
    prepend_root: false
    post_asset: false
  inline: false

swpp:
  # 是否启用插件
  enable: true
  # 是否在发布前自动执行脚本
  auto_exec: true
  gen_dom: true

# 文章链接转数字或字母：https://github.com/rozbo/hexo-abbrlink
abbrlink:
    alg: crc16   #算法： crc16(default) and crc32
    rep: hex     #进制： dec(default) and hex: dec #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex

# https://github.com/hexojs/hexo-generator-sitemap
sitemap:
  path: sitemap.xml
  rel: false
  tags: true
  categories: true

algolia:
  appId: ""
  apiKey: ""
  adminApiKey: ""
  chunkSize: 5000
  indexName: "index-name"
  fields:
    - content:strip:truncate,0,500
    - excerpt:strip
    - gallery
    - permalink
    - photos
    - slug
    - tags
    - title

# hexo-safego安全跳转插件
# see https://blog.liushen.fun/posts/1dfd1f41/
hexo_safego:
  # 基本功能设置
  general:
    enable: true                # 启用插件
    enable_base64_encode: true  # 使用 Base64 编码
    enable_target_blank: true   # 从新窗口打开跳转页面

  # 安全设置
  security:
    url_param_name: 'u'         # URL 参数名
    html_file_name: 'go.html'   # 重定向页面的文件名
    ignore_attrs:               # 忽略处理的 HTML 结构
      - 'data-fancybox'

  # 容器与页面设置
  scope:
    apply_containers:           # 应用的容器选择器
      - '#article-container'
    apply_pages:                # 应用的页面路径
      - "/posts/"
      - "/devices/"
    exclude_pages:              # 排除的页面路径

  # 域名白名单
  whitelist:
    domain_whitelist:           # 允许的白名单域名，通过字符串匹配实现
      - "kemeow.top"
      - "kemiaosw.top"
      - "050815.xyz"
      - "314926.xyz"
      - "051531.xyz"

  # 页面外观设置
  appearance:
    avatar: https://img.314926.xyz/images/2025/08/13/no-background-kemiaofxjun.webp   # 跳转页面头像路径
    title: "喵洛阁"            # 跳转页面标题
    subtitle: "安全中心"         # 跳转页面副标题
    darkmode: auto              # 是否启用深色模式
    countdowntime: 4            # 跳转页面倒计时秒数，如果设置为负数则为不自动跳转

  # 调试设置
  debug:
    enable: false               # 启用调试模式

# 追番插件
# https://github.com/HCLonely/hexo-bilibili-bangumi
bangumi: # 追番设置
  enable: true
  source: bili
  path: 
  vmid: 3546643173477234
  title: "追番列表"
  quote: "生命不息，追番不止！"
  show: 1
  lazyload: false
  loading:
  showMyComment: true
  pagination: false
  extra_options:
    top_img: false
    lazyload:
      enable: false

博客的其他修改基本就是来自教程和一些博主的网站。

插件

  1. 基础依赖 hexo-renderer-pug
pnpm i hexo-renderer-pug
  1. 字数统计 hexo-wordcount
pnpm i hexo-wordcount

配置里修改：

# --------------------------- start ---------------------------
# Word count
# 字数统计
# warning: Please install the hexo-wordcount plugin first.
# 警告: 请先安装 hexo-wordcount 插件。
wordcount: false
# --------------------------- end ---------------------------
  1. 数学公式 卸载 hexo-render-marked
npm un hexo-renderer-marked

安装 hexo-renderer-markdown-it katex @renbaoshuo/markdown-it-katex

pnpm i hexo-renderer-markdown-it katex @renbaoshuo/markdown-it-katex

配置里修改

# --------------------------- start ---------------------------
# Katex
# Latex formula support
# Latex 公式支持
katex:
  enable: false
  # Whether to load on each page
  # 是否在每个页面加载
  per_page: false
  # Whether to enable copy formula
  # 是否启用复制公式
  copytex: false
# --------------------------- end ---------------------------

添加以下内容到 _config.yml

markdown:
  preset: 'default'
  render:
    html: true
    xhtmlOut: false
    langPrefix: 'language-'
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  enable_rules:
  disable_rules:
  plugins:
    - '@renbaoshuo/markdown-it-katex'
  anchors:
    level: 2
    collisionSuffix: ''
    permalink: false
    permalinkClass: 'header-anchor'
    permalinkSide: 'left'
    permalinkSymbol: '¶'
    case: 0
    separator: '-'
  images:
    lazyload: false
    prepend_root: false
    post_asset: false
  inline: false  # https://markdown-it.github.io/markdown-it/#MarkdownIt.renderInline

开启配置项

# --------------------------- start ---------------------------
# Katex
# Latex formula support
# Latex 公式支持
katex:
  enable: true
  # Whether to load on each page
  # 是否在每个页面加载
  per_page: true
  # Whether to enable copy formula
  # 是否启用复制公式
  copytex: false
# --------------------------- end ---------------------------
  1. PWA 安装 hexo-swpp 和 swpp-backends 插件

在博客根目录执行

pnpm i hexo-swpp 

pnpm i swpp-backends

开启配置

# 大约在773行
# --------------------------- start ---------------------------
# PWA
# Progressive Web App
pwa:
  enable: true
  manifest: /manifest.json # manifest.json
  theme_color: "#006a73" # Theme color
  mask_icon: /img/pwa/favicon.png # Mask icon
  apple_touch_icon: /img/pwa/favicon.png # Apple touch icon
  bookmark_icon: /img/pwa/favicon.png # Bookmark icon
  favicon_32_32: /img/pwa/favicon_32.png # 32x32 icon
  favicon_16_16: /img/pwa/favicon_16.png # 16x16 icon
# --------------------------- end ---------------------------

在_config.yml里添加swpp配置

swpp:
  # 是否启用插件
  enable: true
  # 是否在发布前自动执行脚本
  auto_exec: true
  gen_dom: true

在 source 目录中创建 manifest.json 文件

{
    "name": "网站名称",
    "short_name": "网站名称缩写",
    "theme_color": "#006a73",
    "background_color": "#006a73",
    "display": "fullscreen",
    "scope": "/",
    "start_url": "/",
    "id": "/",
    "icons": [
      {
        "src": "/img/pwa/favicon_16.png",
        "sizes": "16x16",
        "type": "image/png",
        "purpose": "any"
      },
      {
        "src": "/img/pwa/favicon_16.png",
        "sizes": "16x16",
        "type": "image/png",
        "purpose": "maskable"
      },
      {
        "src": "/img/pwa/favicon_32.png",
        "sizes": "32x32",
        "type": "image/png",
        "purpose": "any"
      },
      {
        "src": "/img/pwa/favicon_32.png",
        "sizes": "32x32",
        "type": "image/png",
        "purpose": "maskable"
      },
      {
        "src": "/img/pwa/favicon.png",
        "sizes": "180x180",
        "type": "image/png",
        "purpose": "any"
      },
      {
        "src": "/img/pwa/favicon.png",
        "sizes": "180x180",
        "type": "image/png",
        "purpose": "maskable"
      }
    ],
    "splash_pages": null
}

在博客根目录创建一个 sw-rules.js 文件

module.exports.config = {
  /** @type {?ServiceWorkerConfig|boolean} */
  serviceWorker: {
    escape: 1,
    cacheName: 'SolitudeCache',
    debug: false,
  },
  register: {
    onsuccess: undefined,
    onerror: () =>
      console.error(
        'Service Worker 注册失败！可能是由于您的浏览器不支持该功能！'
      ),
    builder: (root, framework, pluginConfig) => {
      const { onerror, onsuccess } = pluginConfig.register;
      return `
            <script>
                (() => {
                    const sw = navigator.serviceWorker;
                    const error = ${onerror && onerror.toString()};
                    if (!sw?.register('${new URL(root).pathname}sw.js')
                        ${onsuccess ? `?.then(${onsuccess.toString()})` : ""}
                        ?.catch(error)
                    ) error()
                })()
            </script>`;
    },
  },
  /** @type {?DomConfig|boolean} */
  dom: {
    /** @type {?VoidFunction} */
    onsuccess: () => {
      caches
        .match('https://id.v3/')
        .then((res) => {
          if (res)
            res.json().then((json) => {
              utils &&
                utils.snackbarShow(
                  `已刷新缓存，更新为${json.escape + '.' + json.global + '.' + json.local
                  }版本最新内容`,
                  false,
                  2500
                );
            });
          else console.info('未找到缓存');
        })
        .catch((error) => console.error('缓存匹配出错', error));
    },
  },
  /** @type {?VersionJsonConfig|boolean} */
  json: {
    /** @type {number} */
    maxHtml: 15,
    /** @type {number} */
    charLimit: 1024,
    /** @type {string[]} */
    merge: [],
    exclude: {
      /** @type {RegExp[]} */
      localhost: [],
      /** @type {RegExp[]} */
      other: [],
    },
  },
  /** @type {?ExternalMonitorConfig|boolean} */
  external: {
    /** @type {number} */
    timeout: 5000,
    /** 拉取文件时地并发限制 */
    concurrencyLimit: 100,
    /** @type {({head: string, tail: string}|function(string):string[])[]} */
    js: [],
    /** @type {RegExp[]} */
    stable: [
      /^https:\/\/npm\.elemecdn\.com\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
      /^https:\/\/cdn\.cbd\.int\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
      /^https:\/\/cdn\.jsdelivr\.net\/npm\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
    ],
    replacer: (srcUrl) => {
      if (srcUrl.startsWith('https://cdn.jsdelivr.net/npm/')) {
        const pathname = new URL(srcUrl).pathname;
        return [
          srcUrl,
          `https://cdn.cbd.int/${pathname}`,
          `https://npm.elemecdn.com/${pathname}`,
          `https://fastly.jsdelivr.net/npm/${pathname}`,
        ];
      } else {
        return srcUrl;
      }
    },
  },
};

module.exports.cacheRules = {
  simple: {
    clean: true,
    search: false,
    match: (url, $eject) =>
      url.host === $eject.domain && ['/404.html'].includes(url.pathname),
  },
  cdn: {
    clean: true,
    match: (url) =>
      [
        'cdn.cbd.int',
        'lf26-cdn-tos.bytecdntp.com',
        'lf6-cdn-tos.bytecdntp.com',
        'lf3-cdn-tos.bytecdntp.com',
        'lf9-cdn-tos.bytecdntp.com',
        'cdn.staticfile.org',
        'npm.elemecdn.com',
      ].includes(url.host) &&
      url.pathname.match(/\.(js|css|woff2|woff|ttf|cur)$/),
  },
};

module.exports.getSpareUrls = (srcUrl) => {
  if (srcUrl.startsWith('https://npm.elemecdn.com')) {
    return {
      timeout: 3000,
      list: [
        srcUrl,
        `https://fastly.jsdelivr.net/${new URL(srcUrl).pathname}`,
      ],
    };
  }
};

module.exports.ejectValues = (hexo, rules) => {
  return {
    domain: {
      prefix: 'const',
      value: new URL(hexo.config.url).host,
    },
  };
};

module.exports.skipRequest = (request) => request.url.startsWith("https://i0.hdslb.com") ||
  request.url.startsWith('https://meting.qjqq.cn') ||
  request.url.startsWith('https://api.i-meto.com');
  1. hexo-deploy-git 提交到git的插件
pnpm i hexo-deploy-git --save
  1. hexo-generator-feed hexo的rss插件
pnpm i hexo-generator-feed --save
  1. hexo 的短链接: hexo-abbrlink
pnpm i hexo-abbrlink --save

在_config.yml里修改：

permalink: posts/:abbrlink/ 
# or
permalink: posts/:abbrlink.html

添加:

# abbrlink config
abbrlink:
  alg: crc32      # Algorithm used to calc abbrlink. Support crc16(default) and crc32
  rep: hex        # Representation of abbrlink in URLs. Support dec(default) and hex
  drafts: false   # Whether to generate abbrlink for drafts. (false in default)
  force: false    # Enable force mode. In this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had an abbrlink. (false in default)
  writeback: true # Whether to write changes to front-matters back to the actual markdown files. (true in default)
  1. 博客的sitemap : hexo-generator-sitemap
pnpm i hexo-generator-sitemap --save

在_config.yml里添加配置：

sitemap:
  path: 
    - sitemap.xml
    - sitemap.txt
  template: ./sitemap_template.xml
  template_txt: ./sitemap_template.txt
  rel: false
  tags: true
  categories: true
  1. 使用algolia搜索 : hexo-algoliasearch
  • 注册algolia：

注册地址：dashboard.algolia.com/users/sign_up

  • 创建应用：

注册成功后创建应用：dashboard.algolia.com/account/plan/create?from=dashboard

  • search -> configure -> index添加index_name即可

在博客执行命令：

pnpm i hexo-algoliasearch --save

_config.yml里添加

algolia:
  appId: "Z7A3XW4R2I"
  apiKey: "12db1ad54372045549ef465881c17e743"
  adminApiKey: "40321c7c207e7f73b63a19aa24c4761b"
  chunkSize: 5000
  indexName: "my-hexo-blog"
  fields:
    - content:strip:truncate,0,500
    - excerpt:strip
    - gallery
    - permalink
    - photos
    - slug
    - tags
    - title
ℹ️ 提示
**!!!配置完成后记得运行 `hexo clean`**

在hexo g 后实行下列代码：

hexo algolia
  1. hexo-safego安全跳转插件

使用该插件之前，需要先安装 cheerio，cheerio 是一个轻量级的库，用于在服务器端快速、灵活地实现 jQuery 核心功能。在 hexo-safego 插件中，cheerio 被用来解析和操作生成的静态 HTML 内容，类似于在浏览器中使用 jQuery 处理 DOM 元素。这使得插件能够在生成静态页面时，处理和替换外部链接，增强博客的安全性，而不需要在客户端引入 jQuery。Hexo 一般都有这个插件，可以在 node_modules 查看，如果没有，请先执行：

pnpm i cheerio --save

然后即可安装该插件：

pnpm i hexo-safego --save

在hexo根目录的_config.yml文件中添加以下配置：

# hexo-safego安全跳转插件
# see https://blog.liushen.fun/posts/1dfd1f41/
hexo_safego:
  # 基本功能设置
  general:
    enable: true                # 启用插件
    enable_base64_encode: true  # 使用 Base64 编码
    enable_target_blank: true   # 打开新窗口
  # 安全设置
  security:
    url_param_name: 'u'         # URL 参数名
    html_file_name: 'go.html'   # 重定向页面的文件名
    ignore_attrs:               # 忽略处理的 HTML 属性
      - 'data-fancybox'
  # 容器与页面设置
  scope:
    apply_containers:           # 应用的容器选择器
      - '#article-container'
    apply_pages:                # 应用的页面路径
      - "/posts/"
      - "/devices/"
    exclude_pages:              # 排除的页面路径
  # 域名白名单
  whitelist:
    domain_whitelist:           # 允许的白名单域名
      - "qyliu.top"
      - "liushen.fun"
  # 页面外观设置
  appearance:
    avatar: /info/avatar.ico    # 头像路径
    title: "清羽飞扬"            # 页面标题
    subtitle: "安全中心"         # 页面副标题
    darkmode: true              # 是否启用深色模式
    countdowntime: -1           # 倒计时秒数
  # 调试设置
  debug:
    enable: false               # 启用调试模式
  1. hexo的追番页面：hexo-bilibili-bangumi
pnpm i hexo-bilibili-bangumi --save

在_config.yml配置：

bangumi: # 追番设置
  enable: true           # 是否启用
  source: bili          # 数据源
  path: bangumis/index.html  # 页面路径
  vmid:                 # 用户ID
  title: '追番列表'      # 页面标题
  quote: '生命不息，追番不止！' # 页面引言
  show: 1              # 初始显示页面: 0=想看, 1=在看, 2=看过
  lazyload: true       # 是否启用图片懒加载
  metaColor:           # meta 信息字体颜色
  color:               # 简介字体颜色
  webp: true          # 是否使用 webp 格式图片
  progress: true      # 是否显示进度条

cinema: # 追剧设置
  enable: true           # 是否启用
  source: bili

game: # 游戏设置，仅支持source: bgmv0
  enable: true           # 是否启用
  source: bgmv0

还在更新中。。。

Github action配置

承接段落的继续吧，未来会在出水一期。

接下来就是创建一个私有仓库，根据大佬的文章，是为了保护Token，见仁见智。

这个私有仓库的建立是存储Hexo博客代码，如果你要使用Qexo

，这也是必不可少的！

创建完成后，需要把博客的源码 push 到这里。首先获取远程仓库地址，此处虽然 SSH 和 HTTPS 均可。SSH 在绑定过 ssh key 的设备上无需再输入密码，HTTPS 则需要输入密码，但是 SSH 偶尔会遇到端口占用的情况。请自主选择。

❗ 重要
这里之所以是私有仓库，是因为在接下来的配置中会用到 `Token`，如果 `Token` 被盗用，别人可以肆意操作你的 github 仓库内容，为了避免这一风险，才选择的博客源码闭源。

配置 Github Action

  1. 在[Blogroot]新建.github文件夹,注意开头是有个.的。然后在.github 内新建 workflows 文件夹，再在 workflows 文件夹内新建 autodeploy.yml,在[Blogroot]/.github/workflows/autodeploy.yml 里面输入
# 当有改动推送到 main 分支时，启动 Action
name: 自动部署

on:
  push:
    branches:
      - main # 自选分支

  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 检查分支
        uses: actions/checkout@v4
        with:
          ref: main # 自选分支

      - name: 安装 Node
        uses: actions/setup-node@v4
        with:
          node-version: "22.x" # node版本

      - name: 安装 Hexo
        run: |
          export TZ='Asia/Shanghai'
          npm install hexo-cli -g
          npm install yamljs --save

      - name: 缓存 Hexo
        uses: actions/cache@v4
        id: cache
        with:
          path: node_modules
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

      - name: 安装依赖
        if: steps.cache.outputs.cache-hit != 'true'
        run: |
          npm install --save
          npm install hexo-algoliasearch --save
          npm install hexo-bilibili-bangumi --save

      - name: 生成静态文件
        run: |
          node ./link.js
          hexo clean
          hexo generate
          hexo bangumi -u
          hexo algolia

      - name: 部署
        run: |
          cd ./public
          git init -b main
          git config --global user.name '${{ secrets.GITHUBUSERNAME }}'
          git config --global user.email '${{ secrets.GITHUBEMAIL }}'
          git add .
          git commit -m "${{ github.event.head_commit.message }} $(date +"%Z %Y-%m-%d %A %H:%M:%S") Updated by GitHub Actions"
          git push --force --quiet "https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.GITHUBTOKEN }}@github.com/${{ secrets.GITHUBUSERNAME }}/${{ secrets.GITHUBUSERNAME }}.github.io.git" main

上述代码是来自店长的修改自用，为什么不用安知鱼的？

  • 首先把Token直接放在仓库的文件里还是不太好。
  • 像我这种在本地搞的，推不到仓库里，因为这里的token不能直接上传，所以改成环境变量来引入，但是依旧有各种问题，相反使用了店长的代码后，就大差不差，询问AI后就得到目前的代码，也就可以正式上传了。（无拉踩的意思）
  • 之后需要自己到仓库的 Settings->Secrets->actions 下添加环境变量，变量名参考脚本中出现的，依次添加。

重新设置远程仓库和分支


🍼第一次使用git管理博客源码

  1. 删除或者先把[Blogroot]/themes/solitude/.git移动到非博客文件夹目录下,原因是主题文件夹下的.git文件夹的存在会导致其被识别成子项目，从而无法被上传到源码仓库。

  2. 在博客根目录[Blogroot]路径下运行指令:

    git init #初始化
git remote add origin git@github.com:[GithubUsername]/[SourceRepo].git #[SourceRepo]为存放源码的github私有仓库
git checkout -b master # 切换到master分支，
#2020年10月后github新建仓库默认分支改为main，注意更改
# 如果不是，后面的所有设置的分支记得保持一致

  3. 添加屏蔽项

    .DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea
themes/solitude/.git

    如果不是solitude主题，记得替换最后一行内容为你自己当前使用的主题。

  4. 之后再运行 git 提交指令，将博客源码提交到 github 上。

    git add .
git commit -m "github action update"
git push origin master
#2020年10月后github新建仓库默认分支改为main，注意更改
  5. 此时你的主题文件夹若已经被正常上传，并且你也添加了主题文件夹下的.git 文件夹的屏蔽项。那你可以考虑把第二步移走或删除的.git放回来，用作以后升级。（不禁怀疑真的有人会去用这个方式来升级吗）


🍾曾经做过git管理源码的操作

  1. 添加屏蔽项

因为能够使用指令进行安装的内容不包括在需要提交的源码内，所有我们需要将这些内容添加到屏蔽项，表示不上传到 github 上。这样可以显著减少需要提交的文件量和加快提交速度。
打开[Blogroot]/.gitignore,输入以下内容：

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea
themes/solitude/.git

如果不是solitude主题，记得替换最后一行内容为你自己当前使用的主题。

  1. 提交源码到私有仓库[SourceRepo]
    在博客根目录[Blogroot]下启动终端，使用 git 指令重设仓库地址。这样在新建仓库，我们仍旧可以保留珍贵的 commit history，便于版本回滚。

    git remote rm origin # 删除原有仓库链接
git remote add origin git@github.com:[GithubUsername]/[SourceRepo].git #[SourceRepo]为新的存放源码的github私有仓库
git checkout -b master # 切换到master分支，
#2020年10月后github新建仓库默认分支改为main，注意更改
# 如果不是，后面的所有设置的分支记得保持一致
git add .
git commit -m "github action update"
git push origin master
#2020年10月后github新建仓库默认分支改为main，注意更改

  2. 可能遇到的 bug
    因为 solitude 主题文件夹下的.git 文件夹的存在，那么主题文件夹会被识别子项目。从而无法被上传到源码仓库。若是遇到添加屏蔽项，但是还是无法正常上传主题文件夹的情况。请先将本地源码中的 themes 文件夹移动到别的目录下。然后 commit 一次。接着将 themes 文件夹移动回来，再 commit 一次。

    ❗ 重要
    要是还不行，那就删了 solitude 主题文件夹下的.git 文件夹，然后再重复上述的 commit 操作。

挖坑

大致写到这，未来或许会有下一章挖坑？但是目前通用的就到这，然后后续会写Qexo的简单使用方法、solitude的一些配置更改和我踩坑经历吧。

]]> Markdown 强调语法 https://blog.zsx815.top/archives/12/ https://blog.zsx815.top/archives/12/ Thu, 17 Jul 25 18:11:00 +0800 2025年07月17日18:11 ZSXの小站 > 原文链接: https://markdown.com.cn/basic-syntax/emphasis.html

Markdown 强调语法

通过将文本设置为粗体或斜体来强调其重要性。

粗体（Bold）

要加粗文本，请在单词或短语的前后各添加两个星号（asterisks）或下划线（underscores）。如需加粗一个单词或短语的中间部分用以表示强调的话，请在要加粗部分的两侧各添加两个星号（asterisks）。

Markdown语法HTML预览效果
I just love **bold text**.I just love <strong>bold text</strong>.I just love bold text.
I just love __bold text__.I just love <strong>bold text</strong>.I just love bold text.
Love**is**boldLove<strong>is</strong>boldLove is bold

粗体（Bold）用法最佳实践

Markdown 应用程序在如何处理单词或短语中间的下划线上并不一致。为兼容考虑，在单词或短语中间部分加粗的话，请使用星号（asterisks）。

✅ Do this❌ Don't do this
Love**is**boldLove__is__bold

斜体（Italic）

要用斜体显示文本，请在单词或短语前后添加一个星号（asterisk）或下划线（underscore）。要斜体突出单词的中间部分，请在字母前后各添加一个星号，中间不要带空格。

Markdown语法HTML预览效果
This text is ***really important***.This text is <strong><em>really important</em></strong>.This text is really important.
This text is ___really important___.This text is <strong><em>really important</em></strong>.This text is ___really important___.
This text is __*really important*__.This text is <strong><em>really important</em></strong>.This text is __really important__.
This text is **_really important_**.This text is <strong><em>really important</em></strong>.This text is really important.
This is really***very***important text.This is really<strong><em>very</em></strong>important text.This is really very important text.

粗体（Bold）和斜体（Italic）用法的最佳实践

Markdown 应用程序在处理单词或短语中间添加的下划线上并不一致。为了实现兼容性，请使用星号将单词或短语的中间部分加粗并以斜体显示，以示重要。

✅ Do this❌ Don't do this
This is really***very***important text.This is really___very___important text.
]]> > 原文链接: https://markdown.com.cn/basic-syntax/emphasis.html

Markdown 强调语法

通过将文本设置为粗体或斜体来强调其重要性。

粗体（Bold）

要加粗文本，请在单词或短语的前后各添加两个星号（asterisks）或下划线（underscores）。如需加粗一个单词或短语的中间部分用以表示强调的话，请在要加粗部分的两侧各添加两个星号（asterisks）。

Markdown语法HTML预览效果
I just love **bold text**.I just love <strong>bold text</strong>.I just love bold text.
I just love __bold text__.I just love <strong>bold text</strong>.I just love bold text.
Love**is**boldLove<strong>is</strong>boldLove is bold

粗体（Bold）用法最佳实践

Markdown 应用程序在如何处理单词或短语中间的下划线上并不一致。为兼容考虑，在单词或短语中间部分加粗的话，请使用星号（asterisks）。

✅ Do this❌ Don't do this
Love**is**boldLove__is__bold

斜体（Italic）

要用斜体显示文本，请在单词或短语前后添加一个星号（asterisk）或下划线（underscore）。要斜体突出单词的中间部分，请在字母前后各添加一个星号，中间不要带空格。

Markdown语法HTML预览效果
This text is ***really important***.This text is <strong><em>really important</em></strong>.This text is really important.
This text is ___really important___.This text is <strong><em>really important</em></strong>.This text is ___really important___.
This text is __*really important*__.This text is <strong><em>really important</em></strong>.This text is __really important__.
This text is **_really important_**.This text is <strong><em>really important</em></strong>.This text is really important.
This is really***very***important text.This is really<strong><em>very</em></strong>important text.This is really very important text.

粗体（Bold）和斜体（Italic）用法的最佳实践

Markdown 应用程序在处理单词或短语中间添加的下划线上并不一致。为了实现兼容性，请使用星号将单词或短语的中间部分加粗并以斜体显示，以示重要。

✅ Do this❌ Don't do this
This is really***very***important text.This is really___very___important text.
]]> Markdown 换行语法 https://blog.zsx815.top/archives/15/ https://blog.zsx815.top/archives/15/ Sat, 28 Jun 25 22:11:00 +0800 2025年06月28日22:11 ZSXの小站 > 原文链接: https://markdown.com.cn/basic-syntax/line-breaks.html

Markdown 换行语法

在一行的末尾添加两个或多个空格，然后按回车键,即可创建一个换行(<br>)。

| Markdown语法 | HTML | 预览效果 |
| :---: | :---: | :---: |
| This is the first line.
And this is the second line. | This is the first line.<br>
And this is the second line. | This is the first line.
And this is the second line. |

换行（Line Break）用法的最佳实践

几乎每个 Markdown 应用程序都支持两个或多个空格进行换行，称为 结尾空格（trailing whitespace) 的方式，但这是有争议的，因为很难在编辑器中直接看到空格，并且很多人在每个句子后面都会有意或无意地添加两个空格。由于这个原因，你可能要使用除结尾空格以外的其它方式来换行。幸运的是，几乎每个 Markdown 应用程序都支持另一种换行方式：HTML 的 <br /> 标签。

为了兼容性，请在行尾添加“结尾空格”或 HTML 的 <br> 标签来实现换行。

还有两种其他方式我并不推荐使用。CommonMark 和其它几种轻量级标记语言支持在行尾添加反斜杠 (\) 的方式实现换行，但是并非所有 Markdown 应用程序都支持此种方式，因此从兼容性的角度来看，不推荐使用。并且至少有两种轻量级标记语言支持无须在行尾添加任何内容，只须键入回车键（return）即可实现换行。

✅ Do this❌ Don't do this
First line with two spaces after.
And the next line.		First line with a backslash after.\
And the next line.
First line with the HTML tag after.<br>
And the next line.		First line with nothing after.
And the next line.
]]> > 原文链接: https://markdown.com.cn/basic-syntax/line-breaks.html

Markdown 换行语法

在一行的末尾添加两个或多个空格，然后按回车键,即可创建一个换行(<br>)。

| Markdown语法 | HTML | 预览效果 |
| :---: | :---: | :---: |
| This is the first line.
And this is the second line. | This is the first line.<br>
And this is the second line. | This is the first line.
And this is the second line. |

换行（Line Break）用法的最佳实践

几乎每个 Markdown 应用程序都支持两个或多个空格进行换行，称为 结尾空格（trailing whitespace) 的方式，但这是有争议的，因为很难在编辑器中直接看到空格，并且很多人在每个句子后面都会有意或无意地添加两个空格。由于这个原因，你可能要使用除结尾空格以外的其它方式来换行。幸运的是，几乎每个 Markdown 应用程序都支持另一种换行方式：HTML 的 <br /> 标签。

为了兼容性，请在行尾添加“结尾空格”或 HTML 的 <br> 标签来实现换行。

还有两种其他方式我并不推荐使用。CommonMark 和其它几种轻量级标记语言支持在行尾添加反斜杠 (\) 的方式实现换行，但是并非所有 Markdown 应用程序都支持此种方式，因此从兼容性的角度来看，不推荐使用。并且至少有两种轻量级标记语言支持无须在行尾添加任何内容，只须键入回车键（return）即可实现换行。

✅ Do this❌ Don't do this
First line with two spaces after.
And the next line.		First line with a backslash after.\
And the next line.
First line with the HTML tag after.<br>
And the next line.		First line with nothing after.
And the next line.
]]> 资源分享：涂鹿Toolooz https://blog.zsx815.top/archives/7/ https://blog.zsx815.top/archives/7/ Mon, 19 May 25 23:11:00 +0800 2025年05月19日23:11 ZSXの小站 ## 涂鹿Toolooz：曲线文字绘制设计工具，轻松创建沿任意路径排布的精美文字

　　涂鹿Toolooz，在线曲线文字绘制工具，可使文字沿任意路径排列，打造独特视觉效果。为您的徽标、标题、艺术作品赋予生命力与创意。

　　支持自定义画布尺寸、文本内容、字体、间距、颜色、描边等，还支持多个绘图工具和选择文本是否重复，可导出为 PNG、WebP 和 SVG 格式，免费使用，无需注册。

网站介绍

截图

特色

自由绘制路径

　　使用鼠标或触控笔自由绘制路径，或选择预设形状如圆形、方形、椭圆等，轻松创建文字轨迹。

文本样式丰富

　　自定义字体、大小、颜色、间距等属性，支持文本背景带，打造丰富多样的文字效果。

交互式编辑

　　直观的选择、移动、缩放和旋转功能，让您精确控制每个文字路径的位置和外观。

灵活配置

　　自定义画布尺寸、背景色、缩放级别等，适应各种设计场景和需求。

多格式导出

　　将设计导出为PNG、SVG或WEBP格式，可自定义分辨率和尺寸，轻松应用于各种场景。

模板库

　　内置多种精美模板，一键应用，快速开始您的创意设计项目

应用场景

　　涂鹿曲线文字绘制设计工具适用于多种创意设计

　　创建独特的环形或自定义形状品牌徽标，增强品牌视觉识别度。#社交媒体 #创意设计

　　为社交媒体平台设计吸引眼球的曲线文字图片，提高内容吸引力。创意海报设计

　　创建个性化海报和宣传材料，为活动和产品增添创意元素。

网站链接

　　https://toolooz.com

原文链接

　　https://www.appmiao.com/836/

]]> ## 涂鹿Toolooz：曲线文字绘制设计工具，轻松创建沿任意路径排布的精美文字

　　涂鹿Toolooz，在线曲线文字绘制工具，可使文字沿任意路径排列，打造独特视觉效果。为您的徽标、标题、艺术作品赋予生命力与创意。

　　支持自定义画布尺寸、文本内容、字体、间距、颜色、描边等，还支持多个绘图工具和选择文本是否重复，可导出为 PNG、WebP 和 SVG 格式，免费使用，无需注册。

网站介绍

截图

特色

自由绘制路径

　　使用鼠标或触控笔自由绘制路径，或选择预设形状如圆形、方形、椭圆等，轻松创建文字轨迹。

文本样式丰富

　　自定义字体、大小、颜色、间距等属性，支持文本背景带，打造丰富多样的文字效果。

交互式编辑

　　直观的选择、移动、缩放和旋转功能，让您精确控制每个文字路径的位置和外观。

灵活配置

　　自定义画布尺寸、背景色、缩放级别等，适应各种设计场景和需求。

多格式导出

　　将设计导出为PNG、SVG或WEBP格式，可自定义分辨率和尺寸，轻松应用于各种场景。

模板库

　　内置多种精美模板，一键应用，快速开始您的创意设计项目

应用场景

　　涂鹿曲线文字绘制设计工具适用于多种创意设计

　　创建独特的环形或自定义形状品牌徽标，增强品牌视觉识别度。#社交媒体 #创意设计

　　为社交媒体平台设计吸引眼球的曲线文字图片，提高内容吸引力。创意海报设计

　　创建个性化海报和宣传材料，为活动和产品增添创意元素。

网站链接

　　https://toolooz.com

原文链接

　　https://www.appmiao.com/836/

]]> 来将 Telegram 当音乐播放器吧！ https://blog.zsx815.top/archives/10/ https://blog.zsx815.top/archives/10/ Thu, 15 May 25 19:11:00 +0800 2025年05月15日19:11 ZSXの小站 ## 来将 Telegram 当音乐播放器吧！（寻找音乐、即时歌词、无损音乐不失真压缩）

步骤一：到 @music_v1bot 下载歌曲，并找到歌词

　　输入指令： /search （你想要的歌名）

步骤二：下载 MT 管理器（点我）

开启：下载好的歌词文件

步骤三：最右上角、搜索\>勾选正则化，替换（全部替换）

输入：[(\d{2}:\d{2}).\d+]

替换：$1

注意："$1"后面要加一个空格(英文)。

代码作者：Aric

　　并将选取好的歌词，粘贴到音乐文件就完成了。

（我是范例-点我查看）

须知
使用：“.FLAC“格式的音乐文件，有时候不能正常显示歌词时间轴，是正常的，所以你可能要转换特定的格式，如.mp3，或是.ogg 或.m4a 的歌曲。

　　→ 如果你对音乐品质有极致追求，也有电脑 🖥️，我个人极度推荐使用 dBpowerAMP 这类型工具，将无损音乐格式转换成 m4a （水果的算法：QAAC 编码的音乐），目前可以算是当今世界上最好的压缩算法，在通讯界享有盛名，且压缩后可以到接近百分之百还原。（甚至连对音乐/声学研究的职业工作者都讚叹不已）笔者强烈推荐，只叹手机没有类似的软件。专门转成 QAAC 编码的。

🖥️ 电脑版 dBpowerAMP 下载/教学请点我

​

拓展

　　以上是原文内容，如果你改了音乐格式失去了原本的封面，歌手等等东西，一般来说是不妨碍什么的，如果你一定要改的话，可以使用音乐标签。具体使用很简单，我不多赘述，给个视频你就大致明白了：​ ​

　　同时，如果你想更换音乐格式，有很多种方法，以下给一个网站。

原文链接

　　https://telegra.ph/Telegram-Real-Time-sync-lyrics-05-14

　　‍

]]> ## 来将 Telegram 当音乐播放器吧！（寻找音乐、即时歌词、无损音乐不失真压缩）

步骤一：到 @music_v1bot 下载歌曲，并找到歌词

　　输入指令： /search （你想要的歌名）

步骤二：下载 MT 管理器（点我）

开启：下载好的歌词文件

步骤三：最右上角、搜索\>勾选正则化，替换（全部替换）

输入：[(\d{2}:\d{2}).\d+]

替换：$1

注意："$1"后面要加一个空格(英文)。

代码作者：Aric

　　并将选取好的歌词，粘贴到音乐文件就完成了。

（我是范例-点我查看）

须知
使用：“.FLAC“格式的音乐文件，有时候不能正常显示歌词时间轴，是正常的，所以你可能要转换特定的格式，如.mp3，或是.ogg 或.m4a 的歌曲。

　　→ 如果你对音乐品质有极致追求，也有电脑 🖥️，我个人极度推荐使用 dBpowerAMP 这类型工具，将无损音乐格式转换成 m4a （水果的算法：QAAC 编码的音乐），目前可以算是当今世界上最好的压缩算法，在通讯界享有盛名，且压缩后可以到接近百分之百还原。（甚至连对音乐/声学研究的职业工作者都讚叹不已）笔者强烈推荐，只叹手机没有类似的软件。专门转成 QAAC 编码的。

🖥️ 电脑版 dBpowerAMP 下载/教学请点我

​

拓展

　　以上是原文内容，如果你改了音乐格式失去了原本的封面，歌手等等东西，一般来说是不妨碍什么的，如果你一定要改的话，可以使用音乐标签。具体使用很简单，我不多赘述，给个视频你就大致明白了：​ ​

　　同时，如果你想更换音乐格式，有很多种方法，以下给一个网站。

原文链接

　　https://telegra.ph/Telegram-Real-Time-sync-lyrics-05-14

　　‍

]]> 资源分享： DROP https://blog.zsx815.top/archives/19/ https://blog.zsx815.top/archives/19/ Fri, 09 May 25 21:24:00 +0800 2025年05月09日21:24 ZSXの小站 ### 网站简介

DROP 是一个便捷的文件分享与托管平台，云存储工具，提供免费10GB的存储空间，支持大文件的快速上传与分享。

支持上传图片、视频、压缩文件和PDF，选择适合文件的文档后，点击拷贝链接即可直接获得分享链接。采用AI驱动技术，确保文件传输的高效性和安全性，同时提供简洁直观的用户界面，方便用户管理和分享文件。DROP 适用于个人用户和创作者，可轻松展示和分发作品

截图

功能特色

  • 免费10GB存储：新用户可免费享受10GB的存储空间，满足日常文件分享需求。
  • 大文件支持：支持大文件的快速上传与分享，适合分享高清视频、大型文档等。
  • AI驱动：采用AI技术优化文件传输和管理，提升用户体验。
  • 隐私保护：提供文件访问控制，保护用户隐私和数据安全。
  • 简洁界面：直观的用户界面，易于上手，方便文件管理。
  • 多平台支持：支持多种设备和操作系统，方便随时随地访问文件。

网站地址

https://drop.space/

原文链接: https://www.appmiu.com/31115.html

]]> ### 网站简介

DROP 是一个便捷的文件分享与托管平台，云存储工具，提供免费10GB的存储空间，支持大文件的快速上传与分享。

支持上传图片、视频、压缩文件和PDF，选择适合文件的文档后，点击拷贝链接即可直接获得分享链接。采用AI驱动技术，确保文件传输的高效性和安全性，同时提供简洁直观的用户界面，方便用户管理和分享文件。DROP 适用于个人用户和创作者，可轻松展示和分发作品

截图

功能特色

  • 免费10GB存储：新用户可免费享受10GB的存储空间，满足日常文件分享需求。
  • 大文件支持：支持大文件的快速上传与分享，适合分享高清视频、大型文档等。
  • AI驱动：采用AI技术优化文件传输和管理，提升用户体验。
  • 隐私保护：提供文件访问控制，保护用户隐私和数据安全。
  • 简洁界面：直观的用户界面，易于上手，方便文件管理。
  • 多平台支持：支持多种设备和操作系统，方便随时随地访问文件。

网站地址

https://drop.space/

原文链接: https://www.appmiu.com/31115.html

]]> tgtalk免费部署 https://blog.zsx815.top/archives/9/ https://blog.zsx815.top/archives/9/ Sun, 04 May 25 21:01:00 +0800 2025年05月04日21:01 ZSXの小站 ## 部署 API

访问 Gist 并获取其中所有代码

需要注意，本 API Worker 脚本基于 ChenYFan 修改，包含了本项目需要使用的功能，请勿随意更改脚本内容
TGTalker-Frontend V2 的 API 不兼容 V1

进入 Cloudflare 仪表盘

选择创建应用程序 -> 创建 Worker -> 修改名称（部署）-> 编辑代码

在其中粘贴你复制的所有代码，并且修改 ChannelName 为你的频道名称，部署并访问 Worker 查看是否能正确返回内容

接着你可以为你的 Worker 绑定一个域名



保存，然后将你绑定的域名填入配置中的 api 项即可。

]]> ## 部署 API

访问 Gist 并获取其中所有代码

需要注意，本 API Worker 脚本基于 ChenYFan 修改，包含了本项目需要使用的功能，请勿随意更改脚本内容
TGTalker-Frontend V2 的 API 不兼容 V1

进入 Cloudflare 仪表盘

选择创建应用程序 -> 创建 Worker -> 修改名称（部署）-> 编辑代码

在其中粘贴你复制的所有代码，并且修改 ChannelName 为你的频道名称，部署并访问 Worker 查看是否能正确返回内容

接着你可以为你的 Worker 绑定一个域名



保存，然后将你绑定的域名填入配置中的 api 项即可。

]]> Umami博客访问统计Vercel+Cloudflare Wokers部署 https://blog.zsx815.top/archives/8/ https://blog.zsx815.top/archives/8/ Mon, 07 Apr 25 17:11:00 +0800 2025年04月07日17:11 ZSXの小站 ## 第一部分：Vercel+Umami

  1. 第一步
    1.1 Fork​umami到自己的Github仓库

    1.2 创建项目

    index.mdx

  2. 第二步

　2.1 创建Vercel账号，这里我就省略了，因为GitHub可以直接进行授权即可。

2.2 在你授权以后，首先创建Postgres数据库，直接一路下一步，创建好就行，可以给下面的连接复制出来

　　点击Copy Snippet​,就可以，记住在粘贴的时候是我画线里面的部分，双引号都不需要 ，因为要设置环境变量。

　　 2.3 在创建好数据库以后，回到主页面的Overview​，然后右上角有一个Add New​选择添加Project​，选择你Fork​的umami​，添加即可。

2.4 设置环境变量，`DATABASE_URL`​和`HASH_SALT`​和`TRACKER_SCRIPT_NAME`​，其中`DATABASE_URL`​的值就是上面划线的部分，其他的两个环境变量都是对应的值是String自己可以随意定义。

　　 2.5 设置好以后点击Deploy​，等待大约两分钟左右，自动部署完成，部署完成以后可以通过下图种面板上面给的链接可以直接访问。

　　 2.6 打开以后会跳出登录地址，默认的登录密码是adminumami​，登录进去以后，设置给自己密码修改了，然后就是设置里面添加网站，给你要统计的网站添加进去，到此，别人访问你的网站你可以通过面板看到统计数据了。

第二部分：Umami+Cloudflare worker

这一部分主要是让你的博客上面能展示的访问数据，效果如下：

image

  1. 注册CloudFlare​账号，然后进去以后，选择Workers​和Pages​，点击创建​，再点击部署

　　部署以后，进去点击编辑代码，将里面的代码进行替换：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event));
});

const API_BASE_URL = 'https://umami.yourdomain.com';  // 替换你的刚才部署的umami的域名
const TOKEN = 'your_token'; // 获取的token
const WEBSITE_ID = 'your_website_id'; // 在umami添加网站的 webstie id
const CACHE_KEY = 'umami_cache';
const CACHE_TIME = 600; // Cache time in seconds

async function fetchUmamiData(startAt, endAt) {
  const url = `${API_BASE_URL}/api/websites/${WEBSITE_ID}/stats?startAt=${startAt}&endAt=${endAt}`;
  const response = await fetch(url, {
    headers: {
      'Authorization': `Bearer ${TOKEN}`,
      'Content-Type': 'application/json'
    }
  });

  if (!response.ok) {
    console.error(`Error fetching data: ${response.statusText}`);
    return null;
  }

  return response.json();
}

async function handleRequest(event) {
  const cache = await caches.open(CACHE_KEY);
  const cachedResponse = await cache.match(event.request);

  if (cachedResponse) {
    return cachedResponse;
  }

  const now = Date.now();
  const todayStart = new Date(now).setHours(0, 0, 0, 0);
  const yesterdayStart = new Date(now - 86400000).setHours(0, 0, 0, 0);
  const lastMonthStart = new Date(now).setMonth(new Date(now).getMonth() - 1);
  const lastYearStart = new Date(now).setFullYear(new Date(now).getFullYear() - 1);

  const [todayData, yesterdayData, lastMonthData, lastYearData] = await Promise.all([
    fetchUmamiData(todayStart, now),
    fetchUmamiData(yesterdayStart, todayStart),
    fetchUmamiData(lastMonthStart, now),
    fetchUmamiData(lastYearStart, now)
  ]);

  const responseData = {
    today_uv: todayData?.visitors?.value ?? null,
    today_pv: todayData?.pageviews?.value ?? null,
    yesterday_uv: yesterdayData?.visitors?.value ?? null,
    yesterday_pv: yesterdayData?.pageviews?.value ?? null,
    last_month_pv: lastMonthData?.pageviews?.value ?? null,
    last_year_pv: lastYearData?.pageviews?.value ?? null
  };

  const jsonResponse = new Response(JSON.stringify(responseData), {
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization'
    }
  });

  event.waitUntil(cache.put(event.request, jsonResponse.clone()));

  return jsonResponse;
}

　　但是里面有几个比较重要的参数需要修改API_BASE_URL​、TOKEN​、WEBSITE_ID​其中API_BASE_URL​和WEBSITE_ID​已经是有的，WEBSITE_ID​在umami​中的设置，选择你已经添加好的网站，点击编辑​，会出现网站的WEBSITE_ID​：

　　 2.2 获取token​，在想api​测试网站，hoppscotch，跳转到这个页面以后，如下图所示

　　 2.2.1 请求方式选择post​，链接填写方式是：

https://你的umami域名或者是链接/api/auth/login

　　 2.2.2 请求体选择Body​参数格式选择application/json

{
 "username":"用户名",
 "password":"密码"
}

　　 2.2.3 返回结果中token​里面的内容就是需要的token

{
  "token": "你的token", # 你需要记录下来的内容
  "user": {
    "id": "41e2b680-648e-4b09-bcd7-3e2b10c06264",
    "username": "admin",
    "role": "admin",
    "createdAt": "2024-11-12T09:18:12.766Z",
    "isAdmin": true
  }
}

　　到这里，你部署api​所需要的所有参数内容都已经有了，给替换进去即可。

　　 2.3 测试在你部署好以后，会有一个链接，当然你如果是用cloudflare​代理你的域名，可以直接进行关联。

　　然后点击或则是复制粘贴到浏览器，请求以后会出来下面的结果：

　　如果没有结果，建议你先去你部署的umami面板里面看看有没有数据，有数据的情况下，这里请求都会有数据的，清理浏览器缓存开代理在测试。

第三部分：添加博客统计

　　将数据添加到about​页面

tj: # 统计
  provider: custom # custom
  url: 你的数据接口地址
  img: https://7.isyangs.cn/1/65eb2e9109826-1.png # 背景
  desc: # 卡片左下角描述

　　配置完成~

　　感谢starsharbor大佬博客的指导，原文

作者原文

作者: Couture
链接: https://www.coutures.top/posts/27233.html
来源: Couture
著作权归作者所有。 商业转载请联系作者获得授权，非商业转载请注明出处。

]]> ## 第一部分：Vercel+Umami

  1. 第一步
    1.1 Fork​umami到自己的Github仓库

    1.2 创建项目

    index.mdx

  2. 第二步

　2.1 创建Vercel账号，这里我就省略了，因为GitHub可以直接进行授权即可。

2.2 在你授权以后，首先创建Postgres数据库，直接一路下一步，创建好就行，可以给下面的连接复制出来

　　点击Copy Snippet​,就可以，记住在粘贴的时候是我画线里面的部分，双引号都不需要 ，因为要设置环境变量。

　　 2.3 在创建好数据库以后，回到主页面的Overview​，然后右上角有一个Add New​选择添加Project​，选择你Fork​的umami​，添加即可。

2.4 设置环境变量，`DATABASE_URL`​和`HASH_SALT`​和`TRACKER_SCRIPT_NAME`​，其中`DATABASE_URL`​的值就是上面划线的部分，其他的两个环境变量都是对应的值是String自己可以随意定义。

　　 2.5 设置好以后点击Deploy​，等待大约两分钟左右，自动部署完成，部署完成以后可以通过下图种面板上面给的链接可以直接访问。

　　 2.6 打开以后会跳出登录地址，默认的登录密码是adminumami​，登录进去以后，设置给自己密码修改了，然后就是设置里面添加网站，给你要统计的网站添加进去，到此，别人访问你的网站你可以通过面板看到统计数据了。

第二部分：Umami+Cloudflare worker

这一部分主要是让你的博客上面能展示的访问数据，效果如下：

image

  1. 注册CloudFlare​账号，然后进去以后，选择Workers​和Pages​，点击创建​，再点击部署

　　部署以后，进去点击编辑代码，将里面的代码进行替换：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event));
});

const API_BASE_URL = 'https://umami.yourdomain.com';  // 替换你的刚才部署的umami的域名
const TOKEN = 'your_token'; // 获取的token
const WEBSITE_ID = 'your_website_id'; // 在umami添加网站的 webstie id
const CACHE_KEY = 'umami_cache';
const CACHE_TIME = 600; // Cache time in seconds

async function fetchUmamiData(startAt, endAt) {
  const url = `${API_BASE_URL}/api/websites/${WEBSITE_ID}/stats?startAt=${startAt}&endAt=${endAt}`;
  const response = await fetch(url, {
    headers: {
      'Authorization': `Bearer ${TOKEN}`,
      'Content-Type': 'application/json'
    }
  });

  if (!response.ok) {
    console.error(`Error fetching data: ${response.statusText}`);
    return null;
  }

  return response.json();
}

async function handleRequest(event) {
  const cache = await caches.open(CACHE_KEY);
  const cachedResponse = await cache.match(event.request);

  if (cachedResponse) {
    return cachedResponse;
  }

  const now = Date.now();
  const todayStart = new Date(now).setHours(0, 0, 0, 0);
  const yesterdayStart = new Date(now - 86400000).setHours(0, 0, 0, 0);
  const lastMonthStart = new Date(now).setMonth(new Date(now).getMonth() - 1);
  const lastYearStart = new Date(now).setFullYear(new Date(now).getFullYear() - 1);

  const [todayData, yesterdayData, lastMonthData, lastYearData] = await Promise.all([
    fetchUmamiData(todayStart, now),
    fetchUmamiData(yesterdayStart, todayStart),
    fetchUmamiData(lastMonthStart, now),
    fetchUmamiData(lastYearStart, now)
  ]);

  const responseData = {
    today_uv: todayData?.visitors?.value ?? null,
    today_pv: todayData?.pageviews?.value ?? null,
    yesterday_uv: yesterdayData?.visitors?.value ?? null,
    yesterday_pv: yesterdayData?.pageviews?.value ?? null,
    last_month_pv: lastMonthData?.pageviews?.value ?? null,
    last_year_pv: lastYearData?.pageviews?.value ?? null
  };

  const jsonResponse = new Response(JSON.stringify(responseData), {
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization'
    }
  });

  event.waitUntil(cache.put(event.request, jsonResponse.clone()));

  return jsonResponse;
}

　　但是里面有几个比较重要的参数需要修改API_BASE_URL​、TOKEN​、WEBSITE_ID​其中API_BASE_URL​和WEBSITE_ID​已经是有的，WEBSITE_ID​在umami​中的设置，选择你已经添加好的网站，点击编辑​，会出现网站的WEBSITE_ID​：

　　 2.2 获取token​，在想api​测试网站，hoppscotch，跳转到这个页面以后，如下图所示

　　 2.2.1 请求方式选择post​，链接填写方式是：

https://你的umami域名或者是链接/api/auth/login

　　 2.2.2 请求体选择Body​参数格式选择application/json

{
 "username":"用户名",
 "password":"密码"
}

　　 2.2.3 返回结果中token​里面的内容就是需要的token

{
  "token": "你的token", # 你需要记录下来的内容
  "user": {
    "id": "41e2b680-648e-4b09-bcd7-3e2b10c06264",
    "username": "admin",
    "role": "admin",
    "createdAt": "2024-11-12T09:18:12.766Z",
    "isAdmin": true
  }
}

　　到这里，你部署api​所需要的所有参数内容都已经有了，给替换进去即可。

　　 2.3 测试在你部署好以后，会有一个链接，当然你如果是用cloudflare​代理你的域名，可以直接进行关联。

　　然后点击或则是复制粘贴到浏览器，请求以后会出来下面的结果：

　　如果没有结果，建议你先去你部署的umami面板里面看看有没有数据，有数据的情况下，这里请求都会有数据的，清理浏览器缓存开代理在测试。

第三部分：添加博客统计

　　将数据添加到about​页面

tj: # 统计
  provider: custom # custom
  url: 你的数据接口地址
  img: https://7.isyangs.cn/1/65eb2e9109826-1.png # 背景
  desc: # 卡片左下角描述

　　配置完成~

　　感谢starsharbor大佬博客的指导，原文

作者原文

作者: Couture
链接: https://www.coutures.top/posts/27233.html
来源: Couture
著作权归作者所有。 商业转载请联系作者获得授权，非商业转载请注明出处。

]]> Git 同步上游仓库的更新 https://blog.zsx815.top/archives/18/ https://blog.zsx815.top/archives/18/ Fri, 04 Apr 25 22:16:00 +0800 2025年04月04日22:16 ZSXの小站 ## Git 同步上游仓库的更新

　　使用一个 Github Template 创建了我自己的仓库，需要同步一下补丁更新，总不能自己手抄一遍吧，搜了一下解决方案。

　　记录一下。

添加上游仓库

　　给上游仓库取个名字，如果将命名为 upstream​ ，可以在本地仓库中运行以下命令：

git remote add upstream https://github.com/$<upstream-repo>.git

获取上游仓库的更改

　　运行以下命令以获取上游仓库中的所有分支和提交：

git fetch upstream

合并上游更改

　　现在，将上游 main 分支的更改合并到您的本地 main 分支：

git merge upstream/main --allow-unrelated-histories

　　如果只需要合并特定的 commit ：

git cherry-pick <commit-hash>

　　也可以使用

gcp <commit-hash>

　　commit-hash 可以直接从 github 网页上复制。

　　这时 commit 的作者是源仓库的作者， Vercel 提示我 Build 失败，需要升级到 Pro，可以再修改一个文件，自己添加一条 commit 。

　　当然这很不优雅，可以使用下面的命令获取更改到文件，但是不会提交 commit ，

git cherry-pick <commit-hash> --no-commit

　　然后手动提交一下

git commit -m "commit information"

解决冲突

　　如何自己已经修改过源代码，在合并过程中可能发生冲突，需要手动解决。
Git 也会进行提示，手动编辑冲突文件并保存，然后再提交更改。

批量提交

git cherry-pick <起始提交>^..<结束提交>

　　如果有冲突会按照顺序处理，然后执行， continue 直到结束

git cherry-pick --continue
  • ​<起始提交>​：范围的开始点（不包含此提交，除非用 \<起始提交\>\~ 或 \<起始提交\>^）。
  • ​<结束提交>​：范围的结束点（包含此提交）。
  • ​^​ 是 Git 的语法，用于指定“之前的提交”。
  • ​..​ 表示范围。

推送

git push origin main

　　当然默认来说，并不会推送到新加入的 upstream​ ，直接 git push​ 即可

　　如果不再需要同步，可以删除上游的仓库

git remote remove upstream
]]> ## Git 同步上游仓库的更新

　　使用一个 Github Template 创建了我自己的仓库，需要同步一下补丁更新，总不能自己手抄一遍吧，搜了一下解决方案。

　　记录一下。

添加上游仓库

　　给上游仓库取个名字，如果将命名为 upstream​ ，可以在本地仓库中运行以下命令：

git remote add upstream https://github.com/$<upstream-repo>.git

获取上游仓库的更改

　　运行以下命令以获取上游仓库中的所有分支和提交：

git fetch upstream

合并上游更改

　　现在，将上游 main 分支的更改合并到您的本地 main 分支：

git merge upstream/main --allow-unrelated-histories

　　如果只需要合并特定的 commit ：

git cherry-pick <commit-hash>

　　也可以使用

gcp <commit-hash>

　　commit-hash 可以直接从 github 网页上复制。

　　这时 commit 的作者是源仓库的作者， Vercel 提示我 Build 失败，需要升级到 Pro，可以再修改一个文件，自己添加一条 commit 。

　　当然这很不优雅，可以使用下面的命令获取更改到文件，但是不会提交 commit ，

git cherry-pick <commit-hash> --no-commit

　　然后手动提交一下

git commit -m "commit information"

解决冲突

　　如何自己已经修改过源代码，在合并过程中可能发生冲突，需要手动解决。
Git 也会进行提示，手动编辑冲突文件并保存，然后再提交更改。

批量提交

git cherry-pick <起始提交>^..<结束提交>

　　如果有冲突会按照顺序处理，然后执行， continue 直到结束

git cherry-pick --continue
  • ​<起始提交>​：范围的开始点（不包含此提交，除非用 \<起始提交\>\~ 或 \<起始提交\>^）。
  • ​<结束提交>​：范围的结束点（包含此提交）。
  • ​^​ 是 Git 的语法，用于指定“之前的提交”。
  • ​..​ 表示范围。

推送

git push origin main

　　当然默认来说，并不会推送到新加入的 upstream​ ，直接 git push​ 即可

　　如果不再需要同步，可以删除上游的仓库

git remote remove upstream
]]> Markdown 段落语法 https://blog.zsx815.top/archives/13/ https://blog.zsx815.top/archives/13/ Thu, 13 Feb 25 18:11:00 +0800 2025年02月13日18:11 ZSXの小站 > 原文位置: https://markdown.com.cn/basic-syntax/paragraphs.html

Markdown 段落

要创建段落，请使用空白行将一行或多行文本进行分隔。

Markdown语法HTML预览效果
I really like using Markdown.<p>I really like using Markdown.</p>

I really like using Markdown.

I think I'll use it to format all of my documents from now on.<p>I think I'll use it to format all of my documents from now on.</p>

I think I'll use it to format all of my documents from now on.

段落（Paragraph）用法的最佳实践

不要用空格（spaces）或制表符（ tabs）缩进段落。

✅ Do this❌ Don't do this
Don't put tabs or spaces in front of your paragraphs. This can result in unexpected formatting problems.
Keep lines left-aligned like this. Don't add tabs or spaces in front of paragraphs.
]]> > 原文位置: https://markdown.com.cn/basic-syntax/paragraphs.html

Markdown 段落

要创建段落，请使用空白行将一行或多行文本进行分隔。

Markdown语法HTML预览效果
I really like using Markdown.<p>I really like using Markdown.</p>

I really like using Markdown.

I think I'll use it to format all of my documents from now on.<p>I think I'll use it to format all of my documents from now on.</p>

I think I'll use it to format all of my documents from now on.

段落（Paragraph）用法的最佳实践

不要用空格（spaces）或制表符（ tabs）缩进段落。

✅ Do this❌ Don't do this
Don't put tabs or spaces in front of your paragraphs. This can result in unexpected formatting problems.
Keep lines left-aligned like this. Don't add tabs or spaces in front of paragraphs.
]]> Markdown-标题语法 https://blog.zsx815.top/archives/14/ https://blog.zsx815.top/archives/14/ Wed, 12 Feb 25 18:56:00 +0800 2025年02月12日18:56 ZSXの小站 > 原文位置: https://markdown.com.cn/basic-syntax/headings.html

Markdown 标题语法

要创建标题，请在单词或短语前面添加井号 (#) 。# 的数量代表了标题的级别。例如，添加三个 # 表示创建一个三级标题 (<h3>) (例如：### My Header)。

Markdown语法HTML预览效果
# Heading level 1<h1>Heading level 1</h1>

Heading level 1

## Heading level 2<h2>Heading level 1</h2>

Heading level 2

### Heading level 3<h3>Heading level 1</h3>

Heading level 3

#### Heading level 4<h4>Heading level 1</h4>

Heading level 4

##### Heading level 5<h5>Heading level 1</h5>
Heading level 5
###### Heading level 6<h6>Heading level 1</h6>
Heading level 6

可选语法

还可以在文本下方添加任意数量的 == 号来标识一级标题，或者 -- 号来标识二级标题。

Markdown语法HTML
预览效果
Heading level 1
===============		<h1>Heading level 1</h1>

Heading level 1

Heading level 2
---------------		<h2>Heading level 2</h2>

Heading level 2

最佳实践

不同的 Markdown 应用程序处理 # 和标题之间的空格方式并不一致。为了兼容考虑，请用一个空格在 # 和标题之间进行分隔。

✅ Do this❌ Don't do this
# Here's a Heading#Here's a Heading
]]> > 原文位置: https://markdown.com.cn/basic-syntax/headings.html

Markdown 标题语法

要创建标题，请在单词或短语前面添加井号 (#) 。# 的数量代表了标题的级别。例如，添加三个 # 表示创建一个三级标题 (<h3>) (例如：### My Header)。

Markdown语法HTML预览效果
# Heading level 1<h1>Heading level 1</h1>

Heading level 1

## Heading level 2<h2>Heading level 1</h2>

Heading level 2

### Heading level 3<h3>Heading level 1</h3>

Heading level 3

#### Heading level 4<h4>Heading level 1</h4>

Heading level 4

##### Heading level 5<h5>Heading level 1</h5>
Heading level 5
###### Heading level 6<h6>Heading level 1</h6>
Heading level 6

可选语法

还可以在文本下方添加任意数量的 == 号来标识一级标题，或者 -- 号来标识二级标题。

Markdown语法HTML
预览效果
Heading level 1
===============		<h1>Heading level 1</h1>

Heading level 1

Heading level 2
---------------		<h2>Heading level 2</h2>

Heading level 2

最佳实践

不同的 Markdown 应用程序处理 # 和标题之间的空格方式并不一致。为了兼容考虑，请用一个空格在 # 和标题之间进行分隔。

✅ Do this❌ Don't do this
# Here's a Heading#Here's a Heading
]]> Markdown-速查表 https://blog.zsx815.top/archives/11/ https://blog.zsx815.top/archives/11/ Tue, 11 Feb 25 18:11:00 +0800 2025年02月11日18:11 ZSXの小站 > 原文位置: https://markdown.com.cn/cheat-sheet.html#%E6%80%BB%E8%A7%88

总览

Markdown 速查表提供了所有 Markdown
语法元素的基本解释。如果你想了解某些语法元素的更多信息，请参阅更详细的
基本语法 和 扩展语法.

基本语法

这些是 John Gruber 的原始设计文档中列出的元素。所有 Markdown
应用程序都支持这些元素。

元素Markdown 语法
标题（Heading）# H1 一级标题
## H2 二级标题
### H3 三级标题
粗体（Bold）**bold text**
斜体（Italic）*italicized text*
引用块（Blockquote）> blockquote
有序列表（Ordered List）1. First item
2. Second item
3. Third item
无序列表（Unordered List）- First item
- Second item
- Third item
代码（Code）code
分隔线（Horizontal Rule）---
链接（Link）[title](https://www.example.com)
图片（Image）\![alt text](image.jpg)

扩展语法

这些元素通过添加额外的功能扩展了基本语法。但是，并非所有 Markdown
应用程序都支持这些元素。

元素 Markdown 语法
表格（Table） | Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |
代码块（Fenced Code Block） ```
{
"firstName": "John",
"lastName": "Smith",
"age": 25
}
```
脚注（Footnote） Here's a sentence with a footnote.[^1]
[^1]: This is the footnote.
标题编号（Heading ID） ### My Great Heading{#custom-id}
定义列表（Definition List） term
: definition
任务列表（Task List） - [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
]]> > 原文位置: https://markdown.com.cn/cheat-sheet.html#%E6%80%BB%E8%A7%88

总览

Markdown 速查表提供了所有 Markdown
语法元素的基本解释。如果你想了解某些语法元素的更多信息，请参阅更详细的
基本语法 和 扩展语法.

基本语法

这些是 John Gruber 的原始设计文档中列出的元素。所有 Markdown
应用程序都支持这些元素。

元素Markdown 语法
标题（Heading）# H1 一级标题
## H2 二级标题
### H3 三级标题
粗体（Bold）**bold text**
斜体（Italic）*italicized text*
引用块（Blockquote）> blockquote
有序列表（Ordered List）1. First item
2. Second item
3. Third item
无序列表（Unordered List）- First item
- Second item
- Third item
代码（Code）code
分隔线（Horizontal Rule）---
链接（Link）[title](https://www.example.com)
图片（Image）\![alt text](image.jpg)

扩展语法

这些元素通过添加额外的功能扩展了基本语法。但是，并非所有 Markdown
应用程序都支持这些元素。

元素 Markdown 语法
表格（Table） | Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |
代码块（Fenced Code Block） ```
{
"firstName": "John",
"lastName": "Smith",
"age": 25
}
```
脚注（Footnote） Here's a sentence with a footnote.[^1]
[^1]: This is the footnote.
标题编号（Heading ID） ### My Great Heading{#custom-id}
定义列表（Definition List） term
: definition
任务列表（Task List） - [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
]]>