AnKode

Astro&Fuwari添加支持嵌套与局部的文章密码保护加密块

Sat, 25 Apr 2026 00:00:00 GMT

密码提示：计算下面定积分表达式的值，其中常数为35，计算结果即为密码。

$$ \frac{1}{2 \displaystyle\int_0^1 t ,(1-t)^{35} , dt} = ? $$

</div><div fuwari-encrypt-password="666" fuwari-encrypt-tip="检测到疑似入机，请先答题...（嘟嘟嘟）" fuwari-encrypt-hidden="password-hint">

我叫杨间，当你看到这句话的时候，我已经...（Sorry，走错片场了(´◓ｑ◔｀)）

</div><div fuwari-encrypt-password="test" fuwari-encrypt-tip="密码：test" fuwari-encrypt-hidden="mysterious-revival">

实现方法梳理

如何较为安全的加密与解密

我们都知道，浏览器环境下纯粹的web前端加密与解密完全就是掩耳盗铃，基本上稍微学过的人都能直接F12分析出来加解密逻辑并且还能拿到密钥，所以我们不能将密钥放在代码里，而是要“抛出去”，让密钥由访问者提供。

而Fuwari是基于Astro这个框架的，Node JS环境下，我们可以在编译构建时（服务端），先将文章内容加密，然后再将密文放到代码里（客户端），然后显示一个解密框输入密码进行解密。

如何支持嵌套和局部加密

看网上有关给Fuwari添加文章加密的方法，都是直接添加一个文章元数据用于控制是否加密，然后直接将整个文章加密，这种方法确实省力，但是却不够灵活。

由于Fuwari是用Markdown文档写文章的，所以我的想法是直接自定义一个Markdown块，然后内容加密并展示一个解密框即可，这样无论是嵌套还是局部都能迎刃而解。

不过要用代码处理Markdown起来比较复杂，所以可以直接选择解析渲染后的HTML值，从最内层标记需要加密的DOM开始一层层加密，解密时反过来一层层解密即可。

<!-- 浏览器中实际DOM原文 -->
<div>
    <div>
        我是元素内容
    </div>
</div>


<!--
    嵌套第一层加密后
    使用自定义属性data-encrypt-tag来标记解密框对应的密文DOM
-->
<div>
    <div data-encrypt-content="元素内容加密后的内容" data-encrypt-tag="1">
        <div data-encrypt-tag="1">对应的解密弹窗</div>
    </div>
</div>


<!-- 嵌套第二层加密后 -->
<div data-encrypt-content="元素内容加密后的内容" data-encrypt-tag="2">
    <div data-encrypt-tag="2">对应的解密弹窗</div>
</div>

</div><div fuwari-encrypt-password="123456" fuwari-encrypt-tip="密码：123456">

代码实现

CSS样式

在CSS文件 src/styles/markdown.css 中，添加代码

@keyframes shake {
    0% {
        transform: translate(0)
    }

    20% {
        transform: translate(-5px)
    }

    40% {
        transform: translate(5px)
    }

    60% {
        transform: translate(-3px)
    }

    80% {
        transform: translate(3px)
    }

    to {
        transform: translate(0)
    }
}

.animate-shake {
    animation: shake .5s cubic-bezier(.36,.07,.19,.97) both
}

安装依赖

pnpm install node-forge
pnpm install @types/node-forge

加解密工具类

在目录 src/utils 下创建名为 encrypt-utils.ts 的工具函数

import forge from "node-forge"

/**
 * 派生密钥
 */
export function deriveKey(keyStr: string): string {
	if (keyStr.trim() === "") {
		throw new Error("The password entered is empty.")
	}
	const md = forge.md.sha256.create()
	md.update(keyStr)
	const keyBytes = md.digest().getBytes() // 32 字节
	return forge.util.encode64(keyBytes)
}

/**
 * 加密
 */
