思源挂件块开发实践

效果

image.pngrunKit未加载完毕时的样式

image.png挂件块样式

image.png数据存储在自定义属性中

image.png在 OceanPress 中的效果

开发调试

siyuan_api_cache_lib

由于 siyuan_api_cache_lib 内使用了 self.frameElementframeElement 只能在同源的情况下才能访问到 所以我在开发的时候使用 nginx 进行转发来绕过这个问题 (我使用 chrome 关闭跨域的安全策略还是无法在非同源的情况下拿到 frameElement)

配置 iframe 的资源链接为 http://127.0.0.1/widget/run-code/ (run-code 是我在开发的插件 github.com/run-code,建议查看这个项目里面对本库的使用方式)

对于在思源中的开发调试建议采用 nginx 进行如下配置,然后使用思源的在浏览器中打开,在这里进行开发调试

server {
    listen 80;
    server_name localhost 127.0.0.1;

    location / {
        #// 思源服务
        proxy_pass http://127.0.0.1:6806;
        index index.html index.htm;
    }
    location /widgets/run-code/ {
        #// run-code 所启动的服务, run-code 还配置了 base 路径为 /widget/run-code/
        proxy_pass http://127.0.0.1:3000;
        index index.html index.htm;
    }
}

对于 OceanPress 的调试可以采用如下配置

server {
    listen 80;
    server_name localhost 127.0.0.1;

    location / {
        #// oceanPress 生成的静态站点目录
        alias 'D:/TEMP/思源test/';
    }
    location /widget/run-code/ {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        index index.html index.htm;
    }
}

挂件块 run-code

使用 siyuan_api_cache_lib 来调用思源 api ,在 RunKit 的 onSave 事件中将代码保存到挂件块的自定义属性中

by 崮生 from 崮生 • 一些随笔 🎨,欢迎 赞助本文
本文欢迎分享与聚合,全文转载未经授权( 联系我)不许可。