diff --git a/Bloggie/Core/Core.js b/Bloggie/Core/Core.js
index 42ace29..828581e 100644
--- a/Bloggie/Core/Core.js
+++ b/Bloggie/Core/Core.js
@@ -49,12 +49,8 @@ var bloggie = (function () {
         }
     }
 
-    if (!localStorage.getItem("bloggie-base")) {
-        base = JSON.parse(get('./Bloggie/Core/base.json'));
-        localStorage.setItem("bloggie-base", JSON.stringify(base));
-    } else {
-        base = JSON.parse(localStorage.getItem("bloggie-base"));
-    }
+    base = bloggie_init;
+    delete window.bloggie_init;
 
     window.onerror = function (message, source, lineno, colno, error) {
         Err('Message:' + message + '\nSource:' + source + '\nLineno:' + lineno + '\nColno:' + colno + '\nError:' + error);
@@ -69,7 +65,6 @@ var bloggie = (function () {
         var html = document.documentElement;
         html.lang = base.lang || 'en-US';
         html.dir = base.dir || 'ltr';
-        swloader();
         if (jslist.loading) {
             var scripts = Object.keys(jslist.loading).length;
             for (var n = 1; n <= scripts; n++) {
@@ -246,14 +241,69 @@ var bloggie = (function () {
         document.getElementById('bloggie-main').appendChild(aie);
     };
 
-    function loadlist() {
+    function loadlist(filter = bloggie.custom.listfilter, rest = bloggie.custom.listfilter_rest) {
         document.getElementById('bloggie-main').innerHTML = '';
         var div = document.createElement('div');
         div.id = 'bloggie-list';
-        var art = Object.keys(articlelist);
+        var lc = JSON.parse(JSON.stringify(articlelist));
+        var art = Object.keys(lc);
         var n = art.length;
-        while (n--) {
-            div.appendChild((bloggie.custom.command.listmaker || listmaker)(articlelist[n + 1], art[n]));
+        if (typeof(filter) === 'string') {
+            while (n--) {
+                if (articlelist[n + 1][filter]) {
+                    lc[n + 1].used = true;
+                    div.appendChild((bloggie.custom.command.listmaker || listmaker)(articlelist[n + 1], art[n]));
+                }
+            }
+            if (rest) {
+                n = art.length;
+                while (n--) {
+                    if (!lc[n + 1].used) div.appendChild((bloggie.custom.command.listmaker || listmaker)(articlelist[n + 1], art[n]));
+                }
+            }
+        } else if (typeof(filter) === 'function') {
+            while (n--) {
+                if (filter(articlelist[n + 1])) {
+                    lc[n + 1].used = true;
+                    div.appendChild((bloggie.custom.command.listmaker || listmaker)(articlelist[n + 1], art[n]));
+                }    
+            }
+            if (rest) {
+                n = art.length;
+                while (n--) {
+                    if (!lc[n + 1].used) div.appendChild((bloggie.custom.command.listmaker || listmaker)(articlelist[n + 1], art[n]));
+                }
+            }
+        } else if (Array.isArray(filter)) {
+            filter.forEach((checker, index) => {
+                var n = art.length;
+                if (typeof(checker) === 'string') {
+                    while (n--) {
+                        if (articlelist[n + 1][checker]) {
+                            lc[n + 1].used = true;
+                            div.appendChild((bloggie.custom.command.listmaker || listmaker)(articlelist[n + 1], art[n]));
+                        }
+                    }
+                } else if (typeof(checker) === 'function') {
+                    while (n--) {
+                        if (checker(articlelist[n + 1])) {
+                            lc[n + 1].used = true;
+                            div.appendChild((bloggie.custom.command.listmaker || listmaker)(articlelist[n + 1], art[n]));
+                        }    
+                    }
+                } else console.warn(`传入的数组中第${index}个元素的格式不受支持，已自动忽略。`);
+                if (rest) {
+                    n = art.length;
+                    while (n--) {
+                        if (!lc[n + 1].used) div.appendChild((bloggie.custom.command.listmaker || listmaker)(articlelist[n + 1], art[n]));
+                    }
+                }
+            });
+        } else {
+            if (filter) console.warn(`传入的参数格式不受支持，已自动回退到默认处理。`);
+            while (n--) {
+                div.appendChild((bloggie.custom.command.listmaker || listmaker)(articlelist[n + 1], art[n]));
+            }
         }
         document.getElementById('bloggie-main').appendChild(div);
     }
@@ -265,18 +315,6 @@ var bloggie = (function () {
         return div;
     }
 
-    async function swloader() {
-        if (navigator.serviceWorker && base.sw.Supported) {
-            try {
-                await navigator.serviceWorker.register(base.sw.path, base.sw.options);
-                await navigator.serviceWorker.ready;
-            }
-            catch (e) {
-                Err(e);
-            }
-        }
-    }
-
     return bloggie;
 
 }());
\ No newline at end of file
diff --git a/Bloggie/Core/base.js b/Bloggie/Core/base.js
new file mode 100644
index 0000000..a293040
--- /dev/null
+++ b/Bloggie/Core/base.js
@@ -0,0 +1,199 @@
+'use strict';
+window.bloggie_init = {
+   "name": "DaleZ 的 Blog",
+   "lang": "zh-CN",
+   "dir": "ltr",
+   "jslist": {
+      "loading": {
+         "1": {
+            "path": "./Bloggie/js/init-helper.js",
+            "options": null
+         },
+         "2": {
+            "path": "./Bloggie/js/PWAify.js",
+            "options": null
+         },
+         "3": {
+            "path": "./Bloggie/js/CSS.js",
+            "options": null
+         },
+         "4": {
+            "path": "./Bloggie/js/customloading.js",
+            "options": null
+         }
+      },
+      "loaded": {
+         "1": {
+            "path": "https://cdnjs.cloudflare.com/ajax/libs/marked/5.0.2/marked.min.js?ServiceWorker=cachefirst",
+            "options": {
+               "crossorigin": "anonymous"
+            },
+            "JoinWaitlist": true
+         },
+         "2": {
+            "path": "./Bloggie/js/HighLight/highlight.min.js?ServiceWorker=cachefirst",
+            "options": null,
+            "JoinWaitlist": true
+         },
+         "3": {
+            "path": "https://cdn.jsdelivr.net/npm/marked-gfm-heading-id@3.0.3/lib/index.umd.min.js?ServiceWorker=cachefirst",
+            "options": {
+               "crossorigin": "anonymous"
+            },
+            "JoinWaitlist": true
+         },
+         "4": {
+            "path": "https://cdn.jsdelivr.net/npm/marked-mangle@1.0.1/lib/index.umd.min.js?ServiceWorker=cachefirst",
+            "options": {
+               "crossorigin": "anonymous"
+            },
+            "JoinWaitlist": true
+         },
+         "5": {
+            "path": "https://cdn.jsdelivr.net/npm/marked-highlight@2.0.0/lib/index.umd.min.js?ServiceWorker=cachefirst",
+            "options": {
+               "crossorigin": "anonymous"
+            },
+            "JoinWaitlist": true
+         },
+         "6": {
+            "path": "./Bloggie/js/marked-init.js?ServiceWorker=cachefirst",
+            "options": null,
+            "JoinWaitlist": true
+         },
+         "7": {
+            "path": "./Bloggie/js/custom.js",
+            "options": null,
+            "JoinWaitlist": true
+         },
+         "8": {
+            "path": "./Bloggie/js/titlebar.js",
+            "options": null,
+            "JoinWaitlist": true
+         },
+         "9": {
+            "path": "https://cdn.jsdelivr.net/npm/msemoji@1.1.2/dist/msemoji.min.js?ServiceWorker=cachefirst",
+            "options": {
+               "crossorigin": "anonymous"
+            },
+            "JoinWaitlist": true
+         },
+         "10": {
+            "path": "https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js?ServiceWorker=cachefirst",
+            "options": {
+               "crossorigin": "anonymous"
+            },
+            "JoinWaitlist": true
+         },
+         "11": {
+            "path": "https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.0/lottie.min.js?ServiceWorker=cachefirst",
+            "options": {
+               "defer": true,
+               "crossorigin": "anonymous"
+            }
+         },
+         "12": {
+            "path": "./Bloggie/js/component.js",
+            "options": null,
+            "JoinWaitlist": true
+         },
+         "13": {
+            "path": "./Bloggie/js/swloader.js",
+            "options": null,
+         }
+      }
+   },
+   "articlelist": {
+      "1": {
+         "Title": "Test",
+         "File": "./Bloggie/article/Test.md",
+         "Comment": true,
+         "icon": "",
+         "tags": ['Test1','Test2','Test3'],
+         "create": "2023-6-14",
+         "edit": "2023-6-28"
+      },
+      "2": {
+         "Title": "[测试]Windows 12 是怎么出现的？你知道多少？",
+         "File": "./Bloggie/article/uselesstext1.md",
+         "Comment": false,
+         "tags": ['Test1']
+      },
+      "3": {
+         "Title": "[测试]论使用 Windows 的意义",
+         "File": "./Bloggie/article/uselesstext2.md",
+         "Comment": false,
+         "tags": ['Test2']
+      },
+      "4": {
+         "Title": "[测试]全面讲解微软战略",
+         "File": "./Bloggie/article/uselesstext3.md",
+         "Comment": false,
+         "tags": ['Test3']
+      },
+      "5": {
+         "Title": "微软风音乐不完全集合",
+         "File": "./Bloggie/article/MSMusic.md",
+         "Comment": true,
+         "tags": ['Test1','Test2']
+      },
+      "6": {
+         "Title": "本站介绍（尚在编写）",
+         "File": "./Bloggie/article/Introduce.md",
+         "Comment": true,
+         "tags": ['Test2','Test3'],
+         "Top": true
+      },
+      "7": {
+         "Title": "Blog Beta 1 更新日志",
+         "File": "./Bloggie/article/beta1update.md",
+         "Comment": true,
+         "tags": ['Test1','Test3'],
+         "desp": "了解本 Blog 在 Beta 1 的更新内容。",
+         "icon": "",
+         "create": "2023-6-28",
+         "edit": "2023-6-30"
+      },
+      "8": {
+         "Title": "Blog Beta 2 更新日志",
+         "File": "./Bloggie/article/beta2update.md",
+         "Comment": true,
+         "tags": ['Test1','Test3'],
+         "desp": "了解本 Blog 在 Beta 2 的更新内容。",
+         "icon": "",
+         "create": "2023-7-31"
+      }
+   },
+   "wait": {
+      "type": "function",
+      "content": "(function() {return bloggie.custom.command.customLoadingAnimation();})"
+   },
+   "nav": {
+      "主页": {
+         "action": "bloggie.LoadArticle()",
+         "icon": "./Bloggie/skin/Res/Home.svg"
+      },
+      "目录": {
+         "action": "bloggie.LoadArticle('list')",
+         "icon": "./Bloggie/skin/Res/List.svg"
+      },
+      "设置": {
+         "action": "bloggie.LoadArticle('Settings')",
+         "icon": "./Bloggie/skin/Res/Setting.svg"
+      }
+   },
+   "SpecialPage": {
+      "list": {
+         "action": "loadlist()",
+         "Title": "目录"
+      },
+      "Settings": {
+         "action": "bloggie.custom.command.loadSettings()",
+         "Title": "设置"
+      },
+      "Main": {
+         "file": "./Bloggie/article/Main.md",
+         "Title": "DaleZ 的 Blog"
+      }
+   }
+};
\ No newline at end of file
diff --git a/Bloggie/article/beta2update.md b/Bloggie/article/beta2update.md
new file mode 100644
index 0000000..f6e5724
--- /dev/null
+++ b/Bloggie/article/beta2update.md
@@ -0,0 +1,20 @@
+您好！感谢您参与本博客的测试！本次我们从 Beta 1 版更新到了 Beta 2 版，以下是本次更新内容。
+### 新功能与改进
+
+- **_新增功能！_** 目录与查看文章页面现已设计完成，界面已经高度符合 Windows 11 设计原则。
+- **_新增功能！_** 现在本博客引入了标签功能，可通过标签筛选文章，并在目录中查看所有标签。（**注意：** 标签类别尚未完善。）
+- **_新增功能！_** 文章现在可查看相关的信息。（**注意：** 并非所有文章都带有信息。）
+- **_新增功能！_** 文章现可置顶。
+- 页脚现已更新为符合 Windows 11 设计原则的样式。
+- 当 Service Worker 收到更新时，您现在会收到通知。（**注意：** 在此版本中您可能不会收到消息，但在下一个版本更新时您将看到效果。）
+
+### 已知问题
+
+- 对于某些浏览器的网络策略，加载时间偶尔可能比预期更长，而并非加载失败。继续等待或刷新以完成加载。
+- 同时点击多个导航栏项将导致指示灯错乱。再次点击**一个**导航栏项将恢复指示灯。
+- 较旧的浏览器可能会在多次操作导航栏后使指示灯陷入完全错乱的状态。若发生此情况，请更新您的浏览器。
+- 如果有图片等可能不会立即加载完成的内容，锚点跳转可能无法完全跳转到指定的位置。如果跳转后无法找到内容，尝试略向下移动以找到内容。
+- 查看某些文章时，沉浸式阅读模式可能不可用。
+
+**注意：** 建议刷新一遍以便完全升级到 Beta 2。
+我们期待听到您的反馈。向我们报告问题以便本博客变得更好！
\ No newline at end of file
diff --git a/Bloggie/js/CSS.js b/Bloggie/js/CSS.js
index 6ab25c5..1baa2c1 100644
--- a/Bloggie/js/CSS.js
+++ b/Bloggie/js/CSS.js
@@ -1,31 +1,38 @@
 'use strict';
-var css = document.createElement('link');
-css.href = './Bloggie/skin/CSS/markdown.css';
-css.media = 'all';
-css.rel = 'stylesheet';
-document.head.appendChild(css);
-css = document.createElement('link');
-css.href = './Bloggie/skin/CSS/blog.css';
-css.media = 'all';
-css.rel = 'stylesheet';
-document.head.appendChild(css);
-css = document.createElement('link');
-css.href = './Bloggie/js/HighLight/styles/github.min.css';
-css.rel = 'stylesheet';
-document.head.appendChild(css);
-css = document.createElement('link');
-css.href = './Bloggie/js/HighLight/styles/github-dark.min.css';
-css.media = '(prefers-color-scheme: dark)';
-css.rel = 'stylesheet';
-document.head.appendChild(css);
-var css = document.createElement('link');
-css.href = 'https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css';
-css.media = 'all';
-css.rel = 'stylesheet';
-css.crossorigin = 'anonymous';
-document.head.appendChild(css);
-var css = document.createElement('link');
-css.href = './Bloggie/skin/CSS/fancycustomicon.css';
-css.media = 'all';
-css.rel = 'stylesheet';
-document.head.appendChild(css);
\ No newline at end of file
+(() => {
+    var css = document.createElement('link');
+    css.href = './Bloggie/skin/CSS/markdown.css';
+    css.media = 'all';
+    css.rel = 'stylesheet';
+    document.head.appendChild(css);
+    css = document.createElement('link');
+    css.href = './Bloggie/skin/CSS/blog.css';
+    css.media = 'all';
+    css.rel = 'stylesheet';
+    document.head.appendChild(css);
+    css = document.createElement('link');
+    css.href = './Bloggie/js/HighLight/styles/github.min.css';
+    css.rel = 'stylesheet';
+    document.head.appendChild(css);
+    css = document.createElement('link');
+    css.href = './Bloggie/js/HighLight/styles/github-dark.min.css';
+    css.media = '(prefers-color-scheme: dark)';
+    css.rel = 'stylesheet';
+    document.head.appendChild(css);
+    var css = document.createElement('link');
+    css.href = 'https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css';
+    css.media = 'all';
+    css.rel = 'stylesheet';
+    css.crossorigin = 'anonymous';
+    document.head.appendChild(css);
+    var css = document.createElement('link');
+    css.href = './Bloggie/skin/CSS/fancycustomicon.css';
+    css.media = 'all';
+    css.rel = 'stylesheet';
+    document.head.appendChild(css);
+    css = document.createElement('link');
+    css.href = './Bloggie/skin/CSS/component.css';
+    css.media = 'all';
+    css.rel = 'stylesheet';
+    document.head.appendChild(css);
+})();
\ No newline at end of file
diff --git a/Bloggie/js/component.js b/Bloggie/js/component.js
new file mode 100644
index 0000000..3eddedc
--- /dev/null
+++ b/Bloggie/js/component.js
@@ -0,0 +1,83 @@
+var DaleZ_listbutton = (function () {
+    var template = document.implementation.createHTMLDocument();
+    template.body.innerHTML = `<button class="first">
+        <div class="text">
+            <p class="title"></p>
+            <p class="desp"></p>
+        </div>
+        <div class="other"></div>
+    </button>`;
+
+    function create(title = '', desp = '', other, icon = '') {
+        var final = template.cloneNode(true);
+        final.getElementsByClassName('title')[0].innerHTML = title;
+        final.getElementsByClassName('desp')[0].innerHTML = desp;
+        final.getElementsByClassName('first')[0].setAttribute('data-icon', icon);
+        if (!other) {
+            final.getElementsByClassName('first')[0].removeChild(final.getElementsByClassName('first')[0].lastElementChild)
+        } else {
+            if (typeof (other) === 'text') {
+                final.getElementsByClassName('other')[0].innerHTML = other;
+            } if (Array.isArray(other)) {
+                other.forEach(function (value) {
+                    if (typeof(value) === 'text') {
+                        final.getElementsByClassName('other')[0].innerHTML += value;
+                    } else final.getElementsByClassName('other')[0].appendChild(value);
+                });
+            } else {
+                final.getElementsByClassName('other')[0].appendChild(other);
+            }
+        }
+        return final.getElementsByClassName('first')[0];
+    }
+
+    return create;
+})();
+
+var DaleZ_Tag = (function () {
+    function isLight(val) {   //HEX十六进制颜色值转换为RGB(A)颜色值
+        // 16进制颜色值的正则
+        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+        // 把颜色值变成小写
+        var color = val.toLowerCase();
+        var result = '';
+        if (reg.test(color)) {
+            // 如果只有三位的值，需变成六位，如：#fff => #ffffff
+            if (color.length === 4) {
+                var colorNew = "#";
+                for (var i = 1; i < 4; i += 1) {
+                    colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
+                }
+                color = colorNew;
+            }
+            // 处理六位的颜色值，转为RGB
+            var colorChange = [];
+            for (var i = 1; i < 7; i += 2) {
+                colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
+            }
+            var grayLevel = colorChange[0] * 0.299 + colorChange[1] * 0.587 + colorChange[2] * 0.114;
+            if (grayLevel >= 192) {//浅色模式
+                return true;
+            } else {
+                return false;
+            }
+        } else {
+            return false;
+        }
+    }
+
+    function create(title = '', color = '#036ac4', icon = '', desp) {
+        var final = document.createElement('button');
+        final.className = 'Tag';
+        final.innerHTML = title;
+        final.title = desp || title;
+        if (!isLight(color)) {
+            final.style.color = 'white';
+        }
+        final.style.backgroundColor = color;
+        final.setAttribute('data-icon', icon);
+        return final;
+    }
+
+    return create;
+})();
\ No newline at end of file
diff --git a/Bloggie/js/custom.js b/Bloggie/js/custom.js
index e0ba3db..378b191 100644
--- a/Bloggie/js/custom.js
+++ b/Bloggie/js/custom.js
@@ -1,13 +1,24 @@
 'use strict';
 bloggie.custom.command.loadcontentbeforearticle = (ctt) => {
     if (typeof(ctt.Comment) != 'undefined') {
-        var r = document.createElement('hr');
         var h = document.createElement('header');
         var t = document.createElement('h1');
         var c = document.createTextNode(ctt.Title);
+        var d = document.createElement('p');
+        d.appendChild(document.createTextNode(ctt.desp));
+        d.id = 'header-desp';
+        var ti = document.createElement('p');
+        ti.appendChild(document.createTextNode(ctt.edit || ctt.create));
+        ti.id = 'header-ti';
+        var tag = bloggie.custom.command.tagGroupMaker(ctt.tags, true);
+        tag.id = 'header-tag'
         t.appendChild(c);
         h.appendChild(t);
-        h.appendChild(r);
+        h.style.backgroundColor = ctt.color || '#036ac4';
+        h.setAttribute('data-icon', ctt.icon || '');
+        h.appendChild(d);
+        h.appendChild(ti);
+        h.appendChild(tag);
         return h;
     }
 };
@@ -32,21 +43,24 @@ bloggie.custom.command.loadcontentafterarticle = (ctt) => {
     var f = document.createElement('footer');
     if (ctt.Comment) {
         var h = document.createElement('hr');
-        var y = new Date().getFullYear();
-        var p = document.createElement('p');
-        p.appendChild(document.createTextNode(`© 2023-`+y+` DaleZ`));
         f.appendChild(h);
-        f.appendChild(p);
-        f.innerHTML += `<p>本站文章除其作者特殊声明外，一律采用<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0许可协议</a>进行授权，进行转载或二次创作时<b>务必以相同协议</b>进行共享，<b>严禁</b>用于商业用途。</p>`;
+        var y = new Date().getFullYear();
+        f.innerHTML += `<div class="WinUI-noticeBar"><p>© 2023-${y} DaleZ<br />本站文章除其作者特殊声明外，一律采用<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0许可协议</a>进行授权，进行转载或二次创作时<b>务必以相同协议</b>进行共享，<b>严禁</b>用于商业用途。</p></div>`;
         f.appendChild(cmt);
     } else {
         var h = document.createElement('hr');
-        var y = new Date().getFullYear();
-        var p = document.createElement('p');
-        p.appendChild(document.createTextNode(`© 2023-`+y+` DaleZ`));
         f.appendChild(h);
-        f.appendChild(p);
-        f.innerHTML += `<p>本站文章除其作者特殊声明外，一律采用<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0许可协议</a>进行授权，进行转载或二次创作时<b>务必以相同协议</b>进行共享，<b>严禁</b>用于商业用途。</p>`;
+        var y = new Date().getFullYear();
+        f.innerHTML += `<div class="WinUI-noticeBar"><p>© 2023-${y} DaleZ<br />本站文章除其作者特殊声明外，一律采用<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0许可协议</a>进行授权，进行转载或二次创作时<b>务必以相同协议</b>进行共享，<b>严禁</b>用于商业用途。</p></div>`;
+    }
+    if (ctt.Title == '目录') {
+        var tagArea = bloggie.custom.command.tagGroupMaker(Object.keys(bloggie.custom.tags), true);
+        tagArea.removeAttribute('class');
+        tagArea.id = 'tagArea';
+        var ti = document.createElement('h2');
+        ti.appendChild(document.createTextNode('所有标签'));
+        tagArea.insertBefore(ti, tagArea.firstElementChild);
+        f.insertBefore(tagArea, f.firstElementChild);
     }
     var getanchor = /#(.*)$/;
     document.querySelectorAll('a[href*="#"]').forEach(anchor => {
@@ -227,19 +241,74 @@ document.getElementById('bloggie').addEventListener('click', event => {
     if (event.target.id != 'bloggie-nav' && event.target.id != 'Nav-Controller') document.getElementById('bloggie-nav').classList.toggle('navshow', false);
 });
 
-bloggie.custom.command.listmaker = (ctt, name) => {
-    var div = document.createElement('div');
-    div.onclick = () => bloggie.LoadArticle(name);
-    var div2 = document.createElement('div');
-    var p = document.createElement('p');
-    p.innerHTML = ctt.Title;
-    div2.appendChild(p);
-    div.appendChild(div2);
-    return div;
+bloggie.custom.command.listmaker = function (ctt, name) {
+    var btn = DaleZ_listbutton(ctt.Title, ctt.desp, [bloggie.custom.command.infoMaker(ctt), bloggie.custom.command.tagGroupMaker(ctt.tags, true)], ctt.icon);
+    btn.onclick = (event) => {
+        if (event.target.className != 'Tag') bloggie.LoadArticle(name);
+    }
+    return btn;
 }
-(async () => {
-    try {
-        var ctt = await fetch('./Bloggie/Core/base.json?ServiceWorker=networkfirst');
-        if (ctt.ok) localStorage.setItem("bloggie-base", JSON.stringify(await ctt.json()));
-    } catch(e) {}
-})();
\ No newline at end of file
+
+bloggie.custom.listfilter = 'Top';
+bloggie.custom.listfilter_rest = true;
+
+bloggie.custom.tags = {
+    'Test1':{
+        'Icon':'1',
+        'Color':'#114514',
+        'desp':'TEST1'
+    },
+    'Test2':{
+        'Icon':'2',
+        'Color':'#191981',
+        'desp':'TEST2'
+    },
+    'Test3':{
+        'Icon':'3',
+        'Color':'#233',
+        'desp':'TEST3'
+    }
+}
+
+bloggie.custom.command.tagGroupMaker = (tagArray, event) => {
+    let Final = document.createElement('div');
+    Final.className = 'tagGroup';
+    tagArray.forEach((TagName) => {
+        var title = TagName;
+        var color = bloggie.custom.tags[TagName]['Color'];
+        var icon = bloggie.custom.tags[TagName]['Icon'];
+        var desp = bloggie.custom.tags[TagName]['desp'];
+        var finaltag = DaleZ_Tag(title, color, icon, desp);
+        if (event) finaltag.addEventListener('click', () => {
+            bloggie.loadlist((info) => {
+                if (info.tags.includes(TagName)) return true;
+            }, false);
+        });
+        Final.appendChild(finaltag);
+    });
+    return Final;
+}
+
+bloggie.custom.command.infoMaker = (info) => {
+    let final = document.createElement('div');
+    final.className = 'infoGroup';
+    if (info.create) {
+        var c = document.createElement('p');
+        c.appendChild(document.createTextNode(info.create));
+        final.appendChild(c);
+    }
+    if (info.edit) {
+        var e = document.createElement('p');
+        e.appendChild(document.createTextNode(info.edit));
+        final.appendChild(e);
+    }
+    if (info.Comment === true) {
+        final.appendChild(DaleZ_Tag('可评论', '#217346', ''));
+    } else if (info.Comment === false) {
+        final.appendChild(DaleZ_Tag('不可评论', '#cf0019', ''));
+    }
+    if (info.Top === true) {
+        final.appendChild(DaleZ_Tag('置顶内容', '#0078d4', ''));
+    }
+    return final;
+}
\ No newline at end of file
diff --git a/Bloggie/js/swloader.js b/Bloggie/js/swloader.js
index 79d9827..30aff67 100644
--- a/Bloggie/js/swloader.js
+++ b/Bloggie/js/swloader.js
@@ -1,3 +1,11 @@
-if (navigator.serviceWorker) {
-    navigator.serviceWorker.register('/sw.js');
-}
\ No newline at end of file
+(async function swloader() {
+    if (navigator.serviceWorker) {
+        navigator.serviceWorker.addEventListener("controllerchange", () => {
+            var temp = document.createElement('div');
+            temp.innerHTML = `<div class="WinUI-noticeBar"><p>更新已可用。</p><button class="WinUI-hyperLink" style="margin: -6px 0px -6px auto" onclick="location.reload(true);">立即刷新</button></div>`;
+            var d = document.getElementById('bloggie-main');
+            d.insertBefore(temp, d.firstElementChild);
+        });
+        navigator.serviceWorker.register('./sw.js');
+    }
+})();
\ No newline at end of file
diff --git a/Bloggie/skin/CSS/blog.css b/Bloggie/skin/CSS/blog.css
index cf81b9a..97e681e 100644
--- a/Bloggie/skin/CSS/blog.css
+++ b/Bloggie/skin/CSS/blog.css
@@ -26,7 +26,6 @@ body {
      margin: 0px;
 }
 header, footer {
-     text-align: center;
      flex-grow: 0;
      flex-shrink: 0;
      margin: 0px auto;
@@ -147,6 +146,7 @@ header, footer {
      display: flex;
      flex-direction: column;
      transition: all 1s cubic-bezier(0.75, 0, 0.25, 1);
+     scroll-behavior: smooth;
 }
 #bloggie-main>* {
      transition: none;
@@ -164,27 +164,10 @@ header, footer {
      font-size: 40px;
      font-weight: 600;
 }
-#bloggie-list>div {
-     min-height: 64px;
-     width: 100%;
-     border-radius: 4px;
-     background: #99999922;
-     margin: 12px 0px;
-     padding: 0px 16px;
-     display: flex;
-     align-items: center;
-}
-#bloggie-list>div:before {
-     content: '\f000';
-     font-size: 20px;
-     font-family: "Segoe Fluent Icons", Icon;
-     display: block;
-     width: 34px;
-}
-#bloggie-list:before, #bloggie-list>div:before, #bloggie-list>div>div>p {
+#bloggie-list:before {
      color: #191a1a;
 }
-.giscus {
+.giscus, #tagArea {
      border: 1px solid #e5e5e5;
      border-radius: 4px;
      background: #fdfdfd;
@@ -193,6 +176,13 @@ header, footer {
      width: min(100%, 750px);
      margin: 0px auto;
 }
+#tagArea {
+     text-align: center;
+}
+#tagArea > h2::before {
+     content: '';
+     font-family: "Segoe Fluent Icons", Icon;
+}
 img.emoji {
      height: 1em;
      width: 1em;
@@ -302,7 +292,7 @@ img.emoji {
           border-top: 1px solid #1d1d1d;
           background: #272727;
      }
-     .giscus {
+     .giscus, #tagArea {
           border: 1px solid #1d1d1d;
           background: #323232;
      }
@@ -315,7 +305,7 @@ img.emoji {
      #Nav-Controller {
           color: white;
      }
-     #bloggie-list:before, #bloggie-list>div:before, #bloggie-list>div>div>p {
+     #bloggie-list:before {
           color: white;
      }
 }
@@ -388,14 +378,8 @@ img.emoji {
           background: #99999922;
           transition: background 0.2s;
      }
-     #bloggie-list>div:hover {
-          background: #99999933;
-     }
 }
 @media (min-width: 600px) {
-     #Bloggie-list {
-          margin: 0px 48px;
-     }
      #bloggie-list {
           margin: 0px 48px;
      }
diff --git a/Bloggie/skin/CSS/component.css b/Bloggie/skin/CSS/component.css
new file mode 100644
index 0000000..72915ef
--- /dev/null
+++ b/Bloggie/skin/CSS/component.css
@@ -0,0 +1,304 @@
+:root {
+    --details-border-color: #e5e5e5;
+    --details-background: #fbfbfb;
+    --summary-hover-background: #f6f6f6;
+    --summary-active-background: #f5f5f5;
+    --details-second-font-color: #5e5e5e;
+    --title-color: #191a1a;
+}
+
+.first {
+    box-sizing: border-box;
+    min-height: 64px;
+    margin: 12px 0px;
+    padding: 0px 16px;
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--details-border-color);
+    border-radius: 4px;
+    background-color: var(--details-background);
+    user-select: none;
+    transition: background 0.1s linear;
+    width: 100%;
+}
+
+.first::before {
+    content: attr(data-icon);
+    font-size: 20px;
+    font-family: "Segoe Fluent Icons", Icon;
+    display: block;
+    width: 34px;
+}
+
+.text {
+    text-align: left;
+}
+
+.text>p {
+    margin: 0px;
+}
+
+.title {
+    font-size: 14px;
+    color: var(--title-color);
+}
+
+.desp {
+    font-size: 12px;
+    color: var(--details-second-font-color);
+}
+
+.other {
+    margin-left: auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+}
+
+.tagGroup {
+    display: flex;
+    align-items: center;
+}
+
+.tagGroup::before {
+    content: '标签：';
+}
+
+.infoGroup {
+    margin-right: 32px;
+}
+
+.infoGroup > p {
+    margin: 0px;
+}
+
+.infoGroup > p::before, .tagGroup::before {
+    font-family: "Segoe Fluent Icons", harmonyossanssc, "harmonyos sans sc", system-ui, -apple-system, BlinkMacSystemFont, Icon;
+}
+
+.infoGroup > p:nth-child(1)::before {
+    content: '创建时间：';
+}
+
+.infoGroup > p:nth-child(2)::before {
+    content: '修改时间：';
+}
+
+.title,
+.desp,
+.Tag,
+.infoGroup {
+    font-family: harmonyossanssc, "harmonyos sans sc", system-ui, -apple-system, BlinkMacSystemFont, emoji;
+}
+
+.Tag {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: none;
+    border-radius: 4px;
+    color: white;
+    font-size: 12px;
+    line-height: 16px;
+    padding-left: 3px;
+    width: -moz-fit-content;
+    height: -moz-fit-content;
+    width: fit-content;
+    height: fit-content;
+    background-color: #036ac4;
+    transition: filter 0.1s linear;
+    display: inline-flex;
+    margin: 1px;
+}
+
+.Tag::before {
+    content: attr(data-icon);
+    font-size: 12px;
+    font-family: "Segoe Fluent Icons", Icon;
+    display: block;
+    width: 16px;
+    float: left;
+}
+
+.WinUI-noticeBar {
+    display: flex;
+    min-height: 48px;
+    width: 100%;
+    border-radius: 4px;
+    background-color: #d3e7f7;
+    padding: 16px;
+    box-sizing: border-box;
+    user-select: none;
+    margin: 12px 0px;
+    align-items: flex-start;
+}
+
+.WinUI-noticeBar>p {
+    margin: 0px;
+    font-size: 14px;
+}
+
+.WinUI-noticeBar::before {
+    font-family: "Segoe Fluent Icons", Icon;
+    content: '';
+    margin-right: 16px;
+    color: #0063b1;
+}
+
+.WinUI-hyperLink {
+    appearance: none;
+    border: none;
+    border-radius: 4px;
+    padding: 8px 12px;
+    margin-left: auto;
+    background-color: transparent;
+    transition: background 0.1s linear;
+}
+
+.WinUI-hyperLink:hover {
+    background-color: #00000033;
+    cursor: pointer;
+    transition: background 0.1s linear;
+}
+
+.WinUI-hyperLink:active {
+    background-color: #00000022;
+    cursor: pointer;
+    transition: background 0.1s linear;
+}
+
+header {
+    width: 100%;
+    padding-left: 7.29167%;
+    padding-right: 7.29167%;
+    border-radius: 8px;
+    margin-bottom: 8px;
+    min-height: 50vh;
+    overflow: hidden;
+}
+
+header::before {
+    content: attr(data-icon);
+    display: block;
+    width: 92px;
+    height: 92px;
+    color: white;
+    font-family: "Segoe Fluent Icons", Icon;
+    font-size: 72px;
+}
+
+#header-desp::before {
+    content: '摘要：';
+    font-weight: bold;
+}
+
+#header-ti::before {
+    content: '最后修改日期：';
+    font-weight: bold;
+}
+
+#header-tag::before {
+    content: '标签：';
+    font-weight: bold;
+}
+
+@media (min-width: 768px) {
+    header {
+        height: 80vh;
+    }
+}
+
+header {
+    padding-top: 40px;
+    padding-bottom: 40px;
+    color: #fff;
+    height: auto;
+    min-height: 0;
+}
+
+@media (min-width: 854px) {
+    header {
+        padding-top: 44px;
+        padding-bottom: 44px;
+    }
+}
+
+@media (min-width: 1390px) {
+    header {
+        padding-top: 48px;
+        padding-bottom: 48px;
+    }
+}
+
+@media (min-width: 768px) {
+    header {
+        padding-top: 80px;
+        padding-bottom: 100px;
+        text-align: left;
+    }
+}
+
+@media (min-width: 768px) and (min-width: 854px) {
+    header {
+        padding-top: 88px;
+    }
+}
+
+@media (min-width: 768px) and (min-width: 1390px) {
+    header {
+        padding-top: 96px;
+    }
+}
+
+@media (min-width: 768px) and (min-width: 854px) {
+    header {
+        padding-bottom: 110px;
+    }
+}
+
+@media (min-width: 768px) and (min-width: 1390px) {
+    header {
+        padding-bottom: 120px;
+    }
+}
+
+@media (any-hover: hover) {
+    .first:hover {
+        transition: background 0.1s linear;
+        background-color: var(--summary-hover-background);
+    }
+
+    .Tag:hover {
+        transition: all 0.1s linear;
+        filter: brightness(1.1);
+    }
+}
+
+.first:active {
+    transition: background 0.1s linear;
+    background-color: var(--summary-active-background);
+}
+
+.Tag:active {
+    transition: filter 0.1s linear;
+    filter: brightness(0.9);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --details-border-color: #1d1d1d;
+        --details-background: #2b2b2b;
+        --summary-hover-background: #323232;
+        --summary-active-background: #272727;
+        --details-second-font-color: #cfcfcf;
+        --title-color: white;
+    }
+
+    .WinUI-noticeBar {
+        background-color: #34424d;
+    }
+
+    .WinUI-noticeBar::before {
+        color: #5fb2f2;
+    }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 1b29c9a..83c9144 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
 <html>
 	<head>
 		<meta charset="utf-8">
