u /about/ with mind map by markmap

Author: madawei2699

content/about.zh-cn.md

@@ -3,6 +3,9 @@ title = "关于本站"
 description = "关于本站"
 keywords = "关于本站"
 outputs = "html"
+[markmap]
+enabled = true
+id = "about"
 +++
 
 ```text
@@ -13,6 +16,65 @@ outputs = "html"
 
 ## 关于我
 
+```markmap
+# 🥷
+## 个人愿景
+- 认知升级
+- 长期主义
+- 积极分享
+## 长期目标
+- 投资交易年复合回报率达 15% 以上
+- 建立领域个人影响力
+- 被动收入总收入 50% 以上
+## 关注领域
+### 学习
+#### 自我提升
+- [目标管理](/self/life-in-plain-text/)
+- [时间管理](/self/gtd-tools-i-used/)
+- [笔记管理](/self/note-system/)
+- [财务管理](/self/beancount-my-accounting-tool-v2/)
+- [博客写作](/series/零成本搭建现代博客指南/)
+- [投资交易](/money/investment-path-for-young/)
+#### 终身学习
+- [信息输入](/self/my-info-input-channel/)
+- [知识输出](/self/build-personal-knowledge-system/#知识输出)
+### 技术
+#### [技术栈](/dev/tech-stack-of-side-project/)
+#### 关注技术
+- [SEO](https://twitter.com/madawei2699/status/1467359935998488577)
+- [WebRTC](https://twitter.com/madawei2699/status/1462051768389361670)
+- [云原生](https://twitter.com/madawei2699/status/1454453779718295556)
+- [分布式技术](https://twitter.com/madawei2699/status/1451837146097020928)
+- [Web3](https://twitter.com/madawei2699/status/1479829788139286533)
+- [内容营销](https://twitter.com/madawei2699/status/1481596368716451842)
+#### 开源项目
+- [free4chat](https://github.com/madawei2699/free4chat)
+- [instaghub](https://github.com/bmpi-dev/instaghub)
+- [Invest Alchemy](https://github.com/bmpi-dev/invest-alchemy)
+- [tg2web](https://github.com/bmpi-dev/tg2web)
+#### 个人产品
+- bmpi.dev
+  - [blog](https://www.bmpi.dev)
+  - [talk](/talk/)
+  - [code](https://code.bmpi.dev/)
+  - [wiki](https://wiki.bmpi.dev/)
+  - [think](https://tg.bmpi.dev/)
+  - [game](https://esl.bmpi.dev/)
+  - [word](https://word.bmpi.dev/)
+  - [wechat](https://wechat.bmpi.dev/)
+- [free4.chat](https://free4.chat/)
+- 自用托管网站
+  - [logseq.xyz](https://logseq.xyz/)
+  - [excalidraw](https://wb.bmpi.dev/)
+- 流量站
+  - [gitopx.com](https://www.gitopx.com/)
+  - [webtg.org](https://www.webtg.org/)
+### 投资
+#### 被动收入投资组合
+- [组合报告](/categories/被动收入投资组合/)
+- [组合持仓](https://www.notion.so/mdw/e0ed086e701a4d0aaa4839d2c7aa62ea)
+```
+
 ### [技术栈](/dev/tech-stack-of-side-project/)
 
 ![Elixir](https://img.shields.io/badge/-Elixir-%234B275F?style=flat-square&logo=elixir&logoColor=ffffff)

content/dev/time-in-distributed-system/index.zh-cn.md

@@ -10,7 +10,8 @@ og_image: "https://img.bmpi.dev/3d3413ee-7024-5ff7-5904-e9120dd5690f.png"
 categories: [
     "什么是X"
 ]
-isMarkupEnabled: true
+markmap:
+  enabled: true
 ---
 
 - [多出一秒让互联网暂停](#多出一秒让互联网暂停)

content/self/my-drawing-toolbox/index.zh-cn.md

@@ -7,7 +7,8 @@ keywords: "浏览器插件、Chrome插件、SEO浏览器插件"
 description: "本文分享我常用的绘图工具，包括白板绘图、文本绘图、代码绘图与专业绘图等工具。"
 isCJKLanguage: true
 og_image: "https://img.bmpi.dev/4928b4de-db94-968e-115b-767d2e2f007a.png"
-isMarkupEnabled: true
+markmap:
+  enabled: true
 isMermaidEnabled: true
 ---
 

resources/_gen/assets/scss/scss/coder.scss_5e1eb8e37c42cdfb6215b61e44dcfa5f.content

@@ -1 +1 @@
-{"Target":"css/coder.min.7b8186ef7e2483f019a96f9fc1e781d07d3a3fac817a6c68ed1e8ae0da2f432d.css","MediaType":"text/css","Data":{"Integrity":"sha256-e4GG734kg/AZqW+fweeB0H06P6yBemxo7R6K4NovQy0="}}
+{"Target":"css/coder.min.3e5b69418cb2fbcbe0872ef8d6e91a63f025f6aa42d6e38a81cdf72d59f0b748.css","MediaType":"text/css","Data":{"Integrity":"sha256-PltpQYyy+8vghy741ukaY/Al9qpC1uOKgc33LVnwt0g="}}

resources/_gen/assets/scss/scss/coder.scss_5e1eb8e37c42cdfb6215b61e44dcfa5f.json

@@ -374,6 +374,26 @@ div.notices.tip p {
 div.notices.tip p:first-child:after {
   content: 'Tip'; }
 
+.markmap > svg {
+  width: 100%;
+  height: 400px;
+  border: 1px dashed #ccc;
+  font-size: .3em;
+  font-family: 'LXGW WenKai'; }
+  @media only screen and (max-width: 768px) {
+    .markmap > svg {
+      height: 230px; } }
+*[id^='markmap-about-'] > svg {
+  height: 800px; }
+  @media only screen and (max-width: 768px) {
+    *[id^='markmap-about-'] > svg {
+      height: 350px; } }
+.mermaid {
+  width: 100%;
+  height: auto;
+  text-align: center;
+  border: 1px dashed #ccc; }
+
 .content {
   flex: 1;
   display: flex;

resources/_gen/assets/scss/scss/coder.scss_fd4b5b3f9a48bc0c7f005d2f7a4cc30f.content

@@ -517,19 +517,4 @@ li .fa-jk {
 @keyframes fadeout {
     from {bottom: 30px; opacity: 1;}
     to {bottom: 60px; opacity: 0;}
-}
-
-.markmap > svg {
-    width: 100%;
-    height: 350px;
-    border: 1px dashed #ccc;
-    font-size: .3em;
-    font-family: 'LXGW WenKai';
-}
-
-.mermaid {
-    width: 100%;
-    height: auto;
-    text-align: center;
-    border: 1px dashed #ccc;
 }

static/css/main.css

@@ -443,3 +443,28 @@ div.notices.tip p {
 div.notices.tip p:first-child:after {
   content: 'Tip';
 }
+
+.markmap > svg {
+  width: 100%;
+  height: 400px;
+  border: 1px dashed #ccc;
+  font-size: .3em;
+  font-family: 'LXGW WenKai';
+  @media only screen and (max-width : 768px) {
+    height: 230px;
+  }
+}
+
+*[id^='markmap-about-'] > svg {
+  height: 800px;
+  @media only screen and (max-width : 768px) {
+    height: 350px;
+  }
+}
+
+.mermaid {
+  width: 100%;
+  height: auto;
+  text-align: center;
+  border: 1px dashed #ccc;
+}

themes/hugo-coder/assets/scss/_base.scss

@@ -95,7 +95,7 @@
   {{ end }}
   {{ end }}
 
-  {{ if .Params.isMarkupEnabled }}
+  {{ if .Params.markmap.enabled }}
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>
   <style>
     code[class*="language-"], pre[class*="language-"] {
@@ -201,16 +201,9 @@
     AOS.init({
       disable: 'mobile'
     });
-    // add markup: https://github.com/gera2ld/markmap
-    let markups = document.querySelectorAll('code[data-lang=markmap]');
-    Array.prototype.forEach.call(markups, function(e) {
-      let text = e.textContent;
-      let markupDiv = document.createElement('div');
-      markupDiv.className = 'markmap';
-      markupDiv.textContent = text;
-      e.parentElement.replaceWith(markupDiv);
-    });
   </script>
+  {{ end }}
+
   {{ if .Params.isMermaidEnabled }}
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>
   <script>
@@ -229,6 +222,22 @@
       : { securityLevel: "loose", theme: "base" });
   </script>
   {{ end }}
+
+  {{ if .Params.markmap.enabled }}
+  <script>
+    // add markmap: https://github.com/gera2ld/markmap
+    let markups = document.querySelectorAll('code[data-lang=markmap]');
+    var i = 0;
+    Array.prototype.forEach.call(markups, function(e) {
+      let text = e.textContent;
+      let markupDiv = document.createElement('div');
+      markupDiv.className = 'markmap';
+      markupDiv.textContent = text;
+      markupDiv.id = 'markmap-' + '{{ .Params.markmap.id }}-' + i;
+      e.parentElement.replaceWith(markupDiv);
+      i++;
+    });
+  </script>
   {{ end }}
 
 </body>