在 Dokuwiki 当中接入 draw.io 的绘图

dfe5624d0afe5e8220b907e92766dd4b

作为一个工程师,我难免会在自己的博客 / Wiki 当中加入流程图、时序图之类的。因此,需要更加简单的绘图的方式。

过去往往是采用本地绘制好图片,然后再复制上传到 Wiki 当中。不过,随着 tldraw、draw.io 等一类在线绘图工具出现以后,大家开始习惯于在线绘制图片。

在使用飞书文档的时候,我觉得其中内嵌 Diagram.net 的服务体验很不错。

现在,在 Dokuwiki 当中你也可以实现类似的功能。安装 Dokuwiki 上的 drawio 插件,随后,在你们的编辑器当中就可以看到一个 Drawio 的图标,点击这个图片,就可以插入一个 Drawio 的图片引用

d2b5ca33bd970f64a6301fa75ae2eb22 17
Drawio 的图标

插入完成后,你可以在下方的输入框当中看到插入新的引用,此时你可以修改具体的文件名和对应的 namespace。

插入完成后,点击保存(也可以在预览中修改),保存成功后,你会看到一个 Start drawing by clicking here,点击这个图标,就可以在渲染出的新的 UI 当中绘制你想要的流程图。

d2b5ca33bd970f64a6301fa75ae2eb22 18

绘制完成后,点击右上角的保存,即可保存你绘制的流程图。

d2b5ca33bd970f64a6301fa75ae2eb22 19

此时,你的流程图就绘制好了,其他人看的时候也是你画好的流程图。

后续如果你需要编辑这个流程图,只需要在登录的状态下,点击绘制好的图片,就会自动进入到编辑的模式,允许你修改你的流程图。

以下是一个简短的视频介绍:

在 Dokuwiki 当中实现拖拽上传

dfe5624d0afe5e8220b907e92766dd4b

在 Dokuwiki 当中,如果你想要上传一个文件,需要先将文件通过媒体管理器上传到wiki当中,再将对应的媒体插入到对应的页面中,流程繁琐不说,还容易把文件上传到意料之外的地方。

不过,你可以通过安装第三方插件,来实现 Drag & Drop 拖拽上传。

d2b5ca33bd970f64a6301fa75ae2eb22 16

安装 Dokuwiki 的 Dropfiles 插件,你就可以开启在编辑 Dokuwiki 的同时,直接拖拽上传文件的体验。

同时,因为你上传时已经在文本编辑的状态,因此,你上传的文件也会自动按照 wiki 所在路径来上传,对于不支持分页管理的 dokuwiki 来说,是一个非常有用的 Feature。

此外,如果你安装了这个插件,我强烈你开启 insertFileLink 这个选项,开启后,你拖拽上传的文件链接将会自动插入到当前文件中,十分方便。

在 Dokuwiki 上实现反向链接的展示

dfe5624d0afe5e8220b907e92766dd4b

Wiki 的一般用法是正向的链接到某个特定的页面,即所谓的正向链接。

但反向链接可以帮我们更好的对信息进行汇总和分析 —— 比如我们可以知道哪些地方引用了当前的 wiki 页面,从而实现更好的组织不同的信息。

想要在 Dokuwiki 当中实现这样的效果,需要使用一个第三方插件 —— Backlinks

d2b5ca33bd970f64a6301fa75ae2eb22 14

安装上这个插件后,你只需要在想要展示反向链接的地方插入{{backlinks>.}}就可以展示当前页面的反向链接。

不过,如果你想要达成比较好的效果,可以选择像我一样,建设一个 Side bar ,并在 Side bar 当中展示具体的反向链接,这样在具体看效果的时候,非常的简单和明确。

d2b5ca33bd970f64a6301fa75ae2eb22 15

如何在 Dokuwiki 当中隐藏掉外部链接前的 Icon

dfe5624d0afe5e8220b907e92766dd4b

Dokuwiki 在链接外部网站时,默认会在链接前展示一个地球的小图标。但如果你和我一样,觉得这个小图标有点碍眼,则可以尝试通过添加 CSS 来隐藏前面的小地球。

d2b5ca33bd970f64a6301fa75ae2eb22 12

你只需要在 /conf 文件夹下创建一个 userstyle.css 的文件,并在其中添加对应的 CSS