export function encode(keyBase: string, aad: string, data: string): string {
	if (!keyBase.trim() || !aad.trim()) {
		throw new Error("The input parameter is empty.")
	}
	const key = forge.util.decode64(keyBase)
	const iv = forge.random.getBytesSync(12)
	const aadBytes = forge.util.encodeUtf8(aad)
	const plaintext = forge.util.encodeUtf8(data)
	const cipher = forge.cipher.createCipher("AES-GCM", key)
	cipher.start({
		iv: iv,
		additionalData: aadBytes,
		tagLength: 128, // 128 位 = 16 字节标签
	})

	cipher.update(forge.util.createBuffer(plaintext))
	if (!cipher.finish()) {
		throw new Error("Encryption failed.")
	}

	const ciphertext = cipher.output.getBytes()
	const tag = cipher.mode.tag.getBytes()

	const combined = iv + ciphertext + tag
	return forge.util.encode64(combined)
}

/**
 * 解密
 */
export function decode(keyBase: string, aad: string, data: string): string {
	if (keyBase.trim() === "" || aad.trim() === "" || data.trim() === "") {
		throw new Error("The input parameter is empty.")
	}
	const key = forge.util.decode64(keyBase)
	const combined = forge.util.decode64(data)
	const iv = combined.slice(0, 12)
	const tag = combined.slice(-16)
	const ciphertext = combined.slice(12, -16)

	const aadBytes = forge.util.encodeUtf8(aad)
	const decipher = forge.cipher.createDecipher("AES-GCM", key)
	decipher.start({
		iv: iv,
		additionalData: aadBytes,
		tagLength: 128,
		tag: forge.util.createBuffer(tag),
	})

	decipher.update(forge.util.createBuffer(ciphertext))

	if (!decipher.finish()) {
		throw new Error("Decryption failed.")
	}

	const plaintext = decipher.output.getBytes()
	return forge.util.decodeUtf8(plaintext)
}

核心组件

在目录 src/components/md/ 下创建名为 EnctyprCard.astro 的组件

---
import crypto from "node:crypto"
import { deriveKey, encode } from "@utils/encrypt-utils"
import { HTMLElement, parse } from "node-html-parser"

const componentHtml = await Astro.slots.render("default")
const rootHtmlNode = parse(componentHtml)

interface EncryptNode {
	node: HTMLElement
	depth: number
}

// 获取全部标签节点
let allNodes: EncryptNode[] = collectNodes(rootHtmlNode, 0)

// 按深度降序排列（最深在前）
allNodes.sort((a, b) => b.depth - a.depth)

// 设置最大的处理深度小于等于3层（递归处理，尽量别设置太大）
const MAX_DEPTH = 3
const nodesToProcess: EncryptNode[] = allNodes.filter(
	(n) => n.depth <= MAX_DEPTH,
)

