跳到主要内容

3 篇博文 含有标签「typora」

查看所有标签

最佳实践:Typora+docusaurus完美解决(云笔记+知识库+博客)需求

image-20240831172803976

目录

[toc]

版权

提示

本文作者: One 本文标题:最佳实践:Typora+docusaurus完美解决(云笔记+知识库+博客)需求 本文链接:https://wiki.onedayxyy.cn/docs/cloud-note-typora-docus 版权声明:本站所有文章除特别声明外,均采用CC BY-NC-SA 4.0许可协议。转载请注明文章出处!

前言

写在前面

注意

注意:

此方案部署起来很简单,没难度的(之所以本文篇幅有点长,是为了照顾小白,铺垫好背景),手把手文档都给小伙伴了,大家可放心部署;(又任何问题可随时沟通😎)

如果对于非it专业小伙伴,如果感觉又难度,那建议还是用word记录笔记本哈哈;(如果对it感兴趣的话,我相信,部署这个方案不是问题)🤣

背景

==我为什么要写这篇文章呢?==

因为我自己是一个it从业者,那么日常笔记数据对自己来说就特别重要,俗话说,好记性不如烂笔头,那么如何安全地维护好自己的工作经验沉淀数据、日常学习记录数据、生活数据等等,就显得特别重要。(我相信,每个人都有属于自己的重要数据)

自己之前用过各种云笔记,例如word/有道云/notion/wolai/语雀……等等,到最后发现都各种问题,一言难尽,因为来回切换笔记数据真的很麻烦,也很浪费时间。

后买你无意间发现了typora(md软件领域的扛把子),发现用typora来记录和阅读自己的笔记数据真的是一种享受。

后来又发现了docusaurus,发现它真的是静态站点构建工具里的no1,特备适合自己构建知识库,同时,它也提供了博客功能。且有好看的主题及强大的社区。

因此,typora与docusaurus的相遇注定成为很多人理想的内容管理工具。

接下来的这篇文章就是我的关于"云笔记+知识库+博客"的最佳实践,欢迎交流。😉

常见云笔记分类

大致上可以将笔记软件分为几大类:

1)传统的笔记软件:这类一般以 Word、WPS、OneNote为代表。缺点:一般不支持 Markdown 文件格式,需要花费更多的时间在对内容的排版上。

2)云笔记软件:这类笔记软件的特点,是数据都存储在云端,在本地没有备份。一般都是支持Markdown格式,并且有些也支持双链笔记【就是在一个笔记里可以直接引用其它的笔记,然后点击后直接跳转】。这类一般以:语雀、网易云笔记、wolai、notion、飞书 为代表。 缺点:笔记有一个特点就是数据都是存储在远程服务器(数据被牢牢绑定);并且如果是免费版本只提供很少的空间;

3)本地笔记软件:这类软件的特点和云笔记的特点就是,数据都存储在本地。常见的代表作有:Typora、Obsidian、思源。

写博客的好处

在学习到一些新技术的时候,会用笔记的方式把操作的流程记录下来,一方面是为了能够更快的掌握这块技能,同时也方便后续对看过的知识进行回归,进一步对内容进行巩固。同时写成博客后,也可以分享到互联网上进行传播,帮助到更多的人。

你的笔记需求

  • 笔记数据安全且完全可控;(禁止与第三方厂商绑定)
  • 笔记数据由markdown维护;
  • pc端编辑,多端可查看内容;
  • 数据完全本地化;
  • ……

软件介绍

==typora介绍:==

写Markdown费事?Typora让你像写word一样行云流水,所见即所得。

Typora 是一款适配 Windows / macOS / Linux 平台的 Markdown 编辑器,编辑实时预览标记格式,所见即所得,轻巧而强大。

typora就是专为 markdown 语法打造的一款软件。

  • Typora删除了预览窗口,以及所有其他不必要的干扰。取而代之的是实时预览。
  • Markdown的语法因不同的解析器或编辑器而异,Typora使用的是GitHub Flavored Markdown

Typora 最舒服的是所见即所得的排版,以及实时渲染带来的沉浸式写作体验,非常舒服。

用官方的话描述:

Typora 提供同时读写的无缝体验,删除了预览窗口、模式切换器、markdown 源代码的语法符号以及所有其他不必要的干扰。相反,提供了真正的实时预览功能,可帮助您专注于内容本身。

image-20240822124607094


==docusaurus介绍:==

Docusaurus是一款基于React的开源文档站点生成器,它可以帮助开发者快速构建出现代化、易于维护的文档网站。Docusaurus是由Facebook开发的,最初是为React Native文档而创建的。现在,Docusaurus已经成为开发者在创建和维护文档站点时的首选工具之一。

Docusaurus是一个基于React和Node.js构建的开源工具,旨在帮助开发人员快速构建易于管理和维护的文档站点。

Docusaurus的优势之一是它的==易用性==。它提供了一套现成的模板和主题,让开发者可以快速开始构建文档站点。另外,Docusaurus还提供了一个实时预览功能,让开发者可以在本地进行修改和调试,从而加快开发效率。

Docusaurus支持Markdown和==MDX格式==的文档,这意味着开发者可以使用简单的文本编辑器来编写和更新文档。此外,Docusaurus还提供了一些插件和工具,例如搜索和版本控制,使得文档站点的维护更加简单和高效。

除此之外,Docusaurus还具有高度的可定制性。它使用React组件来构建页面,这意味着开发者可以轻松地自定义页面的外观和功能。此外,Docusaurus还支持多语言站点,可以满足不同语言用户的需求。

image-20240822124505446


==vscode介绍:==

VS Code 的全称是 Visual Studio Code,是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面,都做得很不错。

image-20210808080621942


==Picgo介绍==:

PicGo: 一个用于快速上传图片并获取图片 URL 链接的工具。

使用markdown一直有一个痛点,那就是图片的问题,不想word那样可以直接保存图片,markdown不行,如果插入图片,图片在本地会单独存放,以链接的形式插入在markdown中,如果本地图片丢失或者位置变了,那就不显示了。

所以这里就需要一个图床,也就是把图片传上去,弄个链接,然后插入markdown中,那么图床不少,怎么传呢?

使用这个工具,只要复制下图片,然后按个快捷键就可以直接将图片上传到你事先设定好的图床上,然后返回给你个链接,可以直接用。

支持全平台,开源且免费,支持丰富的插件系统,推荐使用。使用 PicGo 上传图片的流程是这样的:先复制图片,然后通过一个快捷键上传图片到对应的图床(并直接返回一个该图片的直链到你的系统剪切板),此时你只需到你的 Markdown 内容中粘贴就完事了,整个过程不超过 5 秒钟。

image-20240823214744894


==Everyting介绍:==

image-20240823214922449


==坚果云:==

坚果云是一家中国的云存储服务提供商,为个人和企业用户提供数据存储、同步和共享服务。以下是关于坚果云的一些简介:

  1. 数据存储:坚果云提供安全可靠的云存储空间,用户可以将个人或企业数据存储在云端,避免了数据丢失的风险。

  2. 文件同步和共享:坚果云支持多设备文件同步,用户可以在不同的设备上访问和更新自己的文件,并确保文件的最新版本在各个设备间同步。此外,用户还可以通过链接将文件分享给他人,方便协作和共享。

  3. 数据安全:坚果云提供高级的数据加密和安全性措施,确保用户的数据在传输和存储过程中受到保护。坚果云采用端到端加密技术,即使在数据传输和存储过程中,只有用户才能解密和访问数据。

  4. 多平台支持:坚果云提供支持多种操作系统和平台的客户端应用程序,包括Windows、Mac、iOS和Android等,用户可以在不同的设备上方便地使用坚果云服务。

  5. 备份和恢复:坚果云还提供备份和恢复功能,用户可以定期备份重要数据,以防数据丢失或设备损坏。

  6. 个人和企业版本:坚果云提供个人和企业版本,个人用户可以选择适合自己需求的存储空间,企业用户可以享受更多的存储空间和专业的团队协作功能。

