2. Wordpress WebSite Design

網站地圖

2024 年 2 月 9 日

目前本站使用的網站地圖編輯外掛:

WpDevArt Organization Chart

或許之後可以導入ComfyU所使用的技術:

jsPlumb

在使用WpDevArt Organization Chart之前,還有用過jsPlumb,這是直接使用javascript來繪製流程圖的Library。但當時使用上版面一直有問題,後來就放棄了。直到後來使用Astra這個佈景主題,才又重新嘗試。

需在header引用

再試了一次,版面還是有問題。

mermaid.js

成功 – Mermaid User Guide | Mermaid

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

發現一個Bug,https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs沒辦法正常發揮作用…反而下面那個小狐狸事務所的連結才有用(https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js)

失敗 – mermaid (codepen.io)

graph TD st{HI!} good((Great)) bad((Mizzz)) en>Goodbye!] A((HI)) style st fill:blue,fill-opacity:0.35,color:#FFFFFF,stroke-opacity:0.2 style en fill:red,fill-opacity:0.35,color:#FFFFFF,stroke-opacity:0.2 classDef eco fill:green; class A eco
graph TB A[13,032] –> |Accept John’s Offer| B[12,000] A ==> |Reject John’s Offer |C(($13,032)) C –> |Offer from Vanessa 0.6| D[$14,000] D ==> |Accept Vanessa’s Offer| E[$14,000] D –> |Reject Vanessa’s Offer| F(($11,580)) C –> |No Offer from Vanessa 0.4| G(($11,580)) G –> |Salary 1 0.05| H[$21,600] G –> |Salary 2 0.25| I[$16,800] G –> |Salary 3 0.40| J[$12,800] G –> |Salary 4 0.25| K[$6,000] G –> |Salary 5 0.05| L[$0] F –> |Salary 1 0.05| M[$21,600] F –> |Salary 2 0.25| N[$16,800] F –> |Salary 3 0.40| O[$12,800] F –> |Salary 4 0.25| P[$6,000] F –> |Salary 5 0.05| Q[$0]

失敗(只能在後台看到) – 小狐狸事務所: 網頁流程圖函式庫 mermaid.js (yhhuang1966.blogspot.com)

線上編輯器:Online FlowChart & Diagrams Editor – Mermaid Live Editor

flowchart TD A[Christmas] –>|Get money| B(Go shopping) B –> C{Let me think} C –>|One| D[Laptop] C –>|Two| E[iPhone] C –>|Three| F[fa:fa-car Car]

Visual Site map creating tool

這是在介紹一個網頁APP,可以幫你建立視覺化的網站地圖,並輸出圖片檔。

影片中演示的是手動建立的方式,實際造訪該網站發現有提供爬蟲可以爬取整個網站,但不知為何無法爬取本站。

https://octopus.do/

WordPress Visual Sitemap