// 最后处理（深度降序已保证最深优先）
for (const { node } of nodesToProcess) {
	// 获取预设的密码（属性不存在则不处理）
	const password = node.getAttribute("fuwari-encrypt-password")
	if (password) {
		// 获取预设的提示
		const tip = node.getAttribute("fuwari-encrypt-tip") || "此内容受密码保护"

		const routeSplit = Astro.url.pathname.split("/")
		// 将数据加密处理
		const encryptData = encode(
			deriveKey(password),
			routeSplit[routeSplit.length - 2],
			node.innerHTML,
		)

		// 生成标记（disableEntropyCache禁用缓存）
		const sign = crypto.randomUUID({ disableEntropyCache: true })

		// 添加存储密文的自定义属性和用于DOM操作时获得当前节点的标记
		node.setAttributes({
			"data-encrypt-content": encryptData,
			"data-encrypt-sign": sign,
		})

		const siblingDom = node.nextElementSibling
		if (siblingDom?.hasAttribute("fuwari-encrypt-password")) {
			node.setAttribute("style", "margin-bottom: 1.25em;")
		}

		// 添加卡片样式html
		node.innerHTML = `
			<div class="password-protect-container">
				<div class="password-input-wrapper flex flex-col items-center justify-center min-h-[300px] p-8 rounded-xl bg-[var(--card-bg)] border border-[var(--line-divider)] shadow-sm">
					<div class="mb-8 text-center">
						<div class="text-4xl font-bold mb-3 text-[var(--primary)] transform transition-all">
							<svg width="1em" height="1em" class="inline-block hover:rotate-12 text-4xl" data-icon="material-symbols:lock-outline">
								<symbol id="ai:material-symbols:lock-outline" viewBox="0 0 24 24">
									<path fill="currentColor" d="M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h1V6q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm0-2h12V10H6zm6-3q.825 0 1.413-.587T14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17M9 8h6V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6zM6 20V10z"></path>
								</symbol>
								<use href="#ai:material-symbols:lock-outline"></use>
							</svg>
						</div>
						<h3 class="text-xl font-semibold mb-2">${tip}</h3>
						<p class="text-sm text-[var(--meta-divider)] mb-4">请输入密码以查看完整内容</p>
						<div class="flex flex-col sm:flex-row gap-3 w-full max-w-md relative group">
							<input data-encrypt-sign="${sign}" class="flex-1 rounded-lg border-2 border-[var(--line-divider)] bg-[var(--card-bg)] p-3 text-[var(--primary)] placeholder:italic placeholder:text-[var(--meta-divider)] focus:border-[var(--primary)] focus:outline-none transition-all duration-300 shadow-sm focus:shadow-md" placeholder="请输入密码..." type="password" autocomplete="off" autofocus="">
							<button data-encrypt-sign="${sign}" class="px-6 py-3 bg-[var(--primary)] text-white rounded-lg hover:bg-[var(--primary)]/90 focus:outline-none focus:ring-2 focus:ring-[var(--primary)]/50 transition-all duration-300 active:scale-95 shadow-sm hover:shadow-md sm:w-auto w-full"> 解锁 </button>
						</div>
						<div data-encrypt-sign="${sign}" class="password-error hidden mt-4 px-4 py-2 text-sm text-red-500 bg-red-50 dark:bg-red-900/20 rounded-md">
							<span class="flex items-center gap-1">
								<svg xmlns="https://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline">
									<circle cx="12" cy="12" r="10"></circle>
									<line x1="12" y1="8" x2="12" y2="12"></line>
									<line x1="12" y1="16" x2="12.01" y2="16"></line>
								</svg>
								密码错误，请重试
							</span>
						</div>
					</div>
				</div>
			</div>
        `
	}
	// 不管处不处理都要移除掉这个属性
	node.removeAttribute("fuwari-encrypt-password")
	node.removeAttribute("fuwari-encrypt-tip")
}

const newHtmlString = rootHtmlNode.toString()

/**
 * 收集所有指定元素节点
 *
 * @param _element 根元素
 * @param _currentDepth 深度层级
 */
function collectNodes(_element: HTMLElement, _currentDepth: number) {
	let nodes: EncryptNode[] = []
	let depth = _currentDepth

	// 如果当前元素本身有自定义的属性，则深度+1
	if (_element.hasAttribute?.("fuwari-encrypt-password")) {
		depth = _currentDepth + 1
		nodes.push({ node: _element, depth: depth })
	} else {
		depth = _currentDepth
	}

	// 递归处理子节点（只处理元素节点）
	const children = _element.childNodes || []
	for (const child of children) {
		if (child.nodeType === 1) {
			// 元素节点
			nodes.push(...collectNodes(child as HTMLElement, depth))
		}
	}
	return nodes
}
---

<div id="encrypt-block" set:html={newHtmlString}>
</div>

<script>
import { deriveKey, decode } from "@/utils/encrypt-utils"

function getAad(){
	const routeSplit = window.location.pathname.split("/")
	return routeSplit[routeSplit.length - 2]
}

