Update

CascadingStyleSheets/About/about.css

@@ -130,4 +130,21 @@
 
     color: var(--font-color-normal-selected);
     transform: scale(1.1) rotate(5deg);
-}
+}
+
+#about_ExpandContent {
+
+    position: fixed;
+
+    top: 0;
+    left: 0;
+
+    margin: auto;
+
+    width: 100vw;
+    height: 100dvh;
+
+    background-color: rgba(0, 0, 0, 0.5);
+
+    display: none;
+}

Data/About/Acknowledgments/AngusTan.json

@@ -0,0 +1,3 @@
+{
+    "target-page": "https://angustan.com/"
+}

Data/About/SessionList.json

@@ -10,5 +10,34 @@
                 "handle": "aboutSession_Language-en"
             }
         }
+    },
+
+    "_my_post_": {
+        "id": "aboutSession_Post",
+        "handle": "aboutSession_Post",
+        "children": {
+
+        }
+    },
+
+    "_update_": {
+        "id": "aboutSession_Update",
+        "handle": "aboutSession_Update",
+        "children": {
+
+        }
+    },
+
+    "_acknowledgments_": {
+        "id": "aboutSession_Acknowledgments",
+        "handle": "aboutSession_Acknowledgments",
+        "children": {
+            "_angus_tan_": {
+                "handle": "aboutSession_Acknowledgments-AngusTan"
+            },
+            "_eugene_yip_": {
+                "handle": "aboutSession_Acknowledgments-EugeneYip"
+            }
+        }
     }
 }

JavaScript/About/about.js

@@ -41,11 +41,14 @@ export const SeeChen_AboutPage = {
 
             Object.keys(aboutSessionList[sessionTitle]["children"]).forEach(sessionContent => {
 
+                var aboutSessionChildren = aboutSessionList[sessionTitle]["children"][sessionContent];
+
                 aboutSession.children[2].children.push({
                     tag: "span",
                     props: {
                         class: "session-children",
-                        "data-event-handle": aboutSessionList[sessionTitle]["children"][sessionContent]["handle"]
+                        "data-event-handle": aboutSessionChildren["handle"],
+                        "data-target-link": aboutSessionChildren["link"] ? aboutSessionChildren["link"] : null
                     },
                     lang: "about",
                     children: [sessionContent]
@@ -61,6 +64,9 @@ export const SeeChen_AboutPage = {
             )
         );
 
+        window.myData.about.vDomLayot = aboutPageLayout;
+        window.myData.about.OldLayout = window.vDom.Create(aboutPageLayout);
+
         const sessionContent_All = document.querySelectorAll(".session_Content");
         sessionContent_All.forEach(aSession => {
 
@@ -85,7 +91,7 @@ export const SeeChen_AboutPage = {
 
             boxSession.addEventListener("click", (e) => {
 
-                window.eventBus.emit(boxSession.dataset.eventHandler, { e });
+                window.eventBus.emit(`${boxSession.dataset.eventHandler}_Click`, { e });
             })
         });
     },
@@ -96,7 +102,8 @@ export const SeeChen_AboutPage = {
 
             sessionExpand: SeeChen_AboutPage_Session.expand_Content,
 
-            aboutSession_Language: SeeChen_AboutPage_Language.click,
+            aboutSession_Language_Click: SeeChen_AboutPage_Language.click,
+            aboutSession_Acknowledgments_Click: SeeChen_AboutPage_Acknowledgments.click
         }
 
         Object.entries(about_EventHandler).forEach(([event, handler]) => {
@@ -129,20 +136,80 @@ const SeeChen_AboutPage_Session = {
 
 const SeeChen_AboutPage_Language = {
 
-    click: (
+    click: async (
         event
     ) => {
 
         const { e } = event;
 
         if (e.target.classList.contains("session-children")) {
 
+            const vDom_navigationBar = await window.myTools.getJson("/Layout/Webpages/General/Navigation.json");
+            const vDom_footerArea = await window.myTools.getJson("/Layout/Webpages/General/footer.json");
+
+            const old_FooterArea = window.vDom.Create(vDom_footerArea);
+
             const language_Handle = e.target.dataset.eventHandle;
 
             var language = new userLanguage();
             language.switchLanguage(language_Handle.split("-")[1]);
+            window.globalValues.language = language.getLanguage();
+
+            document.querySelector("#box_navBar").removeChild(
+                document.querySelector("#box_navBar div:nth-child(2)")
+            );
+
+            document.querySelector("#box_navBar").appendChild(
+                window.vDom.Render(
+                    window.vDom.Create(vDom_navigationBar)
+                )
+            );
+
+            const new_FooterArea = window.vDom.Create(vDom_footerArea);
+
+            window.vDom.Patch(
+                document.querySelector("#box_footerArea"),
+                window.vDom.Diff(
+                    old_FooterArea,
+                    new_FooterArea
+                )
+            );
+
+            const newLayout = window.vDom.Create(window.myData.about.vDomLayot);
+            window.vDom.Patch(
+                document.querySelector("#box_contentArea"),
+                window.vDom.Diff(
+                    window.myData.about.OldLayout,
+                    newLayout
+                )
+            );
+            window.myData.about.OldLayout = newLayout;
+        }
+    }
+}
 
-
+const SeeChen_AboutPage_Acknowledgments = {
+
+    click: async (
+        event
+    ) => {
+
+        const { e } = event;
+
+        if (e.target.classList.contains("session-children")) {
+
+            document.querySelector("#box_LoadingAnimation").classList.add("waitToDisplay");
+            await new Promise(r => setTimeout(r, 100));
+            document.querySelector("#box_LoadingAnimation").classList.add("display");
+
+            var targetDetails = `/Data/About/Acknowledgments/${e.target.dataset.eventHandle.split("-")[1]}.json`;
+            targetDetails = await window.myTools.getJson(targetDetails);
+
+            console.log(targetDetails);
+
+            document.querySelector("#box_LoadingAnimation").classList.remove("display");
+            await new Promise(r => setTimeout(r, 600));
+            document.querySelector("#box_LoadingAnimation").classList.remove("waitToDisplay");
         }
     }
 }

JavaScript/Index/index.js

@@ -91,7 +91,8 @@ window.myData = {
     },
 
     about: {
-
+        OldLayout: {},
+        vDomLayout: {}
     }
 }
 

Language/About/About.json

@@ -8,7 +8,11 @@
 
         "_my_post_": "我的发癫",
 
-        "_acknowledgments_": "致谢列表"
+        "_acknowledgments_": "听我说，蟹蟹你 ❤️",
+        "_angus_tan_": "陈誉航",
+        "_eugene_yip_": "叶宇俊",
+
+        "_update_": "更新日志"
     }, 
 
     "en": {
@@ -18,6 +22,10 @@
 
         "_my_post_": "My Post",
 
-        "_acknowledgments_": "Acknowledgments"
+        "_acknowledgments_": "Acknowledgments",
+        "_angus_tan_": "Angus Tan",
+        "_eugene_yip_": "Eugene  Yip",
+
+        "_update_": "Update Log"
     }
 }

Layout/Webpages/About/About.json

@@ -11,5 +11,12 @@
         },
         "lang": "",
         "children": []
+    }, {
+        "tag": "div",
+        "props": {
+            "id": "about_ExpandContent"
+        },
+        "lang": "",
+        "children": []
     }]
 }

Layout/Webpages/About/Session/Acknowledgments.json

@@ -0,0 +1,6 @@
+{
+    "tag": "div",
+    "props": {},
+    "lang": "",
+    "children": []
+}