当前位置：首页 > news >正文

做一个FabricJS.cc的中文文档网站——面向markdown编程

news 2025/7/3 23:26:54

📢欢迎点赞：👍 收藏 ⭐留言 📝 如有错误敬请指正，赐人玫瑰，手留余香！
📢本文作者：由webmote 原创
📢作者格言：新的征程，用爱发电，去丈量人心，是否能达到人机合一？

前言

世界变化真的好快，从asp，php的后端构建WEB，到现在流行的前后端分离，甚至于最近逐渐火热的前端全栈，感觉技术就是一个圆圈，又一次体会了分久必合，合久必分的伟大预言。

大家有没有玩过Vite Press，这整个一面向MarkDown编程，最后生成静态WEB，再次回到了html的原生起点。

不过这次使用的不是Press，但也是vite生态圈的一员，Astro 这个技术框架，大致原理同Press，都是编译产生HTML静态页面。

1.造一个轮子，翻一个网站

这个世界不缺轮子，在公司造轮子，不在公司依然造轮子。

因为喜欢，所以就开造。当然也不全是，主要是FabricJS 处于一个升级阶段，其V6版本做了很多破坏性升级。对于新手，老的文档不太适宜了，我当时做个小程序使用的时候，走了不少弯路，因此淋过雨的人，总想让其他人有把伞撑撑。

所以，这是一个V6版本的中文档手册，目前目录如下，大家可以点击 FabricJS.cc 访问。
在这里插入图片描述
开始
你的第一个app
简介：1.对象、画布、图像、路径
简介：2.动画、颜色、文本、事件
简介：3.组、序列化、子类化
简介：4.绘制、定制化、node应用
简介：5.缩放、平移
简介：6.变换
简介：7.剪裁路径介绍
简介：8.剪裁路径更多高级用法
简介：9.剪裁画布
简介：10.使用绝对定位的剪裁路径

在这里插入图片描述

2. 支持代码编辑和演示

是的，静态文档没有这个功能，因此，我借助了官网的超能力，仔细研究了astro的组件模型，把演示集合和代码中的演示功能都调整完好了，相比官网更近一步的完善了演示部分，以及修正了老文档的错误（主要是不兼容V6）。
在这里插入图片描述

没错，我和代码的主要贡献者Andra有一番邮件交流，他希望我能为官网的翻译做出贡献，这不是问题，不过囿于 astro处于关键的升级版本阶段，其对 i18n的支持也处于破坏性更新中，这个工作暂时押后来做。

3.增加文档讨论支持

是的，这个功能对于文档网站的共建来说，也是非常重要的，继承这个功能虽然并不轻松，不过总算是完成了，借助giscus提供的技术，我们开通github的讨论区，不需要自己创建后台程序，就可以实现博客网站经常用到的评论功能。

由于需要github登录，这样无形中也可以避免很多垃圾评论。

在这里插入图片描述
有了这个功能，如果文档有什么遗漏或错误，也方便大家直接讨论解决办法。

4. 有关API文档

这块工作是未竟事业，主要并不是翻译的工作比辛苦，而是官网产出的这个文档明显来自自动生成的机器人，质量比较低，如果需要把这个讲好，也需要大量的重构工作，慢慢来吧！

用到了，就梳理一部分。

在这里插入图片描述

5. Astro 使用小结

Astro 是一个多页面静态网站编译框架，其天生支持多个html页面的静态生成，利用强大的md，mdx，markdoc的解析支持，比较适合生成内容性网站，个人博客网站或者升级日志类网站等，当然也适合目前流行的官网介绍类网站。

其适合目标人群是：关注网站SEO，首页加载性能，定制个性化，文档输出型的相关人员。

其采用进行子组件加载，与vue有异曲同工之妙，然后利用yaml定义在服务端进行某些鬼鬼祟祟的操作，最终生成html。
给个类似文件大家看看。

---
//  ---分割的代码均在构建时执行（或服务端执行），并不回传到HTML内
import { Welcome } from 'astro:components';
import Layout from '../../layouts/Layout.astro';
import * as greatPost from '../../content/index.md';
const { Content } = greatPost;
console.log(greatPost.getHeadings());
---
<-- 以下就是html， 不过支持 js表达式{},可以使用上面定义的变量，方法 -->
<Layout><Welcome title="Welcome to Astro" /><div><p>{greatPost.frontmatter.title}</p><p>{greatPost.frontmatter.author}</p><p>{greatPost.file}</p><p>url: {greatPost.url}</p><p>url: {greatPost.url}</p></div><div>{greatPost.compiledContent()}</div><div>{greatPost.getHeadings()}</div><Content />
</Layout>
<-- 以下就是html内的js，在客户端执行 -->
<script></script>