function savelocalCache(sign: string, password: string){
	try{
		if(!sign || !password){
			return
		}
		const getCache = window.localStorage.getItem(window.location.pathname) || ''
		const parseCache = JSON.parse(getCache)
		const dataArray = parseCache.data

		const signExist = new Set(dataArray.map((item: {key: string}) => item.key)).has(sign)
		if(!signExist){
			dataArray.push({
				key: sign,
				value: password
			})

			parseCache.time = Date.now() + 24 * 60 * 60 * 1000
			window.localStorage.setItem(window.location.pathname, JSON.stringify(parseCache))
		}
	}catch(err){
		window.localStorage.setItem(window.location.pathname, JSON.stringify({
			data: [
				{
					key: sign,
					value: password,
				}
			],
			time: Date.now() + 24 * 60 * 60 * 1000
		}))
	}
}

function loadLocalCahce(){
	try{
		const getCache = window.localStorage.getItem(window.location.pathname) || ""
		const parseCache = JSON.parse(getCache)
		const dataArray = parseCache.data
		const time = parseCache.time

		const getValueFun = (arr: Array<{key: string, value: string}>, key: string) => {
			return arr.filter(obj => obj.key === key).map(obj => obj.value)[0]
		}

		const recursion = (el: Element) => {
			const allEncryptDivDom = el?.querySelectorAll("div[data-encrypt-content][data-encrypt-sign]")
			allEncryptDivDom?.forEach((el: Element) => {
				const sign = el.getAttribute("data-encrypt-sign") || ""
				const signExist = new Set(dataArray.map((item: {key: string}) => item.key)).has(sign)
				if(signExist){
					const password = getValueFun(dataArray, sign)
					try{
						const decodeContent = decode(password, getAad(), el.getAttribute("data-encrypt-content") || "")
						el.innerHTML = decodeContent
					}catch(e){
						// 主动捕获异常，避免输出异常信息
						console.warn(`解密失败 route:[${window.location.pathname}], sign:[${sign}], password:[${password}]`, e)
					}
					setTimeout(()=>{
						recursion(el)
					}, 10)
				}
			})
		}

		if(Date.now() >= time){
			window.localStorage.removeItem(window.location.pathname)
			return
		}

		recursion(document.getElementById("encrypt-block") as HTMLElement)
	}catch(err){
		console.error(err)
	}
}

