将思维导图mind-map嵌入wordpress网站的全过程(持续更新)
- 文档
- 2024-01-26
- 208热度
- 4评论
问题起源
我想写小说,想要写大纲,所以想在网站实现思维导图的功能。
在git上找到了开源的思维导图:https://github.com/wanglin2/mind-map
它的界面看起来非常美好,但是好像打开保存的是本地的文件。我想加打开云端数据的按钮,它会弹出一个对话框,让用户选择数据库中当前账号下的思维导图,打开它。
保存也希望能保存到wp的数据库中。
这个思维导图的项目文件类型就是json,我想可以将json转化成字符串,直接保存成文章的内容。
实现过程
将思维导图嵌入页面
用container直接嵌入
git上的思维导图在打包后形成index.html和dist文件夹,dist文件夹下有一堆css和js。
我将index.html改写成php的样式,放在template文件夹下:
具体来说,在script前面加上:
在最后加上
中间,由于index.html在引用css和js时,采用的都是绝对路径,例如:
我们需要把它改成相对路径,利用wordpress定义的get_template_directory_uri()函数,可以获取到主题所在的目录。这样上面的例子要改成:
然后,需要在主题的include/config.php中,声明这个新的思维导图页面模板:
css问题
嵌入以后发现css样式不对,顶部工具被挡住了,右键菜单的字体和颜色也不对。
这是因为模板调用的css优先级比样式表的css优先级要低,导致被样式表里的*开头的万用样式代替了。
因此,修改css样式表,在通用样式 *{} 的后面加上:
样式就正常了。
vue2 nodejs 部署
参考 https://zhuanlan.zhihu.com/p/349318513
https://www.runoob.com/w3cnote/nvm-manager-node-versions.html
部署nodejs时需要注意版本,这个wanglin2/mind-map使用的是17以及以下的nodejs。
我采用了nvm管理nodejs的版本,选择了16的nodejs。
由于中间有个库的版本对不上,所以在npm i时要加上--legacy-peer-deps
为了方便测试,我先将wanglin2/mindmap部署在了本地,然后再npm run serve后,可以在http://localhost:8080 访问到思维导图的页面。
修改vue代码,添加几个按钮
wanglin2/mind-map中,采用了woff的图标。我在网上找了一个在线的工具,可以打开查看他提供的woff和ttf图标文件。
https://segmentfault.com/a/1190000020121850
在mind-map项目中,上方的按钮在Toolbar.vue中。在html部分加入:
这里添加了一条竖线+3个按钮,其中在线导入、在线另存的功能需要加弹窗,而直接在线保存的功能不需要弹窗。
对于需要弹窗的在线导入导出功能,在scripts中加入:
然后,新建ImportOnline.vue文件,内容为:
对于另存数据,我在另存的窗口中加了输入标题的输入框和保存按钮。
新建ExportOnline.vue文件,template部分主要增加:
对应绑定的saveArticle函数内容:
回到最外层的Toolbar.vue文件,定义保存函数:
对于这几个按钮的图标,我直接使用了王林的思维导图应用中没用到的几个图标。
最后的效果:
定义wordpress文章格式用于存储思维导图json数据
我尝试过使用meta data,但是不太方便,不如直接改到正文。
我在wordpress中新建了一个分类叫mindmap,约定了思维导图对应的json内容转成的字符串要被放在[mindmap][/mindmap]中间。
其他的没什么好说的了,上面的vue中也写好了的。
身份验证
wordpress REST API接口
wordpress提供了REST API接口,在其它应用中可以通过对特定链接发送http请求,获取信息。我基于该接口实现思维导图的读取 保存等功能。
相关文档地址:
https://developer.wordpress.org/rest-api/requests/
但是默认的REST API接口不带身份验证的功能,因此我在wordpress中安装了插件。
在wordpress安装插件的页面,可以搜到三个插件,分别是:
- JWT Auth: https://cn.wordpress.org/plugins/jwt-auth/
- JWT Authentication for WP-API: https://cn.wordpress.org/plugins/jwt-authentication-for-wp-rest-api/
- WordPress REST API Authentication: https://cn.wordpress.org/plugins/wp-rest-api-authentication/
看时间的话,JWT Auth貌似已经过期了,最新支持6.1的WP;JWT Authentication for WP-API看起来支持6.4以上的WP,而WordPress REST API Authentication是付费插件,也不开源。
随后,在尝试过程中发现,JWT Authentication for WP-API没有方便在WP后台调用的生成令牌的函数,最后还是选择了JWT Auth,感觉内部代码更容易看懂。
WP在登录时发送cookie
我采用了wordpress的JWT Auth插件用于发放和验证JWT令牌。
在配置时,需要在wordpress的.htaccess文件中添加:
RewriteEngine on
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
同时,在wordpress的wp-config.php中添加:
define('JWT_AUTH_SECRET_KEY', '*****');
define('JWT_AUTH_CORS_ENABLE', true);
其中***
是我的jwt令牌。
值得注意的是,JWT Auth的文档并没有说这一段要加在哪,所以我加在了最后。然而这样最后生成的token是无效的。
这一段要加在原本自有的Authorization相关密钥的旁边,在WP相关配置函数启动之前!!
同时我利用了wordpress的wp_login钩子,实现在wordpress登录时发放一个JWT令牌。
域名问题
问题:发放令牌后,发现cookie中的jwt_token的domain是raven.zone,这意味着我在vue调试中使用的localhost无法访问到这个token,同时它的httponly被设为√。
所以一方面在测试时要把domain设置成localhost,另一方面要去掉httponly的标志。参考:
https://blog.csdn.net/weixin_40686603/article/details/116188863
在查找资料以后,了解到php的setcookie函数可以直接指定域名和httponly等标志,因此将setcookie一句改成:
这样的话所有raven.zone的二级域名都能检索到该cookie,同时设置了httponly为false。
同时,可以通过改host等方法,将local.raven.zone解析成127.0.0.1,这样就可以用http://local.raven.zone:8889 访问到我本地的vue服务器,同时在这里可以拿到raven.zone发放的cookie。
我懒得改host,所以直接让dns服务器解析了local.raven.zone,效果也是一样的。
喔,还有,需要改vue的配置文件,不然访问不了local.raven.zone这个域名。具体代码待更新。
令牌报错
403 (Forbidden) -- JWT is not configurated properly, please contact the admin
https://github.com/Tmeister/wp-api-jwt-auth/issues/59
Rest API支持汇总
https://developer.wordpress.org/rest-api/requests/
vue应用提交请求
查阅文章
待更新
创建文章
待更新
修改文章
待更新
Risk assessment involves two parts: risk analysis and risk evaluation, although the term 鈥渞isk assessment鈥?can be seen used indistinguishable with 鈥渞isk analysis鈥?
Whereas Reach鈥檚 total map selection is a bit weaker than the likes of Halo 2 and Halo 3 and the inclusion of armor talents was cool, but limiting – remember, this was before sprinting grew to become a everlasting means in Halo – I firmly believe that Sword Base is the best Halo map of all time and its inclusion alone elevates Attain to all-time standing in my eyes.
What’s alternative clothes? The place can I find gothic, rock, and different fashion at HARD鈥橬鈥橦EAVY?
三人寄れば文殊の知恵