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

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

news 来源：原创 2025/7/21 2:37:09

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

这玩意用起来，真的感觉又回到了从前，唯一的不同点，也许就是直接构建成了html发布吧？
大家有玩过吗？

6.总结

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

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

你学废了吗？

👓都看到这了，还在乎点个赞吗？

👓都点赞了，还在乎一个收藏吗？

👓都收藏了，还在乎一个评论吗？

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

📢欢迎点赞 ：👍 收藏 ⭐留言 📝 如有错误敬请指正，赐人玫瑰，手留余香！📢本文作者：由webmote 原创📢作者格言：新的征程，用爱发电&#…...

编程日记 2025/7/21 2:37:09

Elasticsearch在部署时，对Linux的设置有哪些优化方法？

大家好，我是锋哥。今天分享关于【Elasticsearch在部署时，对Linux的设置有哪些优化方法？】面试题。希望对大家有帮助； Elasticsearch在部署时，对Linux的设置有哪些优化方法？ 1000道互联网大厂Java工程师精…...

编程日记 2025/7/15 23:24:07

ThingsBoard规则链节点：Azure IoT Hub 节点详解

目录引言 1. Azure IoT Hub 节点简介 2. 节点配置 2.1 基本配置示例 3. 使用场景 3.1 数据传输 3.2 数据分析 3.3 设备管理 4. 实际项目中的应用 4.1 项目背景 4.2 项目需求 4.3 实现步骤 5. 总结引言 ThingsBoard 是一个开源的物联网平台，提供了设备…...

编程日记 2025/7/16 21:52:28

SpringBoot线程池的使用

SpringBoot线程池的使用在现代Web应用开发中，特别是在使用Spring Boot框架时，合理使用线程池可以显著提高应用的性能和响应速度。线程池不仅能够减少线程创建和销毁的开销，还能有效地控制并发任务的数量，避免因线程过多而导致的…...

编程日记 2025/7/20 11:26:33

ubuntu中使用ffmpeg和nginx推流rtmp视频

最近在测试ffmpeg推流rtmp视频，单独安装ffmpeg是无法完成推流的，需要一个流媒体服务器，常用nginx，可以直接在ubuntu虚拟机里面测试一下。测试过程不涉及编译ffmpeg和nginx，仅使用基本功能： 1 安装ffmpeg …...

编程日记 2025/7/20 19:36:52

如何在CodeIgniter中添加或加载模型

在CodeIgniter框架中，模型（Model）是用于与数据库进行交互的重要组件。模型通常包含数据库查询、业务逻辑以及与数据库表相关的函数。以下是如何在CodeIgniter中添加或加载模型的步骤： 1. 创建模型文件首先，你需要在…...

编程日记 2025/7/15 4:48:44

加菲工具 - 好用免费的在线工具集合

加菲工具 https://orcc.online AI 工具加菲工具集合了目前主流的，免费可用的ai工具文档处理加菲工具 pdf转word、office与pdf互转等等工具都有链接图片图标加菲工具统计了好用免费的在线工具编码解码加菲工具 base64编码解码、url编码解码、md5计算…...

编程日记 2025/7/21 2:35:50

Centos 8, add repo

Centos repo前言 Centos 8更换在线阿里云创建一键更换repo 自动化脚本华为Centos 源 , 阿里云Centos 源华为epel 源 , 阿里云epel 源vim /centos8_repo.sh #!/bin/bash # -*- coding: utf-8 -*- # Author: make.han...

编程日记 2025/7/21 2:18:59

神经网络12-Time-Series Transformer (TST)模型

Time-Series Transformer (TST) 是一种基于 Transformer 架构的深度学习模型，专门用于时序数据的建模和预测。TST 是 Transformer 模型的一个变种，针对传统时序模型（如 RNN、LSTM）在处理长时间依赖、复杂数据关系时的限制而提出的…...

编程日记 2025/7/15 22:10:27

在 Ubuntu 上安装 Yarn 环境

