Wordpress – 岁月细碎点滴快查 https://blog.mutadecheng.com Wed, 05 Jun 2024 07:37:34 +0000 zh-Hans hourly 1 https://wordpress.org/?v=6.9 嵌入式流程图 https://blog.mutadecheng.com/2024/06/05/%e5%b5%8c%e5%85%a5%e5%bc%8f%e6%b5%81%e7%a8%8b%e5%9b%be/ Wed, 05 Jun 2024 07:24:37 +0000 https://blog.mutadecheng.com/?p=164 使用官方生成工具网站

先在官方生成工具网站 draw.io (diagrams.net) ,编辑并下载html页面

使用方式

直接在页面中加载,例如wordress中, 使用自定义HTML区块,将整个html文件填入即可,以下是示例效果:

注: script是引用自cdn

未命名绘图.drawio.html
]]> WordPress 插件inseri.swiss 之Cytoscape Block使用教程 https://blog.mutadecheng.com/2024/06/05/wordpress-%e6%8f%92%e4%bb%b6inseri-swiss-%e4%b9%8bcytoscape-block%e4%bd%bf%e7%94%a8%e6%95%99%e7%a8%8b/ Wed, 05 Jun 2024 06:58:40 +0000 https://blog.mutadecheng.com/?p=161 插件官网https://docs.inseri.swiss/blocks/cytoscape/

使用教程:

1. 将elements(json格式)写入textEditor(插件带的区块)中

is loading …

2. 将style(json格式)写入textEditor(插件带的区块)中

is loading …

3. 将layout(json格式)写入textEditor(插件带的区块)中

is loading …

4. 配置数据源为之气步骤的区块

is loading …

拓展:不想要插件的方式:

另外,不想要插件的方式的话,因为此插件用的是Cytoscape.js,所以可以直接通过原生方式编写html,在wordpress中使用自定义html

<!DOCTYPE html>
<html>
<head>
    <title>Cytoscape.js 示例</title>
    <script src="https://unpkg.com/cytoscape@3.21.0/dist/cytoscape.min.js"></script>
    <!-- 引入Cytoscape.js -->
    <style>
        #cy {
            width: 800px;
            height: 600px;
            display: block;
            position: relative;
            margin: 20px auto;
            border: 1px solid #ccc;
        }
        /* 设置图表容器的样式 */
    </style>
</head>
<body>
    <div id="cy"></div> <!-- 图表容器 -->
    <script>
        var cy = cytoscape({
            container: document.getElementById('cy'), // 容器元素

            elements: [ // 列表形式的元素数据
                // 节点部分
                { data: { id: 'a' } },
                { data: { id: 'b' } },
                { data: { id: 'c' } },
                { data: { id: 'd' } },
                { data: { id: 'e' } },
                // 边部分
                { data: { id: 'ae', weight: 1, source: 'a', target: 'e' } },
                { data: { id: 'ab', weight: 3, source: 'a', target: 'b' } },
                { data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
                { data: { id: 'bc', weight: 5, source: 'b', target: 'c' } },
                { data: { id: 'ce', weight: 6, source: 'c', target: 'e' } },
                { data: { id: 'cd', weight: 2, source: 'c', target: 'd' } },
                { data: { id: 'de', weight: 7, source: 'd', target: 'e' } }
            ],

            style: [ // 样式部分
                {
                    selector: 'node',
                    style: {
                        'background-color': '#666',
                        'label': 'data(id)'
                    }
                },
                {
                    selector: 'edge',
                    style: {
                        'width': 3,
                        'line-color': '#ccc',
                        'target-arrow-color': '#ccc',
                        'target-arrow-shape': 'triangle',
                        'curve-style': 'bezier',
                        'label': 'data(weight)'
                    }
                }
            ],

            layout: {
                name: 'grid',
                rows: 2
            }
        });
    </script>
</body>
</html>

效果如下:

Cytoscape.js 示例
]]>