+		<script src="./Bloggie/Core/base.js"></script>
 		<script src="./Bloggie/Core/Core.js"></script>
 	</head>
 	<body onload="bloggie.loaded()">
diff --git a/sw.js b/sw.js
index fd45d4e..a1a5043 100644
--- a/sw.js
+++ b/sw.js
@@ -6,7 +6,11 @@ const base = /^https?:\/\/[^\/]+\/base\.json$/;
 const networkbydefault = /^(https?):\/\/[^\s/$.?#].[^\s]*\.(js|md)$/;
 const img = /^(https?):\/\/[^\s/$.?#].[^\s]*\.(gif|jpg|jpeg|tiff|png|svg|webp)$/;
 const getarg = /ServiceWorker=([^&]*)/;
+const exclude = /^(https?):\/\/[^\/]+\/msemoji/;
 
+self.addEventListener("install", () => {
+  self.skipWaiting();
+});
 
 self.addEventListener('activate', event => {
   event.waitUntil((async () => {
@@ -17,7 +21,18 @@ self.addEventListener('activate', event => {
       '/Bloggie/skin/Res/Anim/Working.json',
       '/Bloggie/skin/Res/Anim/Error.json'
     ]);
-    await cache.delete('/Bloggie/skin/CSS/blog.css');
+    let Delete = ['/Bloggie/skin/CSS/blog.css',
+                  '/Bloggie/Core/Core.js',
+                  '/Bloggie/skin/CSS/component.css',
+                  '/Bloggie/Core/base.js',
+                  '/Bloggie/Core/base.json',
+                  '/Bloggie/js/CSS.js',
+                  '/Bloggie/js/custom.js'];
+    Delete.forEach(async (file) => {
+      await cache.delete(file, {
+        ignoreSearch: true
+      });
+    });
     await clients.claim();
   })());
 });
@@ -70,6 +85,8 @@ self.addEventListener('fetch', event => {
           return;
           break;
       }
+    } else if (exclude.test(event.request.url)) {
+      return;
     } else if (networkbydefault.test(event.request.url)) {
       try {
         const fetchResponse = await fetch(event.request);