在 Ubuntu 上安装 Yarn 环境步骤 1: 更新系统步骤 2: 安装 Node.js步骤 3: 安装 Yarn方法 1: 使用 npm 安装方法 2: 使用 APT 安装步骤 4: 验证安装总结在 Ubuntu 上安装 Yarn 环境可以通过以下步骤完成： 步骤 1: 更新系统首先，确保你的系统是最新…...

编程日记 2025/7/18 22:32:31

OEM sql monitoring 类似SQL

不够OEM 全面 select a.inst_id,a.time_since_last_wait_micro,a.last_call_et,a.sql_id,a.sql_hash_value, a.username,a.pdml_enabled,a.pdml_status ,a.prev_sql_id from gv$session a where a.statusACTIVE and a.sql_id is not null and a.username is not null select …...

编程日记 2025/7/21 2:25:07

【数据分析】基于GEE实现大津算法提取洞庭湖流域水体

大津算法提取水体 1.写在前面2.洞庭湖水体识别1.写在前面最大类间方差法，也称为Otsu或大津法，是一种高效的图像二值化算法，由日本学者Otsu于1979年提出。该算法基于图像的频率分布直方图，假设图像包含两类像素（前景和背景），并计算出一个最佳阈值，以最大化类间方差，从…...

编程日记 2025/7/16 22:04:03

MySQL中的ROW_NUMBER窗口函数简单了解下

ROW_NUMBER() 是 MySQL8引入的窗口函数之一，它为查询结果集中的每一行分配一个唯一的顺序号（行号）。这个顺序号是基于窗口函数的 ORDER BY 子句进行排序的，可以根据指定的排序顺序生成连续的整数值。 ROW_NUMBER() 在分页、去重、…...

编程日记 2025/7/20 20:45:19

pyhton django web集群基于linux定时任务

