以trilium分享功能搭建个人博客 - 我的笔记

以trilium分享功能搭建个人博客

前言※※

前段时间，Github 有个大佬在 Trilium 提交了一个 pr，最为关键的新增功能是为 Trilium 增加了 ~shareTemplate 属性，起初我对这个功能并没有多少注意，但是最近研究了下简直像是挖到了宝藏一样兴奋！

简单来说，这个功能是对 Trilium 笔记分享功能的一个巨大提升，原本的分享功能实在过于简陋，但是现在可以使用 ~shareTemplate 使用自定义的分享模板（EJS）。也就意味着现在 Trilium 不仅仅是后端服务器，甚至可以写一个前端模板，使 Trilium 成为一个完整的博客系统！

本站就是以 Trilium 分享功能为基础搭建的博客，欢迎参观。

计划实现的功能※※

实现原理※※

搭建一个博客，无非就是三大件：HTML、CSS 和 JS。在 trilium 中可以在分享根节点上赋予 ~shareTemplate 、 ~shareJs 、shareCss 属性分别实现，注意这几个属性一定要设置为 inheritable 。

~shareTemplate※※

该属性用于创建 html 模板，具体的代码细节就不说了，大概就是分享的根笔记中添加 ~shareTemplate(inheritable)=<xxx> 关系，其中<xxx>是一个 Embedded JavaScript(EJS) 笔记，EJS 是一种模板语言，支持将 JavaScript 动态渲染到网页上。如果具有子模块，也会通过 include 方法自动附加。

一个模板结构有可能像是这样：

- myPage.ejs
  - toc.ejs
  - menu.ejs

Copy

一个标准的模板文件(.ejs)可以参考下官方仓库的这个文件：page.ejs ，这是官方分享功能的模板页面，功能比较基础。在模板被渲染时，模板中会传入笔记参数，有几个比较关键的变量如下：

  • note - 当前渲染的笔记
  • subnote - 分享的根笔记
  • content - 笔记内容
  • isEmpty - 笔记是否为空

其中 note 和 subnote 拥有一些属性和方法，详细属性或方法可阅读源码，或 TriliumApi - Fnote 。

~shareJs※※

该属性用于创建分享界面所需要的 js 脚本，比如一些按钮事件、点击事件、初始化等，使用方法同样是通过 ~shareJs(inheritable)=<xxx> 引用一个 js 前端脚本。

~shareCss※※

该属性用于创建分享界面所需要的 CSS 样式 ，通过 ~shareCss(inheritable)=<xxx> 引用一个 CSS 样式文件。

搭建评论系统※※

之前使用的是 Twikoo 评论系统，已经在 MongoDB 云数据库和 Vercel 部署好了，所以可以直接拿来用。Twikoo 支持使用 CDN 方式引入，那么我们直接在模板中引入即可。

<div id="tcomment"></div>
<script src="https://cdn.staticfile.org/twikoo/1.6.26/twikoo.all.min.js"></script>
<script>
	twikoo.init({
	envId: '', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
	el: '#tcomment', // 容器元素
	// region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
	// path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
	// lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
	})
</script>

Copy

发表&迁移博客※※

之前部署的 Hexo + githubPage + Vercel 的静态博客，所有博客均在 trilium 中完成，所以在 trilium 中发表&迁移博客变的非常简单！

Hexo 支持一键推送到 github，但是博客与笔记之间总有一种割裂感：

  • 要考虑图片的存储和备份
  • 不方便随时修改
  • 笔记 → 博客 需要处理格式

虽然写过一个脚本一键转换笔记格式：[missing note] ，但实际体验下来还是略显繁琐。

但现在分享博客和写笔记之间完全是无缝的体验，下面是我当前的笔记(博客目录)结构：

每一级笔记代表一个目录（目前只支持一级目录），如果有需要发表的博客直接把笔记clone到对应的文件夹下面即可。

反向代理※※

Trilium 共享出的地址比较长，类似这样：https://localhost:8080//share/AmTnScaLvxtE ，作为一个博客，这样的地址实在不太好看。所以需要做一些配置。

首先需要在分享的根目录中添加 #shareRoot 标签，这会让地址的可读性变强、并且使其成为网站的根节点。

随后使用Nginx或caddy进行反向代理，我使用的是caddy2，配置类似如下：

网址 {
  @notShare {
    not path /share*
  }
  rewrite @notShare /share{uri}
  reverse_proxy localhost:8080
}

Copy

结语※※

花了几天时间做的模板，当然很多地方还可以优化。

trilium 的这个新功能打通了我理想中的知识管理体系：收集 → 内化 → 分享。接下来可以安心写笔记分享博客折腾下一个玩具了。