总之,坚果云是一个方便、安全、可靠的云存储服务提供商,适用于个人和企业用户管理和保护他们的数据。

方案

1.方案设计

1、本地元数据:

  • Typora:主力编辑和阅读md文档;

  • Vscode:管理笔记数据;(负责管理笔记视图、查找文件、全文查找等功能)(Everything:配合vscode查找文件;)

  • 百度云盘:存放大型软件、音视频、照片、脚本、实验软件等;

  • docusaurus仓库:持续更新自己的all知识点到这个文档库。(docusaurus仓库里的核心文档放在坚果云里免费进行云同步,其他本地笔记数据放在百度网盘同步空间里进行同步

  • md图床:(利用ecs的nginx来提供图床,图片数据会本地保存一份后再上传到图床,且利用rsync会每天定时从linux同步数据到本地windowsPC,很nice)

提示

为什么我这里要同时用到坚果云和百度网盘同步空间呢?

因为百度网盘同步空间只能对某一个目录进行同步,而坚果云可以对windows的不同目录进行同步,更灵活。刚好适合把后面docusaurus仓库里的docs目录放在坚果云同步目录里,这样我们可以更专心/方便编辑这里的核心md数据。(注意,这里的坚果云有1g的免费空间,对我们只存放md内容,完全够用了)😂

提示

为什么我要使用坚果云来同步docs目录和blog目录而不使用git来同步呢?

因为这个docus仓库要想利用netlify等构建,那这个必须是开源项目。但是,此时自己的所有md就都被同步到了仓库,鉴于版权问题,这里不把自己md暴露出去。而是选择把它放在坚果云里进行数据同步,gite只保存仓库数据就好。

2、分享平台:

docusaurus公开知识库,博客,微信公众号,csdn,知乎;


image-20240321075256966

2.方案优势

  • typora:md领域的扛把子;(编辑和阅读体验真的超丝滑)(可定制typora皮肤)
  • docusaurus:静态站点构建工具的扛把子;(支持知识库+博客,且主题唯美)
  • 数据完全本地化,与第三方厂商完全解耦;
  • ……

3.成本把控

事项价格备注
百度云盘198年会员(活动价)
域名待确认
云服务器99元/年
坚果云1g的免费额度(存放md文档完全足够用)

4.维护原则

docusaurus维护原则:

  • 每一个md的排版都要简洁,清晰;
  • 单个md内容不要太大,否则就拆分成多个md;
  • 自己的docusaurus知识库只允许存放.md,目录,.sh/.py脚本,其他任何类型的数据禁止存放进去。

环境

win10

image-20240822124826708

ecs:

CentOS Linux release 7.9.2009 (Core)

ecs名称:docusaurus-wiki

配置规格:2c 2g 40g ESSD Entry云盘 40GiB (2120 IOPS)

image-20240323150507086

源码

链接:https://pan.baidu.com/s/1FG0opRQgJmX9i6jBSbsrVg?pwd=5vjj 提取码:5vjj 2024.8.23-Typora+docusaurus-softwares

image-20241006224657413

前提条件

  • 具备基础的linux命令行能力
  • 了解markdown语法:见《markdown语法》文章。
  • 购买1台云服务器(自行百度)
  • 购买一个域名(自行百度)

0、配置基础环境

1、安装typora

1.安装typora

  • 来到typora官网,下载windows软件包,直接点击下一步完成安装

https://typoraio.cn/#

image-20240823181000987

image-20240823181023433

  • 完成安装后,桌面出现如下图标

image-20240823181058826

  • 双击打开,输入购买的license

image-20240823181153464

提示

这个软件之前免费,后面收费了,89元,3个license终身使用。建议大家购买正版使用,这个良心软件值得我们付费使用。

image-20240823181231066


==配置typora:==

现在,我们来简单配置下typora:

image-20240823182720959

image-20240823182833630

image-20240823182852090

image-20240823182928958

image-20240823182939952

image-20240823182955721

image-20240823183019518

2.安装picgo

typora配置完成后,我们来安装下picgo,用来传输图片到图传上去。

  • 来到picgo官网,下载windows软件包,直接点击下一步完成安装

https://molunerfinn.com/PicGo/

  • 完成安装后,桌面出现如下图标

image-20240823182227633

  • 我们来配置下picgo

双击打开picgo,我们来配置下picgo的sftp插件:

提示
  • 本次我这这里配置的是ecs nginx图传,这个大家得提前准备好;
  • picgo的sftp插件依赖于nodejs,大家也记得提前安装好这个软件;

自己本次配置

D:/docusaurus/resource/shell/sftpUploader.json

{
"sftpUploader": {
"url": "https://onedayxyy.cn",
"path": "/images/{fullName}",
"uploadPath": "/images/{fullName}",
"host": "ecsip",
"port": 22,
"username": "root",
"password": "123456"
}
}

image-20240404075625491

设置当前sftp方式为默认方式:

image-20241006215929532

自己云服务器ecs地址:

自己域名:onedayxyy.cn
nginx图床配置路径:/images
图片url地址:http://onedayxyy.cn/images/image-20231123144421591.png
  • picgo配置完后,我们来测试下图传是否能正常使用

点击文件-偏好设置-图像:

再点击验证图片上传选项

能看到成功上传图片并获得新的url字样就代表我们的图传是可用的。

image-20240823183326732

3.安装typora_plugin插件

(扩展,但推荐安装)

image-20241006220208254

下载链接:

https://github.com/obgnail/typora_plugin/releases/latest

注意:

使用typora_plugin插件时,强烈关闭如下各选项的自动编号功能,只保留图片自动编号即可:(否则该One主题有一些效果不能很好展示)

具体效果如下图:

image-20241006222040407

2、安装docusaurus

接下来,我们部署下docusaurus:

  • 通过如下命令拉取代码,并在本地运行:
cd /d/
git config --global user.name "hg_it_nuc"
git config --global user.email "2675263825@qq.com"

git clone https://gitee.com/onlyonexl/one-docusaurus
cd one-docusaurus

#指定镜像源为华为源:
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
pnpm config set registry https://mirrors.huaweicloud.com/repository/npm/

#安装好pnpm
npm install -g pnpm@9.4.0

#安装依赖包并启动
pnpm install
pnpm start
  • 默认会在浏览器打开如下页面:

http://localhost:3000/

image-20240823212820949

3、安装坚果云

  • 坚果云下载链接

https://www.jianguoyun.com/static/exe/installer/NutstoreWindowsWPFInstaller.exe

image-20240707192501102

  • 安装方法,一直下一步即可。

  • 将同名目录修改为如下D:\docusaurus\docs路径

image-20240707192623702

image-20240707192636289

image-20241013155649574

image-20241013155605462

4、最佳姿势

1.docus仓库存放位置

注意

docusaurus仓库放在自己的windows/d/docusaurus路径下:

利用坚果云对docusaurus仓库下的docs目录做云同步:(但这个目录不进行git仓库数据同步,方便自己随时进行md数据增删改查)

image-20240823210549224

image-20241006224807274

2.一条命令完成内容发布

  • 配置vscode终端到ecs的免密

在docusaurus仓库,打开vscode:

##win10和ecs做免密,方便本地win10 脚本执行相关命令:
ssh-keygen
ssh-copy-id -i ~/.ssh/id_rsa.pub root@47.100.215.163 ##输入ecs密码
ssh root@47.100.215.163 date

# $ ls ~/.ssh/id_ed25519.pub
# /c/Users/Administrator/.ssh/id_ed25519.pub
# $ ssh root@47.100.215.163 date
# Fri Apr 12 07:43:24 CST 2024
  • 配置win10 vscode终端环境变量
##(1)配置一键推送PATH环境
cat >> /etc/profile <<EOF
alias xyy2="
sh /d/docusaurus/resource/shell/xyy2.sh
"
EOF
source /etc/profile


##(2)配置rsync PATH环境
#vscode的git bash终端,rsync客户端命令
echo 'PATH=/d/GreenSoftware/cwrsync_6.2.12_x64_free/bin:$PATH' >> /etc/profile
source /etc/profile


## (3)配置备份本地md脚本
echo 'alias backup="sh /d/docusaurus/resource/shell/md_backup.sh"' >> /etc/profile
source /etc/profile
  • 验证

一条命令完成docusaurus构建静态数据并推送到ecs nginx目录:

xyy2

image-20240823211006814

image-20240823211302171

  • web端验证

https://wiki.onedayxyy.cn/

image-20240823211329911

5、数据备份

1.docus仓库配置数据

git备份/本地

image-20240901161044405

2.本地md数据

(坚果云来同步数据)

image-20241006225019668

image-20240901160612145


手动备份核心md数据:(每周一次)备份脚本:

D:\docusaurus\resource\shell\md_backup.sh

#!/bin/bash
echo "开始备份md核心数据……"

cd /d/BaiduSyncdisk/backup/mdBackup
tar -czvf /d/BaiduSyncdisk/backup/mdBackup/`date +%F_%H-%M-%S`-mdBackup.tar.gz /d/docusaurus/docs


echo -e
echo "md数据大小:"
#会被强制覆盖掉当天的代码
du -sh /d/BaiduSyncdisk/backup/mdBackup/

echo -e
echo "已备份的md文件如下:"
ls /d/BaiduSyncdisk/backup/mdBackup -tlh

本地vscode里配置环境变量:

echo  'alias backup="sh /d/docusaurus/resource/shell/md_backup.sh"' >> /etc/profile
source /etc/profile

效果:

直接执行backup命令即可实现自动备份:

image-20241009074103844

image-20241014123447359

image-20241014123515661

3.图床数据

在cmd输入compmgmt.msc

新建任务:MdImages-rsync-linux-to-winodws

利用rsync每天定期增量同步到本地:(可保证数据安全)

image-20240901161236120

image-20240901161417046

ecs上图床大小:

image-20240901161512719

本地图床大小:

image-20240901161621880

关于我

我的博客主旨:

  • 排版美观,语言精炼;
  • 文档即手册,步骤明细,拒绝埋坑,提供源码;
  • 本人实战文档都是亲测成功的,各位小伙伴在实际操作过程中如有什么疑问,可随时联系本人帮您解决问题,让我们一起进步!

🍀 微信二维码

x2675263825 (舍得), qq:2675263825。

image-20230107215114763

🍀 微信公众号

《云原生架构师实战》

image-20230107215126971

🍀 个人主页:

https://onedayxyy.cn

image-20240805214647028

🍀 知识库:

https://wiki.onedayxyy.cn/

image-20240814230415388

🍀 博客:

http://blog.onedayxyy.cn/

image-20240804075845906

🍀 csdn

https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

image-20230107215149885

🍀 知乎

https://www.zhihu.com/people/foryouone

image-20230107215203185

往期推荐

QQ群

玩转Typora+Docusuaurus+起始页交流群:(欢迎小伙伴一起探讨有趣的IT技术,来完成一些漂亮的项目)

我的开源项目:

项目名称我的文档我的demo作者demo
1、玩转Typorahttps://wiki.onedayxyy.cn/docs/typorahttps://wiki.onedayxyy.cn/docs/typorahttps://typoraio.cn/#
2、玩转Docusaurushttps://wiki.onedayxyy.cn/docs/mogai-docusaurushttps://wiki.onedayxyy.cn/https://www.docusaurus.cn/
3、个人主页home3.0https://wiki.onedayxyy.cn/docs/home3.0https://onedayxyy.cn/https://github.com/hsBUPT/hsBUPT.github.io
4、全网最美博客-ruyu-bloghttps://wiki.onedayxyy.cn/docs/ruyu-blog-install-one-keyhttps://blog.onedayxyy.cn/https://www.kuailemao.xyz/
5、家庭相册filesite-iohttps://wiki.onedayxyy.cn/docs/filesite.io-photot-install-fullhttps://photo.onedayxyy.cn/https://demo.jialuoma.cn/

https://wiki.onedayxyy.cn/docs/OpenSource

image-20240811063938529

  • typora皮肤

https://wiki.onedayxyy.cn/docs/typora

image-20240518165037517

  • 起始页

https://onedayxyy.cn/

image-20240814230557697

  • 知识库

https://wiki.onedayxyy.cn/

image-20240814230415388

  • 博客

https://blog.onedayxyy.cn/

image-20240803162010305

  • 家庭相册

https://photo.onedayxyy.cn/

image-20240814230625430

最后

好了,关于本次就到这里了,感谢大家阅读,最后祝大家生活快乐,每天都过的有意义哦,我们下期见!

docusaurustypora阅读需 17 分钟

实战:完美解决md图床问题-nginx图床-2024.8.4(测试成功)

image-20240416055013558

目录

[toc]

版权声明

本文为One原创文章,转载无需和我联系,但请注明文章来源 https://onedayxyy.cn/

前提条件

  • 已经提前购买好云服务器;

  • 域名已完成备案(域名备案也是很方便的哈);

  • 域名已配置https证书;

  • 需要给次域名配置cdn;(未配置cdn时,如果md里图片偏多后,打开一个md后图片加载会出现延迟……)

说明:

最好建议通过域名来访问自己的图床服务,因为公网ip后续可能会更改,但域名是不会变的,因此后续迁移图床数据是非常方便的;

域名备案流程也不复杂,把该填的内容都填了,等待审批通过就好;

域名配置https泛域名证书也很方便;(见手把手文档:《实战:使用Certbot签发免费ssl泛域名证书(主域名及其它子域名共用同一套证书)-2024.8.4(成功测试)》)

1、部署nginx服务

  • 云服务器上部署nginx服务

参考文章:

《实战:yum方式部署nginx-2024.4.16(测试成功)》https://wiki.onedayxyy.cn/docs/ngnix-install-yum

image-20240416063333164

  • 给自己网站配置https泛域名证书

参考如下链接:

《实战:使用Certbot签发免费ssl泛域名证书(主域名及其它子域名共用同一套证书)-2024.8.4(成功测试)》:https://wiki.onedayxyy.cn/docs/docs/Certbot-install

image-20240804170957387

  • 自己本次nginx配置如下:

2024年8月4日

nginx.conf配置文件:

cat /etc/nginx/nginx.conf

user root;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
worker_connections 1024;
}