基于django management/commands目录下的脚本 from django.core.management import BaseCommand import logging import uuid from pia.utils.cache import reset_redis_expire from pia.utils.reids_key import TASK_KEYlogging logging.getLogger(task)""" …...

编程日记 2025/7/16 7:57:37

STM32串口——5个串口的使用方法

参考文档 STM32串口——5个串口的使用方法_51CTO博客_stm32串口通信的接收与发送串口是我们常用的一个数据传输接口，STM32F103系列单片机共有5个串口，其中1-3是通用同步/异步串行接口USART(Universal Synchronous/Asynchronous Receiver/Transmitter)…...

编程日记 2025/7/20 23:27:51

友思特新闻 | 友思特荣获广州科技创新创业大赛智能装备行业赛初创组优胜企业！

2024年11月19日，第十三届中国创新创业大赛（广东广州赛区）暨2024年广州科技创新创业大赛智能装备行业赛颁奖典礼隆重举行。赛事奖项介绍：广州科技创新创业大赛智能装备行业赛第十三届“中国创新创业大赛（广东广州赛区…...

编程日记 2025/7/19 13:34:13

react函数式组件中的路由传参方式

React Router 提供了多种方式来传递路由参数： URL 路径参数：通过动态路由和 useParams 获取。查询参数：通过 useLocation 获取 URL 查询字符串。路由状态传递：通过 state 属性在导航时传递数据，不在 URL 中显示&#…...

编程日记 2025/7/17 16:27:04

docker部署微信机器人实现任意群聊发送消息

前言：底层技术用的是wechaty，我只是做了一些集成。此项目源码如下：https://gitee.com/yang123888/wechaty-wxtest 拉取： docker pull registry.cn-hangzhou.aliyuncs.com/yamyang/kercore-wx-bot:1.0.0运行： dock…...

编程日记 2025/7/20 19:09:44

Vercel 设置自动部署 GitHub 项目

Vercel 设置自动部署 GitHub 项目问题背景最近 Vercel 调整了其部署政策，免费版用户无法继续使用自动部署功能，除非升级到 Pro 计划。但是，我们可以通过配置 Deploy Hooks 来实现同样的自动部署效果。解决方案通过设置 Vercel 的 Dep…...

编程日记 2025/7/15 17:46:40

【shodan】（七）命令

shodan基础（七） 声明：该笔记为up主泷羽的课程笔记，本节链接指路。警告：本教程仅作学习用途，若有用于非法行为的，概不负责。查询账号查看账户扫描次数 shodan info查询域名信息 shodan d…...

编程日记 2025/7/16 14:41:27

文件上传代码分析

目录不同类型的语言脚本语⾔/解释型语⾔⼀次编译到处运⾏编译型语⾔不同语⾔的webshell上传差异脚本语⾔/解释型语⾔⼀次编译到处运⾏编译型语⾔⽂件上传到webshell任意⽂件上传js检测解析规则MIME⽂件头后缀检测失效 NTFS Tricks 不同类型的语言脚本语⾔/解释型语⾔代表…...

编程日记 2025/7/19 15:43:15

深入解析分布式遗传算法及其Python实现

目录深入解析分布式遗传算法及其Python实现目录第一部分：分布式遗传算法的背景与原理1.1 遗传算法概述1.2 分布式遗传算法的引入1.3 分布式遗传算法的优点与挑战优点：挑战：第二部分：分布式遗传算法的通用Python实现2.1 基本组件的实现第三部分：案例1 - 基于多种交叉与变异…...

编程日记 2025/7/19 16:58:41

World of Warcraft /script SetRaidTarget(“target“, n, ““) n=8,7,6,5,4,3,2,1,0

魔兽世界执行当前目标标记方法 /script SetRaidTarget("target", n, "") n8,7,6,5,4,3,2,1,0 解析这个lua脚本 D:\Battle.net\World of Warcraft\_classic_\Interface\AddOns\wMarker wMarker.lua /script SetRaidTarget("target", 8, &quo…...

编程日记 2025/7/21 2:22:25

django authentication 登录注册

文章目录前言一、django配置二、后端实现1.新建app2.编写view3.配置路由三、前端编写1、index.html2、register.html3、 login.html 总结前言之前，写了django制作简易登录系统，这次利用django内置的authentication功能实现注册、登录提示&#xff…...

编程日记 2025/7/16 16:48:32

阿里云整理（一）

阿里云整理 1. 介绍规模 2. 专业名词2.1 专有网络VPC2.2 安全组SG2.3 云服务器ECS2.4 资源组2.5 部署集2.5 web测试 1. 介绍 ‌阿里云是一家提供云计算和人工智能服务的科技公司，成立于2009年，总部位于杭州。‌它为全球客户提供全方位的云服务&#xff…...

编程日记 2025/7/20 11:53:56

鸿蒙NEXT开发案例：文字转拼音

【引言】在鸿蒙NEXT开发中，文字转拼音是一个常见的需求，本文将介绍如何利用鸿蒙系统和pinyin-pro库实现文字转拼音的功能。【环境准备】 • 操作系统：Windows 10 • 开发工具：DevEco Studio NEXT Beta1 Build Version: 5.0.…...

编程日记 2025/7/15 19:35:53

Redis高级

目录 Redis事务语法错误执行错误 Redis持久化 RDB持久化 RDB原理小结 AOF持久化 AOF原理 AOF配置 AOF文件重写 RDB与AOF对比 Redis主从复制架构搭建主从复制架构在redis目录创建三个目录把原来的redis.conf配置分件分贝复制一件到这三个目录中修改配置文件…...

编程日记 2025/7/15 1:18:58

八股文-基础知识-面试题汇总（一）

面向对象和面向过程的区别？ 面向对象和面向过程是两种不同的编程范式，它们在设计和实现软件时有着不同的理念和方法。面向对象更适合大型、复杂的项目，尤其是需要维护和扩展的系统；而面向过程更适合小型、线性的任务或对性能要求…...

编程日记 2025/7/21 2:32:54

玩转合宙Luat教程基础篇④——程序基础（库、线程、定时器和订阅/发布）

文章目录一、前言二、库三、线程四、定时器五、订阅/发布5.1 回调函数5.2 堵塞等待一、前言教程目录大纲请查阅：玩转合宙Luat教程——导读写一写Lua程序基础的东西。包括如何调用库，如何创建线程、如何创建定时器，如何使用订阅/发布事件。二、库程序从main.lua开始通…...

编程日记 2025/7/15 21:41:11

openssl颁发包含主题替代名的证书–SAN

原文地址：openssl颁发包含主题替代名的证书–SAN – 无敌牛欢迎参观我的个人博客：无敌牛 – 技术/著作/典籍/分享等在 X.509 证书中，commonName（CN）字段只能有一个值。如果让证书支持多个域名和IP地址，…...

编程日记 2025/7/20 5:20:21

Unity 2020、2021、2022、2023、6000下载安装

Unity 2020、2021、2022、2023、6000 下载安装以Unity 6000.0.24fc1下载安装为例： 打开 https://unity.cn/ 优三缔官方网站； 点击【产品列表】→点击【查看更多】→选择自己需要的版本→点【开始使用】点击【从Unity Hub下载】以Windows为例&am…...

编程日记 2025/7/16 12:08:23

Zustand：一个轻量级的React状态管理库

文章目录前言一、安装Zustand二、使用Zustand三、实际案例结语前言在现代Web开发中，状态管理是一个常见的需求，特别是在构建大型或复杂的单页面应用程序（SPA）时。React等框架虽然提供了基本的状态管理功能，但对于复…...

编程日记 2025/7/15 6:24:03

信创改造 - TongRDS 替换 Redis

记得开放 6379 端口哦 1）首先在服务器上安装好 TongRDS 2）替换 redis 的 host，post，passwd 3）TongRDS 兼容 jedis # 例如：更改原先 redis 中对应的 host，post，passwd 改成 TongRDS…...

编程日记 2025/7/20 5:28:54

Css—实现3D导航栏

一、背景最近在其他的网页中看到了一个很有趣的3d效果，这个效果就是使用css3中的3D转换实现的，所以今天的内容就是3D的导航栏效果。那么话不多说，直接开始主要内容的讲解。二、效果展示三、思路解析 1、首先我们需要将这个导航使用一个大…...

编程日记 2025/7/18 16:24:35

Unity清除所有的PlayerPrefs

方法1： 直接在你的代码中加入这句 PlayerPrefs.DeleteAll(); 方法2： 点击编辑窗口的这里...

编程日记 2025/7/1 12:28:12

[蓝桥杯 2021 省 AB2] 小平方

题目描述小蓝发现，对于一个正整数 nn 和一个小于 nn 的正整数 vv，将 vv 平方后对 nn 取余可能小于 nn 的一半，也可能大于等于 nn 的一半。请问，在 11 到 n−1n−1 中, 有多少个数平方后除以 nn 的余数小于 nn 的一半。例如&…...

编程日记 2025/7/18 22:00:40

三种蓝牙架构实现方案

一、蓝牙架构方案 1、hostcontroller双芯片标准架构手机里面包含很多SoC或者模块，每颗SoC或者模块都有自己独有的功能，比如手机应用跑在AP芯片上，显示屏，3G/4G通信，WiFi/蓝牙等都有自己专门的SoC或者模块&#xff0…...

编程日记 2025/7/18 1:05:02

MacOS系统上Jmeter 录制脚本遇到的证书坑位

一、JMeter介绍与安装 1，下载及安装 jmeter官网地址二、录制百度链接https请求时，需要导入jmeter相关证书到macos系统的更目录中. 导入方式，直接拖入mac的系统中，始终新人就可以； 三、jmeter 创建相关的录制组件…...

编程日记 2025/7/14 22:47:09

【Linux学习】【Ubuntu入门】2-3 make工具和makefile引入

1.使用命令新建三个.c文件vi main.c，vi input.c，vi caclcu.c，两个.h文件vi input.h，vi caclcu.h 2.vi Makefile：新建Makefile文件，输入一下内容注意：命令列表中每条命令前用TAB键，不…...

编程日记 2025/7/20 17:12:56

conda下载与pip下载的区别

一、conda下载与pip下载的区别最重要是依赖关系： pip安装包时，尽管也对当前包的依赖做检查，但是并不保证当前环境的所有包的所有依赖关系都同时满足。当某个环境所安装的包越来越多，产生冲突的可能性就越来越大。conda会检查当…...

编程日记 2025/7/20 0:02:40

ubity3D基础

Unity是一个流行的游戏开发引擎，它使用C#作为其主要的编程语言。以下是一些Unity中C#编程的基础概念： • Unity编辑器： • Unity编辑器是Unity游戏引擎的核心，提供了一个可视化界面，用于创建和管理游戏项目。 • C#脚本…...

编程日记 2025/7/19 13:55:40

408数据结构：栈、队列和数组选择题做题笔记

408数据结构第一章绪论第二章线性表绪论、线性表选择题做题笔记第三章栈、队列和数组栈、队列和数组选择题做题笔记文章目录 408数据结构前言一、队列二、栈和队列的应用总结前言本篇文章为针对王道25数据结构课后习题的栈、队列和数组的做题笔记，后续…...

编程日记 2025/7/16 11:14:05

如何在 Eclipse 中调试ABAP程序

原文链接：Debugging an ABAP Program ADT 中的调试器是一个重要的诊断工具，可用于分析 ABAP 应用程序。使用调试器，您可以通过在运行时 Debug 单步执行（F5）程序来确定程序无法正常工作的原因。这使您可以看到正在执…...

编程日记 2025/7/18 4:23:10

React（五）——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo

文章目录项目地址十六、useContecxt十七、useReducer十八、React.memo以及产生的问题18.1组件嵌套的渲染规律18.2 React.memo18.3 引出问题十九、useCallback和useMemo19.1 useCallback对函数进行缓存19.2 useMemo19.2.1 基本的使用19.2.2 缓存属性数据 19.2.3 对于更新的理解…...

编程日记 2025/7/20 11:43:03

ISUP协议视频平台EasyCVR萤石设备视频接入平台银行营业网点安全防范系统解决方案

在金融行业，银行营业厅的安全保卫工作至关重要，它不仅关系到客户资金的安全，也关系到整个银行的信誉和运营效率。随着科技的发展，传统的安全防护措施已经无法满足现代银行对于高效、智能化安全管理的需求。 EasyCVR视频汇聚平台以…...

编程日记 2025/7/18 4:49:06

Ubuntu20.04下安装向日葵

向日葵远程控制app官方下载 - 贝锐向日葵官网下载Ununtu版的图形版本的安装deb包SunloginClient_15.2.0.63064_amd64.deb 直接执行 sudo dpkg -i SunloginClient_15.2.0.63064_amd64.deb 的话会报错: 如果在Ubuntu20.04里直接执行sudo apt install libgconf-2-4安装libgco…...

编程日记 2025/7/18 14:35:57

sql工具！好用！爱用！

SQLynx的界面设计简洁明了，操作逻辑清晰易懂，没有复杂的图标和按钮，想对哪部分操作就在哪里点击右键，即使你是数据库小白也能轻松上手。尽管SQLynx是一款免费的工具，但是它的功能却丝毫不逊色于其他付费产品&#xff…...

编程日记 2025/7/20 10:28:13

Pytest-Bdd-Playwright 系列教程（13）：钩子（hooks）

Pytest-Bdd-Playwright 系列教程（13）：钩子（hooks） 前言一、什么是钩子？二、Pytest-Bdd 提供的钩子一览三、钩子用法详解1. pytest_bdd_before_scenario2. pytest_bdd_after_scenario3. pytest_bdd_before_s…...

编程日记 2025/7/15 19:47:49

【React 进阶】掌握 React18 全部 Hooks

一、数据更新驱动 1. useState 1. 基础介绍 useState主要用于声明和操作状态变量，可以使函数组件像类组件一样拥有state const [state, setState] useState(initialState);state：状态，作为渲染视图的数据源 setState：改变st…...

编程日记 2025/7/16 13:40:43

泥石流灾害风险评估与模拟丨AI与R语言、ArcGIS、HECRAS融合，提升泥石流灾害风险预测的精度和准确性

目录第一章理论基础第二章泥石流风险评估工具第三章数据准备与因子提取第四章泥石流灾害评价第五章 HECRAS软件的应用第六章操作注意事项与模型优化泥石流灾害的频发与严重后果，已成为全球范围内防灾减灾工作的重大挑战。随着科技的不断进步&…...

编程日记 2025/7/17 23:15:13

前言