以trilium分享功能搭建个人博客

前言※※

前段时间，Github 有个大佬在 Trilium 提交了一个 pr，最为关键的新增功能是为 Trilium 增加了 ~shareTemplate 属性，起初我对这个功能并没有多少注意，但是最近研究了下简直像是挖到了宝藏一样兴奋！

简单来说，这个功能是对 Trilium 笔记分享功能的一个巨大提升，原本的分享功能实在过于简陋，但是现在可以使用 ~shareTemplate 使用自定义的分享模板（EJS）。也就意味着现在 Trilium 不仅仅是后端服务器，甚至可以写一个前端模板，使 Trilium 成为一个完整的博客系统！

本站就是以 Trilium 分享功能为基础搭建的博客，欢迎参观。

计划实现的功能※※

实现原理※※

搭建一个博客，无非就是三大件：HTML、CSS 和 JS。在 trilium 中可以在分享根节点上赋予 ~shareTemplate 、 ~shareJs 、shareCss 属性分别实现，注意这几个属性一定要设置为 inheritable 。

~shareTemplate※※

该属性用于创建 html 模板，具体的代码细节就不说了，大概就是分享的根笔记中添加 ~shareTemplate(inheritable)=<xxx> 关系，其中<xxx>是一个 Embedded JavaScript(EJS) 笔记，EJS 是一种模板语言，支持将 JavaScript 动态渲染到网页上。如果具有子模块，也会通过 include 方法自动附加。

一个模板结构有可能像是这样：

- myPage.ejs
  - toc.ejs
  - menu.ejs

Copy

一个标准的模板文件(.ejs)可以参考下官方仓库的这个文件：page.ejs ，这是官方分享功能的模板页面，功能比较基础。在模板被渲染时，模板中会传入笔记参数，有几个比较关键的变量如下：

  • note - 当前渲染的笔记
  • subnote - 分享的根笔记
  • content - 笔记内容
  • isEmpty - 笔记是否为空

其中 note 和 subnote 拥有一些属性和方法，详细属性或方法可阅读源码，或 TriliumApi - Fnote 。

~shareJs※※

该属性用于创建分享界面所需要的 js 脚本，比如一些按钮事件、点击事件、初始化等，使用方法同样是通过 ~shareJs(inheritable)=<xxx> 引用一个 js 前端脚本。

~shareCss※※

该属性用于创建分享界面所需要的 CSS 样式 ，通过 ~shareCss(inheritable)=<xxx> 引用一个 CSS 样式文件。

搭建评论系统※※

之前使用的是 Twikoo 评论系统，已经在 MongoDB 云数据库和 Vercel 部署好了，所以可以直接拿来用。Twikoo 支持使用 CDN 方式引入，那么我们直接在模板中引入即可。

<div id="tcomment"></div>
<script src="https://cdn.staticfile.org/twikoo/1.6.26/twikoo.all.min.js"></script>
<script>
	twikoo.init({
	envId: '', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
	el: '#tcomment', // 容器元素
	// region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
	// path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
	// lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
	})
</script>

Copy

发表&迁移博客※※

之前部署的 Hexo + githubPage + Vercel 的静态博客，所有博客均在 trilium 中完成，所以在 trilium 中发表&迁移博客变的非常简单！

Hexo 支持一键推送到 github，但是博客与笔记之间总有一种割裂感：

  • 要考虑图片的存储和备份
  • 不方便随时修改
  • 笔记 → 博客 需要处理格式

虽然写过一个脚本一键转换笔记格式：[missing note] ，但实际体验下来还是略显繁琐。

但现在分享博客和写笔记之间完全是无缝的体验，下面是我当前的笔记(博客目录)结构：

每一级笔记代表一个目录（目前只支持一级目录），如果有需要发表的博客直接把笔记clone到对应的文件夹下面即可。

反向代理※※

Trilium 共享出的地址比较长，类似这样：https://localhost:8080//share/AmTnScaLvxtE ，作为一个博客，这样的地址实在不太好看。所以需要做一些配置。

首先需要在分享的根目录中添加 #shareRoot 标签，这会让地址的可读性变强、并且使其成为网站的根节点。

随后使用Nginx或caddy进行反向代理，我使用的是caddy2，配置类似如下：

网址 {
  @notShare {
    not path /share*
  }
  rewrite @notShare /share{uri}
  reverse_proxy localhost:8080
}

Copy

结语※※

花了几天时间做的模板，当然很多地方还可以优化。

trilium 的这个新功能打通了我理想中的知识管理体系：收集 → 内化 → 分享。接下来可以安心写笔记分享博客折腾下一个玩具了。