http {
gzip on; # 启用 gzip 压缩
gzip_vary on; # 根据请求中的 `Accept-Encoding` 响应头决定是否启用 gzip
gzip_proxied any; # 在所有代理请求中启用压缩
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; # 指定哪些类型的响应需要压缩
gzip_comp_level 5; # 压缩等级(范围是 1-9,高级别意味着更好的压缩但会消耗更多 CPU 资源)
gzip_min_length 256; # 只对超过给定长度的响应启用压缩
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';

access_log /var/log/nginx/access.log main;

sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 4096;

include /etc/nginx/mime.types;
default_type application/octet-stream;

# Load modular configuration files from the /etc/nginx/conf.d directory.
# See http://nginx.org/en/docs/ngx_core_module.html#include
# for more information.
include /etc/nginx/conf.d/*.conf;
charset utf-8;

# Settings for a TLS enabled server.

}

ssl证书位置:

[root@docusaurus-wiki cert]#pwd
/etc/nginx/cert
[root@docusaurus-wiki cert]#ll
total 8
-rw-rw-rw- 1 root root 2855 Aug 3 10:00 fullchain1.pem
-rw-rw-rw- 1 root root 241 Aug 3 10:00 privkey1.pem
[root@docusaurus-wiki cert]#

conf.d目录下:

[root@docusaurus-wiki conf.d]#pwd
/etc/nginx/conf.d
[root@docusaurus-wiki conf.d]#ll
total 28
-rw-r--r-- 1 root root 5252 Aug 3 14:57 blog.conf
-rw-r--r-- 1 root root 2498 Aug 3 14:15 home.conf
-rw-r--r-- 1 root root 1749 Aug 3 10:27 moments.conf
-rw-r--r-- 1 root root 1370 Aug 3 10:26 music.conf
-rw-r--r-- 1 root root 1745 Aug 3 10:23 photo.conf
-rw-r--r-- 1 root root 1404 Aug 3 09:11 wiki.conf
[root@docusaurus-wiki conf.d]#

主域名配置文件:

[root@docusaurus-wiki conf.d]#cat home.conf 
server {
listen 80;
server_name onedayxyy.cn www.onedayxyy.cn;

#配置https重定向
return 301 https://$host$request_uri;
}


server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name onedayxyy.cn www.onedayxyy.cn;

root /root/home3.0;

location / {
index index.html index.htm;
}

##图床数据
location /images {
alias /images;
index index.html;
}
# ……删除部分敏感信息
ssl_certificate "cert/fullchain1.pem";
ssl_certificate_key "cert/privkey1.pem";

ssl_session_cache shared:SSL:1m;
ssl_session_timeout 10m;
#ssl_ciphers HIGH:!aNULL:!MD5;
#自定义设置使用的TLS协议的类型以及加密套件(以下为配置示例,请您自行评估是否需要配置)
#TLS协议版本越高,HTTPS通信的安全性越高,但是相较于低版本TLS协议,高版本TLS协议对浏览器的兼容性较差。
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;

ssl_prefer_server_ciphers on;

# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;

error_page 404 /404.html;
location = /40x.html {
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}

2、配置picgo

==方法:配置picgo上传图片到云服务器-2023.12.4(测试成功)==

  • 环境
picgo v2.3.1
typora v1.7.6
win10
  • 提出问题(肯定是可以的)

picgo软件是否可以支持上传图片到自己的云服务器呢?

  • 寻找官网插件

https://github.com/PicGo/Awesome-PicGo

文档地址

https://github.com/imba97/picgo-plugin-sftp-uploader

  • 自己本次配置

D:/docusaurus/resource/shell/sftpUploader.json

{
"sftpUploader": {
"url": "https://onedayxyy.cn",
"path": "/images/{fullName}",
"uploadPath": "/images/{fullName}",
"host": "ecsip",
"port": 22,
"username": "root",
"password": "123456"
}
}

image-20240404075625491

自己云服务器ecs地址:

自己域名:onedayxyy.cn
nginx图床配置路径:/images
图片url地址:https://onedayxyy.cn/images/image-20231123144421591.png
  • 测试:(符合预期)

image-20231204145705306

  • 自己typora配置

image-20240804171453905

测试结束。😘

注意:经测试,这里的网站标识 要填内容一定得是 json文件里的 "xx"名称才行的,不然就会报如下错误。🤣

3、配置rsync服务(可选)(推荐配置)

  • 配置rsync服务,主要是可以配置winodws定期拉取图床数据,方便后期如果更换云服务器,可以更快速迁移数据,也是为了备份数据。(建议配置)
  • 配置rsync服务,很简单的,可按如下文档配置。
  • 参考文档

《实战:从linux同步数据到winodws(增量定时同步)-2023.11.30(测试成功)》(本次用到的) https://wiki.onedayxyy.cn/docs/rsync-linux-to-winodws

image-20240416062012160

  • 自己云服务器rsyncd服务配置截图

[root@docusaurus-wiki ~]#vim /etc/rsyncd.conf

image-20240416062337098

  • winodws本地同步数据截图
echo backupmd图床数据……
rsync.exe -avPzruh --port 8730 --password-file=/cygdrive/D/docusaurus/resource/shell/password.txt root@47.100.215.163::cmi-MdImages/ /cygdrive/D/BaiduSyncdisk/backup/rsync_local/cmi-MdImages-local

image-20240416062456003

  • 图床数据量汇总:

本次更换图床为ecs nginx提供的图床,体验nice。

##本地docusaurus配置
Administrator@DESKTOP-LJJNG21 MINGW64 /d/docusaurus (master)
$ du -shc docs/
10M docs/
10M total

##ecs
[root@docusaurus-wiki ~]#ll /images/ |wc -l
13026
[root@docusaurus-wiki ~]#du -shc /images/
3.8G /images/
3.8G total
[root@docusaurus-wiki ~]#

image-20240416062624907

5、配置winodws定时任务

参考如下文章:

《实战-winodws配置定时脚本-2023.11.30(测试成功)》 https://wiki.onedayxyy.cn/docs/DingShiJiaoBen/

image-20240804172841094

我自己目前为图床做的备份定时配置如下:

image-20240804172925309

image-20240804172949114

6、测试验证

  • 使用测试

https://onedayxyy.cn/images/image-20240416055013558.png

image-20240416061201293

image-20240416061236382

总结

笔记数据对任何人来说,都是至关重要的。(尤其对IT人员)

通过md来维护自己的IT数据,特别丝滑;

但md最大的问题就是处理好图床问题,通过这种方式,我们可以轻松解决md图床问题,ecs寸一份图床数据,然后会定期同步到本地(百度云同步空间),自己的md文档也通过坚果云进行同步(免费),基本完全保证了自己的笔记数据安全。

笔记数据安全得到了保证,然后通过丝滑的typora,我们就可以好好专心生成原创文章了。😊

关于我

我的博客主旨:

  • 排版美观,语言精炼;
  • 文档即手册,步骤明细,拒绝埋坑,提供源码;
  • 本人实战文档都是亲测成功的,各位小伙伴在实际操作过程中如有什么疑问,可随时联系本人帮您解决问题,让我们一起进步!

🍀 微信二维码

x2675263825 (舍得), qq:2675263825。

image-20230107215114763

🍀 微信公众号

《云原生架构师实战》

image-20230107215126971

🍀 csdn

https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

image-20230107215149885

🍀 知乎

https://www.zhihu.com/people/foryouone

image-20230107215203185

往期推荐

QQ群

《玩转Typora+Docusuaurus+起始页》交流群:(欢迎小伙伴一起探讨有趣的IT技术,来完成一些漂亮的项目)

我的开源项目:

项目名称我的文档我的demo作者demo
1、玩转Typorahttps://wiki.onedayxyy.cn/docs/typorahttps://wiki.onedayxyy.cn/docs/typorahttps://typoraio.cn/#
2、玩转Docusaurushttps://wiki.onedayxyy.cn/docs/mogai-docusaurushttps://wiki.onedayxyy.cn/https://www.docusaurus.cn/
3、个人主页home3.0https://wiki.onedayxyy.cn/docs/home3.0https://onedayxyy.cn/https://github.com/hsBUPT/hsBUPT.github.io
4、全网最美博客-ruyu-bloghttps://wiki.onedayxyy.cn/docs/ruyu-blog-install-one-keyhttps://blog.onedayxyy.cn/https://www.kuailemao.xyz/
5、家庭相册filesite-iohttps://wiki.onedayxyy.cn/docs/filesite.io-photot-install-fullhttps://photo.onedayxyy.cn/https://demo.jialuoma.cn/

https://wiki.onedayxyy.cn/docs/OpenSource

image-20240811063938529

  • typora皮肤

https://wiki.onedayxyy.cn/docs/typora

image-20240518165037517

  • 起始页

https://onedayxyy.cn/

image-20240814230557697

  • 知识库

https://wiki.onedayxyy.cn/

  • 博客

https://blog.onedayxyy.cn/

image-20240803162010305

  • 个人相册

https://photo.onedayxyy.cn/

image-20240923064332963

最后

好了,关于本次就到这里了,感谢大家阅读,最后祝大家生活快乐,每天都过的有意义哦,我们下期见!

图床typora阅读需 7 分钟

Typora 插件

image-20240911120905085

image-20240909165759311

目录

[toc]

版权

此项目版权归属如下作者,具体信息请访问原作者仓库,这里只做文档记录,感谢大佬开源的 typora 插件。

https://github.com/obgnail/typora_plugin

image-20240909164445227

环境

个人当前测试环境:

win10

typora正式版 v1.9.5

typora_plugin 1.10.28

源码位置:(具体代码请访问作者原仓库,这里只做备份)

2024.9.10-typora软件和插件

image-20240910073231360

插件特色

自带标号

后来发现这个自动加标号功能,还是很好用的哦!!!

image-20240909164034251

具有上校小箭头功能

image-20240910072524130

具有图片查看功能

image-20240910072604539

支持同一个窗口打开多标签页功能

image-20240910072725187

优化高亮搜索功能

image-20240910072834708

功能汇总

序号插件功能默认启用
1window_tab标签页管理
2search_multi全局多关键字搜索
3multi_highlighter多关键字高亮
4collapse_paragraph章节折叠
5collapse_list列表折叠×
6collapse_table表格折叠×
7md_padding中英文混排优化
8slash_commands斜杠命令
9templater文件模板
10resourceOperation一键清除无用图片
11fence_enhance一键复制、折叠、格式化代码
12toc在右侧生成大纲目录
13commander命令行环境
14mindmap根据文档大纲一键生成思维导图
15toolbar多功能搜索
16right_click_menu右键菜单统一管理、调用插件
17pie_menu圆盘菜单×
18preferences启停插件
19markmap提供 markmap 组件支持
20echarts提供 echarts 组件支持
21chart提供 chartjs 组件支持
22abc提供 abcjs 组件支持
23calendar提供 tui.calendar 组件支持
24wavedrom提供 wavedrom 组件支持
25marp提供 marp 组件支持
26callouts提供 callouts 支持
27text_stylize文字风格化
28read_only只读模式
29blur模糊模式
30kanban看板
31timeline时间线
32chat聊天
33file_counter显示目录下的文件数
34outline以表格、图片、代码块形式的大纲
35auto_number章节、表格、图片、代码块等自动编号
36imageReviewer图片查看器
37chineseSymbolAutoPairer中文符号自动补全
38datatables表格增强(搜索、过滤、分页、排序等)×
39resize_table调整表格行高列宽
40resize_image调整图片显示大小
41export_enhance导出 html 时避免图片丢失
42go_top一键到文章顶部、底部
43reopenClosedFiles打开上次退出 Typora 时尚未关闭的标签页×
44truncate_text暂时隐藏内容,提高大文件渲染性能×
45markdownLintmarkdown 格式规范检测
46darkMode夜间模式
47noImageMode无图模式
48pluginUpdater一键升级插件
49extractRangeToNewFile提取选区文字到新文件
50fullPathCopy复制标题路径
51autoTrailingWhiteSpace为文档添加结尾空格×
52redirectLocalRootUrl重定向本地资源根目录×
53blockSideBySide并列显示活动块×
54scrollBookmarker书签管理器
55openInTotalCommander在 total commander 打开×
56bingSpeech必应朗读×
57cipher加密文件
58ripgrep使用 ripgrep 搜索文件×
59article_uploader一键上传博客到支持的所有平台×
60help用户帮助
61custom开放平台,用户自定义插件(高级)
62hotkeyHub快捷键注册中心(高级)
63quickButton于右下角添加功能按钮(高级)
64json_rpc外部操纵 Typora(高级)×
65old_window_tab标签页管理(已废弃)×

尊重用户的一切选择。本项目的任何插件、任何功能皆可永久启用 / 禁用。

如果各位有其他的需求,或发现 BUG,欢迎 提 issue,欢迎 PR。如果能给我颗 star ⭐ 就更好了 :)

使用方法

方法一(自动)

此方法支持 Windows、Linux 平台。

  1. 下载 插件源码的压缩包,并将其解压

  2. 进入 Typora 安装路径,找到包含 window.html 的文件夹 A(正式版为 Typora/resources/window.html,免费版为 Typora/resources/app/window.html

  3. 将解压后的 plugin 文件夹粘贴进文件夹 A 下(参考方法二的图片)

  4. 进入文件夹 A/plugin/bin/

    • 如果你是 Windows 系统,双击运行 install_windows_amd_x64.exe,如果看到下图,说明安装成功

    • 如果你是 Linux 系统,以管理员运行 install_linux.sh,如果看到下图,说明安装成功

  5. 验证:重启 Typora,在正文区域点击鼠标右键,弹出右键菜单栏,如果能看到 常用插件 栏目,说明一切顺利

WindowsLinux
步骤 4install_windowsinstall_linux

附加说明:

  • 除了 install_windows_amd_x64.exe ,您也可以通过执行同目录下的 install_windows.ps1 安装插件。
  • 每个插件皆有配置选项。开发者鼓励您修改配置,以符合自身需求。配置文件夹位于 A/plugin/global/settings/

方法二(手动)

此方法支持 Windows、Linux 平台。

  1. 下载 插件源码的压缩包,并将其解压

  2. 进入 Typora 安装路径,找到包含 window.html 的文件夹 A(正式版的路径为 Typora/resources/window.html,免费版的路径为 Typora/resources/app/window.html

  3. 将解压后的 plugin 文件夹粘贴进文件夹 A 下

  4. 根据文件夹 A 下是否含有 appsrc 目录判断 Typora 是否为新版本,有则新版本,无则旧版本

  5. 打开文件 A/window.html

    • 若是新版本:搜索文件内容 <script src="./appsrc/window/frame.js" defer="defer"></script>

    • 若是旧版本:搜索文件内容 <script src="./app/window/frame.js" defer="defer"></script>

    在上述搜索内容的 后面 加入 <script src="./plugin/index.js" defer="defer"></script>

  6. 验证:重启 Typora,在正文区域点击鼠标右键,弹出右键菜单栏,如果能看到 常用插件 栏目,说明一切顺利

如果您安装失败,大概率是权限问题导致的。请给上述的 plugin 文件夹授权。

新版本旧版本
步骤 3new_typora_dirwhere_is_windowhtml
步骤 5new_typora_framejswhere_is_framejs

方法三(自动)

目前此方法仅限 archlinux 平台,aur 见 aur/typora-plugin

yay -S typora-plugin

实现原理

前端

window.html 是 Typora 的初始文件,可以写入一个 <script> 标签实现功能,就和 Tampermonkey 脚本一样。

后端

  1. 因为 Typora 暴露了 reqnode 函数(require 的别名),所以可以使用 CommonJS 的 reqnode('path') 导入 Node.js 的 path 库,其他库同理。
  2. 因为 Typora 使用了 electron 不太安全的 executeJavaScript 功能,所以可以用此注入 JS 代码,从而劫持后端关键对象,进而实现 electron 的后端功能注入。理论上劫持了 electron 对象,你甚至可以在 Typora 里斗地主。
// 控制台输入下面命令:

// 让第二个窗口打印消息
JSBridge.invoke("executeJavaScript", 2, `console.log("i am logging")`);

// 让所有窗口打印消息
ClientCommand.execForAll(`console.log("i am logging")`);

// 获取到本窗口的 BrowserWindow 对象
global.reqnode('electron').remote.require('electron').BrowserWindow;

// 获取到所有窗口的 BrowserWindow 对象
ClientCommand.execForAll(`console.log(global.reqnode('electron').remote.require('electron').BrowserWindow)`);

// 让窗口 1 执行语句_myValue = 123,然后将变量_myValue 传给窗口 2
JSBridge.invoke('executeJavaScript', 1, "_myValue=123; JSBridge.invoke('executeJavaScript', 2, `console.log(${_myValue})`)");

Q&A

我的 Typora 版本能用吗?

所有插件都在 0.9.98 版本(最后一个免费版本)和最新版本测试过。本项目理论上支持所有 Typora 版本,但是 Typora 在 0.9.98 版本以后功能才稳定下来。0.9.98 版本以下,可能会因为缺少某些功能导致部分插件失效

插件会失效吗?

理论上能保持长时间有效,且我在维护中。

如何永久禁用/启用某些插件?

右键菜单 -> 少用插件 -> 启停插件。

如何修改插件配置?

目前整个项目包含 600+ 配置选项,可以比较完整的定义各个插件的行为。

这些配置全部位于 ./plugin/global/settings/ 目录中。修改配置的方法请阅读该目录下的 请读我.md

image-20240910070206160

image-20240910070157044

如何升级插件?

右键菜单 -> 常用插件 -> 二级插件 -> 升级插件。

我不想用了,如何卸载插件系统?

右键菜单 -> 少用插件 -> 帮助 -> 卸载插件。

支持 Typora for Mac 吗?

没有 Mac,故没做测试。

插件使用

所有的插件都提供了四种使用方法:

  • 键盘党:
    • 键入 ctrl+j,在输入框键入 plu+空格+插件名称 调出插件列表(详见 toolbar 插件)
    • 快捷键(详见 hotkeyHub 插件)
  • 鼠标党:
    • 在正文区域右键,在弹出的右键菜单中直接调用(详见 right_click_menu 插件)
    • 快捷按钮(详见 quickButton 插件)

callouts: 提供 callouts 支持

使用方式:右键菜单 -> 常用插件 -> 二级插件 -> Callouts

callouts

数量、类型、颜色、icon 皆可自己定义,请前往配置文件修改:

[[callouts.config.list]]
type = "note"
background_color = "#e1d1eb"
left_line_color = "#6a1b9a"
icon = "\\f040"

window_tab:标签页管理

  • 切换标签:标签页处 Ctrl+滚轮滚动、ctrl+shift+tab、ctrl+tab、ctrl+PgUp、ctrl+PgDn
  • 关闭标签:ctrl+w、鼠标中键
  • 新窗口打开:ctrl+单击标签
  • 排序标签:拖拽
  • 弹出标签的菜单选项:右键单击标签页

new_window_tab

search_multi:全局多关键字搜索

功能:比如搜索同时包含 golanginstall生命周期 三个关键字的文件。

搜索关键字使用空格分隔,双引号包裹视为词组。eg:golang install 搜索同时包含 golang 和 install 的文件;"golang install" 搜索包含 golang install 的文件

  • 打开搜索框:ctrl+shift+P
  • 关闭搜索框:光标定位到输入框,键入 esc
  • 搜索:enter
  • 选中:ArrowUp,ArrowDown
  • 当前窗口打开:click、ctrl+enter
  • 新窗口打开:ctrl+click、ctrl+shift+enter
  • 移动位置:ctrl+拖动输入框

search_mutli

multi_highlighter:多关键字高亮

功能:搜索并高亮关键字,并提供一键定位功能(左键下一个,右键上一个)

关键字使用空格分隔,双引号包裹视为词组。

  • 打开搜索框:ctrl+shift+H
  • 关闭搜索框:光标定位到输入框,键入 esc
  • 搜索:enter
  • 移动位置:ctrl+拖动输入框
  • 定位到下一个关键字:左键色块
  • 定位到上一个关键字:右键色块

multi_highlighter

注意:当你鼠标点击文档内容时,会自动退出高亮状态。这是 Typora 本身的限制导致的。你可以试试 Typora 自身的 ctrl+F 搜索,在搜索关键字后,点击任意地方原先高亮的地方也会消失。

collapse_paragraph:章节折叠

功能:折叠 / 展开 章节下所有文本。支持折叠的标签:h1~h6。

  • 折叠/展开单个章节:ctrl+click
  • 折叠/展开父章节下所有同级的章节:ctrl+alt+click
  • 折叠/展开所有同级的章节:ctrl+shift+alt+click

collapse_paragraph

collapse_list:列表折叠

功能:折叠 / 展开 无序列表、有序列表、任务列表。

collapse_table:表格折叠

功能:折叠 / 展开 表格。

md_padding:中英文混排优化

功能:中英文混排时,中文与英文之间、中文与数字之间添加空格。

快捷键:ctrl+shift+B

md_padding

有些片段希望保持原状,这时可以用 md-padding-ignore 标签包裹起来。

下面是一段不需要格式化的文本
<!--md-padding-ignore-begin-->
a*b=c, b>1 => a<c
<!--md-padding-ignore-end-->
现在开始又可以格式化了。

slash_commands:斜杠命令

功能:类似于 notion 的 slash command。

支持用户自定义命令,请前往配置文件修改:

[slash_commands]
COMMANDS = [
{ enable = true, type = "snippet", icon = "🧰", hint = "", keyword = "snippet", callback = "thisIsTestSnippet" },
{ enable = true, type = "command", icon = "🧾", hint = "二级标题", keyword = "h2", callback = "() => File.editor.stylize.changeBlock('header2', undefined, true)" },
{ enable = true, type = "command", icon = "🧰", hint = "置底部", keyword = "jumpBottom", callback = "() => File.editor.selection.jumpBottom()" },
...
]

slash_commands

templater:文件模板功能

功能:类似于 obsidian 的文件模板功能,根据模板快速创建文件。

使用方式:右键菜单 -> 常用插件 -> 二级插件 -> 文件模板。

模板列表请前往配置文件修改。

templater

resourceOperation:一键清除无用图片

功能:资源管理,清除无用图片

使用方式:右键菜单 -> 常用插件 -> 二级插件 -> 资源管理

fence_enhance:一键复制,折叠,格式化代码

fence_enhance

toc:在右侧生成大纲目录

功能:Typora 侧边栏的【文件】和【大纲】不能同时显示,为了解决此问题,此插件会在右侧新增一个【大纲】。

使用方式:

  • 方式一:常用插件 -> 二级插件 -> 大纲目录
  • 方式二:右键点击侧边栏的【大纲】按钮

commander:命令行环境

功能:和 total commander 的命令行一样(快捷键也一样),一个快速执行命令的工具,并提供少量交互。

  • 弹出执行框:ctrl+G
  • 关闭执行框:esc
  • 移动位置:ctrl+拖动输入框

支持 shell:

  • cmd/bash:windows 或 Mac 的默认终端
  • powershell:微软的傻儿子 : D
  • git bash:使用此终端前请保证安装了 git bash 并且加入环境变量
  • wsl:使用此终端前请保证安装了 wsl2,并且加入环境变量

内置环境变量:

  • $f:当前文件路径
  • $d:当前文件的所属目录
  • $m:当前挂载的根目录

支持内建命令,方便快速调用。个人可按需自定义配置文件里的 BUILTIN 选项。

# 默认的内建命令
# 目前支持4个参数:
# 1. name: 展示的名称(不可重复)
# 2. shell: cmd/bash、powershell、gitbash、wsl
# 3. hotkey: 快捷键(可选)
# 4. cmd: 执行的命令
BUILTIN = [
{ name = "", shell = "cmd/bash", cmd = "" },
{ name = "Explorer", shell = "powershell", hotkey = "ctrl+alt+e", cmd = "explorer $d" },
{ name = "Vscode", shell = "cmd/bash", cmd = "code $f" },
{ name = "WT", shell = "cmd/bash", cmd = "cd $d && wt" },
{ name = "GitCommit", shell = "cmd/bash", cmd = 'cd $m && git add . && git commit -m "update"' },
]

commander

mindmap:根据文档大纲一键生成思维导图

功能:根据文档大纲一键生成 mermaid 思维导图

使用方式:右键菜单 -> 常用插件 -> 思维导图

mindmap

markmap:提供 markmap 支持

使用方式:

  • 方式一:右键菜单 -> 少用插件 -> markmap
  • 方式二:直接点击右下角的 markmap 按钮

markmap

toolbar:多功能搜索

功能:类似于 vscode 的 ctrl+shift+p 功能

使用方式:

  • 方式一:右键菜单 -> 少用插件 -> 多功能搜索
  • 方式二:快捷键 ctrl+j

支持搜索:

  • his:最新打开过的文件
  • plu:插件
  • tab:打开的标签页
  • ops:常用操作
  • out:文档大纲
  • mode:切换文件模式
  • theme:临时切换主题
  • func:功能列表
  • all:混合查找(所有项目都混在一起查找)

键入内容说明:

  • 键入内容 = 搜索工具名称 + 空格 + 搜索内容
  • 支持 交集查询差集查询,并且可以随意组合(类似于 google 的正负向查询)

举例:

  • his node learn:查找最近打开的文件,要求文件标题【包含 node 和 learn 两个关键字】
  • plu multi -search:查找插件,要求插件名【包含 multi 关键字,但是不包含 search 关键字】
  • tab -messing:查找所有打开的标签页,要求标签页名称【不包含 messing 关键字】
  • his close -win -mark 标签:查找最近打开的文件,要求文件标题【包含 close、标签,不包含 win、mark】

toolbar

right_click_menu:右键菜单统一管理插件

所有插件都支持在右键菜单中直接调用。鼠标党可以将右键菜单作为所有插件的主要调用方式。

可以通过修改配置文件自定义右键菜单:

#  每一个MENUS对应一个一级菜单,允许无限添加一级菜单,允许重复添加同一个插件
# NAME: 一级菜单的名称
# LIST: 二级菜单的插件列表(使用"---"代表在页面上插入一个divider,以作分隔)
[[right_click_menu.MENUS]]
NAME = "少用插件"
LIST = [
"window_tab", "resize_image", "resize_table", "fence_enhance", "export_enhance",
"datatables", "markmap", "auto_number", "truncate_text", "right_click_menu",
"---",
"blur", "go_top", "text_stylize", "toolbar",
"---",
"file_counter", "test",
]
[[right_click_menu.MENUS]]
NAME = "常用插件"
LIST = [
"commander", "mindmap", "collapse_paragraph", "custom",
"---",
"search_multi", "multi_highlighter", "outline", "md_padding", "read_only",
]

pie_menu:圆盘菜单

使用方式:

  • 弹出圆盘菜单:Ctrl+鼠标右键
  • 旋转圆盘菜单:鼠标中键
  • 固定圆盘菜单,圆盘不再自动消失:鼠标左键圆心
  • 展开圆盘菜单,圆盘不再自动收缩:鼠标右键圆心

preferences:启停插件

使用方式:右键菜单 -> 少用插件 -> 启停插件

echarts:提供 echarts 支持

使用方式:右键菜单 -> 常用插件 -> 二级插件 -> Echarts

echats

chart:提供 chartjs 支持

使用方式:右键菜单 -> 常用插件 -> 二级插件 -> Chart

chart

abc:提供 abc 组件支持

使用方式:右键菜单 -> 常用插件 -> 二级插件 -> ABC

abcjs

calendar: 提供 tui.calendar 组件支持

使用方式:右键菜单 -> 常用插件 -> 二级插件 -> Calendar

calendar

wavedrom:提供 wavedrom 组件支持

使用方式:右键菜单 -> 常用插件 -> 二级插件 -> Wavedrom

wavedrom

marp:提供 marp 组件支持

功能:使用 markdown 做 PPT。

使用方式:右键菜单 -> 常用插件 -> 二级插件 -> Marp

kanban:看板

拓展代码语法,添加看板功能。

kanban

timeline:时间线

拓展代码语法,添加时间线功能。

timeline

chat:聊天

拓展代码语法,添加聊天功能。

chat

text_stylize:文字风格化

功能:将文字转为 html 格式,改变文字样式。

使用方式:右键菜单 -> 少用插件 -> 文字风格化。

text_stylize

read_only:只读模式

功能:只读模式下文档不可编辑(开启后,右下角数字统计区域会出现 ReadOnly 字样)

快捷键:ctrl+shift+R

blur:模糊模式

功能:开启后,只有当前聚焦的组件可见,其余模糊。可以用于防偷窥。

使用方式:右键菜单 -> 少用插件 -> 模糊模式

此插件只能于正式版 Typora 使用。

file_counter:显示文件数

file_count

outline:以表格、图片、代码块形式的大纲

使用方式:右键菜单 -> 常用插件 -> 类别大纲

outline

auto_number:自动编号

auto_number

支持编号的组件(皆可临时或永久打开/关闭):

  1. 标题
  2. 大纲
  3. TOC
  4. 表格
  5. 图片
  6. 代码块

注意:通过注入 CSS 实现此功能,有可能会与你使用的 theme 冲突。

和其他使用 Theme CSS 的实现方式不同,此插件通过修改内置函数,完美解决导出 PDF 后侧边栏没有编号的问题 :)

根据 Markdown 最佳实践,一篇文档应该 有且仅有 一个 h1,故此插件从 h2 开始编号。

imageReviewer:图片查看器

功能:一站式图片查看,并且提供简单图片编辑。

使用方式:

  • 方式一:点击右下角【查看图片】按钮
  • 方式二:右键菜单 -> 常用插件 -> 二级插件 -> 图片查看器

image-reviewer

chineseSymbolAutoPairer:中文符号自动补全

功能:输入 《 【 ( ‘ “ 「 符号时自动补全。

datatables:表格增强

功能:增强表格。提供搜索、过滤、分页、排序等功能。

使用方式:将光标定位在表格 -> 右键菜单 -> 少用插件 -> 表格增强。

datatables

其实此插件可以是提供开放能力的,实现类似于 obsidian 的 dataview 插件的功能。不过暂时不做,原因:

  1. 私以为 Typora 的用户并不需要大量用到此功能。
  2. 需要用户熟悉 javascript 以及 dataTables.js 的 API。成本太高。
  3. 需要编写大量的配套代码。

resize_table:拖动调整表格大小

功能:ctrl+鼠标拖动:修改表格的行高列宽。

resize_table

resize_image:调整图片大小

功能:ctrl+鼠标滚轮滚动:调整图片大小。

resize-image

export_enhance:导出增强

功能:导出 html 时,将图片转为 base64,避免图片丢失。

go_top: 一键到顶

功能:在右下角添加一个一键到顶的按钮。

reopenClosedFiles:打开上次退出 Typora 时尚未关闭的标签页

功能:自动 或者 通过快捷键打开上一次退出 Typora 时尚未关闭的标签页

此插件仅在 window_tab 启用时生效。

markdownLint:markdown 格式规范检测

使用方式:

  • 方式一:右键菜单 -> 常用插件 -> 二级插件 -> 格式规范检测
  • 方式二:点击右上角的小方块

darkMode:夜间模式

使用方式:右键菜单 -> 常用插件 -> 二级插件 -> 夜间模式

noImageMode:无图模式

使用方式:右键菜单 -> 常用插件 -> 二级插件 -> 无图模式

pluginUpdater:一键升级插件

使用方式:右键菜单 -> 常用插件 -> 二级插件 -> 升级插件。

众所周知,有些用户并不能裸连 github 下载最新插件,故提供了设置代理功能(默认为系统代理)

extractRangeToNewFile:提取选区文字到新文件

使用方式:选中一些文字 -> 右键菜单 -> 常用插件 -> 二级插件 -> 提取选区文字到新文件。

fullPathCopy:复制标题路径

使用方式:将光标定位到标题上 -> 右键菜单 -> 常用插件 -> 二级插件 -> 复制标题路径。

就会生成如下文字,并复制到剪切板:

README.md\Typora Plugin 一级标题\插件使用说明 二级标题\fullPathCopy:复制标题路径 三级标题

autoTrailingWhiteSpace:为文档添加结尾空格

使用方式:将光标定位到标题上 -> 右键菜单 -> 常用插件 -> 二级插件 -> 为文档添加结尾空格。

根据严格的 Markdown 换行语法,需要在结尾添加两个空格以表示换行。此工具能一键添加空格。

redirectLocalRootUrl:重定向本地资源根目录

功能:如果你主要使用 obsidian 或 joplin 来管理文件,偶尔用 typora 打开文件。就会遇到一个问题:obsidian 或 joplin 都是将本地资源放在同一个目录中(vault),这导致在 typora 打开后文件由于路径错误,无法访问本地资源。此插件就是为了解决此问题,重定向本地资源根目录。

此插件默认关闭,需手动开启。

使用此插件前需要设置如下配置选项:

# 资源根目录,支持绝对路径(如D:\\tmp\\img)和相对路径(如.\\assets),填写时请注意转义反斜线(若为空,则此插件失效)
root = "./"
# 过滤的正则表达式:只有文件路径命中filter_regexp匹配的文件才使用此插件(若为空,则全部文件都使用此插件)
filter_regexp = ""

blockSideBySide:并列显示活动块

功能:活动块默认是上下显示,改为并列显示。

blockSideBySide

注意:通过注入 CSS 实现此功能,有可能会与你使用的 theme 冲突。

openInTotalCommander:在 total commander 打开当前文件

使用方式:将光标定位到标题上 -> 右键菜单 -> 常用插件 -> 二级插件 -> TC 打开。

使用此插件前,需要您在配置手动修改 TC 的安装路径。

此插件默认关闭,需手动开启。

scrollBookmarker: 书签管理器

使用方式:

  1. 使用 alt+click 正文内容,打上书签。
  2. 接着调出书签管理器,点击上面的书签,即可跳转到书签。

调出书签管理器:

  • 方式一:右键菜单 -> 常用插件 -> 二级插件 -> 书签管理器
  • 方式二:点击右下角的【书签管理器】按钮

bingSpeech:必应朗读

使用方式:鼠标框选一小段文字 -> 右键菜单 -> 常用插件 -> 二级插件 -> 必应朗读

实现原理:采用爬虫技术,盗取必应翻译的播放语音功能

注意:功能完全依赖外部环境,因此不能保证成功。开发者一时兴起做的,仅作娱乐使用。

help: 用户帮助

使用方式:右键菜单 -> 少用插件 -> 帮助。

cipher:加密文件

使用方式:右键菜单 -> 少用插件 -> 加密文件。

truncate_text:暂时隐藏内容,提高大文件渲染性能

功能:大文件在 Typora 的渲染性能很糟糕,用此插件暂时隐藏内容(只是隐藏显示,不修改文件),提高渲染性能。也可以用于防偷窥。

使用方式:右键菜单 -> 少用插件 -> 文本截断。

包含的功能如下:

  • 隐藏最前面:隐藏最前面的文本段,只留下最后 80 段。
  • 重新显示:重新显示之前隐藏的所有文本段。
  • 根据当前可视范围显示:根据当前可视范围显示文本段。

原理:通过设置 DOM 元素的 display 样式为 none 来隐藏元素,让元素不占用渲染树中的位置,对隐藏的元素操作不会引发其他元素的重排。

collapse_paragraph (章节折叠功能)可以很好的替代此插件,建议使用 collapse_paragraph。

ripgrep:使用 ripgrep 搜索文件(待研究)

Typora 自带 ripgrep。此插件支持使用内建的 ripgrep 进行文件搜索。

使用此插件需要您熟悉 ripgrep 工具。此插件默认关闭,需手动开启。

hotkeyHub:快捷键注册中心(高级)(待研究)

此插件是高级插件,仅对有 javascript 基础的用户开放。

功能:以声明的形式,为【任意插件系统函数】或【任意自定义函数】绑定快捷键。

具体使用请参考 hotkey.default.toml

quickButton:于右下角添加功能按钮(高级)(待研究)

此插件是高级插件,仅对有 javascript 基础的用户开放。

功能和 hotkeyHub 类似,以声明的形式,为【任意插件系统函数】设置快捷按钮。

custom:开放平台,用户自定义插件(高级)(待研究)

此插件是高级插件,仅对有 javascript 基础的用户开放。

功能:提供开放能力,支持用户自己写插件。

具体使用请参考 请读我.md

json_rpc:外部操纵 Typora(高级)(暂不考虑使用)

功能:将包括 typora-plugin 所有功能在内的一切能力通过 json-rpc 的形式暴露出去,以供外部操纵 Typora。

具体使用请参考 请读我.md

此插件是高级插件,仅对开发人员开放。

开启此插件后,外部将拥有 node、browser 两套环境,能完全控制电脑,因此如果您不是开发人员,请勿开启此插件。

article_uploader:上传博客文章(很少使用)

功能:用户点击或者使用快捷键触发当前文章的自动发布功能,程序根据用户配置自动发布博客文章到各大平台

具体使用参考: 请读我.md。以上传到 CSDN 为例,Gif 图如下:

CSDN 成功演示

代办

【重要】基于自己之前one主题更新一款兼容typora_plugin的主题

注意

因为当前的one主题在typora_plugin下,有些元素显示会有问题。。。

后续设置在自己的模板

image-20240910070658130

---
title: typora-md
id: typora-md
slug: /typora-md
tags: [docusaurus]
keywords: [docs,docusaurus]
description: typora模板
image: https://onedayxyy.cn/images/image-20240827125241681.png
last_update:
date: 2024-09-08
author: One
---
## typora-md

图片自动编号功能丢失(需要修复自己主题)

image-20240909171757471


默认 github 是没问题的:

标号字体备注为啥是在右侧(需要修复自己主题)

image-20240909171943359


默认 githug 主题是没问题的:。。。

image-20240910064236085

四级-6 级标题出现 Bug(需要修复自己主题)

image-20240909172243994

image-20240909172256345

image-20240909172303476


自己测试了发现:

默认 github 是没这个问题的:。。。

image-20240910064142618

大纲目录不如默认目录好用

image-20240910071122277

用户如何自定义插件(js)

image-20240910073517755

已解决

右下角背景图片和功能键重合了(已解决)

image-20240909173118236

通过把图片设置在左侧进行解决。

小众软件推荐

通过注入 js 代码,为 Typora 额外增加 4 个功能

第一次上榜小众软件,心情非常冲动。同时祝小众软件越办越好。

appinn

致谢

结语

本人并非前端开发,前端技术全靠 Google,JS/CSS 写的很烂。

本项目遵循 MIT 协议,请自由地享受。

如果对各位有用的话,欢迎 star⭐,欢迎推荐给你志同道合的朋友使用。

关于我

我的博客主旨:

  • 排版美观,语言精炼;
  • 文档即手册,步骤明细,拒绝埋坑,提供源码;
  • 本人实战文档都是亲测成功的,各位小伙伴在实际操作过程中如有什么疑问,可随时联系本人帮您解决问题,让我们一起进步!

🍀 微信二维码

x2675263825 (舍得), qq:2675263825。

image-20230107215114763

🍀 微信公众号

《云原生架构师实战》

image-20230107215126971

🍀 个人主页:

https://onedayxyy.cn

image-20240805214647028

🍀 知识库:

https://wiki.onedayxyy.cn/

🍀 博客:

http://blog.onedayxyy.cn/

image-20240804075845906

🍀 csdn

https://blog.csdn.net/weixin_39246554?spm = 1010.2135.3001.5421

image-20230107215149885

🍀 知乎

https://www.zhihu.com/people/foryouone

image-20230107215203185

往期推荐

QQ 群

玩转 Typora+Docusuaurus+起始页 交流群:(欢迎小伙伴一起探讨有趣的 IT 技术,来完成一些漂亮的项目)

我的开源项目:

项目名称我的文档我的 demo作者 demo
1、玩转 Typorahttps://wiki.onedayxyy.cn/docs/typorahttps://wiki.onedayxyy.cn/docs/typorahttps://typoraio.cn/#
2、玩转 Docusaurushttps://wiki.onedayxyy.cn/docs/mogai-docusaurushttps://wiki.onedayxyy.cn/https://www.docusaurus.cn/
3、个人主页 home3.0https://wiki.onedayxyy.cn/docs/home3.0https://onedayxyy.cn/https://github.com/hsBUPT/hsBUPT.github.io
4、全网最美博客-ruyu-bloghttps://wiki.onedayxyy.cn/docs/ruyu-blog-install-one-keyhttps://blog.onedayxyy.cn/https://www.kuailemao.xyz/
5、家庭相册 filesite-iohttps://wiki.onedayxyy.cn/docs/filesite.io-photot-install-fullhttps://photo.onedayxyy.cn/https://demo.jialuoma.cn/

https://wiki.onedayxyy.cn/docs/OpenSource

image-20240811063938529

  • typora 皮肤

https://wiki.onedayxyy.cn/docs/typora

image-20240518165037517

  • 起始页

https://onedayxyy.cn/

image-20240814230557697

  • 知识库

https://wiki.onedayxyy.cn/

  • 博客

https://blog.onedayxyy.cn/

image-20240803162010305

  • 家庭相册

https://photo.onedayxyy.cn/

最后

好了,关于本次就到这里了,感谢大家阅读,最后祝大家生活快乐,每天都过的有意义哦,我们下期见!

typora阅读需 25 分钟