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

  • 📢欢迎点赞 :👍 收藏 ⭐留言 📝 如有错误敬请指正,赐人玫瑰,手留余香!
  • 📢本文作者:由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。

给个类似文件大家看看。

js 复制代码
---
//  ---分割的代码均在构建时执行(或服务端执行),并不回传到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>

这玩意用起来,真的感觉又回到了从前,唯一的不同点,也许就是 直接构建成了html发布吧?

大家有玩过吗?

6.总结

前端技术真是多啊,何况换在这个卷王时代,不知道各位前端小伙伴换号吗?

话说回来,一般文档类直接使用vitepress吧,折腾这个没必要。

你学废了吗?

👓都看到这了,还在乎点个赞吗?

👓都点赞了,还在乎一个收藏吗?

👓都收藏了,还在乎一个评论吗?

相关推荐
风中凌乱的L20 小时前
canvas 图片水印
canvas·水印
前端Hardy3 天前
HTML&CSS: 在线电子签名工具
前端·javascript·canvas
李李记13 天前
别让 “断字” 毁了 Canvas 界面!splitByGrapheme 轻松搞定非拉丁文本换行
前端·canvas
鱼钓猫21 天前
H5 电子签名组件
vue.js·canvas
小鱼儿亮亮22 天前
canvas中常见问题的解决方法及分析,踩坑填坑经历
前端·canvas
普兰店拉马努金22 天前
【Canvas与图标】古铜色“HTML”图标
html·canvas·图标
夏沫mds1 个月前
【基于hyperledger fabric的教育证书管理系统】
运维·go·vue·区块链·gin·fabric
wayhome在哪1 个月前
Cropper.js 轻松拿捏前端裁剪🤞
javascript·canvas·设计
HAORChain1 个月前
Hyperledger Fabric官方中文教程-改进笔记(十七)-编写第一个链码
笔记·区块链·fabric
HAORChain1 个月前
Hyperledger Fabric官方中文教程-改进笔记(十四)-向通道中添加组织
笔记·区块链·fabric