mirror of
https://github.com/MCKero6423/fuwari.git
synced 2026-10-02 03:15:35 +00:00
mckero
6fc7a1ed15
解决评论操作会回到文章顶部 见 issue #721，Twikoo 加了一个href="#"，这是为了防止回复按钮在某些主题（如 VuePress）下被识别为不可点击的链接而加的，不能被官方仓库删除。但是 Fuwari 正是这个href="#"导致了问题。 我去 Twikoo 项目提了个 issue 也问了一下，回答说“拉 twikoo 的源代码，全局替换掉href="#"，然后编译一个自己的 js 出来用。” 那，还能怎么办，编译呗。用官方 js 的话不仅评论相关功能会出问题，就连登录管理页面输入密码回车，以及退出管理页面都能弹射到文章顶部，真的是弹射… 步骤： Fork 官方项目到自己分支 仓库 Clone 到本地 全局删除href="#" 编译出 js 文件 编译流程： # 安装 yarn（如未安装） sudo npm install -g yarn # 安装依赖 yarn install # 搜索并删除 twikoo 源码中的 href="#"（建议用编辑器全局替换） # 比如 VS Code 搜索全项目替换为 "javascript:void(0)"或删除，我是都删除了 # 编译（非腾讯云用 twikoo.min.js，全部文件输出在./dist） yarn build 编译之后本地拉取最新上游更新（可选） git remote add upstream https://github.com/twikoojs/twikoo.git git fetch upstream git merge upstream/main 编译之后的文件上传至自己仓库的 releases 里，版本号为 tag 名（如1.6.44）方便回找和升级。但是 releases 只供下载不提供 CDN，于是再上传一份到 GitHub 仓库中拿到 CDN。 于是我的Twikoo.astro最终版本： Twikoo.astro --- import { commentConfig } from '@/config' interface Props { path: string } const config = { ...commentConfig.twikoo, el: '#tcomment', path: Astro.props.path, } --- <div id="tcomment"></div> <script define:vars={{ config }}> function loadTwikoo() { // 动态加载 Twikoo 脚本，并在加载完成后执行 twikoo.init const script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/gh/MicroSic/twikoo-magic/twikoo/twikoo.min.js'; // 去除腾讯云，删除所有href="#"的1.6.44版本 script.defer = true; script.onload = () => { if (window.twikoo) { window.twikoo.init(config); } }; // script.onerror = () => { // console.error('Twikoo script load failed'); // }; document.body.appendChild(script); } document.addEventListener("loadComment", loadTwikoo, { once: true }); // 监听加载评论事件，但是我们只能监听一次，从而避免多次触发。 </script>
🍥Fuwari
A static blog template built with Astro.
🌏 README in 中文 / 日本語 / 한국어 / Español / ไทย / Tiếng Việt / Bahasa Indonesia (Provided by the community and may not always be up-to-date)
✨ Features
- Built with Astro and Tailwind CSS
- Smooth animations and page transitions
- Light / dark mode
- Customizable theme colors & banner
- Responsive design
- Search functionality with Pagefind
- Markdown extended features
- Table of contents
- RSS feed
🚀 Getting Started
- Create your blog repository:
- Generate a new repository from this template or fork this repository.
- Or run one of the following commands:
npm create fuwari@latest yarn create fuwari pnpm create fuwari@latest bun create fuwari@latest deno run -A npm:create-fuwari@latest
- To edit your blog locally, clone your repository, run
pnpm installto install dependencies.- Install pnpm
npm install -g pnpmif you haven't.
- Install pnpm
- Edit the config file
src/config.tsto customize your blog. - Run
pnpm new-post <filename>to create a new post and edit it insrc/content/posts/. - Deploy your blog to Vercel, Netlify, GitHub Pages, etc. following the guides. You need to edit the site configuration in
astro.config.mjsbefore deployment.
📝 Frontmatter of Posts
---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
lang: jp # Set only if the post's language differs from the site's language in `config.ts`
---
🧩 Markdown Extended Syntax
In addition to Astro's default support for GitHub Flavored Markdown, several extra Markdown features are included:
- Admonitions (Preview and Usage)
- GitHub repository cards (Preview and Usage)
- Enhanced code blocks with Expressive Code (Preview / Docs)
⚡ Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
pnpm install |
Installs dependencies |
pnpm dev |
Starts local dev server at localhost:4321 |
pnpm build |
Build your production site to ./dist/ |
pnpm preview |
Preview your build locally, before deploying |
pnpm check |
Run checks for errors in your code |
pnpm format |
Format your code using Biome |
pnpm new-post <filename> |
Create a new post |
pnpm astro ... |
Run CLI commands like astro add, astro check |
pnpm astro --help |
Get help using the Astro CLI |
✏️ Contributing
Check out the Contributing Guide for details on how to contribute to this project.
📄 License
This project is licensed under the MIT License.
