#astro
5 discoveries · Hand-picked discoveries from the open web, newest first.
-
把博客从 Hexo 迁移至 Astro
今天花了半天时间，把博客从原本的 Hexo 迁移到了由 Astro 驱动的 Fuwari 上面，从 WordPress 到 Hexo 再到 Astro，这已经是我第三次更换博客技术栈了。 <!--more--> 其实这次更换技术栈没有什么特殊的理由，折腾这种事情哪里需要什么原因呢？硬要说的话，可能就是图 Astro 更快的加载速度，以及 Fuwari 更美观的界面。 首先按 Fuwari 官方引导，使用 create-fuwari 来创建一个新项目： pnpm create fuwari@latest 接下来修改 src/config.ts ，配置博客标题等自定义配置。通过修改 src/constants/constants.ts 文件，可以调整banner的高度。 // Banner height unit: vh export const BANNER_HEIGHT = 70; // 这是除首页外其他页面里banner的高度，默认35 export const BANNER_HEIGHT_EXTEND = 30; // 通过下一行不难发现首页banner高度等于BANNER_HEIGHT加上EXTEND，设为30正好是100vh export const BANNER_HEIGHT_HOME = BANNER_HEIGHT + BANNER_HEIGHT_EXTEND; 然后将
Dort 的博客 · ZH
-
为 Astro 添加中英文混排插入空格和直角引号转换功能
本文由DeepSeek V4 Flash 0731赞助播出，感谢梁圣开源。 <!--more--> 书接上回，我在Hexo中习惯用 hexo-filter-copywriting 解决中英文混排的空格问题，以及弯引号到直角引号的自动转换。但是Astro中没有这么方便的插件，只能让蓝色大肥鱼DeepSeek帮忙手搓一个。 DeepSeek给出了两种方案：将 pangu.js 挂载到 Layout.astro 中，在客户端渲染完成后进行转换，另一种则是写一个 Astro integration，在 astro:build:done 钩子里处理 HTML，并直接写入最终的HTML文件。对于 dev 预览模式，则再创建一个中间件进行客户端处理。这种方式比较类似于hexo-filter-copywriting插件原本的体验，本博客最终也是采用了这个处理方式。 首先安装所需依赖： pnpm add pangu cheerio 然后创建核心处理文件 src/utils/pangu-utils.ts ： import pangu from 'pangu'; import * as cheerio from 'cheerio'; // 中文基本区范围和全角标点范围 const CJK = '\\u4E00-\\u9FFF'; const CJK_PUNCT = '\\u3000-\\u303F\\u
Dort 的博客 · ZH
-
制作 remark 插件并添加到 Astro
依旧由DeepSeek V4 Flash 0731赞助播出，依旧书接上回，不得不感叹AI确实是新质生产力（笑）。 <!--more--> 众所周知，Fuwari自带了一个GitHub卡片功能。不过让我好奇的是这个卡片的语法： ::github{repo="<owner>/<repo>"} 这显然不是标准的Markdown语法，而是通过 remark 实现的。简而言之，Fuwari使用 remark 和 rehype 来处理Markdown文档。 remark 用于把Markdown文档转换为HTML代码，再由 rehype 进行后续调整。而 :: 语法则是由 remark-directive 插件来处理的。显而易见的，我们也可以自己来制作一个 remark 插件，定制自己需要的功能。 诶🤓☝️，我正好有一个想法：在Hexo时代，这个博客的友链卡片是通过手写HTML的方式插入到Markdown文档中的，十分繁琐且累眼。这个HTML片段类似这样： <a class="profile-card profile-card-link no-styling" href="链接" target="_blank"> <div class="avatar-wrapper"> <img src="头像地址" alt="头像"> </div> <div class="info-wrapper"> <s
Dort 的博客 · ZH