0


Excalidraw本地化部署

1 - Excalidraw介绍

Excalidraw是一个开源、小巧易用的手写风格的框图画板软件。
​excalidraw官网地址:https://excalidraw.com/​

2 - Excalidraw本地化安装(git方式)

2-1安装部署

在terminal中,输入:

git clone https://github.com/excalidraw/excalidraw.git

安装完成后,在terminal中,进入项目文件

cd excalidraw/
2-2 安装依赖环境 - nodeJS

NodeJS下载地址:
nodejs下载:http://nodejs.cn/download
在这里插入图片描述
下载pkg包,一直下一步,直到完成。

验证nodeJS是否安装成功(terminal上)

whichnode

输出:表示安装成功

/usr/local/bin/node
2-3 安装依赖环境 - brew

执行命令安装brew,将官网中命令,在terminal中输入,即:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
2-4 安装依赖环境 - yarn
brew installyarn

在此目录下(cd excalidraw/),运行yarn

3 - 启动Excalidraw

cd excalidraw/
yarn start
3-1 修改字体

直接下载字体后,改名为:Virgil.woff2,直接覆盖掉即可。

3-2 下载woff2字体

先下载免费ttf字体
ttf免费字体下载地址:https://www.fonts.net.cn/commercial-free/fonts-zh-1.html

再将ttf字体转换成woff2字体
ttf字体转woff2字体:https://www.toolnb.com/tools/fonttowoff2.html

3-3 Excalidraw更换手写字体
3-3-1|拷贝字体至文件夹

打开目录pubic,将woff2字体放在此目录下,并命名成:MyFonts.woff2
在这里插入图片描述

3-3-2|修改public/fonts.css

在public/fonts.css,增加以下代码(直接复制进去)

@font-face {
  font-family: "MyFonts";
  src: url("MyFonts.woff2");
  font-display: swap;}
3-3-3|修改public/index.html

修改 public/index.html,在head 标签中增加如下代码:

<link
      rel="preload"href="MyFonts.woff2"as="font"type="font/woff2"crossorigin="anonymous"
    />
3-3-4|修改 src/constants.ts

修改 src/constants.ts,增加字体变量,此处以 MyFonts 字体代替了 Virgil 字体:

export const FONT_FAMILY ={
  Virgil: 1,
  Helvetica: 2,
  Cascadia: 3,
};
// 变更为
export const FONT_FAMILY ={
  MyFonts: 1,
  Virgil: 4,
  Helvetica: 2,
  Cascadia: 3,
};
3-3-5|修改 src/actions/actionProperties.tsx

修改 src/actions/actionProperties.tsx,替换字体的使用:

{
    value: FONT_FAMILY.Virgil,
    text: t("labels.handDrawn"),
    icon: <FontFamilyHandDrawnIcon theme={appState.theme} />,
}
// 变更为
{
    value: FONT_FAMILY.MyFonts,
    text: t("labels.handDrawn"),
    icon: <FontFamilyHandDrawnIcon theme={appState.theme} />,
}
3-3-6|重启服务器
标签: git bash github

本文转载自: https://blog.csdn.net/qq_23938507/article/details/129922502
版权归原作者 Micheal_Dad 所有, 如有侵权,请联系我们删除。

“Excalidraw本地化部署”的评论:

还没有评论