.page a.urlextern,
.page a.interwiki,
.page a.windows,
.page a.mail,
.page a.media {
  padding-left: 0 !important;
  background: none !important;
}
Code language: CSS (css)

添加完后,执行 Shift + Control + R 来强制刷新 CSS,刷新完成后,就可以看到没有小地球的连接了。

d2b5ca33bd970f64a6301fa75ae2eb22 13

在 Dokuwiki 中配置安全规则,来保护配置和数据文件

dfe5624d0afe5e8220b907e92766dd4b

由于 dokuwiki 的文件路径默认会放在 data/conf/bin 等几个目录当中,如果你不对相应的文件进行保护,如果某个人是了解 dokuwiki 的情况下,它可以越过你的 dokuwiki ,直接读取 wiki 的内容。

而你没有进行保护的时候,Dokuwiki也会在配置当中展示你的配置不安全。

d2b5ca33bd970f64a6301fa75ae2eb22 11

想要开启 Nginx 的保护,你需要在 Nginx 的配置文件当中,添加如下代码。

 location ~ /(data|conf|bin|inc|vendor)/ {
      deny all;
 }
Code language: JavaScript (javascript)

添加完成后,执行如下命令来重启 Nginx,使命令生效。

nginx -t 
nginx -s reload

生效成功后,再次刷新,就可以看到提示已经消失了。同时如果你直接访问 data 目录下的数据文件,也会直接报错。

Dokuwiki 配置 Rewrite 优化路径显示

dfe5624d0afe5e8220b907e92766dd4b

Dokuwiki 在生成 URL 的时候,支持生成三种不同的 URL:

  • Rewrite 版: /wiki:welcome?do=admin&page=config
  • dokuwiki 控制版: /doku.php/start?do=admin&page=config
  • 默认版:/doku.php?id=start&do=admin&page=config

配置 Rewrite 可以让你的 wiki 的路径更加简单的和明确,屏蔽语言信息,因此,一般而言,都建议大家配置上对应的 rewrite 规则。

在 Nginx 你的 Host 配置下加入如下规则,来实现 Rewrite 的转发


    location / { try_files $uri $uri/ @dokuwiki; }
 
    location @dokuwiki {
        rewrite ^/_media/(.*) /lib/exe/fetch.php?media=$1 last;
        rewrite ^/_detail/(.*) /lib/exe/detail.php?media=$1 last;
        rewrite ^/_export/([^/]+)/(.*) /doku.php?do=export_$1&id=$2 last;
        rewrite ^/(.*) /doku.php?id=$1&$args last;
    }
Code language: JavaScript (javascript)

添加完成后可以执行如下命令来重启 Nginx

nginx -t 
nginx -s reload

再回到 Dokuwiki 后台的配置管理器,找到 userewrite 这一项配置,将其配置为使用.htaccess,并保存,即可将 dokuwiki 默认生成的 URL 变成一个更加干净的 URL。

Dokuwiki 忘记密码了怎么办?

dfe5624d0afe5e8220b907e92766dd4b

我的个人 Wiki 系统是 Dokuwiki 。相比于别的 Wiki ,Dokuwiki 轻量的同时,功能齐全,帮助我在 TiddlyWiki 和 MediaWiki 之间找到了一个平衡。

我在使用 Tiddly Wiki 的时候,会遇到忘记密码的情况,这种情况下,就需要对 Dokuwiki 进行密码重置的操作。

如果你和我一样,关闭了 Dokuwiki 的任意人可上传,则需要通过修改具体的 auth 文件来完成。

Dokuwiki 的用户授权信息放置在 conf/users.auth.php 文件当中,你需要在服务器上打开这个文件,并在其中添加如下信息

deleteme:$1$4fd0ad31$.cId7p1uxI4a.RcrH81On0:-:-:admin,user 
Code language: JavaScript (javascript)

添加完成后,你将会获得一个名为 deleteme,密码为admin 的用户,接下来你只需要使用这个用户登录到你的 Dokuwiki 当中,并在管理当中的「用户管理器」中修改之前的用户的账号密码。

d2b5ca33bd970f64a6301fa75ae2eb22 9

在用户管理器当中可以修改对应的用户的密码。

修改完成后,使用之前的用户登录,并删除之前的用户即可。

d2b5ca33bd970f64a6301fa75ae2eb22 10