function bindEvent(){
	// 创建按钮加载动画
	const createLoadingSpinner = (el: HTMLButtonElement) => {
		const spinnerHTML = `
				<svg class="animate-spin h-5 w-5 text-white" xmlns="https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
					<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
				</svg>
			`
		const spinnerContainer = document.createElement("div")
		spinnerContainer.innerHTML = spinnerHTML
		el.innerHTML = spinnerContainer.innerHTML
	}

	// 移除按钮加载动画
	const removeLoadingSpinner = (el: HTMLButtonElement, text: string) => {
		el.innerHTML = text
	}

	const handleSubmit = () => {
		const encryptBlockDom = document.getElementById("encrypt-block") as HTMLElement
		const encryptContentDom = encryptBlockDom.querySelectorAll<HTMLElement>("div[data-encrypt-content][data-encrypt-sign]")
		encryptContentDom.forEach((el: HTMLElement) => {
			const sign = el.getAttribute("data-encrypt-sign") || ""
			const encryptContent = el.getAttribute("data-encrypt-content") || ""
			const input = el.querySelector<HTMLInputElement>(`input[data-encrypt-sign="${sign}"]`)
			const button = el.querySelector<HTMLButtonElement>(`button[data-encrypt-sign="${sign}"]`)
			const message = el.querySelector<HTMLDivElement>(`div[data-encrypt-sign="${sign}"][class*="password-error"]`)
			if(!input || !button || !message) {
				console.warn("The specified element cannot be operated on because it does not exist.")
				return
			}

			// 添加输入框动画效果
			if (input) {
				input.addEventListener("focus", () => {
					input.classList.add("border-[var(--primary)]", "shadow-md")
				})

				input.addEventListener("blur", () => {
					if (!input.value.trim()) {
						input.classList.remove("border-[var(--primary)]", "shadow-md")
					}
				})
			}

			const submitEvent  = async () => {
				const password = input.value.trim()
				if(!password){
					// 如果没有输入密码，添加一个轻微抖动效果
					input.classList.add("animate-shake")
					setTimeout(() => input.classList.remove("animate-shake"), 500)
					return
				}

				// 禁用，阻止可再点击
				input.disabled = true
				button.disabled = true
				
				// 输入框样式变化、按钮加载动画、提示内容
				input.classList.add("opacity-50")
				createLoadingSpinner(button)
				message.classList.add("hidden")

				// 添加一个短暂的延迟，提供更好的视觉反馈
				await new Promise((resolve) => setTimeout(resolve, 500))

				try{
					const derivedKeyValue = deriveKey(password)
					const html = decode(derivedKeyValue, getAad(), encryptContent)
					removeLoadingSpinner(button, "√成功")
					button.classList.remove("bg-[var(--primary)]")
					button.classList.add("bg-green-500")

					savelocalCache(sign, derivedKeyValue)
					input.value = ""

					// 延迟执行添加一个透明度过渡效果
					setTimeout(() => {
						el.style.opacity = "0"

						setTimeout(() => {
							el.innerHTML = html
							el.style.opacity = "1"
							el.style.transition = "opacity 0.3s ease-in-out"
						}, 300)
					}, 500)
				}catch(er){
					message.classList.add("animate-shake")
					message.classList.remove("hidden"), 20
					setTimeout(() => message.classList.remove("animate-shake"), 500)

					button.innerHTML = "重试"

					input.classList.remove("opacity-50")

					input.disabled = false
					button.disabled = false

					input.focus()
				}
			}

			// 绑定按钮事件
			button.addEventListener("click", submitEvent)
			// 绑定回车按下事件
			input.addEventListener("keypress", (e) => {
				if (e.key === "Enter" && document.activeElement === input) {
					submitEvent()
				}
			})

			// 页面切换时，清理输入框内容（内容为空则能阻止浏览器跳出保存密码的弹窗）
			document.addEventListener("astro:before-swap", () => {
				if(!window.location.pathname.startsWith("/posts/")){
					input.value = ""
				}
			})
		})
	}

	const observer = new MutationObserver((mutationsList, observer) => {
		mutationsList.forEach(mutation => {
			if(mutation.type === 'childList'){
				handleSubmit()
			}
		});
	})
	observer.observe(document.getElementById("encrypt-block") as HTMLElement, {
		childList: true, // 监听子节点的添加或删除（true/false）
		attributes: true, // 监听属性变化（true/false）
		attributeFilter: ["data-encrypt-content", "data-encrypt-sign"], // 指定监听的属性名数组（如 ['class', 'id']），不指定则监听所有属性
		attributeOldValue: false, // 记录属性旧值（需 attributes: true）
		characterData: true, // 监听文本节点内容变化（true/false）
		characterDataOldValue: false, // 记录文本旧值（需 characterData: true）
		subtree: true // 监听所有后代节点的变化（true/false）
	})
	handleSubmit()

	// 当页面切换时，手动关闭dom监听服务
	document.addEventListener("astro:before-swap", () => {
		if(!window.location.pathname.startsWith("/posts/")){
			observer?.disconnect()
		}
	})
}

// 浏览器直接访问的情况下直接初始化
loadLocalCahce()
bindEvent()

// 由于Astro的View Transitions机制的问题，所以我们需要监听这个事件，才能让页面切换时初始化
document.addEventListener("astro:page-load", () => {
	if(window.location.pathname.startsWith("/posts/")){
		loadLocalCahce()
		bindEvent()
	}
})

</script>

使用组件

在文件 src/pages/posts/[...slug].astro 文件修改代码

---
// 忽略其他代码
import EnctyprCard from "@/components/md/EnctyprCard.astro"
---

<!-- 
    忽略其他代码
    原本的代码大概在文件第106行左右
 -->
<Markdown class="mb-6 markdown-content onload-animation">
    <EnctyprCard>
        <Content />
    </EnctyprCard>
</Markdown>

文章中使用

