Docker系列 头脑风暴专用手绘图应用excalidraw
本文最后更新于 55 天前,如有失效请评论区留言。

前言

前段时间逛Github的时候偶然发现了一个叫excalidraw的应用,Github Repo有30.8k的Starexcalidraw是一个绘制手绘图的虚拟白板,支持文字、图标,甚至是某些简单的Excel图表:

chrome_wJwM0BjmDy

它还有个素材库,里面的自定义素材支持生成各种复杂的实例:

chrome_vrtjIYpGtA

你可以在B站里搜索一下excalidraw,应该有不少相关的使用技巧。对于某些人而言,它提供了一个相对自由、定制程度较高的空间,特别适合头脑风暴的过程中临时制作思维导图。画好之后,你可以将project保存为一个.excalidraw格式的文件,方便在其它地方/时机打开。excalidraw确实是个好东西,所以这里分享给大家!

excalidraw官方支持Docker自建。最近版本中,docker build多多少少有点bug,感觉很不方便;直接镜像功能又过于简陋。和Derek沟通后,请他帮忙定制了一个新的Docker镜像。新镜像可将整个web文件夹映射至宿主机空间,所以很多web样式可以自定义。如果你对html、css或js比较熟悉,应该可以自定义出一个理想的excalidraw。本教程也会进行一些简单的自定义设置,比如更改默认字体、默认标题等。

本教程主要和大家分享一下如何自建Docker版excalidraw。虽然excalidraw宣称有端到端加密的技术,不过我觉得自建的安全性会更高一些(虽然实际使用时不一定需要这么高的安全性;其实只是想折腾,哈哈!)。我也提供了一个自建excalidraw应用,感兴趣的小伙伴也可以试用一下。我个人觉得还不错!

测试环境

uname -a # Linux racknerd-74a241 5.4.0-28-generic #32-Ubuntu SMP Wed Apr 22 17:40:10 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux

docker --version # Docker version 20.10.14, build a224086

docker-compose --version # Docker Compose version v2.4.1

准备工作

创建并进入工作目录:

# 按需修改
work=/docker/excalidraw && mkdir -p $work && cd $work

开放端口:

# 按需修改
sudo ufw allow 3698/tcp comment 'excaldraw' && sudo ufw reload

ddns-go & NPM

不了解Nginx Proxy Manager用法的小伙伴,请看《Docker系列 两大神器NPM和ddns-go的安装》。

在ddns-go或者域名托管商后台解析好域名,比如excalidrwarn2.hwb0307.com

Nginx Proxy Manager设置无特殊,类似于下图:

image-20220718221856604

配置yaml

新增docker-compose.yml文件:

vim $work/docker-compose.yml

填写以下内容:

version: '3.3'
services:
  excalidraw:
    image: 'ddsderek/excalidraw:latest'
    container_name: excalidraw
    restart: unless-stopped
    ports:
      - '3698:80'
    volumes:
      - './data:/app/web'
    networks:
      - default
networks:
  default:
    name: excalidraw

上线服务:

cd $work && docker-compose up -d

直接访问:https://excalidrwarn2.hwb0307.com,即可正常使用。

设置

自定义中文字体

由于系统的默认中文字体不是手写体,实际使用时有点违和感,强迫症受不了。Derek的镜像支持更改默认中文字体。你要提前准备好一个你喜欢的中文字体(自己网上到那些字体库里下载),然后将其转换为woff2格式,最后上传到$work/data目录里,类似这样:

chrome_fk3RKltahE

注意,这个新字体的名字一定要是MyFonts.woff2

上传完成后,更改一下文件所属的用户(组):

sudo chown 101:102 $work/data/MyFonts.woff2

然后重启一下应用:

cd $work && docker-compose restart

在我的实例中,我使用了一个叫沐瑶随心的手写体字体,效果如下:

chrome_mZx7wByqIP.gif

有什么好看的、免费的手写体,希望有小伙伴可以推荐一下!

自定义标题

你还可以更改一下网站的title。效果类似这样:

QQ_0XgO6FcRTk

直接修改下面的文件即可:

vim $work/data/index.html

QQ_Ms7AlFKzLl

修改完成后,最后重启服务:

docker-compose restart

其它

其实还可以改网站图标那些,自己摸索下,我没需要就不搞了。有啥需求可以留言,有空我会折腾一下。

小结

感谢Derek小伙伴的大力支持,让excalidraw的安装变得简单和高度可定制化!我也是刚刚安装好,之后有什么使用心得再来更新吧。我这里没有展示excalidraw的基本用法,因为它设计得够简单了;也没有展示一些快捷键的使用。自己试用一下,然后看看网上的教程,基本就会了。有什么问题欢迎评论区留言!

参考

版权声明:除特殊说明,博客文章均为Bensz原创,依据CC BY-SA 4.0许可证进行授权,转载请附上出处链接及本声明。 如有需要,请至学习地图系统学习本博客的教程。加Telegram群可获得更多帮助喔! | 博客订阅:RSS | 广告招租:留言板 | 博客VPS |
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