思源笔记使用经验
安利两个利器:思源笔记和 quicker,尤其是对科研和文字工作者
先上图,这是我总结的经验,一键跳转到其他软件,在你的文献库、笔记、本地文件之间进行跳转、搜索,形成自己的知识体系,以后有机会慢慢分享。
我,一个非计算机的 Geo 却喜欢折腾各种软件,大概有 7-8 年了,最近几年很多优秀的个人开发者开发了很多吊打大厂的软件(比如苹果生态里的 marginnote,据说现在正在开发 Android 版),以前电脑装了很多软件,但是现在这两款真的是我离不开的:思源笔记和 quicker——前者是一个笔记类软件,后者是一个脚本类软件(什么是脚本?可以简单理解为自动化执行一些操作),有机会的话再介绍一下超越文献管理的文献管理软件 zotero。
如果你会倒腾软件、稍微懂点编程,那么请选择思源笔记和 quicker!
如果你是小白,不喜欢折腾,请也尝试一下思源笔记和 quicker,因为这里有很多大神分享自己的动作、挂件、工作心得等!
官方网址奉上:
Quicker 软件 您的指尖工具箱 - Quicker@HTTP 推荐码:11180-1954
思源笔记 - 本地优先的个人知识管理系统,支持 Markdown 排版、块级引用和双向链接 @HTTP 思源笔记推荐码:578MMHg
如果你决定订阅了,请使用我的推荐码,你我都有优惠,也是对我创作的支持,谢谢。
下面简单介绍一下:
为什么选择思源笔记
之前(20210701)一直使用 onenote 做笔记,7 月份的时候将文献管理软件更换到了 zotero,也一直想换一个笔记软件平台,主要是受困于 onenote 的以下缺点
- 不能全局标签
- 搜索很鸡肋
- 更新慢
- 不能插入代码,虽然可以借助插件,但是效果不好,且有些编程语言不支持
- 不支持 gif
在这之前,电脑安装了 obsidian(这个软件国外用的多),也尝试过(比如利用 calibre 导出的 markdown 格式的笔记)使用,起初是想转移到 notion(各大平台铺天盖地地宣传,支持 todo 任务管理),但是后来一条原因就被我否定了——是在线的,不能完全离线。
我看中的思源特性
- 双链笔记 (支持在你的笔记库中自动嗅探,将你的知识库构结成网状)
- 浏览器标签式
- 全局关键字
- 便捷的编辑操作
- 很多快捷键
- 图片无损:图片只是一种引用
- 支持 视频、gif 嵌入
- 支持浏览器访问(obsidian 目前还不支持)
- 手机端可以输入,且支持作为网络伺服器。手机端是独立的一个笔记软件,平时有什么想法可以直接在手机端输入,然后等回到了办公室,连接局域网,手机作为伺服器(手机端右上角三个竖着的点 → 关于 → 网络伺服),电脑浏览器即可访问手机中的笔记,可以把这个网址收藏到浏览器书签栏。同样地,电脑端的笔记也可以很方便地复制到手机上。
- 有挂件接口(挂件可以简单理解为小程序),也就意味着可以进行丰富的扩展
- 有颜值,可以下载社区贡献者们搞的各种外观主题,如果你愿意,那么你自己也可以亲自定制
- 一键发布到知乎专栏、微信公众号、语雀等平台
- 。。。。。。无限可能等你来挖掘
我的思源笔记展示
思源笔记优质教程
椽承设计_CHOUCHOU 的个人空间_哔哩哔哩_bilibili@HTTP 鱼大的 B 站视频,很热心的一个群友,写了一个“主题设计器”的挂件,正在努力搞表格挂件
使用第三方网盘接管思源笔记静态文件同步 - 链滴 @HTTP
思源是如何存储数据的?
数据保存在工作空间文件夹下(默认位于用户家目录 Documents/SiYuan,可在 设置 - 关于 中进行修改),在工作空间 data 文件夹下:
assets
用于保存所有插入的资源文件templates
用于保存模板片段widgets
用于保存挂件emojis
用于保存 Emoji 图片- 其余文件夹就是用户自己创建的笔记本文件夹,笔记本文件夹下
.sy
后缀的文件用于保存文档数据,数据格式为 JSON
下文也是基本上按照数据存储结构一部分一部分地展开的。
主题美化 \conf\appearance\themes
把中英文搞成不同字体:font-family 调整顺序,就是英文字体第一个,中文在后面,英文字体没有的,就顺延用下一个字体,即中英文不同字体,在字体系列里把英文字体提前就行了
给大家推荐一款在 chromium 内核渲染中也能中英文严格 2:1 等宽的真·等宽字体, 适合所有 Electron 应用
更纱黑体
https://www.microsoft.com/store/productId/9MW0M424NCZ7
项目地址
be5invis/Sarasa-Gothic: Sarasa Gothic / 更纱黑体 / 更紗黑體 / 更紗ゴシック / 사라사 고딕
https://github.com/be5invis/Sarasa-Gothic
主题设计挂件
更新日志:
20211002 主题设计器加上了字体预览和 tips 功能 看字体方便点
langzhou/siyuan-note: 思源笔记美化教程 @HTTP
这个 UP 主有很多思源笔记教程 鱼大
本地磁盘文件主题设计器 使用方法 2021-09-15 21-14-20.mkv
浏览器访问 http://127.0.0.1:6806/widgets/主题设计器/
编辑的时候,可能由于谷歌浏览器插件(比如油猴)、浏览器缓存的影响,导致显示的不是真正做过更改之后的,可以通过在浏览器“隐身模式”、刷新等方式解决之。
增加了使用预定义配色的功能,把保存的配色选项上传到笔记附件里就可以识别了,这样应该比较方便适配不同颜色方案
背景图之内的现在使用 assets 里的图片了,预览现在还做得不是很好,先顶顶
更改格式: 改内容或改显示样式
(显示样式=主题)只是在思源笔记中显示的时候做为渲染使用,不同主题,导出的 Word 文件样式是一样的
彩虹色标题-Tsundoku Dark modified by.laomao
使用主题美化,将不同级别的标题区别开来, 颜色的透明度
效果
这个效果是使用了0.5的透明度
background-color:rgba(255, 0, 0, 0.3) !important;
background-color:rgba(255, 149, 0, 0.3) !important;
background-color:rgba(242, 255, 0, 0.3) !important;
background-color:rgba(0, 255, 47, 0.3) !important;
background-color:rgba(0, 157, 255, 0.3) !important;
background-color:rgba(213, 0, 255, 0.3) !important;
标题彩虹色
Tsundoku Dark改
\conf\appearance\themes\Tsundoku Dark-原\theme.css 的 242-303行替换为了下面这些
/****** 标题 ********/
/* 页面标题 */
.protyle-title__input{
}
/* 文档标题 */
/* background-color:rgba是按照彩虹色“红橙黄绿蓝靛紫”改的20210921by.laomao */
.b3-typography .h1,.b3-typography h1,.b3-typography .h2,.b3-typography h2,.b3-typography .h3,.b3-typography h3,.b3-typography .h4,.b3-typography h4,.b3-typography .h5,.b3-typography h5,.b3-typography .h6,.b3-typography h6,.protyle-wysiwyg .h1,.protyle-wysiwyg h1,.protyle-wysiwyg .h2,.protyle-wysiwyg h2,.protyle-wysiwyg .h3,.protyle-wysiwyg h3,.protyle-wysiwyg .h4,.protyle-wysiwyg h4,.protyle-wysiwyg .h5,.protyle-wysiwyg h5,.protyle-wysiwyg .h6,.protyle-wysiwyg h6 {
}
/*编辑区一级标题*/
.b3-typography .h1, .b3-typography h1, .protyle-wysiwyg .h1, .protyle-wysiwyg .h1{
background-color:rgba(255, 0, 0, 0.3) !important;
margin: 12px 0 8px 0;
padding: 0.2em 4px;
font-family:Times New Roman,华文宋体;
font-size: 1.75em;
border-bottom: 1px solid var(--b3-border-color);
}
.b3-typography .h2, .b3-typography h2, .protyle-wysiwyg .h2, .protyle-wysiwyg h2{
background-color:rgba(255, 149, 0, 0.3) !important;
margin: 12px 0 0 0;
padding: 0.1em 4px;
font-family:Times New Roman,华文宋体;
font-size: 1.55em;
border:none;
}
.b3-typography .h3, .b3-typography h3, .protyle-wysiwyg .h3, .protyle-wysiwyg h3{
background-color:rgba(242, 255, 0, 0.3) !important;
margin: 10px 0 0 0;
font-family:Times New Roman,华文宋体;
font-size: 1.38em;
}
.b3-typography .h4, .b3-typography h4, .protyle-wysiwyg .h4, .protyle-wysiwyg h4{
background-color:rgba(0, 255, 47, 0.3) !important;
margin: 6px 0 0 0;
font-family:Times New Roman,华文宋体;
font-size: 1.25em;
}
.b3-typography .h5, .b3-typography h5, .protyle-wysiwyg .h5, .protyle-wysiwyg h5{
/* margin: 6px 0 0 0; */
background-color:rgba(0, 157, 255, 0.3) !important;
font-family:Times New Roman,华文宋体;
font-size: 1.13em;
}
.b3-typography .h6, .b3-typography h6, .protyle-wysiwyg .h6, .protyle-wysiwyg h6{
/* margin: 6px 0 0 0; */
background-color:rgba(213, 0, 255, 0.3) !important;
font-family:Times New Roman,华文宋体;
font-size: 1em;
}
/* 思源群群友 QQ1278181644 根据主题 Tsundoku 找到了一种分辨不同等级标题的方案
Ubuntu Pastebin https://paste.ubuntu.com/p/m58jGz52CC/
标题前显示标题级别 */
/* ----------------标题样式 H1---------------- */
.protyle-wysiwyg [data-node-id].h1:before, .b3-typography h1:before {
content:"¹";
display: block;
float: left;
margin-right: 8px;
}
/* 调整 h1 的空行提示 */
.protyle-wysiwyg .h1>[spellcheck="false"]:focus:empty {
padding-left: 1rem;
}
/* ----------------标题样式 H2---------------- */
.protyle-wysiwyg [data-node-id].h2:before, .b3-typography h2:before {
content:"²";
display: block;
float: left;
margin-right: 8px;
}
/* 调整 h2 的空行提示 */
.protyle-wysiwyg .h2>[spellcheck="false"]:focus:empty {
padding-left: 1rem;
}
/* ----------------标题样式 H3---------------- */
.protyle-wysiwyg [data-node-id].h3:before, .b3-typography h3:before {
content:"³";
display: block;
float: left;
margin-right: 8px;
}
/* 调整h3的空行提示 */
.protyle-wysiwyg .h3>[spellcheck="false"]:focus:empty {
padding-left: 1rem;
}
/* ----------------标题样式 H4---------------- */
.protyle-wysiwyg [data-node-id].h4:before, .b3-typography h4:before {
content:"⁴";
display: block;
float: left;
margin-right: 8px;
}
/* 调整 h4 的空行提示 */
.protyle-wysiwyg .h2>[spellcheck="false"]:focus:empty {
padding-left: 1rem;
}
/* ----------------标题样式 H5---------------- */
.protyle-wysiwyg [data-node-id].h5:before, .b3-typography h5:before {
content:"⁵";
display: block;
float: left;
margin-right: 8px;
}
/* 调整 h5 的空行提示 */
.protyle-wysiwyg .h5>[spellcheck="false"]:focus:empty {
padding-left: 1rem;
}
/* ----------------标题样式 H6---------------- */
.protyle-wysiwyg [data-node-id].h6:before, .b3-typography h6:before {
content:"⁶";
display: block;
float: left;
margin-right: 8px;
}
/* 调整 h6 的空行提示 */
.protyle-wysiwyg .h6>[spellcheck="false"]:focus:empty {
padding-left: 1rem;
}
加粗字体的颜色
/* 所见即所得行内元素颜色 */
/* --b3-protyle-inline-strong-color: #ECB17B;这个是改过的,加粗字体颜色by.laomao */
--b3-protyle-inline-strong-color: #ECB17B;
/* 引用里面粗体颜色by.laomao*/
.protyle-wysiwyg [data-node-id].bq strong, .b3-typography blockquote strong {
color: #ECB17B;
}
大纲栏彩虹色
【icon 集市】添加 Tsunodoku icon - 链滴 @HTTP
Tsundoku Dark改
\conf\appearance\themes\Tsundoku Dark-原\theme.css 的 2695行替换为了下面这些,变为彩虹色
/* 彩虹色区分大纲中的各级标题modified by.laomao */
/* 文档标题 */
.file-tree ul.b3-list.b3-list--background [data-type="NodeDocument"][data-treetype="outline"] .b3-list-item__text,
.file-tree ul.b3-list.b3-list--background [data-type="NodeDocument"][data-treetype="outline"]{
font-weight: 600;
/* opacity: 0.95; */
color:#3ef5dd;
}
.file-tree ul.b3-list.b3-list--background [data-subtype="h1"] .b3-list-item__text,
.file-tree ul.b3-list.b3-list--background [data-subtype="h1"]{
font-weight: 600;
/* opacity: 0.95; */
color:rgba(255, 0, 0, 0.6);
}
.file-tree ul.b3-list.b3-list--background [data-subtype="h2"] .b3-list-item__text,
.file-tree ul.b3-list.b3-list--background [data-subtype="h2"]{
opacity: 1;
font-weight: 600;
color:rgba(255, 149, 0, 0.5);
}
.file-tree ul.b3-list.b3-list--background [data-subtype="h3"] .b3-list-item__text,
.file-tree ul.b3-list.b3-list--background [data-subtype="h3"] {
opacity: 1;
font-weight: 600;
color:rgba(242, 255, 0, 0.5);
}
.file-tree ul.b3-list.b3-list--background [data-subtype="h4"] .b3-list-item__text,
.file-tree ul.b3-list.b3-list--background [data-subtype="h4"]{
opacity: 1;
color:rgba(0, 255, 47, 0.5);
}
.file-tree ul.b3-list.b3-list--background [data-subtype="h5"] .b3-list-item__text,
.file-tree ul.b3-list.b3-list--background [data-subtype="h5"]{
opacity:1;
color:rgba(0, 157, 255, 0.5);
}
.file-tree ul.b3-list.b3-list--background [data-subtype="h6"] .b3-list-item__text,
.file-tree ul.b3-list.b3-list--background [data-subtype="h6"]{
opacity: 1;
color:rgba(213, 0, 255, 0.5);
}
.file-tree .b3-list--background .b3-list-item .b3-list-item__text:hover {
color: var(--b3-menu-highlight-color) !important;
}
.file-tree .b3-list--background .b3-list-item--focus .b3-list-item__text {
color: inherit !important;
opacity: 1 !important;
}
20210921,Z:\softwaredatabase\SiYuan\conf\appearance\themes\sea\theme.css
设置 → 外观 → 暗黑模式下使用主题:sea
找到文件 conf\appearance\themes\sea\theme.css ,先备份一下这个文件,以免后面出问题
大概 700 行上下,改为下面内容,重启(?)思源笔记即可
/* background-color:rgba 是按照彩虹色“红橙黄绿蓝靛紫”改的 20210921by.laomao */
【Tsundoku】v0.8.9 预告:我又双叒叕大更新了 - 折叠功能显示大优化 - 链滴 @HTTP 这个还是比较赞的。
使各个功能面板间隔完全相等
终于找到了使个功能面板间隔完全相等的解决方案了
将 --custom-panel-distance 设置为间隔宽度, 将 --custom-separator-distance-compensation 设置为间隔宽度的复数
.layout__resize {
cursor: row-resize;
margin: var(--custom-separator-distance-compensation) 0;
height: var(--custom-panel-distance);
width: 100%;
position: relative;
z-index: 2;
}
.layout__resize--lr {
cursor: col-resize;
width: var(--custom-panel-distance);
margin: 0 var(--custom-separator-distance-compensation);
height: auto;
}
网站 icon 图标——网站超链接图标在思源笔记中如何展现
【icon 集市】添加 Tsunodoku icon - 链滴 @HTTP
Theme Themes link icon · 语雀 @HTTP
/conf/themes/主题名字/src 里面,提醒一下,你下载了 icon,还需要在主题加 css 才生效,所以如果确实需要这样的话,你真的写一个批量下载和生成 css 的脚本 。具体去看我主题源码就知道了
本地磁盘文件 src
批量下载网站 icon 图标
生成.css 片段
/* ----------------------------下面这些是我自己添加的 by.laomao------------------------------- */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="gig.cas.cn"]:not(:empty)::before,
.b3-typography a[href *="gig.cas.cn"]::before{
content: "";
background-image: url('src/laomao/gig.cas.cn.png');
}
注意,此处的数字 1-6 在 notepad++ 里面编辑时,可能不能正常显示,导致 css 文件也不能正常地起作用,解决办法:notepad++ 中,设置 → 语言格式设置 → 勾选“使用全局字体”(字体使用“Consolas”这个可能是非必需),或者使用其它文本编辑器编辑 css 文件。
后来我觉得这种字体的数字太小了,然后就用键盘输入常见的 1-6 。
!!!⚠ 注意:此处的 1-6 数字只是在这个主题里面能看到,当你切换主题之后,就看不到了,导出的 Word 或者 PDF 也没有这些数字。
思源群群友 QQ1278181644 根据主题 Tsundoku 找到了一种分辨不同等级标题的方案 Ubuntu Pastebin https://paste.ubuntu.com/p/m58jGz52CC/
效果:
/* 思源群群友 QQ1278181644 根据主题 Tsundoku 找到了一种分辨不同等级标题的方案
Ubuntu Pastebin https://paste.ubuntu.com/p/m58jGz52CC/
标题前显示标题级别 */
/* ----------------标题样式 H1---------------- */
.protyle-wysiwyg [data-node-id].h1:before, .b3-typography h1:before {
content:"¹";
display: block;
float: left;
margin-right: 8px;
}
/* 调整 h1 的空行提示 */
.protyle-wysiwyg .h1>[spellcheck="false"]:focus:empty {
padding-left: 1rem;
}
/* ----------------标题样式 H2---------------- */
.protyle-wysiwyg [data-node-id].h2:before, .b3-typography h2:before {
content:"²";
display: block;
float: left;
margin-right: 8px;
}
/* 调整 h2 的空行提示 */
.protyle-wysiwyg .h2>[spellcheck="false"]:focus:empty {
padding-left: 1rem;
}
/* ----------------标题样式 H3---------------- */
.protyle-wysiwyg [data-node-id].h3:before, .b3-typography h3:before {
content:"³";
display: block;
float: left;
margin-right: 8px;
}
/* 调整h3的空行提示 */
.protyle-wysiwyg .h3>[spellcheck="false"]:focus:empty {
padding-left: 1rem;
}
/* ----------------标题样式 H4---------------- */
.protyle-wysiwyg [data-node-id].h4:before, .b3-typography h4:before {
content:"⁴";
display: block;
float: left;
margin-right: 8px;
}
/* 调整 h4 的空行提示 */
.protyle-wysiwyg .h2>[spellcheck="false"]:focus:empty {
padding-left: 1rem;
}
/* ----------------标题样式 H5---------------- */
.protyle-wysiwyg [data-node-id].h5:before, .b3-typography h5:before {
content:"⁵";
display: block;
float: left;
margin-right: 8px;
}
/* 调整 h5 的空行提示 */
.protyle-wysiwyg .h5>[spellcheck="false"]:focus:empty {
padding-left: 1rem;
}
/* ----------------标题样式 H6---------------- */
.protyle-wysiwyg [data-node-id].h6:before, .b3-typography h6:before {
content:"⁶";
display: block;
float: left;
margin-right: 8px;
}
/* 调整 h6 的空行提示 */
.protyle-wysiwyg .h6>[spellcheck="false"]:focus:empty {
padding-left: 1rem;
}
emojis 图标素材 svg png
"【思源笔记】分享超全的自定义 emoji"(Achuan-2, 2021);《Achuan-2_2021_【思源笔记】分享超全的》@HTML
- Rush/Font-Awesome-SVG-PNG: Font Awesome split to individual SVG and PNG files of different sizes along with Node.JS based generator@HTTP
- ByteDance IconPark@HTTP
bytedance/IconPark: Transform an SVG icon into multiple themes, and generate React icons,Vue icons,svg icons@HTTP
说明 Docs@HTTP - Bad title - Wikimedia Commons@HTTP
- OpenMoji@HTTP
hfg-gmuend/openmoji: Open source emojis for designers, developers and everyone else!@HTTP
widgets 挂件
经验
挂件以文件夹的形式放入文件夹“data\widgets”中,然后就可以在浏览器中访问网址 http://127.0.0.1:6806/widgets/【挂件文件夹名】/,达到在浏览器中访问挂件的目的
挂件就是 Web 应用, 前端技术栈
前端教程全套合集
挂件 · Issue #1488 · siyuan-note/siyuan@HTTP
88250/Stairway-To-Heaven@HTTP Stairway-To-Heaven-main 思源笔记挂件块样例,
挂件工具包
2234839/siyuan_api_cache_lib@HTTP
drawio 挂件
流程图,笔记随便画,手写板,各种图形,脑图加强版
这个做出来的思维导图,可以以 iframe 嵌入、HTML 嵌入或者截图的形式放在思源中,推荐以 iframe 嵌入放在思源中,这样方便修改
将“drawio.zip”解压,放到文件夹“\data\widgets”下面
新建插图:shift 右边那个键 → 挂件 → drawio
修改插图:在原来那个图上修改
保存修改(新建、修改之后需要执行这个):导出为 → 嵌入 → IFrame → 创建 → 复制 → 在思源笔记中另起一行,执行 quicker 的“规范粘贴卍”,将原来的图删除即可
喜好 → 主题 → Sketch 【这个主题比较好】
Diagram Software and Flowchart Maker@HTTP
jgraph/drawio: Source to app.diagrams.net@HTTP
Release 15.4.0 · jgraph/drawio-desktop@HTTP
Excalidraw 手绘风格白板工具
excalidraw/excalidraw: Virtual whiteboard for sketching hand-drawn like diagrams@HTTP
<a href="https://excalidraw.com/"> Excalidraw | Hand-drawn look & feel • Collaborative • Secure@HTTP 软件地址
<a href="https://http://excalidraw.mebtte.com/"> Excalidraw@HTTP 中文手写体地址
Excalidraw 部署在 Ubuntu 虚拟机中
终端执行命令
git clone https://github.com/excalidraw/excalidraw.git
sudo apt-get install nodejs-dev node-gyp libssl1.0-dev
sudo apt-get install npm
sudo npm install -g yarn
升级nodejs版本
sudo npm install n -g
sudo n stable
重新打开终端,验证node版本
node --version
在home\excalidraw 文件夹上右击“Open in Terminal”
yarn
yarn start
浏览器会打开
http://localhost:3000
Zwibbler: The Javascript Whiteboard that lets users Draw on your Website@HTTP
Lilystudy/zwibbler: zwibbler draw@HTTP 可以作为简易版挂件
note-views 挂件
日历视图可以在日历中查看做的笔记
siyuan-note/widgets/note-views at main · langzhou/siyuan-note@HTTP
- 下载挂件文件夹 note-views ,并放置在思源笔记
data/widgets
目录下,操作后目录结构为data/widgets/note-views
- 在文档中插入 iframe 内容块(编辑器内输入/iframe)
- 获得 iframe 内容块的 ID,方法:在 iframe 块上
右键菜单-复制-复制块超链接
得到链接siyuan://blocks/20210512214532-tf8tlbt
,其中blocks/
后的字符串便是内容块 ID - 设置 iframe 链接:点击 iframe 块图标,在弹出菜单中选择「资源」,在输入框中填入:http://127.0.0.1:6806/widgets/note-views/?blockid=XXX,其中 XXX 为上个步骤中得到的内容块 ID
- 设置完成
- 如果想要拓展优先级或待办类型的显示,可编辑挂件文件夹下的
config.json
文件,如下所示:
{
"danger": ["紧急","重要","高优先级","高","high","important"],
"warning": ["问题","进行中","中优先级","中","medium"] ,
"success": ["完成","低优先级","低","low"],
"primary": ["待办","todo"]
}
- 如果想自定义检索内容(不想展示挂件文件夹下内容),可以点击设置按钮输入 SQL 语句。注意:请保持查询结果字段包含 blocks 表头,不然可能会展示失败。
Little Things 挂件【这个没有运行成功】
siyuan-note/widgets/little-things at main · langzhou/siyuan-note@HTTP
使用方法
- 下载挂件文件夹 little-things ,并放置在思源笔记
data/widgets
目录下 - 在文档中插入 iframe 内容块(编辑器内输入/iframe)
- 获得 iframe 内容块的 ID,方法:在 iframe 块上
右键菜单-复制-复制块超链接
得到链接siyuan://blocks/20210512214532-tf8tlbt
,其中blocks/
后的字符串便是内容块 ID - 设置 iframe 链接:点击 iframe 块图标,在弹出菜单中选择「资源」,在输入框中填入:http://127.0.0.1:6806/widgets/little-things/?blockid=XXX,其中 XXX 为上个步骤中得到的内容块 ID
- 设置完成后挂件将自动搜索其所在文件夹下所有文档中带有待办状态的内容块
- 设置待办状态的几种方法:
- 直接在内容块中输入
@todo
- 内容块输入
@yyyymmdd
或者@yyyy-mm-dd
,即可识别为截止日期。建议结合模板快捷输入,比如创建@today
的模板,快捷的插入当前日期 - 打开 内容块属性面板,待办事项请添加属性
lz-todo
,支持的类型包括 inbox、doing、someday、done,优先级请输入lz-priority
,支持的类型包括 P0-P3
- 结合 toy 主题可以在文档中直观的看到待办和优先级状态
Brython editor v0.1.0-离线编辑并运行的 python 的编辑器(无需配置环境即)
Brython Editor: 思源笔记的一个可编辑并运行 Python 脚本的挂件 - 链滴 @HTTP
Tiny Widget 挂件,作者正在制作
langzhou/siyuan-note: 思源笔记美化教程 @HTTP
Tiny Widget(todo):集成了多个小部件,包括进度条、5 级评星、文档内目录 TOC 等
luck 热力图挂件
<iframe src="widgets/luck" data-src="" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="width: 1000px; height: 500px; transform:scale(0.8)"></iframe>
时间挂件 Clock-PacbyAchuan-2
【Widget】时间挂件 Clock-Pac by Achuan-2 - 链滴 @HTTP
图表、公式
Chart 图表
JavaScript 对象转 JSON - 一个工具箱 - 好用的在线工具都在这里!@HTTP
KaTex 输入公式
思源笔记数学公式渲染引擎只有 katex
"词云板:阅读标签、常用语、LaTeX 输入-quicker"
Latex/MathJax/Katex 数学公式手册 @HTTP (佚名, 2021) 这个格式最符合思源(KaTex)
在线 LaTeX 公式编辑器-帮助文档 @HTTP (佚名, 2021) 看这两个足够
LaTeX 公式手册(全网最全) - 樱花赞 - 博客园 @HTTP (佚名, 2021)
Supported Functions · KaTeX@HTTP
(7 条消息) KaTeX 数学公式语法_李乾文的专栏-CSDN 博客 @HTTP
TeX,LaTeX 和 KaTeX 简介_wobushisongkeke 的博客-程序员宅基地_latex 和 katex - 程序员宅基地 @HTTP 直接看最后结论
MathType demo - For Developers@HTTP
# % ^ & _ { } ~ \ 在 LaTeX 环境中是保留字符,如果确实需要,在其前面加入 `\` 反斜杠或其它转义符
\转义,可以用英语单词代表希腊字母,甚至符号
_下标
^上标
{表示这是一个整体}
\空格,输入空格
\color{标准颜色名}{内容}
\mathit{斜体 Italics}
\mathbf{粗体 Boldface}
\mathrm{罗马体 Roman typeface}
\mathrm{A} \mathrm{B}
\boldsymbol{\mathrm{A} \mathrm{B}}
\[x^{y^z}=(1+{\rm e}^x)^{-2xy^w}\]
$x^{y^z}=(1+{\rm e}^x)^{-2xy^w}$
这两个公式粘贴在Word中(正常输入的文字),然后选中,点击MathType插件→发布→切换TeX,即可显示为公式
上面两个公式掐头去尾(“\[”或者“$”)
x^{y^z}=(1+{\rm e}^x)^{-2xy^w}
贴入思源笔记的公式块,即可显示为公式
或者直接输入
$x^{y^z}=(1+{\rm e}^x)^{-2xy^w}$
即可显示为公式
\mathit{斜体 Italics}\mathbf{粗体 Boldface}\mathrm{罗马体 Roman typeface}\mathrm{A} \mathrm{B} \
\begin{array} {|c|c|c|} \hline \color{black}{黑色(\text{black})} & \color{red}{红色(\text{red})} & \color{yellow}{黄色(\text{yellow})} \\ \hline \color{blue}{蓝色(\text{blue})} & \color{grey}{灰色(\text{grey})} & \color{navy}{藏青色(\text{navy})} \\ \hline \color{green}{绿色(\text{green})} & \color{purple}{紫色(\text{purple})} & \color{maroon}{紫红色(\text{maroon})} \\ \hline \color{olive}{橄榄绿(\text{olive})} & \color{teal}{蓝绿色(\text{teal})} & \color{silver}{银色(\text{silver})} \\ \hline \color{lime}{浅绿色(\text{lime})} & & \\ \hline \end{array}\
\begin{array} {|c|c|c|}
\hline
\color{black}{黑色(\text{black})} & \color{red}{红色(\text{red})} & \color{yellow}{黄色(\text{yellow})} \\
\hline
\color{blue}{蓝色(\text{blue})} & \color{grey}{灰色(\text{grey})} & \color{navy}{藏青色(\text{navy})} \\
\hline
\color{green}{绿色(\text{green})} & \color{purple}{紫色(\text{purple})} & \color{maroon}{紫红色(\text{maroon})} \\
\hline
\color{olive}{橄榄绿(\text{olive})} & \color{teal}{蓝绿色(\text{teal})} & \color{silver}{银色(\text{silver})} \\
\hline
\color{lime}{浅绿色(\text{lime})} & & \\
\hline
\end{array}
参考
MathJax 使用 LaTeX 语法编写数学公式教程 - 作业部落 Cmd Markdown 编辑阅读器
MathJax 中文文档 — MathJax Chinese Doc 2.0 documentation
MyScript Webdemo@HTTP 在线编辑公式
templates 模板片段
模板功能使用方法:
在一个空白的页面中将数值(比如 iframe)调好,然后导出为模板,之后直接引这个模板就好了
模板可以结合挂件使用,减少配置步骤
【有个gif太大,无法上传,悲催!】
模板展示
NoteBook-Input-MultiKeywords_KY
我最近在前面几个大咖的基础上做了一个模板,在一个页面第一行输入几个关键词,可以引入模版,就可以自动把这整个笔记本的全部关键词都汇总到当前页面。因为有时候打标签也麻烦,而且不可能打那么多标签,所以我更喜欢用关键词来查询汇总。尤其是某个笔记本的全部关键词汇总。
边学边改的,花了一个多星期搞定。。。不知道大家有没有这样的需求,有的话,我就看看能否也挂到集市上。
在前面几个大佬的基础上修改的。如何识别本笔记本并且排除本页面尝试了好久,如何提取关键词并进行判断也搞了很久,查阅了全部 sprig 函数,并且把 go 语言的语法都浏览了一遍,后来发现这个模板里很多 go 语言语法是不支持的,只有模板引擎里的是支持的。
先传到群里吧。
查询注意:查询本笔记本中的全部关键词笔记并汇总(排除本页面),关键词最多不能超过 6 个,关键词的设置方式为在笔记的第一行输入:keyword,关键词 1,关键词 2,关键词 3,keyword,需要查询几个关键词输入几个且用英文逗号隔开,中间不要有空格,关键词前后加上 keyword。
像这样,查询这个页面所在的整个笔记本。
其他笔记本不查询。
汇总子文档标题
群文件 toc.zip ,解压到 data 里的 template 就可以了
效果是这样的
toc_link.md 思源链接形式 siyuan://
;总结子文档(包含子文档的子文档...)
toc_link_one_layer.md 思源链接形式 siyuan://
;总结子文档(只包含一层子文档)
toc_ref.md “引用块”的形式;总结子文档(包含子文档的子文档...)
toc_ref_one_layer.md“引用块”的形式;总结子文档(只包含一层子文档)
快捷键
自己做了些修改
不指定路径搜索 Ctrl+F
指定路径搜索 Ctrl+shift+G(Ctrl+shift+F 是输入法切换简繁)
全局搜索 Ctrl+shift+F 这个功能未知,并且无法将这个快捷键指定给其它功能
浏览器插件
一键剪藏演示
问答区
开发者模式
开发者模式(类似浏览器 F12)可以查看软件不同组间的变量名,帮助文档(更多 → 帮助)里主题那部分有提及
进入开发者模式之后可以先调样式,调好了之后,根据这个样式处理。
块多选页面滚动后选中块丢失问题
【BUG 反馈】块多选页面滚动后选中块丢失问题 - 链滴 @HTTP
从上向下或者从下向上选中一些内容块,并且页面滚动,滚动前选中的内容块都没再选中了。
目前只支持 选中一个块 然后 滑动屏幕 Shfit
选择另一个块,就和 Windows 默认的多选一样
升级版本有什么注意事项吗?
请关注官方公告。如果你没有时间了解每个版本的细节,请务必在升级前备份好整个工作空间文件夹后再安装新版本。
如何才能只换行不新起段落?
请使用 Shift+Enter。
如何才能只换行不新起段落? 关于这个能不能自定义将 直接 enter 和 Shift+Enter 的功能 换一下?
删除多余的资源文件
请问,笔记中把图片删除了,assets 中文件还在,应该怎么清除啊?
请问,这种引用怎么改为正文啊?
跳到开头按删除
如何取消 markdown 语法
各位大佬,请问怎么取消 markdown 斜体的语法呀,我记笔记是写指针用了两个*就自动给我变斜体了
前面加\*进行转义就可以了
最后,你如果需要我的软件配置之类的,欢迎小窗
思源笔记推荐码:578MMHg
To Be Continued.