<div fuwari-encrypt-password="密码（必须）" fuwari-encrypt-tip="提示内容（可为空）">
加密内容，注意可以不用写 `</div>` 这样的闭合标签
除非你需要下一个加密块与这个同级，如下：

</div><div fuwari-encrypt-password="密码（必须）" fuwari-encrypt-tip="提示内容（可为空）">
同级加密块，在前面加个闭合标签即可

Astro&Fuwari可控制封面图在文章内显示与隐藏

Thu, 23 Apr 2026 00:00:00 GMT

文章内添加元数据

在文章头部元数据设置中添加自定义的，如：imageShow，用于控制是否显示封面图

---
imageShow: true
---

新增元数据类型

在 src/content/config.ts 文件中添加一行对应的元数据类型，并设置为boolean属性且默认为true，意思就是默认为显示图片

const postsCollection = defineCollection({
	schema: z.object({
		// ...忽略其他多余代码...
		imageShow: z.boolean().optional().default(true), // 添加这个自定义属性
	}),
});

修改判断条件

在 src/pages/posts/[...slug].astro 文件中，大概100行找到这行代码，并添加一个判断image是否也为true的条件

<!-- entry.data.imageShow && -->
{entry.data.image && entry.data.imageShow &&
	<ImageWrapper id="post-cover" src={entry.data.image} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
}

Windows10/11永久禁止系统自动更新

Fri, 17 Apr 2026 00:00:00 GMT

只需键盘按下 win + R ，在弹出的界面输入框中输入 regedit 后确定

在左侧目录依次打开，找到 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsUpdate\UX 中的 Settings 文件夹，在其中鼠标右键指针放在 创建 上，选择 DWORD（32位值） 的选项

鼠标右键刚才创建的新值，然后重命名为 FlightSettingsMaxPauseDays

鼠标右键 FlightSettingsMaxPauseDays ，选择 修改

在弹窗中先选择基数为 十进制 ，然后再输入想要停止更新的天数，如：4500天（注意不要设置过大，不然下一步骤会很累）

最后在设置中找到windows更新，里面选择暂停更新，然后一直往下拉，找到最长时间的周选项即可

AndroidStudio通用汉化教程

Sun, 12 Apr 2026 00:00:00 GMT

首先去Jetbrains插件官网下载中文插件包： <a href="https://plugins.jetbrains.com/plugin/13710-chinese-simplified-language-pack----" target="_blank">下载中文插件包</a>

将下载下来的压缩包解压，在其中找到叫lib的文件夹里的.jar文件，因为jar包本身就是一种压缩包，所以直接将这个jar包解压出来即可

在解压出的jar包文件中找到并编辑 .\META-INF\plugin.xml 文件

打开AndroidStudio，点击左下角的齿轮->About查看版本信息，复制其中的AI-xxx.xxx.xxx

粘贴到plugin.xml文件中三个位置后保存，将解压出来的jar包文件全部重新压缩成zip，修改文件后缀名为.jar

在AndroidStudio中点击 Plugins-> Installed -> Install Plugin from Disk ，选择刚才修改过重新压缩的jar包进行安装

在AndroidStudio主页点击 Customize -> Get More Languages

默认选第一个就行，可以看到右下角的OK和Apply按钮是亮的，点击OK后，就会发现可以选择Chinese了

最后重启即可

欢迎来到我的船新博客！

Fri, 23 Jan 2026 00:00:00 GMT

以前都是使用由PHP语言编写的Typecho或者WordPress搭建的，后来发现出了个由Java语言编写的新博客程序Halo。因其现代化的UI设计，以及使用的新时代技术，所以选择了使用它，但是其本质还是动态网站，需要依赖于后端程序，又因其技术架构原因需要使用到服务器，只为了博客网站这成本属实是有点不值得。好在近年来国内厂商也是学上CF整上免费安全CDN以及Pages部署服务了（以前我不使用CF，很大原因是因为最开始玩上这些时，我就直接选择了国内云服务，而CF会导致国内访问速度大打折扣！），不过现在有了国内厂商的Pages部署，那就很棒了！