diff --git a/.github/workflows/push.yaml b/.github/workflows/push.yaml
index 5d394da..9add542 100644
--- a/.github/workflows/push.yaml
+++ b/.github/workflows/push.yaml
@@ -26,7 +26,7 @@ jobs:
       run: |
         git submodule update --remote
     - name: Run main.py
-      run: python main.py
+      run: python main.py github
     - name: Push changes
       run: |
         git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
diff --git a/.gitmodules b/.gitmodules
index da02870..71edf3e 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -10,3 +10,7 @@
 	path = static
 	url = https://github.com/BA-OST-Index/ost_data_site_static.git
 	branch = main
+[submodule "dev-changelogs"]
+	path = dev_changelogs
+	url = https://github.com/BA-OST-Index/dev-changelogs.git
+	branch = main
diff --git a/dev_changelogs b/dev_changelogs
new file mode 160000
index 0000000..3a4a98f
--- /dev/null
+++ b/dev_changelogs
@@ -0,0 +1 @@
+Subproject commit 3a4a98fa84c921e66a6fe492178b4e48e3413a2a
diff --git a/index.html b/index.html
index a5b4aea..4175e4d 100644
--- a/index.html
+++ b/index.html
@@ -88,7 +88,7 @@ <h1 style="margin-top: 10px; margin-bottom: 5px;">BA OST Index</h1>
     <script>
         function sidebar_toggle() {
             var sidebar = document.getElementById("git-wiki-sidebar");
-            if (sidebar.style.display == "block") {
+            if (sidebar.style.display === "block") {
                 sidebar.style.display = "none";
                 sidebar.style.position = "inherit";
             } else {
diff --git a/main.py b/main.py
index 8f6c116..2b00611 100644
--- a/main.py
+++ b/main.py
@@ -4,19 +4,21 @@
 import shutil
 import subprocess
 import time
-import datetime
 import sys
-import minify_html
-from random import choices as ran_choices
+from main_tool import JinjaTool, TemplateTool
+from main_lang import ALL_FUNC_EN as TemplateEnFunc, ALL_FUNC_ZHCN as TemplateZhCnFunc
+from main_changelog import ChangelogGeneration
 from jinja2 import Environment, FileSystemLoader
-from html import escape as html_escape
+from urllib.parse import urljoin
 
 ALL_LANGS = ["en", "zh_cn"]
 
 filename_to_filetype = {
+    "album.html": [5],
+    "album_all.html": [-13],
     "background.html": [71],
     "background_all.html": [-101],
-    "battle.html": [21, 22, 23, 24, 25, 26, 27],
+    "battle.html": [21, 22, 23, 24, 25, 26, 27, 28],
     "battle_all.html": [-26, -27, -28, -29, -30],
     "character_all.html": [-51, -52],
     "event_all.html": [-41, -42],
@@ -51,82 +53,32 @@
     "page/zh_cn/_zhcn_technical.html": "zh_cn/zhcn_technical.html"
 }
 
-
-# get current utc
-def get_current_utc(value, fmt="%Y-%m-%d %H:%M:%S"):
-    return datetime.datetime.utcnow().strftime(fmt)
-
-
-TOOLTIP_ID = set()
-TOOLTIP_CHAR_SET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_"
-
-
-def generate_tooltip_id():
-    global TOOLTIP_ID
-    while True:
-        id = "".join(ran_choices(TOOLTIP_CHAR_SET, k=6))
-        if id not in TOOLTIP_ID:
-            TOOLTIP_ID.add(id)
-            return id
-
-
-def js_string_safe(value):
-    return html_escape(value).replace("&amp;", "&").replace("'", "&#x27")
-
-
-def js_html_string_safe(value):
-    return value.replace("\n", "\\n")
-
-
-def page_minify_html(value):
-    return minify_html.minify(value, keep_closing_tags=True,
-                              remove_processing_instructions=True).\
-        replace("'", "&#x27")
-
-
-def get_outer_json(instance_id: str, instance_type: str):
-    def read_file(filepath):
-        with open(os.path.join("exported_data", filepath), mode="r", encoding="UTF-8") as file:
-            return json.load(file)
-
-    # track
-    if instance_type == "track":
-        instance_id = instance_id.split("_")
-        track_type = instance_id[0]
-        track_no = int(instance_id[1])
-
-        if track_type == "OST":
-            return read_file(f"track/ost/{track_no}.json")
-        elif track_type == "other":
-            return read_file(f"track/other/{track_no}.json")
-        elif track_type == "animation":
-            return read_file(f"track/animation/{track_no}.json")
-        elif track_type == "short":
-            return read_file(f"track/short/{track_no}.json")
-    # background
-    elif instance_type == "background":
-        # instance_id = background filename
-        return read_file(f"background/{instance_id}.json")
-    elif instance_type == "character":
-        # instance_id = character.uuid
-        # 尝试student
-        try:
-            return read_file(f"character/student/{instance_id.lower()}/{instance_id.lower()}.json")
-        except FileNotFoundError:
-            return read_file(f"character/npc/{instance_id}/{instance_id}.json")
-
-    raise ValueError(f"{instance_id}, {instance_type}")
-
-
 environment = Environment(loader=FileSystemLoader(os.path.split(__file__)[0]), extensions=["jinja2.ext.loopcontrols",
                                                                                            "jinja2.ext.do"])
-environment.filters["get_current_utc"] = get_current_utc
-environment.filters["js_string_safe"] = js_string_safe
-environment.filters["js_html_string_safe"] = js_html_string_safe
+# Filters
+environment.filters["js_string_safe"] = JinjaTool.js_string_safe
+environment.filters["js_html_string_safe"] = JinjaTool.js_html_string_safe
+environment.filters["page_minify_html"] = JinjaTool.page_minify_html
 environment.filters["is_list"] = lambda obj: isinstance(obj, list)
-environment.filters["page_minify_html"] = page_minify_html
-environment.globals["generate_tooltip_id"] = generate_tooltip_id
-environment.globals["get_outer_json"] = get_outer_json
+# Globals - JinjaTool
+environment.globals["get_current_utc"] = JinjaTool.get_current_utc
+environment.globals["generate_tooltip_id"] = JinjaTool.generate_tooltip_id
+environment.globals["get_outer_json"] = JinjaTool.get_outer_json
+environment.globals["arg_check"] = JinjaTool.arg_check
+environment.globals["extract_storypart_data"] = JinjaTool.storypart_extract_all_data
+environment.globals["extract_storypart_data_track"] = JinjaTool.storypart_extract_all_data_track
+environment.globals["extract_storypart_data_character"] = JinjaTool.storypart_extract_all_data_characters
+environment.globals["extract_storypart_data_background"] = JinjaTool.storypart_extract_all_data_background
+# Globals - TemplateTool
+environment.globals["py_generate_story_url"] = TemplateTool.py_generate_story_url
+environment.globals["py_tooltip_track"] = TemplateTool.py_tooltip_track
+environment.globals["py_tooltip_character"] = TemplateTool.py_tooltip_character
+environment.globals["py_tooltip_background"] = TemplateTool.py_tooltip_background
+# Globals - Template
+environment.globals["template_en"] = TemplateEnFunc
+environment.globals["template_zhcn"] = TemplateZhCnFunc
+# Globals - Others
+environment.globals["urljoin"] = urljoin
 
 
 def change_extension_name(filename: str, extension: str = 'html'):
@@ -149,7 +101,9 @@ def find_template(filetype):
 
 
 def return_template(template_name, template, content):
-    if "background" in template_name:
+    if "album" in template_name:
+        return template.render(album=content)
+    elif "background" in template_name:
         return template.render(background=content)
     elif "event" in template_name:
         return template.render(event=content)
@@ -273,30 +227,38 @@ def traverse_path(namespace: list, lang: str):
 start_time = time.time()
 folders_to_remove = ["en", "zh_cn"]
 for i in folders_to_remove:
-    try: shutil.rmtree(f"data_html/{i}")
-    except FileNotFoundError: pass
+    try:
+        shutil.rmtree(f"data_html/{i}")
+    except FileNotFoundError:
+        pass
 files_to_remove = ["404.html", "index.html"]
 for i in files_to_remove:
-    try: os.remove(f"data_html/{i}")
-    except FileNotFoundError: pass
+    try:
+        os.remove(f"data_html/{i}")
+    except FileNotFoundError:
+        pass
 print(f"Deletion completed: {time.time() - start_time:0.2f}")
 
+# Generating new files
 start_time = time.time()
 for lang in ALL_LANGS:
     traverse_path(["exported_data"], lang)
     for path, name in page_path_and_name.items():
         template = environment.get_template(path.format(lang=lang))
-        result = template.render()
+        result = template.render(is_static="static")
         os.makedirs("data_html/" + lang + "/", exist_ok=True)
         with open(os.path.join("data_html/" + lang + "/", name), mode="w", encoding="UTF-8") as file:
             file.write(result)
 for path, name in page_path_and_name2.items():
     template = environment.get_template(path)
-    result = template.render()
+    result = template.render(is_static="static")
     with open(os.path.join("data_html/", name), mode="w", encoding="UTF-8") as file:
         file.write(result)
+changelog = ChangelogGeneration(environment)
+changelog.generate()
 print(f"Generation completed: {time.time() - start_time:0.2f}")
 
+# Copying static
 start_time = time.time()
 shutil.copytree("static/static", "data_html/static", dirs_exist_ok=True, copy_function=shutil.copy)
 print(f"Copying completed: {time.time() - start_time:0.2f}")
diff --git a/main_changelog.py b/main_changelog.py
new file mode 100644
index 0000000..4f06b04
--- /dev/null
+++ b/main_changelog.py
@@ -0,0 +1,30 @@
+import json
+import os
+from jinja2 import Environment
+
+TEMPLATE_NAME = "changelog.html"
+TEMPLATE_LANG = ["en", "zh_cn"]
+CHANGELOG_FILENAME = ["changelog_data", "changelog_parser", "changelog_site"]
+
+
+class ChangelogGeneration:
+    def __init__(self, env: Environment, template_name: str = TEMPLATE_NAME, template_lang: list = TEMPLATE_LANG,
+                 changelog_name: list = CHANGELOG_FILENAME):
+        self.env = env
+        self.template_name = template_name
+        self.template_lang = template_lang
+        self.changelog_filename = changelog_name
+
+    def generate(self):
+        for i in self.template_lang:
+            template = self.env.get_template(f"page/{i}/{self.template_name}")
+
+            for j in self.changelog_filename:
+                filepath = f"dev_changelogs/{j}_{i}.json"
+                with open(filepath, "r", encoding="UTF-8") as file:
+                    content = json.load(file)
+                html = template.render(changelog=content)
+
+                os.makedirs(f"data_html/{i}", exist_ok=True)
+                with open(f"data_html/{i}/{j}.html", "w", encoding="UTF-8") as file:
+                    file.write(html)
diff --git a/main_lang.py b/main_lang.py
new file mode 100644
index 0000000..5b2a295
--- /dev/null
+++ b/main_lang.py
@@ -0,0 +1,67 @@
+class TemplateEn:
+    @staticmethod
+    def filetype_to_name(filetype):
+        filetype = str(filetype)
+        filetype_dict = {
+            "1": "OST",
+            "2": "Short Animation",
+            "3": "Animation",
+            "4": "Other",
+            "11": "Main",
+            "12": "Side",
+            "13": "Short",
+            "14": "Event",
+            "15": "Bond",
+            "16": "Other"
+        }
+
+        return filetype_dict[filetype]
+
+    @staticmethod
+    def tracktype_to_name(track_type):
+        track_type = str(track_type)
+        track_type_dict = {
+            "0": "OST",
+            "1": "Short Animation",
+            "2": "Animation",
+            "3": "Other",
+        }
+
+        return track_type_dict[track_type]
+
+class TemplateZhCn:
+    @staticmethod
+    def filetype_to_name(filetype):
+        filetype = str(filetype)
+        filetype_dict = {
+            "1": "OST",
+            "2": "短篇动画",
+            "3": "动画",
+            "4": "其它",
+            "11": "主线",
+            "12": "支线",
+            "13": "短篇",
+            "14": "活动",
+            "15": "羁绊",
+            "16": "其它"
+        }
+
+        return filetype_dict[filetype]
+
+    @staticmethod
+    def tracktype_to_name(track_type):
+        track_type = str(track_type)
+        track_type_dict = {
+            "0": "OST",
+            "1": "短篇动画",
+            "2": "动画",
+            "3": "其它",
+        }
+
+        return track_type_dict[track_type]
+
+
+ALL_FUNC_EN = {"filetype_to_name": TemplateEn.filetype_to_name,
+               "tracktype_to_name": TemplateEn.tracktype_to_name}
+ALL_FUNC_ZHCN = {"filetype_to_name": TemplateZhCn.filetype_to_name,
+                 "tracktype_to_name": TemplateZhCn.tracktype_to_name}
diff --git a/main_tool.py b/main_tool.py
new file mode 100644
index 0000000..2ec2e63
--- /dev/null
+++ b/main_tool.py
@@ -0,0 +1,248 @@
+import datetime
+import minify_html
+import os
+import json
+from random import choices as ran_choices
+from collections import OrderedDict
+from jinja2 import UndefinedError
+
+TOOLTIP_ID = set()
+TOOLTIP_CHAR_SET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_"
+
+
+class JinjaTool:
+    @staticmethod
+    def get_current_utc(fmt="%Y-%m-%d %H:%M:%S"):
+        return datetime.datetime.utcnow().strftime(fmt)
+
+    @staticmethod
+    def generate_tooltip_id():
+        global TOOLTIP_ID
+        while True:
+            id = "".join(ran_choices(TOOLTIP_CHAR_SET, k=6))
+            if id not in TOOLTIP_ID:
+                TOOLTIP_ID.add(id)
+                return id
+
+    @staticmethod
+    def js_string_safe(value):
+        return value.replace("&amp;", "&").replace("'", "\'")
+
+    @staticmethod
+    def js_html_string_safe(value):
+        return value.replace("\n", "\\n")
+
+    @staticmethod
+    def page_minify_html(value):
+        return minify_html.minify(value, keep_closing_tags=True,
+                                  remove_processing_instructions=True). \
+            replace("'", "&#x27"). \
+            replace("</span> ", "</span>"). \
+            replace(" &nbsp; ", "&nbsp;")
+
+    @staticmethod
+    def get_outer_json(instance_id: str, instance_type: str):
+        def read_file(filepath):
+            with open(os.path.join("exported_data", filepath), mode="r", encoding="UTF-8") as file:
+                return json.load(file)
+
+        # track
+        if instance_type == "track":
+            instance_id = instance_id.split("_")
+            track_type = instance_id[0]
+            track_no = int(instance_id[1])
+
+            if track_type == "OST":
+                return read_file(f"track/ost/{track_no}.json")
+            elif track_type == "other":
+                return read_file(f"track/other/{track_no}.json")
+            elif track_type == "animation":
+                return read_file(f"track/animation/{track_no}.json")
+            elif track_type == "short":
+                return read_file(f"track/short/{track_no}.json")
+        # background
+        elif instance_type == "background":
+            # instance_id = background filename
+            return read_file(f"background/{instance_id}.json")
+        elif instance_type == "character":
+            # instance_id = character.uuid
+            # 尝试student
+            try:
+                return read_file(f"character/student/{instance_id.lower()}/{instance_id.lower()}.json")
+            except FileNotFoundError:
+                return read_file(f"character/npc/{instance_id}/{instance_id}.json")
+
+        raise ValueError(f"{instance_id}, {instance_type}")
+
+    @staticmethod
+    def arg_check(arg):
+        # test if is undefined
+        if hasattr(arg, "_undefined_exception"):
+            exc = getattr(arg, "_undefined_exception")
+            if exc is UndefinedError:
+                return False
+        # other common cases
+        if arg == "" or arg == 0 or arg == "False":
+            return False
+
+        return True
+
+    @staticmethod
+    def storypart_extract_all_data(parts, key_name):
+        temp = OrderedDict()
+        for segment in parts["data"]:
+            for obj in segment[key_name]:
+                if obj["uuid"] not in temp.keys():
+                    temp[obj["uuid"]] = obj
+        return [i for i in temp.values()]
+
+    @staticmethod
+    def storypart_extract_all_data_track(parts):
+        return JinjaTool.storypart_extract_all_data(parts, "track")
+
+    @staticmethod
+    def storypart_extract_all_data_background(parts):
+        return JinjaTool.storypart_extract_all_data(parts, "background")
+
+    @staticmethod
+    def storypart_extract_all_data_characters(parts):
+        return JinjaTool.storypart_extract_all_data(parts, "character")
+
+
+class TemplateTool:
+    @staticmethod
+    def py_generate_story_url(lang: str, story: dict):
+        ft = story["filetype"]
+        if ft == 15:
+            return f"/{lang}/character/student/{story['pos']['student'].lower()}/bond/{str(story['pos']['no'])}.html"
+        elif ft == 14:
+            return f"/{lang}/event/{str(story['pos']['event_id'])}/story/{str(story['pos']['segment'])}.html"
+        else:
+            if ft == 11:
+                story_type = "main"
+            elif ft == 12:
+                story_type = "side"
+            elif ft == 13:
+                story_type = "short"
+            else:
+                story_type = "other"
+
+            return f"/{lang}/main/story/{story_type}/{str(story['pos']['volume'])}/{str(story['pos']['chapter'])}/" \
+                   f"{str(story['pos']['segment'])}.html"
+
+    @staticmethod
+    def py_tooltip_background(background, instance_id, instance_type, extra_data):
+        """返回一个 [[Story, [[Part, loop_index, seg_index, tooltip_id], ...]], ...]"""
+        all_story = []
+
+        for story in extra_data.values():
+            story = story[0]
+            story_parts = []
+
+            for (index, part) in enumerate(story["part"], 1):
+                add_part, seg_index = 0, -1
+                for (index, segment) in enumerate(part["data"], 1):
+                    is_exit = 0
+                    for bg in segment["background"]:
+                        if bg["uuid"] == background["uuid"]:
+                            if instance_type == "story":
+                                is_exit = 1
+                                break
+                            elif instance_type == "track":
+                                for track in segment["track"]:
+                                    if track["instance_id"] == instance_id:
+                                        is_exit = 1
+                                        break
+                            if is_exit:
+                                break
+                    if is_exit:
+                        seg_index = index
+                        break
+                if seg_index != -1:
+                    story_parts.append([part, index, seg_index, 0])
+            if len(story_parts) != 0:
+                all_story.append([story, story_parts])
+
+        return all_story
+
+    @staticmethod
+    def py_tooltip_track(track, instance_id, instance_type, extra_data):
+        all_story = []
+
+        for story in extra_data["data_story"].values():
+            story = story[0]
+            related_parts = []
+
+            for (index, part) in enumerate(story["part"], 1):
+                seg_index = -1
+                for (index, segment) in enumerate(part["data"], 1):
+                    is_exit = 0
+                    for story_track in segment["track"]:
+                        if story_track["instance_id"] == track["instance_id"]:
+                            if instance_type == "story":
+                                is_exit = 1
+                                break
+                            elif instance_type == "character":
+                                for char in segment["character"]:
+                                    if char.get("filetype", "") == 52:  # NPC
+                                        if char["namespace"][-1] == instance_id:
+                                            is_exit = 1
+                                            break
+                                    else:
+                                        if char["uuid"] == instance_id:
+                                            is_exit = 1
+                                            break
+                            elif instance_type == "background":
+                                for bg in segment["background"]:
+                                    if bg["uuid"] == instance_id:
+                                        is_exit = 1
+                                        break
+
+                        if is_exit:
+                            break
+                    if is_exit:
+                        seg_index = index
+                        break
+
+                if seg_index != -1:
+                    related_parts.append([part, index, seg_index, 0])
+
+            if len(related_parts) != 0:
+                all_story.append([story, related_parts])
+
+        return all_story
+
+    @staticmethod
+    def py_tooltip_character(character, instance_id, instance_type, extra_data):
+        """注意，此处的 extra_data 是 loop_data.data"""
+        if extra_data["filetype"] == 52:
+            char_data = extra_data
+            char_type = "npc"
+        else:
+            char_data = extra_data["student"]
+            char_type = "stu"
+        outer_data = char_data["used_by"]
+
+        all_story = []
+        for story in outer_data["data_story"].values():
+            story = story[0]
+            related_parts = []
+            for (index, part) in enumerate(story["part"], 1):
+                seg_index = -1
+                for (index, segment) in enumerate(part["data"], 1):
+                    is_exit = 0
+                    for char in segment["character"]:
+                        if char["uuid"] == char_data["uuid"]:
+                            is_exit = 1
+                            break
+
+                    if is_exit:
+                        seg_index = index
+
+                if seg_index != -1:
+                    related_parts.append([part, index, seg_index, 0])
+
+            if len(related_parts) != 0:
+                all_story.append([story, related_parts])
+
+        return all_story
diff --git a/page/en/_index.html b/page/en/_index.html
index 9c853e6..e9010f9 100644
--- a/page/en/_index.html
+++ b/page/en/_index.html
@@ -16,20 +16,46 @@
 #}
 
 {% block article_content %}
-    <h1>Welcome Sensei!</h1>
-    <p>This is BA OST Index, a project created by <a href="https://github.com/sctop">sctop</a> in an attempt to track relationships between each track and the stories, battles, as well as the backgrounds, characters and UIs!</p>
-    <br />
-    <h2>Supported Data</h2>
-    <p>Currently the website has nearly-full support for text-only data. The related images are expected to update afterwards.</p>
-    <ul>
-        <li><a href="/en/background/">Background</a></li>
-        <li><a href="/en/character/">Character</a></li>
-        <li><a href="/en/event/">Event</a></li>
-        <li><a href="/en/main/">Main Mission/Story</a></li>
-        <li><a href="/en/tag/">Tag (not in use)</a></li>
-        <li><a href="/en/track/">Tracks</a></li>
-        <li><a href="/en/ui/">UI</a></li>
-        <li><a href="/en/video/">Videos</a></li>
-    </ul>
-    <p>You can also navigate the website through the navigation section on the left.</p>
+    <h1>Welcome, Sensei!</h1>
+    <div id="homepage-flex">
+        <div id="homepage-left">
+            <div>
+                <img src="/static/images/site/logo.png" style="height: 2em;">
+                <b><span style="font-size: 1.5em; color: black;">Music×Story×Student</span></b>
+            </div>
+            <p style="text-indent: 2em;">BA OST Index is a small database project dedicated to trace the usages of the tracks and automatically establish track-story-background-character relations for the mobile game Blue Archive. With automatically generated index time, you can jump, compare and search across different entries and get to know more about the tracks in the game.</p>
+            <hr style="margin-bottom: 1em;"/>
+            <h4 style="margin-top: 0;">Quick links:</h4>
+            <ul class="homepage-list">
+                <li>Main Story (<a href="/{{ curr_lang }}/main/story/main/">Main</a>、<a href="/{{ curr_lang }}/main/story/side/">Club</a>、<a href="/{{ curr_lang }}/main/story/short/">Short</a>、<a href="/{{ curr_lang }}/main/story/other/">Other</a>)</li>
+                <li>Main Battle (<a href="/{{ curr_lang }}/main/battle/main/">Main</a>、<a href="/{{ curr_lang }}/main/battle/total_assault/">Total Assault</a>、<a href="/{{ curr_lang }}/main/battle/">Other</a>)</li>
+                <li>Tracks (<a href="/{{ curr_lang }}/track/ost/">OST</a>、<a href="/{{ curr_lang }}/track/short/">Short Animation</a>、<a href="/{{ curr_lang }}/track/other/">Other</a>)</li>
+                <li>Characters (<a href="/{{ curr_lang }}/character/npc/">NPC</a>、<a href="/{{ curr_lang }}/character/student">Student</a>)</li>
+                <li><a href="/{{ curr_lang }}/background/">Background Image</a></li>
+                <li><a href="/{{ curr_lang }}/video/">Video</a></li>
+                <li><a href="/{{ curr_lang }}/tag/">Tag</a></li>
+                <li><a href="/{{ curr_lang }}/ui/">UI (User Interface)</a></li>
+            </ul>
+        </div>
+        <div id="homepage-right">
+            <h4 style="margin-top: 2px;">Main Features</h4>
+            <p>BA OST Index is open for <b>every BA player</b>. However, if you happen to be a story digger or a content creator, the data and features provided by this site could be much more helpful than other sites. Our main features are:</p>
+            <ol class="homepage-list">
+                <li>Tooltips: In main pages*, when you hover your mouse over a link of another data entry, you will see a tooltip showing more relevant info.</li>
+                <li>Story Parts Highlight: Different story parts are highlighted with different text color.</li>
+                <li>Quick Story Viewer: In each individual page for every story, you can directly jump to the related videos or <a href="https://blue-archive.io">blue-archive.io</a> (a fan-made story viewer project).</li>
+                <li>Jumping Highlight: When jumping between the main pages*, the data entry which you just jumped from will be highlighted.</li>
+            </ol>
+            <p><small>*Main pages: Pages for track, story, background and character.</small></p>
+        </div>
+    </div>
+    <div style="width: 100%; border: #727272 solid 1px; margin-top: 8px; padding: 5px; margin-right: 3em;">
+        <h4 style="margin-top: 0">Other Links</h4>
+        <ul class="homepage-list">
+            <li>About Project: <a href="https://github.com/BA-OST-Index">Organization Page</a>, <a href="https://github.com/BA-OST-Index/ost_data">Unprocessed JSON data</a>, <a href="https://github.com/BA-OST-Index/ost_data_parser">Data parser</a>, <a href="https://github.com/BA-OST-Index/ost_site_generator">Page generator</a>, <a href="https://github.com/BA-OST-Index/ost_site">Site code</a></li>
+            <li>Data Sites*：<a href="https://schale.gg/">SchaleDB</a>, <a href="https://bluearchive.wiki/">Blue Archive Wiki</a>, <a href="https://bluearchive.fandom.com/">Blue Archive Fandom Wiki</a></li>
+            <li>Partner: <a href="https://blue-archive.io">bluearchive.io</a></li>
+        </ul>
+        <p><small>*For quick navigation and reference only. Unless noted, BA OST Index is not affiliated in any way with the websites listed.</small></p>
+    </div>
 {% endblock article_content %}
\ No newline at end of file
diff --git a/page/en/album.html b/page/en/album.html
new file mode 100644
index 0000000..5156af5
--- /dev/null
+++ b/page/en/album.html
@@ -0,0 +1,17 @@
+{% extends "template/en/base.html" %}
+{% from 'template/en/_macro_page.html' import output_usedby_track_list %}
+
+{% block title %}Album/{{ album.name.en }}{% endblock title %}
+{% block article_content %}
+    <h1>Album/{{ album.name.en }}</h1>
+    {% include "template/en/infobox/album.html" %}
+    <p><b>{{ album.name.en }}</b> is an album release by Blue Archive.</p>
+    <p>{{ album.desc.en }}</p>
+
+    <h2>Track Information</h2>
+    <p>Overview: In total, there are <b>{{ album.track_num }} tracks</b> (<b>{{ album.disc_num }} discs</b>) on this album. This album is released on <b>{{ album.release_date_format }}</b>.</p>
+    {% for disc in album.tracks %}
+        <h3>Disc {{ loop.index }} ({{ disc|length }} tracks)</h3>
+        {{ output_usedby_track_list(disc) }}
+    {% endfor %}
+{% endblock %}
diff --git a/page/en/album_all.html b/page/en/album_all.html
new file mode 100644
index 0000000..70c2b0c
--- /dev/null
+++ b/page/en/album_all.html
@@ -0,0 +1,13 @@
+{% extends "template/en/base.html" %}
+
+{% block title %}All Albums{% endblock title %}
+{% block article_content %}
+    <h1>All Albums</h1>
+    <p>This page lists all albums.</p>
+    <ul>
+        {% for i in album.include %}
+            {% set i = i[1] %}
+            <li><a href="/en/album/{{ i.album_id }}.html">{{ i.name.en }}</a>&nbsp;-&nbsp;{{ i.desc.en }}</li>
+        {% endfor %}
+    </ul>
+{% endblock article_content %}
\ No newline at end of file
diff --git a/page/en/background.html b/page/en/background.html
index 5d8b6c2..e49e5f0 100644
--- a/page/en/background.html
+++ b/page/en/background.html
@@ -2,9 +2,10 @@
 
 {% block title %}Background/{{ background.filename }}{% endblock title %}
 {% block article_content %}
-    {% from "template/en/_macro.html" import output_usedby_story, output_usedby_track %}
+    {% from "template/en/_macro_page.html" import output_usedby_story, output_usedby_track %}
     <h1>Background/{{ background.filename }}</h1>
     {% include "template/en/infobox/background.html" %}
+    <p>Description: {{ background.desc.en }}</p>
     <h2>Usage Info</h2>
     <h3>Stories</h3>
     {{ output_usedby_story(background.used_by.data_story, background.uuid, "background") }}
diff --git a/page/en/battle.html b/page/en/battle.html
index c1427bb..2d01a79 100644
--- a/page/en/battle.html
+++ b/page/en/battle.html
@@ -1,19 +1,19 @@
 {% extends "template/en/base.html" %}
 
-{% block title %}Battle/{{ battle.name.en }}{% endblock title %}
+{% block title %}Battle/{% if battle.filetype == 21 %}{{ battle.chapter }}-{{ battle.no[:2] }} {% endif %}{{ battle.name.en }}{% endblock title %}
 {% block article_content %}
     {% from "template/en/_macro.html" import get_social_for_composer %}
-    <h1>Battle/
-        <span>{{ battle.name.en }}</span>
-    </h1>
+    <h1>Battle/<span>{% if battle.filetype == 21 %}{{ battle.chapter }}-{{ battle.no[:2] }}&nbsp;{% endif %}{{ battle.name.en }}</span></h1>
     {% include "template/en/infobox/battle.html" %}
 
-    {% if battle.filetype == 24 %}
+    {% if battle.filetype in [24, 28] %}
         <h2>BOSS Info</h2>
         <ul>
             <li>Name: {{ battle.name.en }} ({{ battle.name.jp }})</li>
+            {% if battle.filetype == 24 %}
             <li>Faction: {{ battle.faction.en }} ({{ battle.faction.jp }})</li>
             <li>Description: {{ battle.profile.en }}</li>
+            {% endif %}
         </ul>
     {% endif %}
 
diff --git a/page/en/changelog.html b/page/en/changelog.html
new file mode 100644
index 0000000..371f1eb
--- /dev/null
+++ b/page/en/changelog.html
@@ -0,0 +1,31 @@
+{% extends "template/zh_cn/base.html" %}
+
+{% block title %}
+<title>Changelogs/{{ changelog.repo_info.repo_name }}</title>
+{% endblock %}
+{% block article_content %}
+    <title>Changelogs/{{ changelog.repo_info.repo_name }}</title>
+    <p>This page lists the changelog for the repository <a href="{{ changelog.repo_info.repo_url }}">{{ changelog.repo_info.repo_name }}</a>. Be noted that this changelog is maintained manually, and therefore, there could be some delays in updating the information; for more details, click the link shown above.</p>
+    <p>Unless stated, otherwise the time in the changelog would be in <b>{{ changelog.repo_info.timezone }}</b> timezone.</p>
+    <p>View other changelogs: <b><a href="/zh_cn/changelog_data.html" target="_blank">Data</a></b>&nbsp;|&nbsp;<b><a href="/zh_cn/changelog_parser.html" target="_blank">Data Parser</a></b>&nbsp;|&nbsp;<b><a href="/zh_cn/changelog_site.html">Site Pages</a></b></p>
+    <hr />
+
+    {% if changelog.repo_info.data_sort == "oldest" %}
+        {# 最老的在最前面的话，就反转列表 #}
+        {% set data = changelog.data.reverse() %}
+    {% else %}
+        {% set data = changelog.data %}
+    {% endif %}
+    {% for entry in data %}
+        <h3>{{ entry.date }}{% if entry.commit != "" %}&nbsp;(<a href="{{ urljoin(changelog.repo_info.repo_url, "commit", entry.commit) }}" target="_blank">{{ entry.commit }}</a>){% endif %}</h3>
+        <ul>
+            {% for log in entry.logs %}
+                {% if log|length == 1 %}
+                    <li>{{ log.0 }}</li>
+                {% else %}
+                    <li>{{ log.0 }}<ul style="margin: 0"><li>{{ log.1 }}</li></ul></li>
+                {% endif %}
+            {% endfor %}
+        </ul>
+    {% endfor %}
+{% endblock %}
\ No newline at end of file
diff --git a/page/en/event_ui_all.html b/page/en/event_ui_all.html
index 75a61d8..f3f238d 100644
--- a/page/en/event_ui_all.html
+++ b/page/en/event_ui_all.html
@@ -2,7 +2,7 @@
 
 {% block title %}Event/{{ event.parent_data.last_parent.name.en }}/UIs{% endblock title %}
 {% block article_content %}
-    {% from "template/en/_macro.html" import output_usedby_ui_for_all_ui, output_usedby_ui_list %}
+    {% from "template/en/_macro_page.html" import output_usedby_ui_for_all_ui %}
     <h1>Event/{{ event.parent_data.last_parent.name.en }}/UIs</h1>
     <p>This page lists all the UIs of the event <i>{{ event.parent_data.last_parent.name.en }}</i>.</p>
     {{ output_usedby_ui_for_all_ui(event.include) }}
diff --git a/page/en/npc.html b/page/en/npc.html
index d8517eb..c8dae1d 100644
--- a/page/en/npc.html
+++ b/page/en/npc.html
@@ -2,7 +2,7 @@
 
 {% block title %}NPC/{{ char.name.en }}{% endblock title %}
 {% block article_content %}
-    {% from "template/en/_macro.html" import output_usedby_story, output_usedby_track, output_relatedto_character %}
+    {% from "template/en/_macro_page.html" import output_usedby_story, output_usedby_track, output_relatedto_character %}
 
     <h1>NPC/{{ char.name.en }}</h1>
     {% include "template/en/infobox/npc.html" %}
diff --git a/page/en/story.html b/page/en/story.html
index 4e1936c..57e9581 100644
--- a/page/en/story.html
+++ b/page/en/story.html
@@ -2,9 +2,11 @@
 
 {% block title %}Story/{{ story.name.en }}{% endblock title %}
 {% block article_content %}
-    {% from "template/en/_macro.html" import get_ordinal_number, output_usedby_character, output_usedby_track_list, output_usedby_background_list, track_type_for_show %}
+    {% from "template/en/_macro_page.html" import output_usedby_character, output_usedby_track_list, output_usedby_background_list  %}
+    {% from "template/en/_macro.html" import get_ordinal_number, filetype_to_name, generate_track_anchor %}
+    {% from "template/base/_macro.html" import get_story_text_color_css, get_storypart_text_color_css %}
 
-    <h1>Story/<span class="{% if story.is_battle %}text-danger{% elif story.is_memory %}text-momo{% else %}text-primary{% endif %}">{{ story.name.en }}</span></h1>
+    <h1>Story/<span class="{{ get_story_text_color_css(story) }}">{{ story.name.en }}</span></h1>
     {% include "template/en/infobox/story.html" %}
     {% if story.filetype == 11 %}
         <p><b>{{ story.name.en }}</b> is the {{ get_ordinal_number(story.pos.segment) }} story of Chapter {{ story.pos.chapter }}, Volume {{ story.pos.volume }} of the main story.</p>
@@ -26,7 +28,7 @@ <h2>Battle/Bond Track Info</h2>
     {% if story.is_battle or story.is_memory %}
         <ul>
             {% for track in story.bgm_special %}
-                <li>{{ track_type_for_show(track) }}&nbsp;<a href="/en/track/{{ track.namespace.1 }}/{{ track.namespace.2 }}.html">{{ track.no }}. {{ track.name.realname.en }}</a></li>
+                <li>{{ generate_track_anchor(track, 0, 0, 0, 0, 1) }}</li>
             {% endfor %}
         </ul>
     {% else %}
@@ -35,18 +37,24 @@ <h2>Battle/Bond Track Info</h2>
 
     <h2>Story Parts</h2>
     {% for part in story.part %}
-        {% if part.is_memory %}<h3 class="text-momo"{% elif part.is_battle %}<h3 class="text-danger"{% elif part.is_momotalk %}<h3{% else %}<h3 class="text-primary"{% endif %} id="story-part-{{ loop.index }}">{{ loop.index }}. {{ part.name.en }}</h3>
-        <p>{{ part.desc.en }}</p>
-        <h4>Characters</h4>
-        {% if part.is_battle %}
-            {{ output_usedby_character(part, "story-" + story.instance_id, story.instance_id, "story", "True", part.battle_leader_pos) }}
-        {% else %}
-            {{ output_usedby_character(part, "story-" + story.instance_id, story.instance_id, "story") }}
-        {% endif %}
-        <h4>Tracks</h4>
-        {{ output_usedby_track_list(part.track, "story-" + story.instance_id, "story", story.instance_id) }}
-        <h4>Backgrounds</h4>
-        {{ output_usedby_background_list(part.background, "story-" + story.instance_id, story.instance_id, "story") }}
+        {% set part_index = loop.index %}
+        <h3 class="{{ get_storypart_text_color_css(part) }}" id="story-part-{{ loop.index }}">{{ loop.index }}. {{ part.name.en }}</h3>
+
+        {% for segment in part.data %}
+            <ul style="margin: 0;">
+                <li id="story-part-{{ part_index }}-seg-{{ loop.index }}">{{ segment.desc.en }}</li>
+                <h4>Characters</h4>
+                {% if part.is_battle %}
+                    {{ output_usedby_character(segment, "story-" + story.instance_id, story.instance_id, "story", "True", part.battle_leader_pos) }}
+                {% else %}
+                    {{ output_usedby_character(segment, "story-" + story.instance_id, story.instance_id, "story") }}
+                {% endif %}
+                <h4>Tracks</h4>
+                {{ output_usedby_track_list(segment.track, "story-" + story.instance_id, "story", story.instance_id) }}
+                <h4>Backgrounds</h4>
+                {{ output_usedby_background_list(segment.background, "story-" + story.instance_id, story.instance_id, "story") }}
+            </ul>
+        {% endfor %}
     {% else %}
         <p>Nothing to show!</p>
     {% endfor %}
diff --git a/page/en/student.html b/page/en/student.html
index 33f9be3..d8610b2 100644
--- a/page/en/student.html
+++ b/page/en/student.html
@@ -1,5 +1,7 @@
 {% extends "template/en/base.html" %}
-{% from 'template/en/_macro.html' import output_usedby_story, output_usedby_track, replace_newline_for_p, output_relatedto_character %}
+{% from 'template/en/_macro_page.html' import output_usedby_story, output_usedby_track, output_relatedto_character %}
+{% from 'template/en/_macro.html' import generate_track_anchor %}
+{% from "template/base/_macro.html" import replace_newline_for_p %}
 
 {% block title %}Student/{{ char.student.name.name.en }}{% endblock title %}
 {% block article_content %}
@@ -24,7 +26,7 @@ <h2>Relationship/Bond Story</h2>
         <h3><a {% if i.is_memory %}class="text-momo"{% endif %} href="bond/{{ value.pos.no }}.html">{{ value.pos.no }}. {{ value.name.en }}</a></h3>
         {% if value.is_memory %}
             {% set track = value.bgm_special[0] %}
-            <big><p>Recollection Lobby can be collected from this story. Lobby BGM: <a href="/track/{{ track.namespace.1 }}/{{ track.namespace.2 }}">{{ track.no }}. {{ track.name.realname.en }}</a></p></big>
+            <big><p>Recollection Lobby can be collected from this story. Lobby BGM: {{ generate_track_anchor(track, 0, 0, 0, 0, 0) }}</p></big>
         {% endif %}
     {% else %}
         <p>Nothing to show!</p>
diff --git a/page/en/tag.html b/page/en/tag.html
index a9a8f38..a9c4174 100644
--- a/page/en/tag.html
+++ b/page/en/tag.html
@@ -1,10 +1,8 @@
 {% extends "template/en/base.html" %}
-{% from 'template/en/_macro.html' import output_usedby_track, output_usedby_background %}
+{% from 'template/en/_macro_page.html' import output_usedby_track, output_usedby_background %}
 
 {% block title %}Tag/{{ tag.name.en }}{% endblock title %}
 {% block article_content %}
-    {% from "template/en/_macro.html" import output_used_track, output_usedby_background %}
-
     <h1>Tag/{{ tag.name.en }}</h1>
     <p>This is a page showing the detail information of the tag "{{ tag.name.en }}".</p>
     <p>Description: {{ tag.desc.en }}</p>
diff --git a/page/en/track.html b/page/en/track.html
index 2ec3028..937913e 100644
--- a/page/en/track.html
+++ b/page/en/track.html
@@ -5,12 +5,14 @@
     <script src="/static/js/track_player.js"></script>
 {% endblock other_head %}
 {% block article_content %}
-    {% from "template/en/_macro.html" import track_type_for_show, output_usedby_background, output_usedby_story, output_usedby_battle, output_usedby_ui, output_usedby_video, output_usedby_character_dict, track_version_video_player %}
+    {% from "template/en/_macro_page.html" import output_usedby_background, output_usedby_story, output_usedby_battle, output_usedby_ui, output_usedby_video, output_usedby_character_dict, track_version_video_player %}
+    {% from "template/en/_macro.html" import tracktype_to_name, generate_album_anchor, generate_track_anchor %}
 
     <h1>Track/{{ track.no }}. {{ track.name.realname.en }}</h1>
     {% include "template/en/infobox/track.html" %}
-    <p><b>{{ track.name.realname.en }}</b> is the No. {{ track.no }} track in the {{ track_type_for_show(track) }}.</p>
+    <p><b>{{ track.name.realname.en }}</b> is the No. {{ track.no }} track in the {{ tracktype_to_name(track.track_type) }}.</p>
     <p>{{ track.desc.en }}</p>
+
     <h2>Name Translation</h2>
     <h3>Original Names</h3>
     <ul>
@@ -26,12 +28,26 @@ <h3>Other Names</h3>
             <li>Nothing to show!</li>
         {% endfor %}
     </ul>
+
+    <h2>Track in Album</h2>
+    <p>This track has been included in the following albums.</p>
+    <ul>
+        {% for album in track.album %}
+            <li>{{ generate_album_anchor(album) }}</li>
+        {% endfor %}
+    </ul>
+
     <h2>Play Music Here</h2>
     <p>Tips: In order to avoid potential copyright infringement, we're using <b>third-party embedded web players</b> to provide services. You can also manually visit them by clicking the links in the infobox.</p>
     <p>By clicking the links below, you agree to the Terms of Services of the corresponding platforms/service providers.</p>
     {{ track_version_video_player(track.version) }}
+
     <h2>Usage Info</h2>
     <p>This section shows instances where the song has been referenced.</p>
+    <h3>Related Tracks</h3>
+    <ul>
+        {% for i in track.related_to.track_other %}<li>{{ generate_track_anchor(i, 0, 0, 0, 0, 1) }}</li>{% else %}<li>No tracks!</li>{% endfor %}
+    </ul>
     <h3>Backgrounds</h3>
     {{ output_usedby_background(track.used_by.data_background, "track-" + track.instance_id, track.instance_id, "track") }}
     <h3>Stories</h3>
diff --git a/page/en/ui.html b/page/en/ui.html
index 3847ca0..6d94623 100644
--- a/page/en/ui.html
+++ b/page/en/ui.html
@@ -4,10 +4,10 @@
 {% block article_content %}
     <h1>UI/{{ ui.name.en }}</h1>
     {% include "template/en/infobox/ui.html" %}
-    {% from "template/en/_macro.html" import get_social_for_composer %}
+    {% from "template/en/_macro.html" import get_social_for_composer, generate_track_anchor %}
     <p><b>{{ ui.name.en }}</b> is a part of the UI (user interface) in Blue Archive.</p>
     <p>Description: {{ ui.desc.en }}</p>
     <h2 id="track">Used Track</h2>
-    <p>Track: <a href="/en/{{ ui.track.namespace|join('/') }}.html#{{ ui.uuid }}">{{ ui.track.no }}. {{ ui.track.name.realname.en }}</a></p>
+    <p>Track: {{ generate_track_anchor(ui.track, 0, 0, 0, 0, 0) }}</p>
     <p>Composer: {{ ui.track.composer.nickname }} ({{ get_social_for_composer(ui.track.composer) }})</p>
 {% endblock %}
\ No newline at end of file
diff --git a/page/en/ui_all.html b/page/en/ui_all.html
index c12f55e..3e07a2e 100644
--- a/page/en/ui_all.html
+++ b/page/en/ui_all.html
@@ -2,7 +2,7 @@
 
 {% block title %}{{ ui.name.en }}{% endblock title %}
 {% block article_content %}
-    {% from "template/en/_macro.html" import output_usedby_ui_for_all_ui, output_usedby_ui_list %}
+    {% from "template/en/_macro_page.html" import output_usedby_ui_for_all_ui, output_usedby_ui_list %}
     <h1>{{ ui.name.en }}</h1>
     <p>{{ ui.desc.en }}</p>
     {% if ui.filetype == -61 or ui.filetype == -45 %}
diff --git a/page/en/video.html b/page/en/video.html
index c268f72..49147d3 100644
--- a/page/en/video.html
+++ b/page/en/video.html
@@ -1,5 +1,5 @@
 {% extends "template/en/base.html" %}
-{% from 'template/en/_macro.html' import output_usedby_track_list, track_version_video_player %}
+{% from 'template/en/_macro_page.html' import output_usedby_track_list, track_version_video_player %}
 
 {% block title %}Video/{{ video.name.en }}{% endblock title %}
 {% block other_head %}
diff --git a/page/zh_cn/_index.html b/page/zh_cn/_index.html
index 4793465..3eb3d3b 100644
--- a/page/zh_cn/_index.html
+++ b/page/zh_cn/_index.html
@@ -2,20 +2,46 @@
 {% block title %}欢迎 {% endblock title %}
 
 {% block article_content %}
-    <h1>欢迎，老师！</h1>
-    <p>这是 BA OST Index，一个由<a href="https://github.com/sctop">sctop</a>创建的项目，试图跟踪各个曲子与故事、战斗、背景、人物与UI之间的关系！</p>
-    <br />
-    <h2>本站支持的数据</h2>
-    <p>当前本站对于文章数据已经基本支持完毕，图片相关内容预计将在之后更新。</p>
-    <ul>
-        <li><a href="/zh_cn/background/">背景</a></li>
-        <li><a href="/zh_cn/character/">人物</a></li>
-        <li><a href="/zh_cn/event/">活动</a></li>
-        <li><a href="/zh_cn/main/">主线任务/故事</a></li>
-        <li><a href="/zh_cn/tag/">标签 (暂未使用)</a></li>
-        <li><a href="/zh_cn/track/">歌曲</a></li>
-        <li><a href="/zh_cn/ui/">UI</a></li>
-        <li><a href="/zh_cn/video/">视频</a></li>
-    </ul>
-    <p>您也可通过使用网页左侧的导航栏进行导航。</p>
+    <h1>欢迎您，老师！</h1>
+    <div id="homepage-flex">
+        <div id="homepage-left">
+            <div>
+                <img src="/static/images/site/logo.png" style="height: 2em;">
+                <b><span style="font-size: 1.5em; color: black;">音乐×故事×学生</span></b>
+            </div>
+            <p style="text-indent: 2em;">BA OST Index是一个致力于追踪手机游戏《蔚蓝档案》（又名《碧蓝档案》）的出处与使用例、建立音乐—故事—背景—人物四项主要数据间关联的小型数据库项目。藉由自动生成的索引数据，您可在多个数据项间进行跳转、互查、对比等操作，助您更加深入地了解游戏的相关音乐。</p>
+            <hr style="margin-bottom: 1em;"/>
+            <h4 style="margin-top: 0;">站内快捷链接</h4>
+            <ul class="homepage-list">
+                <li>主要故事 (<a href="/zh_cn/main/story/main/">主线</a>、<a href="/zh_cn/main/story/side/">支线</a>、<a href="/zh_cn/main/story/short/">短篇</a>、<a href="/zh_cn/main/story/other/">其它</a>)</li>
+                <li>主要战斗 (<a href="/zh_cn/main/battle/main/">主线</a>、<a href="/zh_cn/main/battle/total_assault/">总力战</a>、<a href="/zh_cn/main/battle/">其它</a>)</li>
+                <li>歌曲 (<a href="/zh_cn/track/ost/">OST</a>、<a href="/zh_cn/track/short/">短篇动画</a>、<a href="/zh_cn/track/other/">其它</a>)</li>
+                <li>人物 (<a href="/zh_cn/character/npc/">NPC</a>、<a href="/zh_cn/character/student">学生</a>)</li>
+                <li><a href="/zh_cn/background/">背景图片</a></li>
+                <li><a href="/zh_cn/video/">视频</a></li>
+                <li><a href="/zh_cn/tag/">标签</a></li>
+                <li><a href="/zh_cn/ui/">UI（用户界面）</a></li>
+            </ul>
+        </div>
+        <div id="homepage-right">
+            <h4 style="margin-top: 2px;">主要特色</h4>
+            <p>BA OST Index面向<b>全体BA玩家</b>开放。然而，如果您是想深入分析剧情者或为内容创作者，本项目网站所提供的数据与功能可能较其它网站更有帮助。本网站配备了以下特色功能：</p>
+            <ol class="homepage-list">
+                <li>Tooltip：在主要页面*中，PC端鼠标悬停在对应数据项链接上即可显示更多相关信息。</li>
+                <li>故事情节高亮：对不同的故事情节，其标题会用不同颜色区分以高亮显示。</li>
+                <li>快速直达故事：在各故事详细页中，可一键直达相关情节的视频/<a href="https://blue-archive.io">碧蓝档案剧情站</a>资源。</li>
+                <li>跳转高亮：在主要页面*间互相跳转时，会高亮跳转来源的数据条目项。</li>
+            </ol>
+            <p><small>*主要页面：指音乐、故事、背景、人物四项数据的页面。</small></p>
+        </div>
+    </div>
+    <div style="width: 100%; border: #727272 solid 1px; margin-top: 8px; padding: 5px; margin-right: 3em;">
+        <h4 style="margin-top: 0">其他链接</h4>
+        <ul class="homepage-list">
+            <li>关于项目：<a href="https://github.com/BA-OST-Index">项目组织页</a>、<a href="https://github.com/BA-OST-Index/ost_data">原始数据</a>、<a href="https://github.com/BA-OST-Index/ost_data_parser">数据解析器</a>、<a href="https://github.com/BA-OST-Index/ost_site_generator">页面生成器</a>、<a href="https://github.com/BA-OST-Index/ost_site">网站代码仓库</a></li>
+            <li>数据网站*：<a href="https://schale.gg/">SchaleDB</a> (<a href="https://schaledb.brightsu.cn/">国内镜像</a>)、<a href="https://kivo.wiki/">基沃托斯古书馆</a> (<a href="https://kivotos.ltd/">旧站</a>)、<a href="https://ba.gamekee.com/">GameKee</a>、<a href="https://bluearchive.wiki/">Blue Archive Wiki</a>、<a href="https://bluearchive.fandom.com/">Blue Archive Fandom Wiki</a></li>
+            <li>合作伙伴：<a href="https://blue-archive.io">碧蓝档案剧情站</a></li>
+        </ul>
+        <p><small>*此处仅为列出玩家间常用的数据类网站以供查阅。除非注明，否则BA OST Index与列出的网站无任何关联。</small></p>
+    </div>
 {% endblock article_content %}
\ No newline at end of file
diff --git a/page/zh_cn/album.html b/page/zh_cn/album.html
new file mode 100644
index 0000000..8aa7a2b
--- /dev/null
+++ b/page/zh_cn/album.html
@@ -0,0 +1,17 @@
+{% extends "template/zh_cn/base.html" %}
+{% from 'template/zh_cn/_macro_page.html' import output_usedby_track_list %}
+
+{% block title %}专辑/{{ album.name.en }}{% endblock title %}
+{% block article_content %}
+    <h1>专辑/{{ album.name.zh_cn }}</h1>
+    {% include "template/zh_cn/infobox/album.html" %}
+    <p><b>{{ album.name.zh_cn }}</b>是由蔚蓝档案官方发行的一个专辑。</p>
+    <p>{{ album.desc.zh_cn }}</p>
+
+    <h2>曲子信息</h2>
+    <p>概览：本专辑中共有<b>{{ album.track_num }}首曲子</b>（<b>{{ album.disc_num }}碟片</b>）。此专辑发行于<b>{{ album.release_date_format }}</b>。</p>
+    {% for disc in album.tracks %}
+        <h3>第{{ loop.index }}张碟片（{{ disc|length }}首）</h3>
+        {{ output_usedby_track_list(disc) }}
+    {% endfor %}
+{% endblock %}
\ No newline at end of file
diff --git a/page/zh_cn/album_all.html b/page/zh_cn/album_all.html
new file mode 100644
index 0000000..4f5e915
--- /dev/null
+++ b/page/zh_cn/album_all.html
@@ -0,0 +1,13 @@
+{% extends "template/zh_cn/base.html" %}
+
+{% block title %}全部专辑{% endblock title %}
+{% block article_content %}
+    <h1>全部专辑</h1>
+    <p>此页显示所有可用的专辑。</p>
+    <ul>
+        {% for i in album.include %}
+            {% set i = i[1] %}
+            <li><a href="/zh_cn/album/{{ i.album_id }}.html">{{ i.name.zh_cn }}</a>&nbsp;-&nbsp;{{ i.desc.zh_cn }}</li>
+        {% endfor %}
+    </ul>
+{% endblock article_content %}
\ No newline at end of file
diff --git a/page/zh_cn/background.html b/page/zh_cn/background.html
index 30f8f1b..820588b 100644
--- a/page/zh_cn/background.html
+++ b/page/zh_cn/background.html
@@ -2,9 +2,10 @@
 
 {% block title %}背景/{{ background.filename }}{% endblock title %}
 {% block article_content %}
-    {% from "template/zh_cn/_macro.html" import output_usedby_story, output_usedby_track %}
+    {% from "template/zh_cn/_macro_page.html" import output_usedby_story, output_usedby_track %}
     <h1>背景/{{ background.filename }}</h1>
     {% include "template/zh_cn/infobox/background.html" %}
+    <p>简介：{{ background.desc.zh_cn }}</p>
     <h2>用途信息</h2>
     <h3>故事</h3>
     {{ output_usedby_story(background.used_by.data_story, background.uuid, "background") }}
diff --git a/page/zh_cn/background_all.html b/page/zh_cn/background_all.html
index 6c4c07d..e8e73f1 100644
--- a/page/zh_cn/background_all.html
+++ b/page/zh_cn/background_all.html
@@ -3,7 +3,7 @@
 {% block title %}全部背景{% endblock title %}
 {% block article_content %}
     <h1>全部背景</h1>
-    <p>此页显示所有可用的背景</p>
+    <p>此页显示所有可用的背景。</p>
     <ul>
         {% for i in background.include %}
             {% set i = i[1] %}
diff --git a/page/zh_cn/battle.html b/page/zh_cn/battle.html
index e5182c7..69372ba 100644
--- a/page/zh_cn/battle.html
+++ b/page/zh_cn/battle.html
@@ -1,17 +1,19 @@
 {% extends "template/zh_cn/base.html" %}
 
-{% block title %}任务/{{ battle.name.zh_cn }}{% endblock title %}
+{% block title %}任务/{% if battle.filetype == 21 %}{{ battle.chapter }}-{{ battle.no[:2] }} {% endif %}{{ battle.name.zh_cn }}{% endblock title %}
 {% block article_content %}
     {% from "template/zh_cn/_macro.html" import get_social_for_composer, auto_zhcn_gen %}
-    <h1>战斗/<span>{{ auto_zhcn_gen(battle.name) }}</span></h1>
+    <h1>战斗/<span>{% if battle.filetype == 21 %}{{ battle.chapter }}-{{ battle.no[:2] }}&nbsp;{% endif %}{{ auto_zhcn_gen(battle.name) }}</span></h1>
     {% include "template/zh_cn/infobox/battle.html" %}
 
-    {% if battle.filetype == 24 %}
+    {% if battle.filetype in [24, 28] %}
         <h2>BOSS信息</h2>
         <ul>
             <li>名称：{{ auto_zhcn_gen(battle.name) }} ({{ battle.name.jp }})</li>
+            {% if battle.filetype == 24 %}
             <li>阵营：{{ auto_zhcn_gen(battle.faction) }} ({{ battle.faction.jp }})</li>
             <li>描述：{{ auto_zhcn_gen(battle.profile) }}</li>
+            {% endif %}
         </ul>
     {% endif %}
 
diff --git a/page/zh_cn/changelog.html b/page/zh_cn/changelog.html
new file mode 100644
index 0000000..929ac63
--- /dev/null
+++ b/page/zh_cn/changelog.html
@@ -0,0 +1,29 @@
+{% extends "template/zh_cn/base.html" %}
+
+{% block title %}更新记录/{{ changelog.repo_info.repo_name }}{% endblock %}
+{% block article_content %}
+    <title>更新记录/{{ changelog.repo_info.repo_name }}</title>
+    <p>本页面列出<a href="{{ changelog.repo_info.repo_url }}">{{ changelog.repo_info.repo_name }}</a>存储库的更新记录。本更新记录为人工维护，因而可能会出现记录更新不及时的情况；详细情况请单击上方链接查看。</p>
+    <p>除非另有注明，否则以下更新记录中的时间都以 <b>{{ changelog.repo_info.timezone }}</b> 时区时间为准。</p>
+    <p>查看其它更新记录：<b><a href="/zh_cn/changelog_data.html" target="_blank">数据部分</a></b>&nbsp;|&nbsp;<b><a href="/zh_cn/changelog_parser.html" target="_blank">数据解析器</a></b>&nbsp;|&nbsp;<b><a href="/zh_cn/changelog_site.html">网站页面</a></b></p>
+    <hr/>
+
+    {% if changelog.repo_info.data_sort == "oldest" %}
+        {# 最老的在最前面的话，就反转列表 #}
+        {% set data = changelog.data.reverse() %}
+    {% else %}
+        {% set data = changelog.data %}
+    {% endif %}
+    {% for entry in data %}
+        <h3>{{ entry.date }}{% if entry.commit != "" %}&nbsp;(<a href="{{ urljoin(changelog.repo_info.repo_url, "commit", entry.commit) }}" target="_blank">{{ entry.commit }}</a>){% endif %}</h3>
+        <ul>
+            {% for log in entry.logs %}
+                {% if log|length == 1 %}
+                    <li>{{ log.0 }}</li>
+                {% else %}
+                    <li>{{ log.0 }}<ul style="margin: 0"><li>{{ log.1 }}</li></ul></li>
+                {% endif %}
+            {% endfor %}
+        </ul>
+    {% endfor %}
+{% endblock %}
\ No newline at end of file
diff --git a/page/zh_cn/event_ui_all.html b/page/zh_cn/event_ui_all.html
index 0bd6dcb..548d315 100644
--- a/page/zh_cn/event_ui_all.html
+++ b/page/zh_cn/event_ui_all.html
@@ -2,7 +2,9 @@
 
 {% block title %}活动/{{ event.parent_data.last_parent.name.zh_cn_jp }}/UI{% endblock title %}
 {% block article_content %}
-    {% from "template/zh_cn/_macro.html" import output_usedby_ui_for_all_ui, auto_zhcn_gen %}
+    {% from "template/zh_cn/_macro_page.html" import output_usedby_ui_for_all_ui %}
+    {% from "template/zh_cn/_macro.html" import auto_zhcn_gen %}
+
     <h1>活动/{{ auto_zhcn_gen(event.parent_data.last_parent.name) }}/故事</h1>
     <p>本页列出 活动“{{ auto_zhcn_gen(event.parent_data.last_parent.name) }}” 的全部UI。</p>
     {{ output_usedby_ui_for_all_ui(event.include) }}
diff --git a/page/zh_cn/npc.html b/page/zh_cn/npc.html
index 8f152fb..37b9c9c 100644
--- a/page/zh_cn/npc.html
+++ b/page/zh_cn/npc.html
@@ -2,7 +2,8 @@
 
 {% block title %}NPC/{{ char.name.zh_cn_jp }}{% endblock title %}
 {% block article_content %}
-    {% from "template/zh_cn/_macro.html" import output_usedby_story, output_usedby_track, auto_zhcn_gen, output_relatedto_character %}
+    {% from "template/zh_cn/_macro_page.html" import output_usedby_story, output_usedby_track, output_relatedto_character %}
+    {% from 'template/zh_cn/_macro.html' import auto_zhcn_gen %}
 
     <h1>NPC/{{ auto_zhcn_gen(char.name) }}</h1>
     {% include "template/zh_cn/infobox/npc.html" %}
diff --git a/page/zh_cn/story.html b/page/zh_cn/story.html
index 7fb73f6..ceb9436 100644
--- a/page/zh_cn/story.html
+++ b/page/zh_cn/story.html
@@ -2,9 +2,11 @@
 
 {% block title %}故事/{{ story.name.zh_cn_jp }}{% endblock title %}
 {% block article_content %}
-    {% from "template/zh_cn/_macro.html" import get_ordinal_number, output_usedby_character, output_usedby_track_list, output_usedby_background_list, auto_zhcn_gen, nothing_to_show, track_type_for_show %}
+    {% from "template/base/_macro.html" import get_story_text_color_css, get_storypart_text_color_css %}
+    {% from "template/zh_cn/_macro_page.html" import output_usedby_character, output_usedby_track_list, output_usedby_background_list %}
+    {% from "template/zh_cn/_macro.html" import auto_zhcn_gen, nothing_to_show, filetype_to_name, generate_track_anchor %}
 
-    <h1>故事/<span class="{% if story.is_battle %}text-danger{% elif story.is_memory %}text-momo{% else %}text-primary{% endif %}">{{ auto_zhcn_gen(story.name) }}</span></h1>
+    <h1>故事/<span class="{{ get_story_text_color_css(story) }}">{{ auto_zhcn_gen(story.name) }}</span></h1>
     {% include "template/zh_cn/infobox/story.html" %}
     {% if story.filetype == 11 %}
         <p>“<b>{{ auto_zhcn_gen(story.name) }}</b>”是主线故事第{{ story.pos.volume }}篇第{{ story.pos.chapter }}章的第{{ story.pos.segment }}个故事。</p>
@@ -26,7 +28,7 @@ <h2>战斗/羁绊曲目信息</h2>
     {% if story.is_battle or story.is_memory %}
         <ul>
             {% for track in story.bgm_special %}
-                <li>{{ track_type_for_show(track) }}&nbsp;<a href="/zh_cn/track/{{ track.namespace.1 }}/{{ track.namespace.2 }}.html">{{ track.no }}.&nbsp;{{ track.name.realname.en }} {% if track.name.realname.zh_cn == "" %}({{ track.name.realname.zh_cn }}){% endif %}</a></li>
+                <li>{{ generate_track_anchor(track, 0, 0, 0, 0, 1) }}</li>
             {% endfor %}
         </ul>
     {% else %}
@@ -35,18 +37,24 @@ <h2>战斗/羁绊曲目信息</h2>
 
     <h2>故事部分</h2>
     {% for part in story.part %}
-        {% if part.is_memory %}<h3 class="text-momo"{% elif part.is_battle %}<h3 class="text-danger"{% elif part.is_momotalk %}<h3{% else %}<h3 class="text-primary"{% endif %} id="story-part-{{ loop.index }}">{{ loop.index }}. {{ auto_zhcn_gen(part.name) }}</h3>
-        <p>{{ auto_zhcn_gen(part.desc) }}</p>
-        <h4>人物</h4>
-        {% if part.is_battle %}
-            {{ output_usedby_character(part, "story-" + story.instance_id, story.instance_id, "story", "True", part.battle_leader_pos) }}
-        {% else %}
-            {{ output_usedby_character(part, "story-" + story.instance_id, story.instance_id, "story") }}
-        {% endif %}
-        <h4>曲目</h4>
-        {{ output_usedby_track_list(part.track, "story-" + story.instance_id, "story", story.instance_id) }}
-        <h4>背景</h4>
-        {{ output_usedby_background_list(part.background, "story-" + story.instance_id, story.instance_id, "story") }}
+        {% set part_index = loop.index %}
+        <h3 class="{{ get_storypart_text_color_css(part) }}" id="story-part-{{ loop.index }}">{{ loop.index }}. {{ auto_zhcn_gen(part.name) }}</h3>
+
+        {% for segment in part.data %}
+            <ul style="margin: 0;">
+                <li id="story-part-{{ part_index }}-seg-{{ loop.index }}">{{ auto_zhcn_gen(segment.desc) }}</li>
+                <h4>人物</h4>
+                {% if part.is_battle %}
+                    {{ output_usedby_character(segment, "story-" + story.instance_id, story.instance_id, "story", "True", part.battle_leader_pos) }}
+                {% else %}
+                    {{ output_usedby_character(segment, "story-" + story.instance_id, story.instance_id, "story") }}
+                {% endif %}
+                <h4>歌曲</h4>
+                {{ output_usedby_track_list(segment.track, "story-" + story.instance_id, "story", story.instance_id) }}
+                <h4>背景</h4>
+                {{ output_usedby_background_list(segment.background, "story-" + story.instance_id, story.instance_id, "story") }}
+            </ul>
+        {% endfor %}
     {% else %}
         <p>{{ nothing_to_show }}</p>
     {% endfor %}
diff --git a/page/zh_cn/student.html b/page/zh_cn/student.html
index 20d854c..e07119b 100644
--- a/page/zh_cn/student.html
+++ b/page/zh_cn/student.html
@@ -1,5 +1,7 @@
 {% extends "template/zh_cn/base.html" %}
-{% from 'template/zh_cn/_macro.html' import output_usedby_story, output_usedby_track, auto_zhcn_gen, nothing_to_do, replace_newline_for_p, output_relatedto_character %}
+{% from "template/zh_cn/_macro.html" import replace_newline_for_p %}
+{% from 'template/zh_cn/_macro_page.html' import output_usedby_story, output_usedby_track, output_relatedto_character %}
+{% from "template/zh_cn/_macro.html" import auto_zhcn_gen, nothing_to_show, generate_track_anchor %}
 
 {% block title %}学生/{{ char.student.name.name.zh_cn_jp }}{% endblock title %}
 {% block article_content %}
@@ -33,7 +35,7 @@ <h2>羁绊剧情故事</h2>
         <h3><a {% if i.is_memory %}class="text-momo"{% endif %} href="bond/{{ value.pos.no }}.html">{{ value.pos.no }}. {{ auto_zhcn_gen(value.name) }}</a></h3>
         {% if value.is_memory %}
             {% set track = value.bgm_special[0] %}
-            <big><p>可在该故事中收集到回忆大厅。大厅BGM：<a href="/zh_cn/track/{{ track.namespace.1 }}/{{ track.namespace.2 }}.html">{{ track.no }}. {{ track.name.realname.en }} ({{ track.name.realname.zh_cn }})</a></p></big>
+            <big><p>可在该故事中收集到回忆大厅。大厅BGM：{{ generate_track_anchor(track, 0, 0, 0, 0, 0) }}</p></big>
         {% endif %}
     {% else %}
         <p>{{ nothing_to_show }}</p>
diff --git a/page/zh_cn/tag.html b/page/zh_cn/tag.html
index 5092cf5..1883315 100644
--- a/page/zh_cn/tag.html
+++ b/page/zh_cn/tag.html
@@ -1,5 +1,5 @@
 {% extends "template/zh_cn/base.html" %}
-{% from 'template/zh_cn/_macro.html' import output_usedby_track, output_usedby_background %}
+{% from 'template/zh_cn/_macro_page.html' import output_usedby_track, output_usedby_background %}
 
 {% block title %}标签/{{ tag.name.zh_cn }}{% endblock title %}
 {% block article_content %}
diff --git a/page/zh_cn/track.html b/page/zh_cn/track.html
index ecf1604..1fff889 100644
--- a/page/zh_cn/track.html
+++ b/page/zh_cn/track.html
@@ -5,12 +5,14 @@
     <script src="/static/js/track_player.js"></script>
 {% endblock other_head %}
 {% block article_content %}
-    {% from "template/zh_cn/_macro.html" import track_type_for_show, output_usedby_background, output_usedby_story, output_usedby_battle, output_usedby_ui, output_usedby_video, nothing_to_show, output_usedby_character_dict, track_version_video_player %}
+    {% from "template/zh_cn/_macro_page.html" import output_usedby_background, output_usedby_story, output_usedby_battle, output_usedby_ui, output_usedby_video, output_usedby_character_dict, track_version_video_player %}
+    {% from "template/zh_cn/_macro.html" import tracktype_to_name, generate_album_anchor, generate_track_anchor, nothing_to_show %}
 
     <h1>曲子/{{ track.no }}. {{ track.name.realname.en }} {% if track.name.realname.zh_cn %}({{ track.name.realname.zh_cn }}){% endif %}</h1>
     {% include "template/zh_cn/infobox/track.html" %}
-    <p><b>{{ track.name.realname.en }}</b> {% if track.name.realname.zh_cn %}(<b>{{ track.name.realname.zh_cn }}</b>){% endif %} 是{{ track_type_for_show(track) }}中的第{{ track.no }}首曲子。</p>
+    <p><b>{{ track.name.realname.en }}</b> {% if track.name.realname.zh_cn %}(<b>{{ track.name.realname.zh_cn }}</b>){% endif %} 是{{ tracktype_to_name(track.track_type) }}中的第{{ track.no }}首曲子。</p>
     <p>{{ track.desc.zh_cn }}</p>
+
     <h2>名称翻译</h2>
     <h3>原始名称</h3>
     <ul>
@@ -26,12 +28,26 @@ <h3>其他名称</h3>
             <li>{{ nothing_to_show }}</li>
         {% endfor %}
     </ul>
+
+    <h2>曲子与专辑</h2>
+    <p>此曲子已被收录至以下专辑。</p>
+    <ul>
+        {% for album in track.album %}
+            <li>{{ generate_album_anchor(album) }}</li>
+        {% endfor %}
+    </ul>
+
     <h2>在线播放音乐</h2>
-    <p>提示：为避免潜在版权侵犯风险，我们此处使用的<b>第三方嵌入式网页播放器</b>来提供服务。你也可以在信息栏（infobox）中手动访问它们。</p>
+    <p>提示：为避免潜在版权侵犯风险，我们此处使用<b>第三方嵌入式网页播放器</b>来提供服务。你也可以在信息栏（infobox）中手动访问它们。</p>
     <p>单击下列链接时，您也同时同意各平台/服务提供商的对应服务条款。</p>
     {{ track_version_video_player(track.version) }}
+
     <h2>使用信息</h2>
     <p>此处显示引用了这首曲子的实例。</p>
+    <h3>相关曲子</h3>
+    <ul>
+        {% for i in track.related_to.track_other %}<li>{{ generate_track_anchor(i, 0, 0, 0, 0, 1) }}</li>{% else %}<li>无曲子！</li>{% endfor %}
+    </ul>
     <h3>背景</h3>
     {{ output_usedby_background(track.used_by.data_background, "track-" + track.instance_id, track.instance_id, "track") }}
     <h3>故事</h3>
diff --git a/page/zh_cn/ui.html b/page/zh_cn/ui.html
index 7ca590c..1fb32c0 100644
--- a/page/zh_cn/ui.html
+++ b/page/zh_cn/ui.html
@@ -4,10 +4,10 @@
 {% block article_content %}
     <h1>UI/{{ ui.name.zh_cn }}</h1>
     {% include "template/zh_cn/infobox/ui.html" %}
-    {% from "template/zh_cn/_macro.html" import get_social_for_composer, auto_zhcn_gen %}
+    {% from "template/zh_cn/_macro.html" import get_social_for_composer, auto_zhcn_gen, generate_track_anchor %}
     <p><b>{{ ui.name.zh_cn }}</b> 为蔚蓝档案UI（用户界面）中的一部分。</p>
     <p>描述：{{ ui.desc.zh_cn }}</p>
     <h2 id="track">使用的曲子</h2>
-    <p>曲子：<a href="/zh_cn/{{ ui.track.namespace|join('/') }}.html#{{ ui.uuid }}">{{ ui.track.no }}. {{ ui.track.name.realname.en }} {% if ui.track.name.realname.zh_cn %}({{ ui.track.name.realname.zh_cn }}){% endif %}</a></p>
+    <p>曲子：{{ generate_track_anchor(ui.track, 0, 0, 0, 0, 0) }}</p>
     <p>作曲者：{{ ui.track.composer.nickname }} ({{ get_social_for_composer(ui.track.composer) }})</p>
 {% endblock %}
\ No newline at end of file
diff --git a/page/zh_cn/ui_all.html b/page/zh_cn/ui_all.html
index 53eef48..2c73f6b 100644
--- a/page/zh_cn/ui_all.html
+++ b/page/zh_cn/ui_all.html
@@ -2,7 +2,7 @@
 
 {% block title %}{{ ui.name.zh_cn }}{% endblock title %}
 {% block article_content %}
-    {% from "template/zh_cn/_macro.html" import output_usedby_ui_for_all_ui, output_usedby_ui_list %}
+    {% from "template/zh_cn/_macro_page.html" import output_usedby_ui_for_all_ui, output_usedby_ui_list %}
     <h1>{{ ui.name.zh_cn }}</h1>
     <p>{{ ui.desc.zh_cn }}</p>
     {% if ui.filetype == -61 %}
diff --git a/page/zh_cn/video.html b/page/zh_cn/video.html
index b71d7f5..37eb455 100644
--- a/page/zh_cn/video.html
+++ b/page/zh_cn/video.html
@@ -1,5 +1,5 @@
 {% extends "template/zh_cn/base.html" %}
-{% from 'template/zh_cn/_macro.html' import output_usedby_track_list, track_version_video_player %}
+{% from 'template/zh_cn/_macro_page.html' import output_usedby_track_list, track_version_video_player %}
 
 {% block title %}视频/{{ video.name.zh_cn }}{% endblock title %}
 {% block other_head %}
diff --git a/single_template.py b/single_template.py
new file mode 100644
index 0000000..6bdffc4
--- /dev/null
+++ b/single_template.py
@@ -0,0 +1,33 @@
+import json
+import os
+import urllib.parse
+import webbrowser
+from jinja2 import Environment, FileSystemLoader
+from main_tool import JinjaTool
+
+environment = Environment(loader=FileSystemLoader(os.path.split(__file__)[0]), extensions=["jinja2.ext.loopcontrols",
+                                                                                           "jinja2.ext.do"])
+environment.filters["js_string_safe"] = JinjaTool.js_string_safe
+environment.filters["js_html_string_safe"] = JinjaTool.js_html_string_safe
+environment.filters["is_list"] = lambda obj: isinstance(obj, list)
+environment.filters["page_minify_html"] = JinjaTool.page_minify_html
+environment.globals["get_current_utc"] = JinjaTool.get_current_utc
+environment.globals["generate_tooltip_id"] = JinjaTool.generate_tooltip_id
+environment.globals["get_outer_json"] = JinjaTool.get_outer_json
+environment.globals["arg_check"] = JinjaTool.arg_check
+environment.globals["urljoin"] = urllib.parse.urljoin
+
+path = "test.txt"
+name = "test.html"
+data_path = "exported_data/main/story/main/1/1/02.json"
+
+with open(data_path, mode="r", encoding="UTF-8") as file:
+    data = json.load(file)
+
+template = environment.get_template(path)
+result = template.render(is_static="", story=data)
+os.makedirs(os.path.split(os.path.join("data_html/", name))[0], exist_ok=True)
+with open(os.path.join("data_html/", name), mode="w", encoding="UTF-8") as file:
+    file.write(result)
+
+webbrowser.open("http://localhost:9000/" + name)
diff --git a/static b/static
index 5610370..f805428 160000
--- a/static
+++ b/static
@@ -1 +1 @@
-Subproject commit 56103701a47ddd4e40f4f96180791867b9822894
+Subproject commit f80542839a8523ee7c72a14ad3cbe3db5409fb5e
diff --git a/template/base/_macro.html b/template/base/_macro.html
new file mode 100644
index 0000000..298f103
--- /dev/null
+++ b/template/base/_macro.html
@@ -0,0 +1,13 @@
+{% macro anchor_new_tab(flag) %}{% if arg_check(flag) %}target="_blank"{% endif %}{% endmacro %}
+
+{% macro replace_newline_for_p(text) %}{{ text|replace("\n\n", "</p><br /><p>")|replace("\n", "</p><p>") }}{% endmacro %}
+
+{% macro get_story_text_color_css(story) %}{% if story.is_memory %}text-momo{% elif story.is_battle %}text-danger{% else %}text-primary{% endif %}{% endmacro %}
+
+{% macro get_storypart_text_color_css(story_part) %}{% if story_part.is_memory %}text-momo{% elif story_part.is_battle %}text-danger{% elif story_part.is_momotalk %}text-black{% else %}text-primary{% endif %}{% endmacro %}
+
+{% macro get_stu_type_text_color_css(text) %}{% if text == "Explosion" or text == "LightArmor" %}text-damage-explosive{% elif text == "Pierce" or text == "HeavyArmor" %}text-damage-piercing{% elif text == "Mystic" or text == "Unarmed" %}text-damage-mystic{% elif text == "Main" %}text-role-striker{% elif text == "Support" %}text-role-special{% else %}text-damage-sonic{% endif %}{% endmacro %}
+
+{% macro word_case(text) %}{{ text[0]|upper }}{{ text[1:] }}{% endmacro %}
+
+{% macro generate_tooltip_anchor(tooltip_id) %}onmouseover="showTooltip(this)" data-tooltip="{{ tooltip_id }}"{% endmacro %}
diff --git a/template/base/base.html b/template/base/base.html
index 2aa6ccd..2711c6d 100644
--- a/template/base/base.html
+++ b/template/base/base.html
@@ -7,10 +7,10 @@
 
     <title>{% block title %}{% endblock title %}- BA OST Index</title>
 
-    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/themes/light.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha256-whL0tQWoY1Ku1iskqPFvmZ+CHsvmRWx/PIoEvIeWh4I=" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/dist/tippy-bundle.umd.min.js"></script>
+    <script src="/static/jsdelivr/jquery.min.js"></script>
+    <link rel="stylesheet" href="/static/jsdelivr/tippy.light.min.css">
+    <script src="/static/jsdelivr/popper.min.js"></script>
+    <script src="/static/jsdelivr/tippy-bundle.umd.min.js"></script>
 
     <link rel="stylesheet" href="/static/css/git-wiki-style.css">
     <link rel="stylesheet" href="/static/css/wikipedialize.css">
@@ -49,35 +49,49 @@
 </head>
 
 <body style="visibility: visible; opacity: 1;" lang="{% block body_langcode %}{% endblock body_langcode %}">
-<div class="wrapper">
-    {% block header %}{% endblock header %}
-    <script>
-        function sidebar_toggle() {
-            var sidebar = document.getElementById("git-wiki-sidebar");
-            if (sidebar.style.display == "block") {
-                sidebar.style.display = "none";
-                sidebar.style.position = "inherit";
-            } else {
-                $(sidebar).attr('style', 'display: block;');
+    <div class="wrapper" id="main-wrapper">
+        {% block header %}{% endblock header %}
+        <script>
+            function sidebar_toggle() {
+                var sidebar = document.getElementById("git-wiki-sidebar");
+                if (sidebar.style.display === "block") {
+                    sidebar.style.display = "none";
+                    sidebar.style.position = "inherit";
+                } else {
+                    $(sidebar).attr('style', 'display: block;');
+                }
             }
-        }
-    </script>
+        </script>
+
+        <div class="git-wiki-page">
+            <div id="interpage-navi">
+                {% block navi %}{% endblock navi %}<hr />
+            </div>
 
-    <div class="git-wiki-page">
-        <div id="git-wiki-content">
-            {% block navi %}{% endblock navi %}
-            {% block article_content %}{% endblock article_content %}{{ content }}
+            <div id="git-wiki-content">
+                {% block article_content %}{% endblock article_content %}{{ content }}
+            </div>
         </div>
+        <script>display_zhcn_element();</script>
     </div>
 
-    {% block footer %}{% endblock footer %}
-    <script>display_zhcn_element();</script>
-</div>
+    <div id="interpage-navi-bottom">
+        <div>
+            <div id="interpage-navi-bottom-left">
+                {{ navi_var }}
+            </div>
+            <div id="interpage-navi-bottom-right"></div>
+        </div>
+    </div>
+
+    <div class="wrapper" id="bottom-wrapper">
+        {% block footer %}{% endblock footer %}
+    </div>
 
 <!--
 This page is generated with Jinja2 by Python 3.
 For more information about this project: https://github.com/BA-OST-Index/
-Generated time (UTC): {{ 0|get_current_utc }}
+Generated time (UTC): {{ get_current_utc() }}
 -->
 </body>
 </html>
diff --git a/template/en/_macro.html b/template/en/_macro.html
index cb71b4f..0d97e17 100644
--- a/template/en/_macro.html
+++ b/template/en/_macro.html
@@ -1,466 +1,143 @@
-{% from 'template/en/_macro_tooltip.html' import tooltip_add_data_js, tooltip_storyinfo, tooltip_storypart, tooltip_background, tooltip_track, tooltip_character %}
+{% from 'template/base/_macro.html' import anchor_new_tab, get_storypart_text_color_css, get_stu_type_text_color_css, generate_tooltip_anchor %}
+{% set curr_lang = "en" %}
 
-{% macro word_case(text) %}
-        {{text[0]|upper}}{{text[1:]}}
-{% endmacro %}
-
-{% macro tag_altogether(tags, instance_id) %}
-    {% for tag in tags %}<a href="/en/tag/{{ tag.namespace[-1] }}.html{% if instance_id %}#{{ instance_id }}{% endif %}"><span class="badge badge-{{ tag.color_css }} badge-tag">{{ tag.name.en }}</span></a>&nbsp;{% endfor %}
-{% endmacro %}
-
-{% macro track_type_for_show(track) %}
-    {% if track.track_type == 0 %}OST{% elif track.track_type == 1 %}Short Animation{% elif track.track_type == 2 %}Animation{% else %}Other{% endif %}
-{% endmacro %}
-
-{% macro filetype_to_name(filetype) %}{% set filetype = filetype|int %}{% if filetype == 11 %}Main{% elif filetype == 12 %}Side{% elif filetype == 13 %}Short{% elif filetype == 14 %}Event{% elif filetype == 15 %}Bond{% elif filetype == 16 %}Other{% endif %}{% endmacro %}
+{# ------------------------------------------------------------------- #}
+{# ------------------------------- 通用函数 --------------------------- #}
+{# ------------------------------------------------------------------- #}
 
+{% macro extract_storypart_all_desc(data) %}{% for i in data %}{{ i.desc.en|js_string_safe }}{% endfor %}{% endmacro %}
 {% macro get_ordinal_number(number) %}{% if number == 1 %}1st{% elif number == 2 %}2nd{% elif number == 3 %}3rd{% else %}{{ number }}th{% endif %}{% endmacro %}
 
-{% macro replace_newline_for_p(text) %}{{ text|replace("\n\n", "</p><br /><p>")|replace("\n", "</p><p>") }}{% endmacro %}
-
-{% macro get_stu_type_text_color_css(text) %}{% if text == "Explosion" or text == "LightArmor" %}text-damage-explosive{% elif text == "Pierce" or text == "HeavyArmor" %}text-damage-piercing{% elif text == "Mystic" or text == "Unarmed" %}text-damage-mystic{% elif text == "Main" %}text-role-striker{% elif text == "Support" %}text-role-special{% else %}text-damage-sonic{% endif %}{% endmacro %}
-
-{% macro output_usedby_story(data_story, instance_uuid, instance_key) %}
-    {% set _curr_filetype = namespace(filetype=0) %}
-    {% set tooltip_data = {} %}
-
-    {% for key, value in data_story.items() %}
-        {# 记录当前的filetype，稍后用于切割不同故事 #}
-        {% if _curr_filetype.filetype == 0 %}
-            {# 循环刚刚开始，加上<ul> #}
-            {% set _curr_filetype.filetype = value.0.filetype %}
-            <h4>{{ filetype_to_name(_curr_filetype.filetype) }} Story</h4><ul>
-        {% else %}
-            {% if _curr_filetype.filetype != value.0.filetype %}
-                {# 如果当前文件已经不再是之前的 #}
-                {% set _curr_filetype.filetype = value.0.filetype %}
-                </ul><h4>{{ filetype_to_name(_curr_filetype.filetype) }} Story</h4><ul>
-            {% endif %}
-        {% endif %}
-
-        {% set tooltip_id = generate_tooltip_id() %}
-
-        <li id="story-{{ value.0.instance_id }}">
-        {% set value = value[0] %}
-        {% if value.filetype == 15 %}
-            {% set target_url = "/en/character/student/" + value.pos.student|string|lower + "/bond/" + value.pos.no|string + ".html" %}
-            <a href="{{ target_url }}" onmouseover="showTooltip(this, '{{ tooltip_id }}')">
-                <img src="/static/images/student/icon/{{ value.student.image.collection_texture }}.webp" class="icon-stu"/>{{ value.student.name.personal_name.en }} Bond Story {{ value.pos.no }}: {{ value.name.en }}
-            </a>
-        {% elif value.filetype == 14 %}
-            {% set target_url = "/en/event/" + value.pos.event_id|string + "/story/" + value.pos.segment|string + ".html" %}
-            <a href="{{ target_url }}" onmouseover="showTooltip(this, '{{ tooltip_id }}')">Event {{ value.parent_data.0.name.en }} Story {{ value.pos.segment }}: {{ value.name.en }}
-            </a>
-        {% else %}
-            {% if value.filetype == 11 %}
-                {% set story_type = "main" %}
-            {% elif value.filetype == 12 %}
-                {% set story_type = "side" %}
-            {% elif value.filetype == 13 %}
-                {% set story_type = "short" %}
-            {% else %}
-                {% set story_type = "other" %}
-            {% endif %}
-            {% set target_url = "/en/main/story/" + story_type|string + "/" + value.pos.volume|string + "/" + value.pos.chapter|string + "/" + value.pos.segment|string + ".html" %}
-            <a href="{{ target_url }}" onmouseover="showTooltip(this, '{{ tooltip_id }}')">
-                {{ word_case(story_type) }}Story Volume {{ value.pos.volume }} Chapter {{ value.pos.chapter }} Episode {{ value.pos.segment }}: {{ value.name.en }}
-            </a>
-        {% endif %}
-        {% do tooltip_data.update({tooltip_id: tooltip_storyinfo(value)}) %}
-
-        {# appearedAt snippet #}
-        {% if instance_uuid %}
-            {% set _part_track_html = [] %}
-            {% for part in value.part %}
-                {% set _loop_index = loop.index %}
-                {% for part2 in part[instance_key] %}
-                    {% if part2.uuid == instance_uuid %}
-                        {% if part.is_memory %}
-                            {% set ele_class = 'class="text-momo"' %}
-                        {% elif part.is_battle %}
-                            {% set ele_class = 'class="text-danger"' %}
-                        {% elif part.is_momotalk %}
-                            {% set ele_class = 'class="text-black"' %}
-                        {% else %}
-                            {% set ele_class = 'class="text-primary"' %}
-                        {% endif %}
-
-                        {% set tooltip_id = generate_tooltip_id() %}
+{# 代为调用 template_en 全局里的函数 #}
+{% macro tracktype_to_name(track_type) %}{{ template_en.tracktype_to_name(track_type) }}{% endmacro %}
+{% macro filetype_to_name(ft) %}{{ template_en.filetype_to_name(ft) }}{% endmacro %}
+{% macro generate_story_url(story) %}{{ py_generate_story_url(curr_lang, story) }}{% endmacro %}
 
-                        {% if _part_track_html|length == 0 %}
-                            {% do _part_track_html.append('<span>&nbsp;(appeared at <a href="' + target_url + '#story-part-' + _loop_index|string + '" ' + ele_class + ' onmouseover="showTooltip(this,' + "'" +  tooltip_id + "'" + ')"><i>[' + _loop_index|string + '] ' + part.name.en + '</i></a>') %}
-                        {% else %}
-                            {% do _part_track_html.append(',&nbsp;<a href="' + target_url + '#story-part-' + _loop_index|string + '" ' + ele_class + ' onmouseover="showTooltip(this,' + "'" +  tooltip_id + "'" + ')"><i>[' + _loop_index|string + '] ' + part.name.en + '</i></a>') %}
-                        {% endif %}
+{# 通用的Story名称生成 #}
+{% macro generate_story_name(story) %}{% set ft = story.filetype %}{% if ft == 15 %}<span><img src="/static/images/student/icon/{{ story.student.image.collection_texture }}.webp" class="icon-stu">{{ story.student.name.personal_name.en|js_string_safe }}&nbsp;Bond&nbsp;Story&nbsp;{{ story.pos.no }}&nbsp;{{ story.name.en|js_string_safe }}</span>{% elif ft == 14 %}<span>Event&nbsp;{{ story.parent_data.0.name.en|js_string_safe }}&nbsp;Story&nbsp;{{ story.pos.segment }}:&nbsp;{{ story.name.en|js_string_safe }}</span>{% else %}{{ filetype_to_name(ft) }}&nbsp;Story&nbsp;Volume&nbsp;{{ story.pos.volume }}&nbsp;Chapter&nbsp;{{ story.pos.chapter }}&nbsp;Episode&nbsp;{{ story.pos.segment }}:&nbsp;{{ story.name.en|js_string_safe }}{% endif %}{% endmacro %}
 
-                        {% do tooltip_data.update({tooltip_id: tooltip_storypart(value, part)}) %}
-                        {% break %}
-                    {% endif %}
-                {% endfor %}
-            {% endfor %}
-            {% do _part_track_html.append(")</span>") %}
-
-            {{ _part_track_html|join("") }}
-        {% endif %}
-        </li>
+{# 通用的UI <a>生成 #}
+{% macro generate_ui_anchor(ui) %}
+    {% if ui.filetype == 32 %}
+        {% set url %}/{{ curr_lang }}/event/{{ ui.event_id }}/ui/{{ ui.id }}.html#track{% endset %}
     {% else %}
-        <p>Nothing to show!</p>
-    {% endfor %}
-    </ul>
-    {{ tooltip_add_data_js(tooltip_data) }}
+        {% set url %}/{{ curr_lang }}/ui/{{ ui.namespace.1 }}.html#track{% endset %}
+    {% endif %}
+    <span><a href="{{ url }}" target="_blank">{{ ui.name.en|js_string_safe }}</a>&nbsp;-&nbsp;{{ ui.desc.en|js_string_safe }}</span>
 {% endmacro %}
 
-{% macro output_usedby_battle(data_battle) %}
-    <ul>
-        {% for key, value in data_battle.items() %}
-            {% set value = value[0] %}
-            <li id="{{ value.uuid }}">
-            {% if value.filetype == 21 %}
-                {% if value.no[0] == "N" %}
-                    {% set mission_type = "Normal" %}
-                {% else %}
-                    {% set mission_type = "Hard" %}
-                {% endif %}
-                    <a href="/en/main/battle/main/{{ value.chapter }}/{{ value.no }}.html#track">Main Battle Chapter {{ value.chapter }} Mission {{ value.no[1] }} ({{ mission_type }}, Sub {{ value.no[2] }})</a>
-            {% elif value.filetype == 22 %}
-                {% if value.no[0] == "N" %}
-                    {% set mission_type = "Normal" %}
-                {% else %}
-                    {% set mission_type = "Hard" %}
-                {% endif %}
-                    <a href="/en/event/{{ value.event_id }}/{{ value.no }}.html#track">Event {{ value.parent_data.0.name.en }} Battle No.{{ value.no[1:] }} ({{ mission_type }}): {{ value.name.en }}</a>
-            {% else %}
-                {% if value.filetype == 24 %}
-                    {% set mission_type = "total_assault" %}
-                {% elif value.filetype == 25 %}
-                    {% set mission_type = "bounty_hunt" %}
-                {% elif value.filetype == 26 %}
-                    {% set mission_type = "school_exchange" %}
-                {% else %}
-                    {% set mission_type = "special_commision" %}
-                {% endif %}
-                    <a href="/en/main/battle/{{ mission_type }}/{{ value.id }}.html#track">{{ value.name.en }}</a>
-            {% endif %}
-            </li>
-        {% else %}
-            <li>Nothing to show!</li>
-        {% endfor %}
-    </ul>
+{# 通用的Track <a>生成 #}
+{% macro generate_track_anchor(track, with_counter, count_num, html_id, tooltip_id, enable_author) %}
+    <a href="/{{ curr_lang }}/track/{{ track.namespace.1 }}/{{ track.namespace.2 }}.html{% if arg_check(html_id) %}#{{ html_id }}{% endif %}" {% if arg_check(tooltip_id) %}{{ generate_tooltip_anchor(tooltip_id) }}{% endif %}>
+        <span>{% if arg_check(with_counter) %}【{{ count_num }}】{% endif %}{{ filetype_to_name(track.filetype) }}&nbsp;{{ track.no }}.&nbsp;{{ track.name.realname.en|js_string_safe }}</span>
+    </a>
+    {% if arg_check(enable_author) %}<span>&nbsp;by&nbsp;{{ track.composer.nickname }}</span>{% endif %}
 {% endmacro %}
 
-{% macro output_usedby_ui(data_ui) %}
-    <ul>
-        {% for key, value in data_ui.items() %}
-            {% set i = value.0 %}
-
-            <!--Special case for UiInfoEvent-->
-            <li id="{{ i.uuid }}">
-            {% if i.filetype == 32 %}
-                <a href="/en/event/{{ i.event_id }}/ui/{{ i.id }}.html#track">{{ i.name.en }}</a>&nbsp;-&nbsp;{{ i.desc.en }}
-            {% else %}
-                <a href="/en/ui/{{ i.namespace.1 }}.html#track">{{ i.name.en }}</a>&nbsp;-&nbsp;{{ i.desc.en }}
-            {% endif %}
-            </li>
-        {% else %}
-            <li>Nothing to show!</li>
-        {% endfor %}
-    </ul>
+{# 通用的Background <a>生成 #}
+{% macro generate_background_anchor(bg, html_id, tooltip_id) %}
+    <div id="{{ bg.uuid }}">
+        <img src="{{ bg.image.value }}" {% if arg_check(tooltip_id) %}onmouseover="showTooltipGallerySmall(this)" data-tooltip="{{ tooltip_id }}"{% endif %}>
+        <p class="gallery-caption">
+            <a href="/{{ curr_lang }}/background/{{ bg.filename }}.html{% if arg_check(html_id) %}#{{ html_id }}{% endif %}" {% if arg_check(tooltip_id) %}{{ generate_tooltip_anchor(tooltip_id) }}{% endif %} target="_blank">{{ bg.filename|js_string_safe }}</a>
+        </p>
+    </div>
 {% endmacro %}
 
-{% macro output_usedby_ui_list(data_ui) %}
-    <ul>
-        {% for i in data_ui %}
-            <!--Special case for UiInfoEvent-->
-            {% if i.filetype == 32 %}
-                <li><a href="/en/event/{{ i.event_id }}/ui/{{ i.id }}.html">{{ i.name.en }}</a>&nbsp;-&nbsp;{{ i.desc.en }}</li>
-            {% else %}
-                <li><a href="/en/ui/{{ i.namespace.1 }}.html">{{ i.name.en }}</a>&nbsp;-&nbsp;{{ i.desc.en }}</li>
-            {% endif %}
+{# 通用的Character <a>生成 #}
+{% macro generate_character_anchor(char, with_school, with_club, html_id, tooltip_id, show_combatant_info, is_leader, new_tab) %}
+    {% if char.filetype == 52 %}
+        <a href="/{{ curr_lang }}/character/npc/{{ char.namespace[-1]|lower }}/{% if arg_check(html_id) %}#{{ html_id }}{% endif %}" {% if arg_check(tooltip_id) %}{{ generate_tooltip_anchor(tooltip_id) }}{% endif %} {{ anchor_new_tab(new_tab) }}>
+            <span>{{ char.name.en|js_string_safe }}</span>
+        </a>
+    {% else %}
+        {% if arg_check(show_combatant_info) %}
+            {% if arg_check(is_leader) %}<img src="/static/images/ui/Image_Conquest_Leader.png" class="story-battle-leader">{% endif %}
+            <span><b class="{{ get_stu_type_text_color_css(char.combatant_info.squad_type.type) }}">{{ char.combatant_info.squad_type.lang.en }}</b>&nbsp;&#124;</span>
+        {% endif %}
+        {% if arg_check(with_school) %}
+            <img src="/static/images/schoolicon/School_Icon_{{ char.school_id|upper }}_W.png" class="invert-light schoolicon-p">
+        {% endif %}
+        <span>
+            <a href="/{{ curr_lang }}/character/student/{{ char.name.path_name|lower }}/{% if arg_check(html_id) %}#{{ html_id }}{% endif %}" {% if arg_check(tooltip_id) %}{{ generate_tooltip_anchor(tooltip_id) }}{% endif %} {{ anchor_new_tab(new_tab) }}>
+                <img src="/static/images/student/icon/{{ char.image.collection_texture }}.webp" class="icon-stu">
+                <span>{{ char.name.personal_name.en|js_string_safe }}</span>
+            </a>
+        </span>
+        {% if arg_check(show_combatant_info) %}
+            <span>&nbsp;
+                <span class="{{ get_stu_type_text_color_css(char.combatant_info.attack_type.type) }}">{{ char.combatant_info.attack_type.lang.en }}</span>&nbsp;/&nbsp;<span class="{{ get_stu_type_text_color_css(char.combatant_info.armor_type.type) }}">{{ char.combatant_info.armor_type.lang.en }}</span>
+            </span>
         {% else %}
-            <li>Nothing to show!</li>
-        {% endfor %}
-    </ul>
-{% endmacro %}
-
-{% macro output_usedby_ui_for_all_ui(data_ui) %}
-    <ul>
-        {% for i in data_ui %}
-            {% set i = i[1] %}
-
-            <!--Special case for UiInfoEvent-->
-            {% if i.filetype == 32 %}
-                <li><a href="/en/event/{{ i.event_id }}/ui/{{ i.id }}.html">{{ i.name.en }}</a>&nbsp;-&nbsp;{{ i.desc.en }}</li>
-            {% else %}
-                <li><a href="/en/ui/{{ i.namespace.1 }}.html">{{ i.name.en }}</a>&nbsp;-&nbsp;{{ i.desc.en }}</li>
+            {% if arg_check(with_club) %}
+                <span>&nbsp;[{{ char.club.en|js_string_safe }}]</span>
             {% endif %}
-        {% else %}
-            <li>Nothing to show!</li>
-        {% endfor %}
-    </ul>
-{% endmacro %}
-
-{% macro output_usedby_background(data_background, html_id, instance_id, instance_type) %}
-    {% if instance_type in ["track"] %}
-        {% set tooltip_data = {} %}
-        {% set enable_tooltip = 1 %}
-    {% endif %}
-
-    <table class="gallery">
-        <tr>
-            {% for key, value in data_background.items() %}
-                {% if enable_tooltip == 1 %}
-                    {% set tooltip_id = generate_tooltip_id() %}
-                {% endif %}
-
-                <td class="gallery-img" id="{{ value.0.uuid }}"><img src="{{ value.0.image.value }}"><p class="gallery-caption"><a href="/en/background/{{ value.0.filename }}.html{% if html_id %}#{{ html_id }}{% endif %}" {% if enable_tooltip == 1 %}onmouseover="showTooltip(this, '{{ tooltip_id }}')"{% endif %}>{{ value.0.filename }}</a></p></td>
-
-                {% if enable_tooltip == 1 %}
-                    {% do tooltip_data.update({tooltip_id: tooltip_background(value.0, instance_id, instance_type)}) %}
-                {% endif %}
-            {% else %}
-                <td>Nothing to show!</td>
-            {% endfor %}
-        </tr>
-    </table>
-
-    {% if enable_tooltip == 1 %}
-        {{ tooltip_add_data_js(tooltip_data) }}
-    {% endif %}
-{% endmacro %}
-
-{% macro output_usedby_background_list(data_background, html_id, instance_id, instance_type) %}
-    {% if instance_type in ["story"] %}
-        {% set tooltip_data = {} %}
-        {% set enable_tooltip = 1 %}
-    {% endif %}
-
-    <table class="gallery">
-        <tr>
-            {% for value in data_background %}
-                {% if enable_tooltip == 1 %}
-                    {% set tooltip_id = generate_tooltip_id() %}
-                {% endif %}
-
-                <td class="gallery-img"><img src="{{ value.image.value }}"><p class="gallery-caption"><a href="/en/background/{{ value.filename }}.html#{{ html_id }}" {% if enable_tooltip == 1 %}onmouseover="showTooltip(this, '{{ tooltip_id }}')"{% endif %}>{{ value.filename }}</a></p></td>
-
-                {% if enable_tooltip == 1 %}
-                    {% do tooltip_data.update({tooltip_id: tooltip_background(value, instance_id, instance_type)}) %}
-                {% endif %}
-            {% else %}
-                <td>Nothing to show!</td>
-            {% endfor %}
-        </tr>
-    </table>
-
-    {% if enable_tooltip == 1 %}
-        {{ tooltip_add_data_js(tooltip_data) }}
+        {% endif %}
     {% endif %}
 {% endmacro %}
 
-{% macro output_usedby_track(data_track, with_counter, html_id, instance_id, instance_type) %}
-    {% set _with_counter = with_counter or 0 %}
-    {% if instance_type in ["character", "background"] %}
-        {% set tooltip_data = {} %}
-        {% set enable_tooltip = 1 %}
-    {% endif %}
-
-    <ul>
-        {% for key, value in data_track.items() %}
-            {% set track = value.0 %}
-            {% set track_type = track_type_for_show(track) %}
+{# 通用的Story <a>生成 #}
+{% macro generate_story_anchor(story, tooltip_id, new_tab) %}
+    {% set value = story %}
+    {% set target_url = generate_story_url(story) %}
 
-            {% if enable_tooltip == 1 %}
-                {% set tooltip_id = generate_tooltip_id() %}
-            {% endif %}
-
-            <li id="track-{{ track.instance_id }}"><a href="/en/track/{{ track.namespace.1 }}/{{track.namespace.2 }}.html{% if instance_uuid %}#{{ html_id }}{% endif %}" {% if enable_tooltip == 1 %}onmouseover="showTooltip(this, '{{ tooltip_id }}')"{% endif %}>{% if _with_counter != 0 or _with_counter %}【{{ value.1 }}】{% endif %}{{ track_type }} {{ track.no }}. {{ track.name.realname.en }}</a> by {{ track.composer.nickname }}</li>
-
-            {% if enable_tooltip == 1 %}
-                {% do tooltip_data.update({tooltip_id: tooltip_track(track, instance_id, instance_type)}) %}
-            {% endif %}
-        {% else %}
-            <li>Nothing to show!</li>
-        {% endfor %}
-    </ul>
-
-    {% if enable_tooltip == 1 %}
-        {{ tooltip_add_data_js(tooltip_data) }}
+    {% if value.filetype == 15 %}
+        <a href="{{ target_url }}" {{ anchor_new_tab(new_tab) }} {% if arg_check(tooltip_id) %}{{ generate_tooltip_anchor(tooltip_id) }}{% endif %}>{{ generate_story_name(story) }}</a>
+    {% elif value.filetype == 14 %}
+        <a href="{{ target_url }}" {{ anchor_new_tab(new_tab) }} {% if arg_check(tooltip_id) %}{{ generate_tooltip_anchor(tooltip_id) }}{% endif %}>{{ generate_story_name(story) }}</a>
+    {% else %}
+        <a href="{{ target_url }}" {{ anchor_new_tab(new_tab) }} {% if arg_check(tooltip_id) %}{{ generate_tooltip_anchor(tooltip_id) }}{% endif %}>{{ generate_story_name(story) }}</a>
     {% endif %}
 {% endmacro %}
 
-{% macro output_usedby_track_list(data_track, html_id, instance_type, instance_id) %}
-    <ul>
-        {% if instance_type == "story" %}
-            {% set tooltip_data = {} %}
-            {% set enable_tooltip = 1 %}
-        {% endif %}
-
-        {% for value in data_track %}
-            {% set track_type = track_type_for_show(value) %}
-
-            {% if enable_tooltip == 1 %}
-                {% set tooltip_id = generate_tooltip_id() %}
-            {% endif %}
-
-            <li id="track-{{ value.instance_id }}"><a href="/en/track/{{ value.namespace.1 }}/{{ value.namespace.2 }}.html{% if instance_id %}#{{ html_id }}{% endif %}" {% if enable_tooltip == 1 %}onmouseover="showTooltip(this, '{{ tooltip_id }}')"{% endif %}>{{ track_type }} No.{{ value.no }}: {{ value.name.realname.en }}</a> by {{ value.composer.nickname }}</li>
-
-            {% if enable_tooltip == 1 %}
-                {% do tooltip_data.update({tooltip_id: tooltip_track(value, instance_id, instance_type)}) %}
-            {% endif %}
-        {% else %}
-            <li>Nothing to show!</li>
-        {% endfor %}
-    </ul>
-
-    {% if enable_tooltip == 1 %}
-        {{ tooltip_add_data_js(tooltip_data) }}
-    {% endif %}
+{# 通用的Album <a>生成 #}
+{% macro generate_album_anchor(album, new_tab) %}
+    <span><a href="/{{ curr_lang }}/album/{{ album.no }}.html" {{ anchor_new_tab(new_tab) }}>{{ album.name.en }}&nbsp;({{ album.track_num }} discs)&nbsp;[{{ album.release_date_format }}]</a></span>
 {% endmacro %}
 
-{% macro output_usedby_video(data_video, instance_id) %}
-    <ul>
-        {% for key, value in data_video.items() %}
-            {% set value = value.0 %}
-
-            <li id="{{ value.uuid }}"><a href="/en/video/{{ value.namespace.1 }}.html{% if instance_id %}#{{ instance_id }}{% endif %}">Video <i>{{ value.name.en }}</i></a>: {{ value.desc.en }}</li>
-        {% else %}
-            <li>Nothing to show!</li>
-        {% endfor %}
-    </ul>
+{% macro get_social_for_composer(composer) %}
+    <a href="{{ composer.contact.url.value }}" target="_blank"><img src="/static/images/social/{{ composer.contact.platform.en }}.png" class="social-logo">{{ composer.contact.url.platform.en }}: {{ composer.nickname }}</a>
 {% endmacro %}
 
-{% macro output_usedby_character(data_character, html_id, instance_id, instance_type, output_combat_info, combat_leader_pos) %}
-    {% if instance_type in ["story", "character"] %}
-        {% set enable_tooltip = 1 %}
-        {% set tooltip_data = {} %}
-    {% endif %}
-
-    <ul>
-        {% for char in data_character.character %}
-            {% if enable_tooltip == 1 %}
-                {% set tooltip_id = generate_tooltip_id() %}
-            {% endif %}
+{# 生成story parts “出现于”(appearedAt) HTML代码 #}
+{% macro generate_appearedat_html(base_story, parts) %}
+    {% for i in parts %}
+        {% set part = i.0 %}
+        {% set loop_index = i.1 %}
+        {% set seg_index = i.2 %}
+        {% set tooltip_id = i.3 %}
+        {% set ele_class = get_storypart_text_color_css(part) %}
 
-            {% if char.filetype == 52 %}
-            <li>
-                <a href="/en/character/npc/{{ char.namespace[-1]|lower }}/{% if instance_id %}#{{ html_id }}{% endif %}" {% if enable_tooltip == 1 %}onmouseover="showTooltip(this, '{{ tooltip_id }}')"{% endif %}>{{ char.name.en }}</a>
-            </li>
-            {% else %}
-            <li>
-                {% if output_combat_info and output_combat_info == "True" %}
-                    {% if loop.index - 1 == combat_leader_pos %}<img src="/static/images/ui/Image_Conquest_Leader.png" class="story-battle-leader" />{% endif %}
-                    <span><b class="{{ get_stu_type_text_color_css(char.combatant_info.squad_type.type) }}">{{ char.combatant_info.squad_type.lang.en }}</b>&nbsp;&#124;</span>
-                {% endif %}
-                <img src="/static/images/schoolicon/School_Icon_{{ char.school_id|upper }}_W.png" class="invert-light schoolicon-p">
-                <span>
-                    <a href="/en/character/student/{{ char.name.path_name|lower }}/{% if instance_id %}#{{ html_id }}{% endif %}" {% if enable_tooltip == 1 %}onmouseover="showTooltip(this, '{{ tooltip_id }}')"{% endif %}>
-                        <img src="/static/images/student/icon/{{ char.image.collection_texture }}.webp" class="icon-stu"/>{{ char.name.personal_name.en }}
-                    </a>
-                </span>
-                {% if output_combat_info and output_combat_info == "True" %}
-                    <span>&nbsp;
-                        <span class="{{ get_stu_type_text_color_css(char.combatant_info.attack_type.type) }}">{{ char.combatant_info.attack_type.lang.en }}</span>/<span class="{{ get_stu_type_text_color_css(char.combatant_info.armor_type.type) }}">{{ char.combatant_info.armor_type.lang.en }}</span>
-                    </span>
-                {% else %}
-                    <span>&nbsp;[{{ char.club.en }}]</span>
-                {% endif %}
-            </li>
-            {% endif %}
-
-            {% if enable_tooltip == 1 %}
-                {% do tooltip_data.update({tooltip_id: tooltip_character(char, instance_id, instance_type)}) %}
-            {% endif %}
+        {% if loop.index == 1 %}
+        <span>(appeared at&nbsp;</span>
         {% else %}
-            <li>Nothing to show!</li>
-        {% endfor %}
-    </ul>
+        <span>,&nbsp;</span>
+        {% endif %}
 
-    {% if enable_tooltip == 1 %}
-        {{ tooltip_add_data_js(tooltip_data) }}
-    {% endif %}
+        <span><a href="{{ generate_story_url(base_story) }}#story-part-{{ loop_index }}-seg-{{ seg_index }}" class="{{ ele_class }}" {% if arg_check(tooltip_id) %}{{ generate_tooltip_anchor(tooltip_id) }}{% endif %}><i>[{{ loop_index }}]&nbsp;{{ part.name.en|js_string_safe }}</i></a></span>
+    {% endfor %}
+    <span>)</span>
 {% endmacro %}
 
-{# 魔改自 output_usedby_character #}
-{% macro output_relatedto_character(data_character, use_ul) %}
-    {% if not use_ul or use_ul == "True" %}
-        {% set use_ul = 1 %}
-    {% else %}
-        {% set use_ul = 0 %}
-    {% endif %}
-
-    {% if use_ul == 1 %}
-    <ul>
-    {% endif %}
-        {% for char in data_character.character %}
-            {% if use_ul == 1 %}<li>{% endif %}
-            {% if char.filetype == 52 %}
-                <a href="/en/character/npc/{{ char.namespace[-1]|lower }}/{% if instance_id %}#{{ instance_id }}{% endif %}">
-                    {{ char.name.en }}
-                </a>
-            {% else %}
-                <span>
-                    <a href="/en/character/student/{{ char.name.path_name|lower }}/{% if instance_id %}#{{ instance_id }}{% endif %}">
-                        <img src="/static/images/student/icon/{{ char.image.collection_texture }}.webp" class="icon-stu"/>{{ char.name.name.en }}
-                    </a>
-                </span>
-            {% endif %}
-            {% if use_ul == 1 %}</li>{% else %}{% if not loop.last %}<br />{% endif %}{% endif %}
-        {% else %}
-            {% if use_ul == 1 %}<li>Nothing to show!</li>{% else %}Nothing to show!{% endif %}
-        {% endfor %}
-    {% if use_ul == 1 %}
-    </ul>
-    {% endif %}
+{# 通用的Tag <a>生成 #}
+{% macro tag_altogether(tags, instance_id) %}
+    {% for tag in tags %}<a href="/en/tag/{{ tag.namespace[-1] }}.html{% if instance_id %}#{{ instance_id }}{% endif %}" target="_blank"><span class="badge badge-{{ tag.color_css }} badge-tag">{{ tag.name.en }}</span></a>&nbsp;{% endfor %}
 {% endmacro %}
 
-{% macro output_usedby_character_dict(data_character, html_id, instance_id, instance_type) %}
-    {# used for track.html for exporting track-character relationship #}
-    {% set tooltip_data = {} %}
-
-    <ul>
-        {% for key, value in data_character.items() %}
-            {% set ref_counter = value.1 %}
-            {% set char = value.0 %}
+{# 平铺人物<a>生成 #}
+{% macro generate_character_anchor_flat(characters, max_char) %}
+    {% if not arg_check(max_char) %}{% set max_char = 99999 %}{% endif %}
 
-            {% set tooltip_id = generate_tooltip_id() %}
-
-            <li id="{{ char.uuid }}"><span>【{{ ref_counter }}】</span>
-            {% if "NPC_" in key %}
-                <a href="/en/character/npc/{{ char.namespace[-1]|lower }}/{% if instance_id %}#{{ html_id }}{% endif %}" onmouseover="showTooltip(this, '{{ tooltip_id }}')">
-                    {{ char.name.en }}
-                </a>
-            {% else %}
-                <img src="/static/images/schoolicon/School_Icon_{{ char.school_id|upper }}_W.png" class="invert-light schoolicon-p">
-                <a href="/en/character/student/{{ char.name.path_name|lower }}/{% if html_id %}#{{ html_id }}{% endif %}" onmouseover="showTooltip(this, '{{ tooltip_id }}')">
-                    <img src="/static/images/student/icon/{{ char.image.collection_texture }}.webp" class="icon-stu"/>{{ char.name.personal_name.en }}
-                </a>
-                &nbsp;<span>[{{ char.club.en }}]</span>
+    {% if characters|length != 0 %}
+        {% set char_for_show = [] %}
+        {% for i in characters %}
+            {% if loop.index == max_char %}{% break %}
+            {% else %}{% do char_for_show.append(i) %}
             {% endif %}
-
-            {% do tooltip_data.update({tooltip_id: tooltip_character(char, instance_id, instance_type)}) %}
-            </li>
-        {% else %}
-            <li>Nothing to show!</li>
         {% endfor %}
-    </ul>
-
-    {{ tooltip_add_data_js(tooltip_data) }}
-{% endmacro %}
 
-{% macro get_social_for_composer(composer) %}
-    <a href="{{ composer.contact.url.value }}"><img src="/static/images/social/{{ composer.contact.platform.en }}.png" class="social-logo">{{ composer.contact.url.platform.en }}: {{ composer.nickname }}</a>
-{% endmacro %}
-
-{% macro track_version_video_player(versions) %}
-    {% for version in versions %}
-        {% set _version_index = loop.index %}
-
-        <h3>{{ version.desc.en }}</h3>
-        {% for url in version.url %}
-            <div onclick="play_video('{{ url.value }}', 'track-video-{{ _version_index }}-{{ loop.index }}')" id="track-video-{{ _version_index }}-{{ loop.index }}" class="track-video-div">
-                <p><img src="/static/images/social/{{ url.platform.en }}.png" class="social-logo">{{ url.platform.en }} ({{ url.value }})</p>
-            </div>
-            <div id="track-video-{{ _version_index }}-{{ loop.index }}-container"></div>
-        {% endfor %}
-    {% endfor %}
+        {% for char in char_for_show[:-1] %}<span>{{ generate_character_anchor(char, 0, 0, 0, 0, 0, 0, 0) }}&nbsp;|&nbsp;</span>{% endfor %}
+        {{ generate_character_anchor(char_for_show[-1], 0, 0, 0, 0, 0, 0, 0) }}
+        {% if characters|length > char_for_show|length %}<span>&nbsp;and more.</span>{% endif %}
+    {% endif %}
 {% endmacro %}
diff --git a/template/en/_macro_page.html b/template/en/_macro_page.html
new file mode 100644
index 0000000..f459e89
--- /dev/null
+++ b/template/en/_macro_page.html
@@ -0,0 +1,354 @@
+{% from 'template/base/_macro.html' import a_new_tab, get_storypart_text_color_css, get_stu_type_text_color_css %}
+{% from 'template/en/_macro.html' import generate_ui_anchor, generate_track_anchor, generate_track_anchor, generate_background_anchor, generate_character_anchor, generate_story_anchor, generate_appearedat_html, filetype_to_name, get_ordinal_number, get_social_for_composer %}
+{% from 'template/en/_macro_tooltip.html' import tooltip_add_data_js, tooltip_storyinfo, tooltip_storypart, tooltip_background, tooltip_track, tooltip_character %}
+
+{% macro output_usedby_story(data_story, instance_uuid, instance_key) %}
+    {% set _curr_filetype = namespace(filetype=0) %}
+    {% set tooltip_data = {} %}
+
+    {% for key, value in data_story.items() %}
+        {# 记录当前的filetype，稍后用于切割不同故事 #}
+        {% if _curr_filetype.filetype == 0 %}
+            {# 循环刚刚开始，加上<ul> #}
+            {% set _curr_filetype.filetype = value.0.filetype %}
+            <h4>{{ filetype_to_name(_curr_filetype.filetype) }} Story</h4><ul>
+        {% else %}
+            {% if _curr_filetype.filetype != value.0.filetype %}
+                {# 如果当前文件已经不再是之前的 #}
+                {% set _curr_filetype.filetype = value.0.filetype %}
+                </ul><h4>{{ filetype_to_name(_curr_filetype.filetype) }} Story</h4><ul>
+            {% endif %}
+        {% endif %}
+
+        {% set tooltip_id = generate_tooltip_id() %}
+
+        <li id="story-{{ value.0.instance_id }}">
+        {% set value = value.0 %}
+        {{ generate_story_anchor(value, tooltip_id) }}
+        {% do tooltip_data.update({tooltip_id: tooltip_storyinfo(value)}) %}
+
+        {# appearedAt snippet #}
+        {% if instance_uuid %}
+            {% set related_parts = [] %}
+            {% for part in value.part %}
+                {% set part_loop = namespace(part_index=loop.index, seg_index=-1) %}
+                {% for segment in part.data %}
+                    {% set seg_loop = namespace(seg_index=loop.index, is_exit=0) %}
+                    {% for obj in segment[instance_key] %}
+                        {% if obj.uuid == instance_uuid %}
+                            {% set seg_loop.is_exit = 1 %}{% break %}
+                        {% endif %}
+                    {% endfor %}
+                    {% if seg_loop.is_exit != 0 %}
+                        {% set part_loop.seg_index = loop.index %}{% break %}
+                    {% endif %}
+                {% endfor %}
+
+                {% if part_loop.seg_index != -1 %}
+                    {% set tooltip_id = generate_tooltip_id() %}
+                    {% do related_parts.append([part, loop.index, part_loop.seg_index, tooltip_id]) %}
+                    {% do tooltip_data.update({tooltip_id: tooltip_storypart(value, part)}) %}
+                {% endif %}
+            {% endfor %}
+
+            {{ generate_appearedat_html(value, related_parts) }}
+        {% endif %}
+        </li>
+    {% else %}
+        <p>Nothing to show!</p>
+    {% endfor %}
+    </ul>
+    {{ tooltip_add_data_js(tooltip_data) }}
+{% endmacro %}
+
+{% macro output_usedby_battle(data_battle) %}
+    <ul>
+        {% for key, value in data_battle.items() %}
+            {% set value = value[0] %}
+            <li id="{{ value.uuid }}">
+            {% if value.filetype == 21 %}
+                {% if value.no[0] == "N" %}
+                    {% set mission_type = "Normal" %}
+                {% else %}
+                    {% set mission_type = "Hard" %}
+                {% endif %}
+                    <a href="/{{ curr_lang }}/main/battle/main/{{ value.chapter }}/{{ value.no }}.html#track" target="_blank">Main Battle Chapter {{ value.chapter }} Mission {{ value.no[1] }} ({{ mission_type }}, Sub {{ value.no[2] }})</a>
+            {% elif value.filetype == 22 %}
+                {% if value.no[0] == "N" %}
+                    {% set mission_type = "Normal" %}
+                {% else %}
+                    {% set mission_type = "Challenge" %}
+                {% endif %}
+                    <a href="/{{ curr_lang }}/event/{{ value.event_id }}/{{ value.no }}.html#track" target="_blank">Event {{ value.parent_data.0.name.en }} Battle No.{{ value.no[1:] }} ({{ mission_type }}): {{ value.name.en }}</a>
+            {% else %}
+                {% if value.filetype == 24 %}
+                    {% set mission_type = "total_assault" %}
+                {% elif value.filetype == 25 %}
+                    {% set mission_type = "bounty_hunt" %}
+                {% elif value.filetype == 26 %}
+                    {% set mission_type = "school_exchange" %}
+                {% else %}
+                    {% set mission_type = "special_commision" %}
+                {% endif %}
+                    <a href="/{{ curr_lang }}/main/battle/{{ mission_type }}/{{ value.id }}.html#track" target="_blank">{{ value.name.en }}</a>
+            {% endif %}
+            </li>
+        {% else %}
+            <li>Nothing to show!</li>
+        {% endfor %}
+    </ul>
+{% endmacro %}
+
+{% macro output_usedby_ui(data_ui) %}
+    <ul>
+        {% for key, value in data_ui.items() %}
+            {% set i = value.0 %}
+
+            <!--Special case for UiInfoEvent-->
+            <li id="{{ i.uuid }}">{{ generate_ui_anchor(i) }}</li>
+        {% else %}
+            <li>Nothing to show!</li>
+        {% endfor %}
+    </ul>
+{% endmacro %}
+
+{% macro output_usedby_ui_list(data_ui) %}
+    <ul>
+        {% for i in data_ui %}
+            <li>{{ generate_ui_anchor(i) }}</li>
+        {% else %}
+            <li>Nothing to show!</li>
+        {% endfor %}
+    </ul>
+{% endmacro %}
+
+{% macro output_usedby_ui_for_all_ui(data_ui) %}
+    <ul>
+        {% for i in data_ui %}
+            {% set i = i[1] %}
+
+            <!--Special case for UiInfoEvent-->
+            <li>{{ generate_ui_anchor(i) }}</li>
+        {% else %}
+            <li>Nothing to show!</li>
+        {% endfor %}
+    </ul>
+{% endmacro %}
+
+{% macro output_usedby_background(data_background, html_id, instance_id, instance_type) %}
+    {% if instance_type in ["track"] %}
+        {% set tooltip_data = {} %}
+        {% set enable_tooltip = 1 %}
+    {% endif %}
+
+    <table class="gallery">
+        <tr>
+            {% for key, value in data_background.items() %}
+                {% if enable_tooltip == 1 %}
+                    {% set tooltip_id = generate_tooltip_id() %}
+                {% endif %}
+
+                <td class="gallery-img" id="{{ value.0.uuid }}">{{ generate_background_anchor(value.0, html_id, tooltip_id) }}</td>
+
+                {% if enable_tooltip == 1 %}
+                    {% do tooltip_data.update({tooltip_id: tooltip_background(value.0, instance_id, instance_type)}) %}
+                {% endif %}
+            {% else %}
+                <td>Nothing to show!</td>
+            {% endfor %}
+        </tr>
+    </table>
+
+    {% if enable_tooltip == 1 %}
+        {{ tooltip_add_data_js(tooltip_data) }}
+    {% endif %}
+{% endmacro %}
+
+{% macro output_usedby_background_list(data_background, html_id, instance_id, instance_type) %}
+    {% if instance_type in ["story"] %}
+        {% set tooltip_data = {} %}
+        {% set enable_tooltip = 1 %}
+    {% endif %}
+
+    <table class="gallery">
+        <tr>
+            {% for value in data_background %}
+                {% if enable_tooltip == 1 %}
+                    {% set tooltip_id = generate_tooltip_id() %}
+                {% endif %}
+
+                <td class="gallery-img">{{ generate_background_anchor(value, html_id, tooltip_id) }}</td>
+
+                {% if enable_tooltip == 1 %}
+                    {% do tooltip_data.update({tooltip_id: tooltip_background(value, instance_id, instance_type)}) %}
+                {% endif %}
+            {% else %}
+                <td>Nothing to show!</td>
+            {% endfor %}
+        </tr>
+    </table>
+
+    {% if enable_tooltip == 1 %}
+        {{ tooltip_add_data_js(tooltip_data) }}
+    {% endif %}
+{% endmacro %}
+
+{% macro output_usedby_track(data_track, with_counter, html_id, instance_id, instance_type) %}
+    {% set _with_counter = with_counter or 0 %}
+    {% if instance_type in ["character", "background"] %}
+        {% set tooltip_data = {} %}
+        {% set enable_tooltip = 1 %}
+    {% endif %}
+
+    <ul>
+        {% for key, value in data_track.items() %}
+            {% set track = value.0 %}
+
+            {% if enable_tooltip == 1 %}
+                {% set tooltip_id = generate_tooltip_id() %}
+            {% endif %}
+
+            <li id="track-{{ track.instance_id }}">{{ generate_track_anchor(track, _with_counter, value.1, html_id, tooltip_id) }}</li>
+
+            {% if enable_tooltip == 1 %}
+                {% do tooltip_data.update({tooltip_id: tooltip_track(track, instance_id, instance_type)}) %}
+            {% endif %}
+        {% else %}
+            <li>Nothing to show!</li>
+        {% endfor %}
+    </ul>
+
+    {% if enable_tooltip == 1 %}
+        {{ tooltip_add_data_js(tooltip_data) }}
+    {% endif %}
+{% endmacro %}
+
+{% macro output_usedby_track_list(data_track, html_id, instance_type, instance_id) %}
+    <ul>
+        {% if instance_type == "story" %}
+            {% set tooltip_data = {} %}
+            {% set enable_tooltip = 1 %}
+        {% endif %}
+
+        {% for value in data_track %}
+            {% if enable_tooltip == 1 %}
+                {% set tooltip_id = generate_tooltip_id() %}
+            {% endif %}
+
+            <li id="track-{{ value.instance_id }}">{{ generate_track_anchor(value, 0, 0, html_id, tooltip_id) }}</li>
+
+            {% if enable_tooltip == 1 %}
+                {% do tooltip_data.update({tooltip_id: tooltip_track(value, instance_id, instance_type)}) %}
+            {% endif %}
+        {% else %}
+            <li>Nothing to show!</li>
+        {% endfor %}
+    </ul>
+
+    {% if enable_tooltip == 1 %}
+        {{ tooltip_add_data_js(tooltip_data) }}
+    {% endif %}
+{% endmacro %}
+
+{% macro output_usedby_video(data_video, instance_id) %}
+    <ul>
+        {% for key, value in data_video.items() %}
+            {% set value = value.0 %}
+
+            <li id="{{ value.uuid }}"><a href="/en/video/{{ value.namespace.1 }}.html{% if instance_id %}#{{ instance_id }}{% endif %}" target="_blank">Video <i>{{ value.name.en }}</i></a>: {{ value.desc.en }}</li>
+        {% else %}
+            <li>Nothing to show!</li>
+        {% endfor %}
+    </ul>
+{% endmacro %}
+
+{% macro output_usedby_character(data_character, html_id, instance_id, instance_type, output_combat_info, combat_leader_pos) %}
+    {% if instance_type in ["story", "character"] %}
+        {% set enable_tooltip = 1 %}
+        {% set tooltip_data = {} %}
+    {% endif %}
+
+    <ul>
+        {% for char in data_character.character %}
+            {% if enable_tooltip == 1 %}
+                {% set tooltip_id = generate_tooltip_id() %}
+            {% endif %}
+
+            {% if arg_check(output_combat_info) and loop.index0 == combat_leader_pos %}
+                <li>{{ generate_character_anchor(char, 1, 1, html_id, tooltip_id, output_combat_info, 1, 0) }}</li>
+            {% else %}
+                <li>{{ generate_character_anchor(char, 1, 1, html_id, tooltip_id, output_combat_info, 0, 0) }}</li>
+            {% endif %}
+
+            {% if enable_tooltip == 1 %}
+                {% do tooltip_data.update({tooltip_id: tooltip_character(char, instance_id, instance_type)}) %}
+            {% endif %}
+        {% else %}
+            <li>Nothing to show!</li>
+        {% endfor %}
+    </ul>
+
+    {% if enable_tooltip == 1 %}
+        {{ tooltip_add_data_js(tooltip_data) }}
+    {% endif %}
+{% endmacro %}
+
+{# 魔改自 output_usedby_character #}
+{% macro output_relatedto_character(data_character, use_ul) %}
+    {% if not use_ul or use_ul == "True" %}
+        {% set use_ul = 1 %}
+    {% else %}
+        {% set use_ul = 0 %}
+    {% endif %}
+
+    {% if use_ul == 1 %}
+    <ul>
+    {% endif %}
+        {% for char in data_character.character %}
+            {% if use_ul == 1 %}<li>{% endif %}
+
+            {{ generate_character_anchor(char, 0, 0, 0, 0, 0, 0, 1) }}
+
+            {% if use_ul == 1 %}</li>{% else %}{% if not loop.last %}<br />{% endif %}{% endif %}
+        {% else %}
+            {% if use_ul == 1 %}<li>Nothing to show!</li>{% else %}Nothing to show!{% endif %}
+        {% endfor %}
+    {% if use_ul == 1 %}
+    </ul>
+    {% endif %}
+{% endmacro %}
+
+{% macro output_usedby_character_dict(data_character, html_id, instance_id, instance_type) %}
+    {# used for track.html for exporting track-character relationship #}
+    {% set tooltip_data = {} %}
+
+    <ul>
+        {% for key, value in data_character.items() %}
+            {% set ref_counter = value.1 %}
+            {% set char = value.0 %}
+
+            {% set tooltip_id = generate_tooltip_id() %}
+
+            <li id="{{ char.uuid }}"><span>【{{ ref_counter }}】</span>{{ generate_character_anchor(char, 1, 1, html_id, tooltip_id, 0, 0, 0) }}</li>
+            {% do tooltip_data.update({tooltip_id: tooltip_character(char, instance_id, instance_type)}) %}
+        {% else %}
+            <li>Nothing to show!</li>
+        {% endfor %}
+    </ul>
+
+    {{ tooltip_add_data_js(tooltip_data) }}
+{% endmacro %}
+
+{% macro track_version_video_player(versions) %}
+    {% for version in versions %}
+        {% set _version_index = loop.index %}
+
+        <h3>{{ version.desc.en }}</h3>
+        {% for url in version.url %}
+            <div onclick="play_video('{{ url.value }}', 'track-video-{{ _version_index }}-{{ loop.index }}')" id="track-video-{{ _version_index }}-{{ loop.index }}" class="track-video-div">
+                <p><img src="/static/images/social/{{ url.platform.en }}.png" class="social-logo">{{ url.platform.en }} ({{ url.value }})</p>
+            </div>
+            <div id="track-video-{{ _version_index }}-{{ loop.index }}-container"></div>
+        {% endfor %}
+    {% endfor %}
+{% endmacro %}
diff --git a/template/en/_macro_tooltip.html b/template/en/_macro_tooltip.html
index f0c7c53..1e1fbe0 100644
--- a/template/en/_macro_tooltip.html
+++ b/template/en/_macro_tooltip.html
@@ -1,3 +1,5 @@
+{% from "template/en/_macro.html" import filetype_to_name, tracktype_to_name, generate_track_anchor, generate_story_anchor, generate_appearedat_html, generate_character_anchor_flat %}
+
 {# JS代码生成 #}
 {% macro tooltip_add_data_js(data) %}
     <script>
@@ -11,75 +13,12 @@
 
 {# 常量 #}
 {% set MAX_CHAR_DISPLAY = 11 %} {# one-indexed, total 10 #}
-{% set MAX_CHAR_DISPLAY_FOR_TRACK = 6 %} {# one-indexed, total 5 (for track usage) #}
+{% set MAX_CHAR_DISPLAY_FOR_TRACK = 11 %} {# one-indexed, total 10 (for track usage) #}
 {% set MAX_TRACK_DISPLAY = 6 %} {# one-indexed, total 5 #}
 {% set MAX_STORY_DISPLAY = 6 %} {# one-indexed, total 6 #}
 
-{# 英语首字母大写 #}
-{% macro word_case(text) %}{{text[0]|upper}}{{text[1:]}}{% endmacro %}
-
-{# 曲子类型显示 #}
-{# 复制自同名macro #}
-{% macro track_type_for_show(track_type) %}{% if track_type == 0 %}OST{% elif track_type == 1 %}Short Animation{% elif track_type == 2 %}Animation{% else %}Other{% endif %}{% endmacro %}
-
-{# 统一人物<a>生成逻辑 #}
-{# 改自 output_usedby_character #}
-{% macro gen_char_anchor(char, with_school) %}
-    {% if with_school and with_school != 0 %}
-        {% set enable_school = 1 %}
-    {% else %}
-        {% set enable_school = 0 %}
-    {% endif %}
-
-    {% if char.filetype == 52 %}
-        <a href="/en/character/npc/{{ char.namespace[-1]|lower }}/">{{ char.name.en|js_string_safe }}</a>
-    {% else %}
-        {% if enable_school == 1 %}
-            <img src="/static/images/schoolicon/School_Icon_{{ char.school_id|upper }}_W.png" class="schoolicon-p">
-        {% endif %}
-        <span>
-            <a href="/en/character/student/{{ char.name.path_name|lower }}/">
-                <img src="/static/images/student/icon/{{ char.image.collection_texture }}.webp" class="icon-stu"/>{{ char.name.name.en|js_string_safe }}
-            </a>
-        </span>
-    {% endif %}
-{% endmacro %}
-
-{# 统一曲子<a>生成逻辑 #}
-{# 改自 output_usedby_track #}
-{% macro gen_track_anchor(track, enable_author) %}
-    <a href="/en/track/{{ track.namespace.1 }}/{{track.namespace.2 }}.html{% if instance_uuid %}#{{ instance_uuid }}{% endif %}">{{ track_type_for_show(track.track_type) }} {{ track.no }}. {{ track.name.realname.en|js_string_safe }}</a>{% if enable_author and enable_author != 0 %} by {{ track.composer.nickname }}{% endif %}
-{% endmacro %}
-
-{# 统一故事<a>生成逻辑 #}
-{# 改自同名函数 #}
-{% macro gen_story_anchor(story) %}
-    {% set value = story %}
-    {% if value.filetype == 15 %}
-        {% set target_url = "/en/character/student/" + value.pos.student|string|lower + "/bond/" + value.pos.no|string + ".html" %}
-        <a href="{{ target_url }}">
-            <img src="/static/images/student/icon/{{ value.student.image.collection_texture }}.webp" class="icon-stu"/>{{ value.student.name.name.en|js_string_safe }} Bond Story {{ value.pos.no }}: {{ value.name.en|js_string_safe }}
-        </a>
-    {% elif value.filetype == 14 %}
-        {% set target_url = "/en/event/" + value.pos.event_id|string + "/story/" + value.pos.segment|string + ".html" %}
-        <a href="{{ target_url }}">Event {{ value.parent_data.0.name.en|js_string_safe }} Story {{ value.pos.segment }}: {{ value.name.en|js_string_safe }}
-        </a>
-    {% else %}
-        {% if value.filetype == 11 %}
-            {% set story_type = "main" %}
-        {% elif value.filetype == 12 %}
-            {% set story_type = "side" %}
-        {% elif value.filetype == 13 %}
-            {% set story_type = "short" %}
-        {% else %}
-            {% set story_type = "other" %}
-        {% endif %}
-        {% set target_url = "/en/main/story/" + story_type|string + "/" + value.pos.volume|string + "/" + value.pos.chapter|string + "/" + value.pos.segment|string + ".html" %}
-        <a href="{{ target_url }}">
-            {{ word_case(story_type) }} Story Volume {{ value.pos.volume }} Chapter {{ value.pos.chapter }} Episode {{ value.pos.segment }}: {{ value.name.en|js_string_safe }}
-        </a>
-    {% endif %}
-{% endmacro %}
+{# 提取所有story_part里头的desc #}
+{% macro get_story_part_desc(story_part) %}{% for segment in story_part.data %}{{ segment.desc.en }}{% endfor %}{% endmacro %}
 
 {# ----------------------------------------------------------------------------------------------------- #}
 {# ----------------------------------------------------------------------------------------------------- #}
@@ -94,9 +33,14 @@
 {% macro tooltip_storypart(story, story_part) %}
     <div class="tooltip-div">
         <p class="tooltip-title tooltip-ellipsis">{{ story_part.name.en|js_string_safe }}</p>
-        <p>{{ story_part.desc.en|js_string_safe }}</p><hr />
-        <p>{% if story_part.character|length == 0 %}No characters to display!{% else %}Character:{% for char in story_part.character %}{% if loop.index == MAX_CHAR_DISPLAY %}&nbsp;and more.{% break %}{% else %}&nbsp;{{ gen_char_anchor(char, 0) }}{% endif %}{% endfor %}{% endif %}</p><hr />
-        <p>{% if story_part.track|length == 0 %}No tracks to display!{% else %}Track:{% for track in story_part.track %}{% if loop.index == MAX_TRACK_DISPLAY %}&nbsp; and more.{% break %}{% else %}&nbsp;{{ gen_track_anchor(track, 0) }}{% endif %}{% endfor %}{% endif %}</p>
+        <p>{{ get_story_part_desc(story_part)|js_string_safe }}</p><hr />
+
+        {# 读取全部人物与曲子 #}
+        {% set all_characters = extract_storypart_data_character(story_part) %}
+        {% set all_tracks = extract_storypart_data_track(story_part) %}
+
+        <p>{% if all_characters|length == 0 %}<span>No characters to display!</span>{% else %}Character:{{ generate_character_anchor_flat(all_characters, MAX_CHAR_DISPLAY)|page_minify_html }}{% endif %}</p><hr />
+        <p>{% if all_tracks|length == 0 %}No tracks to display!{% else %}Track:{% for track in all_tracks %}{% if loop.index == MAX_TRACK_DISPLAY %}&nbsp; and more.{% break %}{% else %}&nbsp;{{ generate_track_anchor(track, 0, 0, 0, 0, 0)|page_minify_html }}{% endif %}{% endfor %}{% endif %}</p>
     </div>
 {% endmacro %}
 
@@ -110,6 +54,7 @@
     <div class="tooltip-div">
         <p class="tooltip-title tooltip-ellipsis">{{ background.name.en|js_string_safe }}</p>
         <p>{{ background.desc.en|js_string_safe }}</p>
+        <button type="button" class="btn btn-info"><a href="{{ background.image.value }}" target="_blank">View Full Image</a></button>
         <hr />
         <p class="tooltip-subtitle">Story:</p>
         <ol class="tooltip-ol">
@@ -123,50 +68,9 @@
             {% set outer_data = loop_data.data.used_by.data_story %}
 
             {# 遍历数据 #}
-            {% for story in outer_data.values() %}
-                {% set story = story.0 %}
-
-                {# 探测各个story的part #}
-                {% for part in story.part %}
-                    {# 确保内层循环终止时，外层也能终止 #}
-                    {% set _end_part_detection = namespace(flag=0) %}
-
-                    {# 探测其background #}
-                    {# 当为story时，直接输出 #}
-                    {# 当为track character时，进行二层探测 #}
-                    {% if instance_type == "story" %}
-                        <li>{{ gen_story_anchor(story) }}</li>
-                        {% set _end_part_detection.flag = 1 %}
-                        {% break %}
-                    {% else %}
-                        {% for bg in part.background %}
-                            {# 如果background的uuid对上了 #}
-                            {% if bg.uuid == background.uuid %}
-                                {# track #}
-                                {% if instance_type == "track" %}
-                                    {% for track in part.track %}
-                                        {% if track.instance_id == instance_id %}
-                                            <li>{{ gen_story_anchor(story) }}</li>
-                                            {% set _end_part_detection.flag = 1 %}
-                                            {% break %}
-                                        {% endif %}
-                                    {% endfor %}
-                                {% endif %}
-                            {% endif %}
-
-                            {% if _end_part_detection.flag == 1 %}
-                                {# 如属实，也提前终止外层 #}
-                                {% break %}
-                            {% endif %}
-                        {% endfor %}
-                    {% endif %}
-
-                    {# 检测内层循环是否提前终止 #}
-                    {% if _end_part_detection.flag == 1 %}
-                        {# 如属实，也提前终止外层 #}
-                        {% break %}
-                    {% endif %}
-                {% endfor %}
+            {% set processed_data = py_tooltip_background(background, instance_id, instance_type, outer_data) %}
+            {% for i in processed_data %}
+                <li>{{ generate_story_anchor(i.0)|page_minify_html }}&nbsp;{{ generate_appearedat_html(i.0, i.1)|page_minify_html }}</li>
             {% endfor %}
         </ol>
     </div>
@@ -178,7 +82,7 @@
 {# instance_type可选background/character/story #}
 {% macro tooltip_track(track, instance_id, instance_type) %}
     <div class="tooltip-div">
-        <p class="tooltip-title tooltip-ellipsis">{{ track_type_for_show(track.track_type) }}&nbsp;{{ track.no }}.&nbsp;{{ track.name.realname.en|js_string_safe }}</p><hr />
+        <p class="tooltip-title tooltip-ellipsis">{{ tracktype_to_name(track.track_type) }}&nbsp;{{ track.no }}.&nbsp;{{ track.name.realname.en|js_string_safe }}</p><hr />
 
         <p class="tooltip-subtitle">Story:</p>
         <ol class="tooltip-ol">
@@ -189,79 +93,17 @@
             {% set outer_data = loop_data.data.used_by %}
 
             {# 遍历数据 #}
-            {% for story in outer_data.data_story.values() %}
-                {% set story = story.0 %}
-
-                {# 遍历故事的各part #}
-                {% for part in story.part %}
-                    {% set loop_control = namespace(flag=0) %}
-
-                    {# 先检测音乐 #}
-                    {# 如果instance_type是story的话那就不管 #}
-                    {% if instance_type == "story" %}
-                        <li>{{ gen_story_anchor(story) }}</li>
-                        {% break %}
-                    {% else %}
-                        {% for story_track in part.track %}
-                            {# 检测故事音乐 #}
-                            {% if story_track.instance_id == track.instance_id %}
-                                {# 根据instance的不同显示story #}
-                                {# 检测人物 #}
-                                {% if instance_type == "character" %}
-                                    {% for char in part.character %}
-                                        {# char的uuid == 传入的instance_id #}
-                                        {% if char.filetype != 52 %}
-                                            {# Student #}
-                                            {% if char.uuid == instance_id %}
-                                                <li>{{ gen_story_anchor(story) }}</li>
-                                                {% set loop_control.flag = 1 %}
-                                                {% break %}
-                                            {% endif %}
-                                        {% else %}
-                                            {# NPC #}
-                                            {% if char.namespace[-1] == instance_id %}
-                                                <li>{{ gen_story_anchor(story) }}</li>
-                                                {% set loop_control.flag = 1 %}
-                                                {% break %}
-                                            {% endif %}
-                                        {% endif %}
-                                    {% endfor %}
-                                {# 检测背景 #}
-                                {% elif instance_type == "background" %}
-                                    {% for bg in part.background %}
-                                        {# background的uuid == 传入的instance_id #}
-                                        {% if bg.uuid == instance_id %}
-                                            <li>{{ gen_story_anchor(story) }}</li>
-                                            {% set loop_control.flag = 1 %}
-                                            {% break %}
-                                        {% endif %}
-                                    {% endfor %}
-                                {% endif %}
-                            {% endif %}
-
-                            {% if loop_control.flag == 1 %}
-                                {% break %}
-                            {% endif %}
-                        {% endfor %}
-                    {% endif %}
-
-                    {% if loop_control.flag == 1 %}
-                        {% break %}
-                    {% endif %}
-                {% endfor %}
+            {% set processed_data = py_tooltip_track(track, instance_id, instance_type, outer_data) %}
+            {% for i in processed_data %}
+                <li>{{ generate_story_anchor(i.0)|page_minify_html }}&nbsp;{{ generate_appearedat_html(i.0, i.1)|page_minify_html }}</li>
             {% endfor %}
         </ol>
         {% if instance_type == "story" %}
             <hr />
-            <p class="tooltip-subtitle">Characters (top 5 most related):</p>
-            <ul class="tooltip-ul">
-                {% for char in outer_data.data_character.values() %}
-                    {% if loop.index == MAX_CHAR_DISPLAY_FOR_TRACK %}
-                        {% break %}
-                    {% endif %}
-                    <li>{{ gen_char_anchor(char.0) }}</li>
-                {% endfor %}
-            </ul>
+            <p class="tooltip-subtitle">Characters (top {{ (MAX_CHAR_DISPLAY_FOR_TRACK-1)|string }} most related):</p>
+            {% set all_char = [] %}
+            {% for char in outer_data.data_character.values() %}{% do all_char.append(char.0) %}{% endfor %}
+            <p>{{ generate_character_anchor_flat(all_char, MAX_CHAR_DISPLAY_FOR_TRACK)|page_minify_html }}</p>
         {% endif %}
     </div>
 {% endmacro %}
@@ -301,52 +143,10 @@
         <p class="tooltip-subtitle">Story:</p>
         {# 同时关联的故事 #}
         <ol class="tooltip-ol">
-            {% if instance_type == "story" %}
-                {# 是story的话，单纯显示人物在的Story #}
-                {% for story in outer_data.data_story.values() %}
-                    {% set story = story.0 %}
-                    <li>{{ gen_story_anchor(story) }}</li>
-                {% endfor %}
-            {% elif instance_type == "track" %}
-                {# 非story，需要额外验证 #}
-                {% for story in outer_data.data_story.values() %}
-                    {% set story = story.0 %}
-
-                    {% for story_part in story.part %}
-                        {% set _end_part_detection = namespace(flag=0) %}
-
-                        {% for track in story_part.track %}
-                            {# 如果曲子存在于故事中 #}
-                            {% if instance_id == track.instance_id %}
-                                {# 如果人物也存在于故事中 #}
-                                {% for story_character in story_part.character %}
-                                    {% if char_type == "stu" %}
-                                        {% if story_character.id == char_data.id %}
-                                            <li>{{ gen_story_anchor(story) }}</li>
-                                            {% set _end_part_detection.flag = 1 %}
-                                            {% break %}
-                                        {% endif %}
-                                    {% else %}
-                                        {% if story_character.uuid == char_data.uuid %}
-                                            <li>{{ gen_story_anchor(story) }}</li>
-                                            {% set _end_part_detection.flag = 1 %}
-                                            {% break %}
-                                        {% endif %}
-                                    {% endif %}
-                                {% endfor %}
-                            {% endif %}
-
-                            {% if _end_part_detection.flag == 1 %}
-                                {% break %}
-                            {% endif %}
-                        {% endfor %}
-
-                        {% if _end_part_detection.flag == 1 %}
-                            {% break %}
-                        {% endif %}
-                    {% endfor %}
-                {% endfor %}
-            {% endif %}
+            {% set processed_data = py_tooltip_character(character, instance_id, instance_type, loop_data.data) %}
+            {% for i in processed_data %}
+                <li>{{ generate_story_anchor(i.0)|page_minify_html }}&nbsp;{{ generate_appearedat_html(i.0, i.1)|page_minify_html }}</li>
+            {% endfor %}
         </ol>
     </div>
 {% endmacro %}
diff --git a/template/en/base.html b/template/en/base.html
index 24e4beb..1034a5e 100644
--- a/template/en/base.html
+++ b/template/en/base.html
@@ -1,66 +1,69 @@
 {% extends "template/base/base.html" %}
 {% block body_langcode %}en{% endblock %}
+{% set curr_lang = "en" %}
 
 {% block header %}
     {% include "template/en/header.html" %}
 {% endblock header %}
-{% block navi %}
-    {# Entry mapping #}
-    {% if background %}{% set entry_ = background %}
-    {% elif event %}{% set entry_ = event %}
-    {% elif battle %}{% set entry_ = battle %}
-    {% elif char %}{% set entry_ = char %}
-    {% elif story %}{% set entry_ = story %}
-    {% elif tag %}{% set entry_ = tag %}
-    {% elif track %}{% set entry_ = track %}
-    {% elif ui %}{% set entry_ = ui %}
-    {% elif video %}{% set entry_ = video %}
-    {% endif %}
+{% set navi_var %}
+    {% block navi %}
+        {# Entry mapping #}
+        {% if background %}{% set entry_ = background %}
+        {% elif event %}{% set entry_ = event %}
+        {% elif battle %}{% set entry_ = battle %}
+        {% elif char %}{% set entry_ = char %}
+        {% elif story %}{% set entry_ = story %}
+        {% elif tag %}{% set entry_ = tag %}
+        {% elif track %}{% set entry_ = track %}
+        {% elif ui %}{% set entry_ = ui %}
+        {% elif video %}{% set entry_ = video %}
+        {% elif album %}{% set entry_ = album %}
+        {% endif %}
 
-    {% if entry_ and entry_.filetype > 0 and entry_.filetype not in [52, 15] %}
-        <p class="navi-p"><a href=".">&lt;-- Return to the previous directory</a></p>
-    {% else %}
-        <p class="navi-p"><a href="..">&lt;-- Return to the previous directory</a></p>
-    {% endif %}
+        {% if (entry_ and entry_.filetype > 0 and entry_.filetype not in [52, 15]) or is_static == "static" %}
+            <p class="navi-p"><a href=".">&lt;-- Return to the previous directory</a></p>
+        {% else %}
+            <p class="navi-p"><a href="..">&lt;-- Return to the previous directory</a></p>
+        {% endif %}
 
-    {% if entry_ and entry_.interpage %}
-        {% if entry_.interpage %}
-            {% set _prev = entry_.interpage.prev %}
-            {% if _prev.name != "[NO_PREV]" %}
-                {% if 1 <= entry_.filetype <= 5 %}
-                    <p class="navi-p"><a href="/en/{{ _prev.namespace|join('/') }}.html">&lt;-- Previous page: {{ _prev.name.realname.en }}</a></p>
-                {% elif entry_.filetype in [52] %}
-                    {# why am i doing this #}
-                    <p class="navi-p"><a href="/en/{{ _prev.namespace[:-1]|join('/') }}/{{ _prev.namespace[-1]|lower }}">&lt;-- Previous page: {{ _prev.name.en }}</a></p>
-                {% elif 11 <= entry_.filetype <= 16 and entry_.filetype not in [14, 15] %}
-                    <p class="navi-p"><a href="/en/{{ _prev.namespace[:-1]|join('/') }}/{{ _prev.namespace[-1]|int|string }}.html">&lt;-- Previous page: {{ _prev.name.en }}</a></p>
+        {% if entry_ and entry_.interpage %}
+            {% if entry_.interpage %}
+                {% set _prev = entry_.interpage.prev %}
+                {% if _prev.name != "[NO_PREV]" %}
+                    {% if 1 <= entry_.filetype <= 5 %}
+                        <p class="navi-p"><a href="/en/{{ _prev.namespace|join('/') }}.html">&lt;-- Previous page: {{ _prev.name.realname.en }}</a></p>
+                    {% elif entry_.filetype in [52] %}
+                        {# why am i doing this #}
+                        <p class="navi-p"><a href="/en/{{ _prev.namespace[:-1]|join('/') }}/{{ _prev.namespace[-1]|lower }}">&lt;-- Previous page: {{ _prev.name.en }}</a></p>
+                    {% elif 11 <= entry_.filetype <= 16 and entry_.filetype not in [14, 15] %}
+                        <p class="navi-p"><a href="/en/{{ _prev.namespace[:-1]|join('/') }}/{{ _prev.namespace[-1]|int|string }}.html">&lt;-- Previous page: {{ _prev.name.en }}</a></p>
+                    {% else %}
+                        <p class="navi-p"><a href="/en/{{ _prev.namespace|join('/') }}.html">&lt;-- Previous page: {{ _prev.name.en }}</a></p>
+                    {% endif %}
                 {% else %}
-                    <p class="navi-p"><a href="/en/{{ _prev.namespace|join('/') }}.html">&lt;-- Previous page: {{ _prev.name.en }}</a></p>
+                    <p class="navi-p">No previous page found.</p>
                 {% endif %}
-            {% else %}
-                <p class="navi-p">No previous page found.</p>
             {% endif %}
-        {% endif %}
-        {% if entry_.interpage.next %}
-            {% set _next = entry_.interpage.next %}
-            {% if _next.name != "[NO_NEXT]" %}
-                {% if 1 <= entry_.filetype <= 5 %}
-                    <p class="navi-p"><a href="/en/{{ _next.namespace|join('/') }}.html">--&gt; Next page: {{ _next.name.realname.en }}</a></p>
-                {% elif entry_.filetype in [52] %}
-                    {# why am i doing this #}
-                    <p class="navi-p"><a href="/en/{{ _next.namespace[:-1]|join('/') }}/{{ _next.namespace[-1]|lower }}">--&gt; Next page: {{ _next.name.en }}</a></p>
-                {% elif 11 <= entry_.filetype <= 16 and entry_.filetype not in [14, 15] %}
-                    <p class="navi-p"><a href="/en/{{ _next.namespace[:-1]|join('/') }}/{{ _next.namespace[-1]|int|string }}.html">--&gt; Next Page: {{ _next.name.en }}</a></p>
+            {% if entry_.interpage.next %}
+                {% set _next = entry_.interpage.next %}
+                {% if _next.name != "[NO_NEXT]" %}
+                    {% if 1 <= entry_.filetype <= 5 %}
+                        <p class="navi-p"><a href="/en/{{ _next.namespace|join('/') }}.html">--&gt; Next page: {{ _next.name.realname.en }}</a></p>
+                    {% elif entry_.filetype in [52] %}
+                        {# why am i doing this #}
+                        <p class="navi-p"><a href="/en/{{ _next.namespace[:-1]|join('/') }}/{{ _next.namespace[-1]|lower }}">--&gt; Next page: {{ _next.name.en }}</a></p>
+                    {% elif 11 <= entry_.filetype <= 16 and entry_.filetype not in [14, 15] %}
+                        <p class="navi-p"><a href="/en/{{ _next.namespace[:-1]|join('/') }}/{{ _next.namespace[-1]|int|string }}.html">--&gt; Next Page: {{ _next.name.en }}</a></p>
+                    {% else %}
+                        <p class="navi-p"><a href="/en/{{ _next.namespace|join('/') }}.html">--&gt; Next page: {{ _next.name.en }}</a></p>
+                    {% endif %}
                 {% else %}
-                    <p class="navi-p"><a href="/en/{{ _next.namespace|join('/') }}.html">--&gt; Next page: {{ _next.name.en }}</a></p>
+                    <p class="navi-p">No next page found.</p>
                 {% endif %}
-            {% else %}
-                <p class="navi-p">No next page found.</p>
             {% endif %}
         {% endif %}
-    {% endif %}
-    <hr />
-{% endblock navi %}
+    {% endblock navi %}
+{% endset %}
 {% block footer %}
     {% include "template/en/footer.html" %}
     <script>display_char_lang_element('en');</script>
diff --git a/template/en/footer.html b/template/en/footer.html
index 21e9c49..aa12ccf 100644
--- a/template/en/footer.html
+++ b/template/en/footer.html
@@ -4,6 +4,6 @@
         <p>The website is a modified version of <a href="https://github.com/Drassil/git-wiki-theme">Git-Wiki
             v2.8.5</a>, originally by <a href="https://github.com/Drassil">Drassil</a>.</p>
         <p>This website is hosted on GitHub Pages and enhanced by CloudFlare.</p>
-        <small><p>Page is generated at {{ 0|get_current_utc }} (UTC)</p></small>
+        <small><p>Page is generated at {{ get_current_utc() }} (UTC)</p></small>
     </div>
 </footer>
\ No newline at end of file
diff --git a/template/en/header.html b/template/en/header.html
index 3990aac..ab1f7ed 100644
--- a/template/en/header.html
+++ b/template/en/header.html
@@ -31,43 +31,30 @@ <h1 style="margin-top: 10px; margin-bottom: 5px;">BA OST Index</h1>
         </div>
 
         <div class="git-wiki-page-list">
-            <span class="page-list-title">Track:</span>
+            <span class="page-list-title">Quick Navigation:</span>
             <ul class="page-list">
-                <li class="page-list-item"><a href="/en/track/ost/">OST</a></li>
-                <li class="page-list-item"><a href="/en/track/short/">Short Animation</a></li>
-                <li class="page-list-item"><a href="/en/track/animation/">Animation</a></li>
-                <li class="page-list-item"><a href="/en/track/other/">Other</a></li>
+                <li class="page-list-item">Main Story (<a href="/en/main/story/main/">Main</a>, <a href="/en/main/story/side/">Club</a>, <a href="/en/main/story/short/">Short</a>, <a href="/en/main/story/other/">Other</a>)</li>
+                <li class="page-list-item">Main Battle (<a href="/en/main/battle/main/">Main</a>, <a href="/en/main/battle/total_assault/">Total Assault</a>, <a href="/en/main/battle/">Other</a>)</li>
+                <li class="page-list-item">Tracks (<a href="/en/track/ost/">OST</a>, <a href="/en/track/short/">Short Ani</a>, <a href="/en/track/other/">Other</a>)</li>
+                <li class="page-list-item">Characters (<a href="/en/character/npc/">NPC</a>, <a href="/en/character/student">Student</a>)</li>
             </ul>
         </div>
 
         <div class="git-wiki-page-list">
-            <span class="post-list-title">Story:</span>
-            <ul class="post-list">
-                <li class="post-list-item"><a href="/en/main/story/main/">Main Story</a></li>
-                <li class="post-list-item"><a href="/en/main/story/short/">Short Story</a></li>
-                <li class="post-list-item"><a href="/en/main/story/side/">Side (Group) Story</a></li>
-                <li class="post-list-item"><a href="/en/main/story/other/">Other Story</a></li>
-            </ul>
-        </div>
-
-        <div class="git-wiki-page-list">
-            <span class="post-list-title">Battle:</span>
+            <span class="post-list-title">About This Site</span>
             <ul class="post-list">
-                <li class="post-list-item"><a href="/en/main/battle/main/">Main Battle</a></li>
-                <li class="post-list-item"><a href="/en/main/battle/bounty_hunt/">Bounty Hunt</a></li>
-                <li class="post-list-item"><a href="/en/main/battle/school_exchange/">School Exchange</a></li>
-                <li class="post-list-item"><a href="/en/main/battle/special_commission/">Special Commission</a></li>
-                <li class="post-list-item"><a href="/en/main/battle/total_assault/">Total Assault</a></li>
-                <li class="post-list-item">World Raid (tbc)</li>
+                <li class="post-list-item"><a href="/en/about.html">About</a></li>
+                <li class="post-list-item"><a href="/en/counter_rule.html">How We Count Things</a></li>
             </ul>
         </div>
 
-        <div class="git-wiki-page-list">
-            <span class="post-list-title">About This Site</span>
+        <div>
+            <span class="post-list-title">About The Project</span>
             <ul class="post-list">
-                <li class="post-list-item"><a href="/en/about.html">About This Site</a></li>
-                <li class="post-list-item"><a href="https://github.com/BA-OST-Index/">Project BA OST Index</a></li>
-                <li class="post-list-item"><a href="https://github.com/BA-OST-Index/ost_data_site">Generated Site Repository</a></li>
+                <li class="post-list-item"><a href="https://github.com/BA-OST-Index/" target="_blank">BA OST Index</a></li>
+                <li class="post-list-item"><a href="https://github.com/BA-OST-Index/ost_data" target="_blank">Unprocessed JSON Data</a></li>
+                <li class="post-list-item"><a href="https://github.com/BA-OST-Index/ost_data_parser" target="_blank">Data Parser</a></li>
+                <li class="post-list-item"><a href="https://github.com/BA-OST-Index/ost_data_site" target="_blank">Generated Site</a></li>
             </ul>
         </div>
     </div>
diff --git a/template/en/infobox/album.html b/template/en/infobox/album.html
new file mode 100644
index 0000000..e6d6770
--- /dev/null
+++ b/template/en/infobox/album.html
@@ -0,0 +1,21 @@
+<table id="infobox">
+    <tr>
+        <td colspan="2" class="infobox-title">{{ album.name.en }}</td>
+    </tr>
+    <tr>
+        <td colspan="2" class="infobox-icon"><img width="80%" src="{{ album.cover_img }}"></td>
+    </tr>
+    <tr><td colspan="2" class="infobox-subtitle">General Information</td></tr>
+    <tr>
+        <td class="infobox-col-title">Release Date</td>
+        <td class="infobox-col-value">{{ album.release_date_format }}</td>
+    </tr>
+    <tr>
+        <td class="infobox-col-title">Discs Number</td>
+        <td class="infobox-col-value">{{ album.disc_num }}</td>
+    </tr>
+    <tr>
+        <td class="infobox-col-title">Tracks Number</td>
+        <td class="infobox-col-value">{{ album.track_num }}</td>
+    </tr>
+</table>
\ No newline at end of file
diff --git a/template/en/infobox/background.html b/template/en/infobox/background.html
index f37ad96..f37811f 100644
--- a/template/en/infobox/background.html
+++ b/template/en/infobox/background.html
@@ -4,7 +4,10 @@
         <td colspan="2" class="infobox-title">{{ background.name.en }}</td>
     </tr>
     <tr>
-        <td colspan="2" class="infobox-icon"><img width="80%" src="{{ background.image.value }}"></td>
+        <td colspan="2" class="infobox-icon">
+            <img width="90%" src="{{ background.image.value }}">
+            <button type="button" style="margin-top: 0.4em"><a href="{{ background.image.value }}" target="_blank">View Full Image</a></button>
+        </td>
     </tr>
     <tr><td colspan="2" class="infobox-subtitle">General Information</td></tr>
     <tr>
diff --git a/template/en/infobox/battle.html b/template/en/infobox/battle.html
index ce36610..74d3739 100644
--- a/template/en/infobox/battle.html
+++ b/template/en/infobox/battle.html
@@ -30,6 +30,8 @@
                 <span>Doesn't support Arena yet!</span>
             {% elif battle.filetype == 24 %}
                 <span>Total Assault<br />BOSS {{ battle.name.en }}</span>
+            {% elif battle.filetype == 28 %}
+                <span>World Raid<br />BOSS {{ battle.name.en }}</span>
             {% else %}
                 {% if battle.filetype == 25 %}
                     <span>Bounty Hunt<br/>{{ battle.name.en }}</span>
diff --git a/template/en/infobox/npc.html b/template/en/infobox/npc.html
index c09d011..beffa66 100644
--- a/template/en/infobox/npc.html
+++ b/template/en/infobox/npc.html
@@ -1,4 +1,4 @@
-{% from "template/en/_macro.html" import output_relatedto_character %}
+{% from "template/en/_macro_page.html" import output_relatedto_character %}
 <table id="infobox">
     <tr>
         <td colspan="2" class="infobox-title">{{ char.name.en }}</td>
diff --git a/template/en/infobox/story.html b/template/en/infobox/story.html
index 47c268e..2c9f97e 100644
--- a/template/en/infobox/story.html
+++ b/template/en/infobox/story.html
@@ -1,7 +1,4 @@
-{% macro word_case(text) %}
-    {{text[0]|upper}}{{text[1:]}}
-{% endmacro %}
-
+{% from "template/base/_macro.html" import word_case %}
 <table id="infobox">
     <tr>
         <td colspan="2" class="infobox-title">{{ story.name.en }}</td>
@@ -32,7 +29,7 @@
             {% else %}
                 {% set story_type = "other" %}
             {% endif %}
-            <td class="infobox-col-value">{{ word_case(story_type) }}Story<br/>Volume {{ story.pos.volume }}<br/>Chapter {{ story.pos.chapter }}<br/>Episode {{ story.pos.segment }}</td>
+            <td class="infobox-col-value">{{ word_case(story_type) }} Story<br/>Volume {{ story.pos.volume }}<br/>Chapter {{ story.pos.chapter }}<br/>Episode {{ story.pos.segment }}</td>
         {% endif %}
     </tr>
     <tr><td colspan="2" class="infobox-subtitle">Special Case</td></tr>
diff --git a/template/en/infobox/student.html b/template/en/infobox/student.html
index 11f1a97..fd9865a 100644
--- a/template/en/infobox/student.html
+++ b/template/en/infobox/student.html
@@ -1,4 +1,5 @@
-{% from "template/en/_macro.html" import output_relatedto_character %}
+{% from "template/en/_macro_page.html" import output_relatedto_character %}
+
 <table id="infobox">
     <tr>
         <td colspan="2" class="infobox-title">{{ char.student.name.family_name.en }} {{ char.student.name.personal_name.en }}</td>
diff --git a/template/en/infobox/track.html b/template/en/infobox/track.html
index 348d923..35a85b4 100644
--- a/template/en/infobox/track.html
+++ b/template/en/infobox/track.html
@@ -1,4 +1,4 @@
-{% from "template/en/_macro.html" import tag_altogether, get_social_for_composer %}
+{% from "template/en/_macro.html" import tag_altogether, get_social_for_composer, tracktype_to_name, generate_track_anchor %}
 <table id="infobox">
     <tr>
         <td colspan="2" class="infobox-title">{{ track.no }}. {{ track.name.realname.en }}</td>
@@ -29,7 +29,7 @@
     </tr>
     <tr>
         <td class="infobox-col-title">Track Type</td>
-        <td class="infobox-col-value">{{ track_type_for_show(track) }}</td>
+        <td class="infobox-col-value">{{ tracktype_to_name(track.track_type) }}</td>
     </tr>
     {% if track.composer.composer_id == "0" %}
     <tr><td colspan="2" class="infobox-subtitle">Composer Information</td></tr>
@@ -46,7 +46,7 @@
     {% for version in track.version %}
         <tr>
             <td class="infobox-col-title">{{ version.desc.en }}</td>
-            <td class="infobox-col-value">{% for i in version.url %}<a href="{{ i.value }}" target="_blank"><img src="/static/images/social/{{ i.platform.en }}.png" class="social-logo">{{ i.platform.en }}</a> ({{ i.short_desc.en }})<br/>{% endfor %}</td>
+            <td class="infobox-col-value">{% for i in version.url %}<a href="{{ i.value }}" target="_blank"><img src="/static/images/social/{{ i.platform.en }}.png" class="social-logo">{{ i.platform.en }}</a>{% if i.short_desc.en != "" %}&nbsp;({{ i.short_desc.en }}){% endif %}<br/>{% endfor %}</td>
         </tr>
     {% endfor %}
     <tr><td colspan="2" class="infobox-subtitle">Special Usage Information</td></tr>
@@ -70,4 +70,9 @@
         <td class="infobox-col-title">Event</td>
         <td class="infobox-col-value">{% if track.special_case.is_event %}Yes{% else %}No{% endif %}</td>
     </tr>
+    <tr><td colspan="2" class="infobox-subtitle">Related Tracks</td></tr>
+    <tr>
+        <td class="infobox-col-title">Other Tracks</td>
+        <td class="infobox-col-value">{% for i in track.related_to.track_other %}{{ generate_track_anchor(i, 0, 0, 0, 0, 0) }}<br />{% else %}No related tracks!{% endfor %}</td>
+    </tr>
 </table>
\ No newline at end of file
diff --git a/template/zh_cn/_macro.bak.html b/template/zh_cn/_macro.bak.html
new file mode 100644
index 0000000..c20abcd
--- /dev/null
+++ b/template/zh_cn/_macro.bak.html
@@ -0,0 +1,480 @@
+{% from 'template/zh_cn/_macro_tooltip.html' import tooltip_add_data_js, tooltip_storyinfo, tooltip_storypart, tooltip_background, tooltip_track, tooltip_character %}
+
+{% macro multi_zhcn_gen(data) %}<span class="lang-zh-cn-cn">{{ data.zh_cn_cn }}</span><span class="lang-zh-cn-splitter">(zh_cn_cn)&nbsp;/&nbsp;</span><span class="lang-zh-cn-tw">{{ data.zh_cn_tw }}</span><span class="lang-zh-cn-splitter">(zh_cn_tw)&nbsp;/&nbsp;</span><span class="lang-zh-cn-jp">{{ data.zh_cn_jp }}</span><span class="lang-zh-cn-splitter">(zh_cn_jp)&nbsp;</span>{% endmacro %}
+
+{%- macro auto_zhcn_gen(data) -%}{%- if "zh_cn" in data -%}{{ data.zh_cn }}{%- else -%}{{ multi_zhcn_gen(data) }}{%- endif -%}{%- endmacro -%}
+
+{% macro get_stu_type_text_color_css(text) %}{% if text == "Explosion" or text == "LightArmor" %}text-damage-explosive{% elif text == "Pierce" or text == "HeavyArmor" %}text-damage-piercing{% elif text == "Mystic" or text == "Unarmed" %}text-damage-mystic{% elif text == "Main" %}text-role-striker{% elif text == "Support" %}text-role-special{% else %}text-damage-sonic{% endif %}{% endmacro %}
+
+{% macro filetype_to_name(filetype) %}{% set filetype = filetype|int %}{% if filetype == 11 %}主线{% elif filetype == 12 %}支线{% elif filetype == 13 %}短篇{% elif filetype == 14 %}活动{% elif filetype == 15 %}羁绊{% elif filetype == 16 %}其他{% endif %}{% endmacro %}
+
+{% set nothing_to_show = "无内容可显示！" %}
+{% set current_lang = "zh_cn" %}
+
+{% macro word_case(text) %}
+    {{text[0]|upper}}{{text[1:]}}
+{% endmacro %}
+
+{% macro tag_altogether(tags, instance_id) %}
+    {% for tag in tags %}<a href="/{{ current_lang }}/tag/{{ tag.namespace[-1] }}.html{% if instance_id %}#{{ instance_id }}{% endif %}" target="_blank"><span class="badge badge-{{ tag.color_css }} badge-tag">{{ tag.name.zh_cn }}</span></a>&nbsp;{% endfor %}
+{% endmacro %}
+
+{% macro track_type_for_show(track) %}{% if track.track_type == 0 %}OST{% elif track.track_type == 1 %}短篇动画{% elif track.track_type == 2 %}官方动画{% else %}其它{% endif %}{% endmacro %}
+
+{% macro get_ordinal_number(number) %}{% if number == 1 %}1st{% elif number == 2 %}2nd{% elif number == 3 %}3rd{% else %}{{ number }}th{% endif %}{% endmacro %}
+
+{% macro replace_newline_for_p(text, class_name) %}{{ text|replace("\n\n", '</p><br class="' + class_name + '-br"/><p class="' + class_name + '">')|replace("\n", '</p><p class="' + class_name + '">') }}{% endmacro %}
+
+{% macro gen_track_anchor(track) %}<a href="/{{ current_lang }}/track/{{ track.namespace.1 }}/{{ track.namespace.2 }}.html">{{ track_type_for_show(track) }} {{ track.no }}. {{ track.name.realname.en }}</a> by {{ track.composer.nickname }}{% endmacro %}
+
+{% macro output_usedby_story(data_story, instance_uuid, instance_key) %}
+    {% set _curr_filetype = namespace(filetype=0) %}
+    {% set tooltip_data = {} %}
+
+    {% for key, value in data_story.items() %}
+        {# 记录当前的filetype，稍后用于切割不同故事 #}
+        {% if _curr_filetype.filetype == 0 %}
+            {# 循环刚刚开始，加上<ul> #}
+            {% set _curr_filetype.filetype = value.0.filetype %}
+            <h4>{{ filetype_to_name(_curr_filetype.filetype) }}故事</h4><ul>
+        {% else %}
+            {% if _curr_filetype.filetype != value.0.filetype %}
+                {# 如果当前文件已经不再是之前的 #}
+                {% set _curr_filetype.filetype = value.0.filetype %}
+                </ul><h4>{{ filetype_to_name(_curr_filetype.filetype) }}故事</h4><ul>
+            {% endif %}
+        {% endif %}
+
+        {% set tooltip_id = generate_tooltip_id() %}
+
+        <li id="story-{{ value.0.instance_id }}">
+        {% set value = value[0] %}
+        {% if value.filetype == 15 %}
+            {% set target_url = "/" + current_lang + "/character/student/" + value.pos.student|string|lower + "/bond/" + value.pos.no|string + ".html" %}
+            <a href="{{ target_url }}" onmouseover="showTooltip(this, '{{ tooltip_id }}')">
+                <img src="/static/images/student/icon/{{ value.student.image.collection_texture }}.webp" class="icon-stu"/>{{ auto_zhcn_gen(value.student.name.personal_name) }}{{ value.pos.no }}个羁绊故事：{{ auto_zhcn_gen(value.name) }}
+            </a>
+        {% elif value.filetype == 14 %}
+            {% set target_url = "/" + current_lang + "/event/" + value.pos.event_id|string + "/story/" + value.pos.segment|string + ".html" %}
+            <a href="{{ targer_url }}" onmouseover="showTooltip(this, '{{ tooltip_id }}')">活动 {{ value.parent_data.0.name.zh_cn }} 的第{{ value.pos.segment }}个故事：{{ auto_zhcn_gen(value.name) }}
+            </a>
+        {% else %}
+            {% if value.filetype == 11 %}
+                {% set story_type = "main" %}
+                {% set story_type_trans = "主线" %}
+            {% elif value.filetype == 12 %}
+                {% set story_type = "side" %}
+                {% set story_type_trans = "支线" %}
+            {% elif value.filetype == 13 %}
+                {% set story_type = "short" %}
+                {% set story_type_trans = "短篇" %}
+            {% else %}
+                {% set story_type = "other" %}
+                {% set story_type_trans = "其它" %}
+            {% endif %}
+            {% set target_url = "/" + current_lang + "/main/story/" + story_type + "/" + value.pos.volume|string + "/" + value.pos.chapter|string + "/" + value.pos.segment|string + ".html" %}
+            <a href="{{ target_url }}" onmouseover="showTooltip(this, '{{ tooltip_id }}')">
+                {{ story_type_trans }}故事第{{ value.pos.volume }}篇第{{ value.pos.chapter }}章第{{ value.pos.segment }}话：{{ auto_zhcn_gen(value.name) }}
+            </a>
+        {% endif %}
+        {% do tooltip_data.update({tooltip_id: tooltip_storyinfo(value)}) %}
+
+        {# appearedAt snippet #}
+        {% if instance_uuid %}
+            {% set _part_track_html = [] %}
+            {% for part in value.part %}
+                {% set _loop_index = loop.index %}
+                {% for part2 in part[instance_key] %}
+                    {% if part2.uuid == instance_uuid %}
+                        {% if part.is_memory %}
+                            {% set ele_class = 'class="text-momo"' %}
+                        {% elif part.is_battle %}
+                            {% set ele_class = 'class="text-danger"' %}
+                        {% elif part.is_momotalk %}
+                            {% set ele_class = 'class="text-black"' %}
+                        {% else %}
+                            {% set ele_class = 'class="text-primary"' %}
+                        {% endif %}
+
+                        {% set tooltip_id = generate_tooltip_id() %}
+
+                        {% if _part_track_html|length == 0 %}
+                            {% do _part_track_html.append('<span>&nbsp;(出现于<a href="' + target_url + '#story-part-' + _loop_index|string + '" ' + ele_class + ' onmouseover="showTooltip(this,' + "'" +  tooltip_id + "'" + ')"><i>[' + _loop_index|string + '] ' + auto_zhcn_gen(part.name) + '</i></a>') %}
+                        {% else %}
+                            {% do _part_track_html.append('，<a href="' + target_url + '#story-part-' + _loop_index|string + '" ' + ele_class + ' onmouseover="showTooltip(this,' + "'" +  tooltip_id + "'" + ')"><i>[' + _loop_index|string + '] ' + auto_zhcn_gen(part.name) + '</i></a>') %}
+                        {% endif %}
+
+                        {% do tooltip_data.update({tooltip_id: tooltip_storypart(value, part)}) %}
+                        {% break %}
+                    {% endif %}
+                {% endfor %}
+            {% endfor %}
+            {% do _part_track_html.append(")</span>") %}
+
+            {{ _part_track_html|join("") }}
+        {% endif %}
+        </li>
+        {% else %}
+            <p>{{ nothing_to_show }}</p>
+        {% endfor %}
+    </ul>
+    {{ tooltip_add_data_js(tooltip_data) }}
+{% endmacro %}
+
+{% macro output_usedby_battle(data_battle) %}
+    <ul>
+        {% for key, value in data_battle.items() %}
+            {% set value = value[0] %}
+            <li id="{{ value.uuid }}">
+            {% if value.filetype == 21 %}
+                {% if value.no[0] == "N" %}
+                    {% set mission_type = "Normal" %}
+                    {% set mission_type_trans = "普通" %}
+                {% else %}
+                    {% set mission_type = "Hard" %}
+                    {% set mission_type_trans = "困难" %}
+                {% endif %}
+                    <a href="/{{ current_lang }}/main/battle/main/{{ value.chapter }}/{{ value.no }}.html#track" target="_blank">主线任务 第{{ value.chapter }}章 第{{ value.no[1] }}个任务 ({{ mission_type_trans }}, 第{{ value.no[2] }}个子任务)：{{ value.name.zh_cn }}</a>
+            {% elif value.filetype == 22 %}
+                {% if value.no[0] == "N" %}
+                    {% set mission_type = "Normal" %}
+                    {% set mission_type_trans = "普通" %}
+                {% else %}
+                    {% set mission_type = "Hard" %}
+                    {% set mission_type_trans = "困难" %}
+                {% endif %}
+                    <a href="/{{ current_lang }}/event/{{ value.event_id }}/{{ value.no }}.html#track" target="_blank">活动 {{ value.parent_data.0.name.zh_cn }} 的第{{ value.no[1:] }}个任务 ({{ mission_type_trans }})：{{ value.name.zh_cn }}</a>
+            {% else %}
+                {% if value.filetype == 24 %}
+                    {% set mission_type = "total_assault" %}
+                {% elif value.filetype == 25 %}
+                    {% set mission_type = "bounty_hunt" %}
+                {% elif value.filetype == 26 %}
+                    {% set mission_type = "school_exchange" %}
+                {% else %}
+                    {% set mission_type = "special_commision" %}
+                {% endif %}
+                    <a href="/{{ current_lang }}/main/battle/{{ mission_type }}/{{ value.id }}.html#track" target="_blank">{{ value.name.zh_cn }}</a>
+            {% endif %}
+            </li>
+        {% else %}
+            <li>{{ nothing_to_show }}</li>
+        {% endfor %}
+    </ul>
+{% endmacro %}
+
+{% macro output_usedby_ui(data_ui) %}
+    <ul>
+        {% for key, value in data_ui.items() %}
+            {% set i = value.0 %}
+
+            <!--Special case for UiInfoEvent-->
+            <li id="{{ i.uuid }}">
+            {% if i.filetype == 32 %}
+                <a href="/{{ current_lang }}/event/{{ i.event_id }}/ui/{{ i.id }}.html#track" target="_blank">{{ auto_zhcn_gen(i.name) }}</a>&nbsp;-&nbsp;{{ i.name.zh_cn }}
+            {% else %}
+                <a href="/{{ current_lang }}/ui/{{ i.namespace.1 }}.html#track" target="_blank">{{ auto_zhcn_gen(i.name) }}</a>&nbsp;-&nbsp;{{ i.name.zh_cn }}
+            {% endif %}
+            </li>
+        {% else %}
+            <li>{{ nothing_to_show }}</li>
+        {% endfor %}
+    </ul>
+{% endmacro %}
+
+{% macro output_usedby_ui_list(data_ui) %}
+    <ul>
+        {% for value in data_ui %}
+            <!--Special case for UiInfoEvent-->
+            {% if i.filetype == 32 %}
+                <li><a href="/{{ current_lang }}/event/{{ i.event_id }}/ui/{{ i.id }}.html" target="_blank">{{ auto_zhcn_gen(value.name) }}</a>&nbsp;-&nbsp;{{ value.name.zh_cn }}</li>
+            {% else %}
+                <li><a href="/{{ current_lang }}/ui/{{ i.namespace.1 }}.html" target="_blank">{{ auto_zhcn_gen(value.name) }}</a>&nbsp;-&nbsp;{{ value.name.zh_cn }}</li>
+            {% endif %}
+        {% else %}
+            <li>{{ nothing_to_show }}</li>
+        {% endfor %}
+    </ul>
+{% endmacro %}
+
+{% macro output_usedby_ui_for_all_ui(data_ui) %}
+    <ul>
+        {% for value in data_ui %}
+            {% set i = value[1] %}
+
+            <!--Special case for UiInfoEvent-->
+            {% if i.filetype == 32 %}
+                <li><a href="/{{ current_lang }}/event/{{ i.event_id }}/ui/{{ i.id }}.html" target="_blank">{{ auto_zhcn_gen(i.name) }}</a>&nbsp;-&nbsp;{{ i.name.zh_cn }}</li>
+            {% else %}
+                <li><a href="/{{ current_lang }}/ui/{{ i.namespace.1 }}.html" target="_blank">{{ auto_zhcn_gen(i.name) }}</a>&nbsp;-&nbsp;{{ i.name.zh_cn }}</li>
+            {% endif %}
+        {% else %}
+            <li>{{ nothing_to_show }}</li>
+        {% endfor %}
+    </ul>
+{% endmacro %}
+
+{% macro output_usedby_background(data_background, html_id, instance_id, instance_type) %}
+    {% if instance_type in ["track"] %}
+        {% set tooltip_data = {} %}
+        {% set enable_tooltip = 1 %}
+    {% endif %}
+
+    <table class="gallery">
+        <tr>
+            {% for key, value in data_background.items() %}
+                {% if enable_tooltip == 1 %}
+                    {% set tooltip_id = generate_tooltip_id() %}
+                {% endif %}
+
+                <td class="gallery-img" id="{{ value.0.uuid }}"><img src="{{ value.0.image.value }}"><p class="gallery-caption"><a href="/{{ current_lang }}/background/{{ value.0.filename }}.html{% if html_id %}#{{ html_id }}{% endif %}" {% if enable_tooltip == 1 %}onmouseover="showTooltip(this, '{{ tooltip_id }}')"{% endif %} target="_blank">{{ value.0.filename }}</a></p></td>
+
+                {% if enable_tooltip == 1 %}
+                    {% do tooltip_data.update({tooltip_id: tooltip_background(value.0, instance_id, instance_type)}) %}
+                {% endif %}
+            {% else %}
+                <td>{{ nothing_to_show }}</td>
+            {% endfor %}
+        </tr>
+    </table>
+
+    {% if enable_tooltip == 1 %}
+        {{ tooltip_add_data_js(tooltip_data) }}
+    {% endif %}
+{% endmacro %}
+
+{% macro output_usedby_background_list(data_background, html_id, instance_id, instance_type) %}
+    {% if instance_type in ["story"] %}
+        {% set tooltip_data = {} %}
+        {% set enable_tooltip = 1 %}
+    {% endif %}
+
+    <table class="gallery">
+        <tr>
+            {% for value in data_background %}
+                {% if enable_tooltip == 1 %}
+                    {% set tooltip_id = generate_tooltip_id() %}
+                {% endif %}
+
+                <td class="gallery-img"><img src="{{ value.image.value }}"><p class="gallery-caption"><a href="/{{ current_lang }}/background/{{ value.filename }}.html#{{ html_id }}" {% if enable_tooltip == 1 %}onmouseover="showTooltip(this, '{{ tooltip_id }}')"{% endif %} target="_blank">{{ value.filename }}</a></p></td>
+
+                {% if enable_tooltip == 1 %}
+                    {% do tooltip_data.update({tooltip_id: tooltip_background(value, instance_id, instance_type)}) %}
+                {% endif %}
+            {% else %}
+                <td>{{ nothing_to_show }}</td>
+            {% endfor %}
+        </tr>
+    </table>
+
+    {% if enable_tooltip == 1 %}
+        {{ tooltip_add_data_js(tooltip_data) }}
+    {% endif %}
+{% endmacro %}
+
+{% macro output_usedby_track(data_track, with_counter, html_id, instance_id, instance_type) %}
+    {% set _with_counter = with_counter or 0 %}
+    {% if instance_type in ["character", "background"] %}
+        {% set tooltip_data = {} %}
+        {% set enable_tooltip = 1 %}
+    {% endif %}
+
+    <ul>
+        {% for key, value in data_track.items() %}
+            {% set track = value.0 %}
+            {% set track_type = track_type_for_show(track) %}
+
+            {% if enable_tooltip == 1 %}
+                {% set tooltip_id = generate_tooltip_id() %}
+            {% endif %}
+
+            <li id="track-{{ track.instance_id }}"><a href="/{{ current_lang }}/track/{{ track.namespace.1 }}/{{ track.namespace.2 }}.html{% if html_id %}#{{ html_id }}{% endif %}" {% if enable_tooltip == 1 %}onmouseover="showTooltip(this, '{{ tooltip_id }}')"{% endif %}>{% if _with_counter != 0 or _with_counter %}【{{ value.1 }}】{% endif %}{{ track_type }} {{ track.no }}. {{ track.name.realname.en }} {% if track.name.realname.zh_cn %}({{ track.name.realname.zh_cn }}){% endif %}</a> by {{ track.composer.nickname }}</li>
+
+            {% if enable_tooltip == 1 %}
+                {% do tooltip_data.update({tooltip_id: tooltip_track(track, instance_id, instance_type)}) %}
+            {% endif %}
+        {% else %}
+            <li>{{ nothing_to_show }}</li>
+        {% endfor %}
+    </ul>
+
+    {% if enable_tooltip == 1 %}
+        {{ tooltip_add_data_js(tooltip_data) }}
+    {% endif %}
+{% endmacro %}
+
+{% macro output_usedby_track_list(data_track, html_id, instance_type, instance_id) %}
+    <ul>
+        {% if instance_type == "story" %}
+            {% set tooltip_data = {} %}
+            {% set enable_tooltip = 1 %}
+        {% endif %}
+
+        {% for value in data_track %}
+            {% set track_type = track_type_for_show(value) %}
+
+            {% if enable_tooltip == 1 %}
+                {% set tooltip_id = generate_tooltip_id() %}
+            {% endif %}
+
+            <li id="track-{{ value.instance_id }}"><a href="/{{ current_lang }}/track/{{ value.namespace.1 }}/{{ value.namespace.2 }}.html{% if html_id %}#{{ html_id }}{% endif %}" {% if enable_tooltip == 1 %}onmouseover="showTooltip(this, '{{ tooltip_id }}')"{% endif %}>{{ track_type }} {{ value.no }}. {{ value.name.realname.en }} {% if value.name.realname.zh_cn %}({{ value.name.realname.zh_cn }}){% endif %}</a> by {{ value.composer.nickname }}</li>
+
+            {% if enable_tooltip == 1 %}
+                {% do tooltip_data.update({tooltip_id: tooltip_track(value, instance_id, instance_type)}) %}
+            {% endif %}
+        {% else %}
+            <li>{{ nothing_to_show }}</li>
+        {% endfor %}
+    </ul>
+
+    {% if enable_tooltip == 1 %}
+        {{ tooltip_add_data_js(tooltip_data) }}
+    {% endif %}
+{% endmacro %}
+
+{% macro output_usedby_video(data_video, instance_id) %}
+    <ul>
+        {% for key, value in data_video.items() %}
+            {% set value = value.0 %}
+
+            <li id="{{ value.uuid }}"><a href="/{{ current_lang }}/video/{{ value.namespace.1 }}.html{% if instance_id %}#{{ instance_id }}{% endif %}" target="_blank">视频<i>{{ value.name.zh_cn }}</i></a>：{{ value.desc.zh_cn }}</li>
+        {% else %}
+            <li>{{ nothing_to_show }}</li>
+        {% endfor %}
+    </ul>
+{% endmacro %}
+
+{% macro output_usedby_character(data_character, html_id, instance_id, instance_type, output_combat_info, combat_leader_pos) %}
+    {% if instance_type in ["story", "character"] %}
+        {% set enable_tooltip = 1 %}
+        {% set tooltip_data = {} %}
+    {% endif %}
+
+    <ul>
+        {% for char in data_character.character %}
+            {% if enable_tooltip == 1 %}
+                {% set tooltip_id = generate_tooltip_id() %}
+            {% endif %}
+
+            {% if char.filetype == 52 %}
+            <li>
+                <a href="/{{ current_lang }}/character/npc/{{ char.namespace[-1]|lower }}/{% if html_id %}#{{ html_id }}{% endif %}" {% if enable_tooltip == 1 %}onmouseover="showTooltip(this, '{{ tooltip_id }}')"{% endif %}>{{ auto_zhcn_gen(char.name) }}</a>
+            </li>
+            {% else %}
+            <li>
+                {% if output_combat_info and output_combat_info == "True" %}
+                    {% if loop.index - 1 == combat_leader_pos %}<img src="/static/images/ui/Image_Conquest_Leader.png" class="story-battle-leader" />{% endif %}
+                    <span><b class="{{ get_stu_type_text_color_css(char.combatant_info.squad_type.type) }}">{{ auto_zhcn_gen(char.combatant_info.squad_type.lang) }}</b>&nbsp;&#124;</span>
+                {% endif %}
+                <img src="/static/images/schoolicon/School_Icon_{{ char.school_id|upper }}_W.png" class="invert-light schoolicon-p">
+                <span>
+                    <a href="/{{ current_lang }}/character/student/{{ char.name.path_name|lower }}/{% if html_id %}#{{ html_id }}{% endif %}" {% if enable_tooltip == 1 %}onmouseover="showTooltip(this, '{{ tooltip_id }}')"{% endif %}>
+                        <img src="/static/images/student/icon/{{ char.image.collection_texture }}.webp" class="icon-stu"/>{{ auto_zhcn_gen(char.name.personal_name) }}
+                    </a>
+                </span>
+                {% if output_combat_info and output_combat_info == "True" %}
+                    <span>&nbsp;
+                        <span class="{{ get_stu_type_text_color_css(char.combatant_info.attack_type.type) }}">{{ auto_zhcn_gen(char.combatant_info.attack_type.lang) }}</span>/<span class="{{ get_stu_type_text_color_css(char.combatant_info.armor_type.type) }}">{{ auto_zhcn_gen(char.combatant_info.armor_type.lang) }}</span>
+                    </span>
+                {% else %}
+                    <span>&nbsp;[{{ auto_zhcn_gen(char.club) }}]</span>
+                {% endif %}
+            </li>
+            {% endif %}
+
+            {% if enable_tooltip == 1 %}
+                {% do tooltip_data.update({tooltip_id: tooltip_character(char, instance_id, instance_type)}) %}
+            {% endif %}
+        {% else %}
+            <li>{{ nothing_to_show }}</li>
+        {% endfor %}
+    </ul>
+
+    {% if enable_tooltip == 1 %}
+        {{ tooltip_add_data_js(tooltip_data) }}
+    {% endif %}
+{% endmacro %}
+
+{# 魔改自 output_usedby_character #}
+{% macro output_relatedto_character(data_character, use_ul) %}
+    {% if not use_ul or use_ul == "True" %}
+        {% set use_ul = 1 %}
+    {% else %}
+        {% set use_ul = 0 %}
+    {% endif %}
+
+    {% if use_ul == 1 %}
+    <ul>
+    {% endif %}
+        {% for char in data_character.character %}
+            {% if use_ul == 1 %}<li>{% endif %}
+            {% if char.filetype == 52 %}
+                <a href="/{{ current_lang }}/character/npc/{{ char.namespace[-1]|lower }}/{% if instance_id %}#{{ instance_id }}{% endif %}" target="_blank">{{ auto_zhcn_gen(char.name) }}</a>
+
+            {% else %}
+                <span>
+                    <a href="/{{ current_lang }}/character/student/{{ char.name.path_name|lower }}/{% if instance_id %}#{{ instance_id }}{% endif %}" target="_blank">
+                        <img src="/static/images/student/icon/{{ char.image.collection_texture }}.webp" class="icon-stu"/>{{ auto_zhcn_gen(char.name.name) }}
+                    </a>
+                </span>
+            {% endif %}
+            {% if use_ul == 1 %}</li>{% else %}{% if not loop.last %}<br />{% endif %}{% endif %}
+        {% else %}
+            {% if use_ul %}<li>{{ nothing_to_show }}</li>{% else %}{{ nothing_to_show }}{% endif %}
+        {% endfor %}
+    {% if use_ul == 1 %}
+    </ul>
+    {% endif %}
+{% endmacro %}
+
+{% macro output_usedby_character_dict(data_character, html_id, instance_id, instance_type) %}
+    {# used for track.html for exporting track-character relationship #}
+    {% set tooltip_data = {} %}
+
+    <ul>
+        {% for key, value in data_character.items() %}
+            {% set ref_counter = value.1 %}
+            {% set char = value.0 %}
+
+            {% set tooltip_id = generate_tooltip_id() %}
+
+            <li id="{{ char.uuid }}"><span>【{{ ref_counter }}】</span>
+            {% if "NPC_" in key %}
+                <a href="/{{ current_lang }}/character/npc/{{ char.namespace[-1]|lower }}/{% if html_id %}#{{ html_id }}{% endif %}" onmouseover="showTooltip(this, '{{ tooltip_id }}')">
+                    {{ auto_zhcn_gen(char.name) }}
+                </a>
+            {% else %}
+                <img src="/static/images/schoolicon/School_Icon_{{ char.school_id|upper }}_W.png" class="invert-light schoolicon-p">
+                <a href="/{{ current_lang }}/character/student/{{ char.name.path_name|lower }}/{% if html_id %}#{{ html_id }}{% endif %}" onmouseover="showTooltip(this, '{{ tooltip_id }}')">
+                    <img src="/static/images/student/icon/{{ char.image.collection_texture }}.webp" class="icon-stu"/>{{ auto_zhcn_gen(char.name.personal_name) }}
+                </a>
+                &nbsp;<span>[{{ auto_zhcn_gen(char.club) }}]</span>
+            {% endif %}
+
+            {% do tooltip_data.update({tooltip_id: tooltip_character(char, instance_id, instance_type)}) %}
+            </li>
+        {% else %}
+            <li>{{ nothing_to_show }}</li>
+        {% endfor %}
+    </ul>
+
+    {{ tooltip_add_data_js(tooltip_data) }}
+{% endmacro %}
+
+{% macro get_social_for_composer(composer) %}
+    <a href="{{ composer.contact.url.value }}" target="_blank"><img src="/static/images/social/{{ composer.contact.platform.en }}.png" class="social-logo">{{ composer.contact.url.platform.zh_cn }}: {{ composer.nickname }}</a>
+{% endmacro %}
+
+{% macro track_version_video_player(versions) %}
+    {% for version in versions %}
+        {% set _version_index = loop.index %}
+
+        <h3>{{ version.desc.zh_cn }}</h3>
+        {% for url in version.url %}
+            <div onclick="play_video('{{ url.value }}', 'track-video-{{ _version_index }}-{{ loop.index }}')" id="track-video-{{ _version_index }}-{{ loop.index }}" class="track-video-div">
+                <p><img src="/static/images/social/{{ url.platform.en }}.png" class="social-logo">{{ url.platform.zh_cn }} ({{ url.value }})</p>
+            </div>
+            <div id="track-video-{{ _version_index }}-{{ loop.index }}-container"></div>
+        {% endfor %}
+    {% endfor %}
+{% endmacro %}
diff --git a/template/zh_cn/_macro.html b/template/zh_cn/_macro.html
index 54b9b11..8c3bbda 100644
--- a/template/zh_cn/_macro.html
+++ b/template/zh_cn/_macro.html
@@ -1,478 +1,147 @@
-{% from 'template/zh_cn/_macro_tooltip.html' import tooltip_add_data_js, tooltip_storyinfo, tooltip_storypart, tooltip_background, tooltip_track, tooltip_character %}
-
-{% macro multi_zhcn_gen(data) %}<span class="lang-zh-cn-cn">{{ data.zh_cn_cn }}</span><span class="lang-zh-cn-splitter">(zh_cn_cn)&nbsp;/&nbsp;</span><span class="lang-zh-cn-tw">{{ data.zh_cn_tw }}</span><span class="lang-zh-cn-splitter">(zh_cn_tw)&nbsp;/&nbsp;</span><span class="lang-zh-cn-jp">{{ data.zh_cn_jp }}</span><span class="lang-zh-cn-splitter">(zh_cn_jp)&nbsp;</span>{% endmacro %}
-
-{%- macro auto_zhcn_gen(data) -%}{%- if "zh_cn" in data -%}{{ data.zh_cn }}{%- else -%}{{ multi_zhcn_gen(data) }}{%- endif -%}{%- endmacro -%}
-
-{% macro get_stu_type_text_color_css(text) %}{% if text == "Explosion" or text == "LightArmor" %}text-damage-explosive{% elif text == "Pierce" or text == "HeavyArmor" %}text-damage-piercing{% elif text == "Mystic" or text == "Unarmed" %}text-damage-mystic{% elif text == "Main" %}text-role-striker{% elif text == "Support" %}text-role-special{% else %}text-damage-sonic{% endif %}{% endmacro %}
-
-{% macro filetype_to_name(filetype) %}{% set filetype = filetype|int %}{% if filetype == 11 %}主线{% elif filetype == 12 %}支线{% elif filetype == 13 %}短篇{% elif filetype == 14 %}活动{% elif filetype == 15 %}羁绊{% elif filetype == 16 %}其他{% endif %}{% endmacro %}
-
+{% from 'template/base/_macro.html' import anchor_new_tab, get_storypart_text_color_css, get_stu_type_text_color_css, generate_tooltip_anchor %}
+{% set curr_lang = "zh_cn" %}
 {% set nothing_to_show = "无内容可显示！" %}
-{% set current_lang = "zh_cn" %}
-
-{% macro word_case(text) %}
-    {{text[0]|upper}}{{text[1:]}}
-{% endmacro %}
-
-{% macro tag_altogether(tags, instance_id) %}
-    {% for tag in tags %}<a href="/{{ current_lang }}/tag/{{ tag.namespace[-1] }}.html{% if instance_id %}#{{ instance_id }}{% endif %}"><span class="badge badge-{{ tag.color_css }} badge-tag">{{ tag.name.zh_cn }}</span></a>&nbsp;{% endfor %}
-{% endmacro %}
-
-{% macro track_type_for_show(track) %}{% if track.track_type == 0 %}OST{% elif track.track_type == 1 %}短篇动画{% elif track.track_type == 2 %}官方动画{% else %}其它{% endif %}{% endmacro %}
-
-{% macro get_ordinal_number(number) %}{% if number == 1 %}1st{% elif number == 2 %}2nd{% elif number == 3 %}3rd{% else %}{{ number }}th{% endif %}{% endmacro %}
 
+{# ------------------------------------------------------------------- #}
+{# ------------------------------- 通用函数 --------------------------- #}
+{# ------------------------------------------------------------------- #}
+{% macro multi_zhcn_gen(data) %}<span class="lang-zh-cn-cn">{{ data.zh_cn_cn|js_string_safe }}</span><span class="lang-zh-cn-splitter">(zh_cn_cn)&nbsp;/&nbsp;</span><span class="lang-zh-cn-tw">{{ data.zh_cn_tw|js_string_safe }}</span><span class="lang-zh-cn-splitter">(zh_cn_tw)&nbsp;/&nbsp;</span><span class="lang-zh-cn-jp">{{ data.zh_cn_jp|js_string_safe }}</span><span class="lang-zh-cn-splitter">(zh_cn_jp)&nbsp;</span>{% endmacro %}
+{%- macro auto_zhcn_gen(data) -%}{%- if "zh_cn" in data -%}{{ data.zh_cn|js_string_safe }}{%- else -%}{{ multi_zhcn_gen(data) }}{%- endif -%}{%- endmacro -%}
 {% macro replace_newline_for_p(text, class_name) %}{{ text|replace("\n\n", '</p><br class="' + class_name + '-br"/><p class="' + class_name + '">')|replace("\n", '</p><p class="' + class_name + '">') }}{% endmacro %}
 
-{% macro output_usedby_story(data_story, instance_uuid, instance_key) %}
-    {% set _curr_filetype = namespace(filetype=0) %}
-    {% set tooltip_data = {} %}
 
-    {% for key, value in data_story.items() %}
-        {# 记录当前的filetype，稍后用于切割不同故事 #}
-        {% if _curr_filetype.filetype == 0 %}
-            {# 循环刚刚开始，加上<ul> #}
-            {% set _curr_filetype.filetype = value.0.filetype %}
-            <h4>{{ filetype_to_name(_curr_filetype.filetype) }}故事</h4><ul>
-        {% else %}
-            {% if _curr_filetype.filetype != value.0.filetype %}
-                {# 如果当前文件已经不再是之前的 #}
-                {% set _curr_filetype.filetype = value.0.filetype %}
-                </ul><h4>{{ filetype_to_name(_curr_filetype.filetype) }}故事</h4><ul>
-            {% endif %}
-        {% endif %}
+{% macro extract_storypart_all_desc(data) %}{% for i in data %}{{ auto_zhcn_gen(i.desc) }}{% endfor %}{% endmacro %}
 
-        {% set tooltip_id = generate_tooltip_id() %}
+{# 代为调用 template_en 全局里的函数 #}
+{% macro tracktype_to_name(track_type) %}{{ template_zhcn.tracktype_to_name(track_type) }}{% endmacro %}
+{% macro filetype_to_name(ft) %}{{ template_zhcn.filetype_to_name(ft) }}{% endmacro %}
+{% macro generate_story_url(story) %}{{ py_generate_story_url(curr_lang, story) }}{% endmacro %}
 
-        <li id="story-{{ value.0.instance_id }}">
-        {% set value = value[0] %}
-        {% if value.filetype == 15 %}
-            {% set target_url = "/" + current_lang + "/character/student/" + value.pos.student|string|lower + "/bond/" + value.pos.no|string + ".html" %}
-            <a href="{{ target_url }}" onmouseover="showTooltip(this, '{{ tooltip_id }}')">
-                <img src="/static/images/student/icon/{{ value.student.image.collection_texture }}.webp" class="icon-stu"/>{{ auto_zhcn_gen(value.student.name.personal_name) }}{{ value.pos.no }}个羁绊故事：{{ auto_zhcn_gen(value.name) }}
-            </a>
-        {% elif value.filetype == 14 %}
-            {% set target_url = "/" + current_lang + "/event/" + value.pos.event_id|string + "/story/" + value.pos.segment|string + ".html" %}
-            <a href="{{ targer_url }}" onmouseover="showTooltip(this, '{{ tooltip_id }}')">活动 {{ value.parent_data.0.name.zh_cn }} 的第{{ value.pos.segment }}个故事：{{ auto_zhcn_gen(value.name) }}
-            </a>
-        {% else %}
-            {% if value.filetype == 11 %}
-                {% set story_type = "main" %}
-                {% set story_type_trans = "主线" %}
-            {% elif value.filetype == 12 %}
-                {% set story_type = "side" %}
-                {% set story_type_trans = "支线" %}
-            {% elif value.filetype == 13 %}
-                {% set story_type = "short" %}
-                {% set story_type_trans = "短篇" %}
-            {% else %}
-                {% set story_type = "other" %}
-                {% set story_type_trans = "其它" %}
-            {% endif %}
-            {% set target_url = "/" + current_lang + "/main/story/" + story_type + "/" + value.pos.volume|string + "/" + value.pos.chapter|string + "/" + value.pos.segment|string + ".html" %}
-            <a href="{{ target_url }}" onmouseover="showTooltip(this, '{{ tooltip_id }}')">
-                {{ story_type_trans }}故事第{{ value.pos.volume }}篇第{{ value.pos.chapter }}章第{{ value.pos.segment }}话：{{ auto_zhcn_gen(value.name) }}
-            </a>
-        {% endif %}
-        {% do tooltip_data.update({tooltip_id: tooltip_storyinfo(value)}) %}
-
-        {# appearedAt snippet #}
-        {% if instance_uuid %}
-            {% set _part_track_html = [] %}
-            {% for part in value.part %}
-                {% set _loop_index = loop.index %}
-                {% for part2 in part[instance_key] %}
-                    {% if part2.uuid == instance_uuid %}
-                        {% if part.is_memory %}
-                            {% set ele_class = 'class="text-momo"' %}
-                        {% elif part.is_battle %}
-                            {% set ele_class = 'class="text-danger"' %}
-                        {% elif part.is_momotalk %}
-                            {% set ele_class = 'class="text-black"' %}
-                        {% else %}
-                            {% set ele_class = 'class="text-primary"' %}
-                        {% endif %}
-
-                        {% set tooltip_id = generate_tooltip_id() %}
-
-                        {% if _part_track_html|length == 0 %}
-                            {% do _part_track_html.append('<span>&nbsp;(出现于<a href="' + target_url + '#story-part-' + _loop_index|string + '" ' + ele_class + ' onmouseover="showTooltip(this,' + "'" +  tooltip_id + "'" + ')"><i>[' + _loop_index|string + '] ' + auto_zhcn_gen(part.name) + '</i></a>') %}
-                        {% else %}
-                            {% do _part_track_html.append('，<a href="' + target_url + '#story-part-' + _loop_index|string + '" ' + ele_class + ' onmouseover="showTooltip(this,' + "'" +  tooltip_id + "'" + ')"><i>[' + _loop_index|string + '] ' + auto_zhcn_gen(part.name) + '</i></a>') %}
-                        {% endif %}
+{# 通用的Story名称生成 #}
+{% macro generate_story_name(story) %}{% set ft = story.filetype %}{% if ft == 15 %}<span><img src="/static/images/student/icon/{{ story.student.image.collection_texture }}.webp" class="icon-stu">{{ auto_zhcn_gen(story.student.name.personal_name) }}的第{{ story.pos.no }}个羁绊故事：{{ auto_zhcn_gen(story.name) }}</span>{% elif ft == 14 %}<span>活动{{ auto_zhcn_gen(story.parent_data.0.name) }}&nbsp;第{{ story.pos.segment }}个故事：{{ auto_zhcn_gen(story.name) }}</span>{% else %}{{ filetype_to_name(ft) }}故事&nbsp;第{{ story.pos.volume }}篇&nbsp;第{{ story.pos.chapter }}章&nbsp;第E{{ story.pos.segment }}话：{{ auto_zhcn_gen(story.name) }}{% endif %}{% endmacro %}
 
-                        {% do tooltip_data.update({tooltip_id: tooltip_storypart(value, part)}) %}
-                        {% break %}
-                    {% endif %}
-                {% endfor %}
-            {% endfor %}
-            {% do _part_track_html.append(")</span>") %}
-
-            {{ _part_track_html|join("") }}
-        {% endif %}
-        </li>
-        {% else %}
-            <p>{{ nothing_to_show }}</p>
-        {% endfor %}
-    </ul>
-    {{ tooltip_add_data_js(tooltip_data) }}
+{# 通用的UI <a>生成 #}
+{% macro generate_ui_anchor(ui) %}
+    {% if ui.filetype == 32 %}
+        {% set url %}/{{ curr_lang }}/event/{{ ui.event_id }}/ui/{{ ui.id }}.html#track{% endset %}
+    {% else %}
+        {% set url %}/{{ curr_lang }}/ui/{{ ui.namespace.1 }}.html#track{% endset %}
+    {% endif %}
+    <span><a href="{{ url }}" target="_blank">{{ auto_zhcn_gen(ui.name) }}</a>&nbsp;-&nbsp;{{ auto_zhcn_gen(ui.desc) }}</span>
 {% endmacro %}
 
-{% macro output_usedby_battle(data_battle) %}
-    <ul>
-        {% for key, value in data_battle.items() %}
-            {% set value = value[0] %}
-            <li id="{{ value.uuid }}">
-            {% if value.filetype == 21 %}
-                {% if value.no[0] == "N" %}
-                    {% set mission_type = "Normal" %}
-                    {% set mission_type_trans = "普通" %}
-                {% else %}
-                    {% set mission_type = "Hard" %}
-                    {% set mission_type_trans = "困难" %}
-                {% endif %}
-                    <a href="/{{ current_lang }}/main/battle/main/{{ value.chapter }}/{{ value.no }}.html#track">主线任务 第{{ value.chapter }}章 第{{ value.no[1] }}个任务 ({{ mission_type_trans }}, 第{{ value.no[2] }}个子任务)：{{ value.name.zh_cn }}</a>
-            {% elif value.filetype == 22 %}
-                {% if value.no[0] == "N" %}
-                    {% set mission_type = "Normal" %}
-                    {% set mission_type_trans = "普通" %}
-                {% else %}
-                    {% set mission_type = "Hard" %}
-                    {% set mission_type_trans = "困难" %}
-                {% endif %}
-                    <a href="/{{ current_lang }}/event/{{ value.event_id }}/{{ value.no }}.html#track">活动 {{ value.parent_data.0.name.zh_cn }} 的第{{ value.no[1:] }}个任务 ({{ mission_type_trans }})：{{ value.name.zh_cn }}</a>
-            {% else %}
-                {% if value.filetype == 24 %}
-                    {% set mission_type = "total_assault" %}
-                {% elif value.filetype == 25 %}
-                    {% set mission_type = "bounty_hunt" %}
-                {% elif value.filetype == 26 %}
-                    {% set mission_type = "school_exchange" %}
-                {% else %}
-                    {% set mission_type = "special_commision" %}
-                {% endif %}
-                    <a href="/{{ current_lang }}/main/battle/{{ mission_type }}/{{ value.id }}.html#track">{{ value.name.zh_cn }}</a>
-            {% endif %}
-            </li>
-        {% else %}
-            <li>{{ nothing_to_show }}</li>
-        {% endfor %}
-    </ul>
+{# 通用的Track <a>生成 #}
+{% macro generate_track_anchor(track, with_counter, count_num, html_id, tooltip_id, enable_author) %}
+    <a href="/{{ curr_lang }}/track/{{ track.namespace.1 }}/{{ track.namespace.2 }}.html{% if arg_check(html_id) %}#{{ html_id }}{% endif %}" {% if arg_check(tooltip_id) %}{{ generate_tooltip_anchor(tooltip_id) }}{% endif %}>
+        <span>{% if arg_check(with_counter) %}【{{ count_num }}】{% endif %}{{ filetype_to_name(track.filetype) }}&nbsp;{{ track.no }}.&nbsp;{{ track.name.realname.en|js_string_safe }} {% if track.name.realname.zh_cn != "" %}({{ track.name.realname.zh_cn }}){% endif %}</span>
+    </a>
+    {% if arg_check(enable_author) %}<span>&nbsp;by&nbsp;{{ track.composer.nickname }}</span>{% endif %}
 {% endmacro %}
 
-{% macro output_usedby_ui(data_ui) %}
-    <ul>
-        {% for key, value in data_ui.items() %}
-            {% set i = value.0 %}
-
-            <!--Special case for UiInfoEvent-->
-            <li id="{{ i.uuid }}">
-            {% if i.filetype == 32 %}
-                <a href="/{{ current_lang }}/event/{{ i.event_id }}/ui/{{ i.id }}.html#track">{{ auto_zhcn_gen(i.name) }}</a>&nbsp;-&nbsp;{{ i.name.zh_cn }}
-            {% else %}
-                <a href="/{{ current_lang }}/ui/{{ i.namespace.1 }}.html#track">{{ auto_zhcn_gen(i.name) }}</a>&nbsp;-&nbsp;{{ i.name.zh_cn }}
-            {% endif %}
-            </li>
-        {% else %}
-            <li>{{ nothing_to_show }}</li>
-        {% endfor %}
-    </ul>
+{# 通用的Background <a>生成 #}
+{% macro generate_background_anchor(bg, html_id, tooltip_id) %}
+    <div id="{{ bg.uuid }}">
+        <img src="{{ bg.image.value }}" {% if arg_check(tooltip_id) %}onmouseover="showTooltipGallerySmall(this)" data-tooltip="{{ tooltip_id }}"{% endif %}>
+        <p class="gallery-caption">
+            <a href="/{{ curr_lang }}/background/{{ bg.filename }}.html{% if arg_check(html_id) %}#{{ html_id }}{% endif %}" {% if arg_check(tooltip_id) %}{{ generate_tooltip_anchor(tooltip_id) }}{% endif %} target="_blank">{{ bg.filename|js_string_safe }}</a>
+        </p>
+    </div>
 {% endmacro %}
 
-{% macro output_usedby_ui_list(data_ui) %}
-    <ul>
-        {% for value in data_ui %}
-            <!--Special case for UiInfoEvent-->
-            {% if i.filetype == 32 %}
-                <li><a href="/{{ current_lang }}/event/{{ i.event_id }}/ui/{{ i.id }}.html">{{ auto_zhcn_gen(value.name) }}</a>&nbsp;-&nbsp;{{ value.name.zh_cn }}</li>
-            {% else %}
-                <li><a href="/{{ current_lang }}/ui/{{ i.namespace.1 }}.html">{{ auto_zhcn_gen(value.name) }}</a>&nbsp;-&nbsp;{{ value.name.zh_cn }}</li>
-            {% endif %}
+{# 通用的Character <a>生成 #}
+{% macro generate_character_anchor(char, with_school, with_club, html_id, tooltip_id, show_combatant_info, is_leader, new_tab) %}
+    {% if char.filetype == 52 %}
+        <a href="/{{ curr_lang }}/character/npc/{{ char.namespace[-1]|lower }}/{% if arg_check(html_id) %}#{{ html_id }}{% endif %}" {% if arg_check(tooltip_id) %}{{ generate_tooltip_anchor(tooltip_id) }}{% endif %} {{ anchor_new_tab(new_tab) }}>
+            <span>{{ auto_zhcn_gen(char.name) }}</span>
+        </a>
+    {% else %}
+        {% if arg_check(show_combatant_info) %}
+            {% if arg_check(is_leader) %}<img src="/static/images/ui/Image_Conquest_Leader.png" class="story-battle-leader">{% endif %}
+            <span><b class="{{ get_stu_type_text_color_css(char.combatant_info.squad_type.type) }}">{{ auto_zhcn_gen(char.combatant_info.squad_type.lang) }}</b>&nbsp;&#124;</span>
+        {% endif %}
+        {% if arg_check(with_school) %}
+            <img src="/static/images/schoolicon/School_Icon_{{ char.school_id|upper }}_W.png" class="invert-light schoolicon-p">
+        {% endif %}
+        <span>
+            <a href="/{{ curr_lang }}/character/student/{{ char.name.path_name|lower }}/{% if arg_check(html_id) %}#{{ html_id }}{% endif %}" {% if arg_check(tooltip_id) %}{{ generate_tooltip_anchor(tooltip_id) }}{% endif %} {{ anchor_new_tab(new_tab) }}>
+                <img src="/static/images/student/icon/{{ char.image.collection_texture }}.webp" class="icon-stu">
+                <span>{{ auto_zhcn_gen(char.name.personal_name) }}</span>
+            </a>
+        </span>
+        {% if arg_check(show_combatant_info) %}
+            <span>&nbsp;
+                <span class="{{ get_stu_type_text_color_css(char.combatant_info.attack_type.type) }}">{{ auto_zhcn_gen(char.combatant_info.attack_type.lang) }}</span>&nbsp;/&nbsp;<span class="{{ get_stu_type_text_color_css(char.combatant_info.armor_type.type) }}">{{ auto_zhcn_gen(char.combatant_info.armor_type.lang) }}</span>
+            </span>
         {% else %}
-            <li>{{ nothing_to_show }}</li>
-        {% endfor %}
-    </ul>
-{% endmacro %}
-
-{% macro output_usedby_ui_for_all_ui(data_ui) %}
-    <ul>
-        {% for value in data_ui %}
-            {% set i = value[1] %}
-
-            <!--Special case for UiInfoEvent-->
-            {% if i.filetype == 32 %}
-                <li><a href="/{{ current_lang }}/event/{{ i.event_id }}/ui/{{ i.id }}.html">{{ auto_zhcn_gen(i.name) }}</a>&nbsp;-&nbsp;{{ i.name.zh_cn }}</li>
-            {% else %}
-                <li><a href="/{{ current_lang }}/ui/{{ i.namespace.1 }}.html">{{ auto_zhcn_gen(i.name) }}</a>&nbsp;-&nbsp;{{ i.name.zh_cn }}</li>
+            {% if arg_check(with_club) %}
+                <span>&nbsp;[{{ auto_zhcn_gen(char.club) }}]</span>
             {% endif %}
-        {% else %}
-            <li>{{ nothing_to_show }}</li>
-        {% endfor %}
-    </ul>
-{% endmacro %}
-
-{% macro output_usedby_background(data_background, html_id, instance_id, instance_type) %}
-    {% if instance_type in ["track"] %}
-        {% set tooltip_data = {} %}
-        {% set enable_tooltip = 1 %}
-    {% endif %}
-
-    <table class="gallery">
-        <tr>
-            {% for key, value in data_background.items() %}
-                {% if enable_tooltip == 1 %}
-                    {% set tooltip_id = generate_tooltip_id() %}
-                {% endif %}
-
-                <td class="gallery-img" id="{{ value.0.uuid }}"><img src="{{ value.0.image.value }}"><p class="gallery-caption"><a href="/{{ current_lang }}/background/{{ value.0.filename }}.html{% if html_id %}#{{ html_id }}{% endif %}" {% if enable_tooltip == 1 %}onmouseover="showTooltip(this, '{{ tooltip_id }}')"{% endif %}>{{ value.0.filename }}</a></p></td>
-
-                {% if enable_tooltip == 1 %}
-                    {% do tooltip_data.update({tooltip_id: tooltip_background(value.0, instance_id, instance_type)}) %}
-                {% endif %}
-            {% else %}
-                <td>{{ nothing_to_show }}</td>
-            {% endfor %}
-        </tr>
-    </table>
-
-    {% if enable_tooltip == 1 %}
-        {{ tooltip_add_data_js(tooltip_data) }}
-    {% endif %}
-{% endmacro %}
-
-{% macro output_usedby_background_list(data_background, html_id, instance_id, instance_type) %}
-    {% if instance_type in ["story"] %}
-        {% set tooltip_data = {} %}
-        {% set enable_tooltip = 1 %}
-    {% endif %}
-
-    <table class="gallery">
-        <tr>
-            {% for value in data_background %}
-                {% if enable_tooltip == 1 %}
-                    {% set tooltip_id = generate_tooltip_id() %}
-                {% endif %}
-
-                <td class="gallery-img"><img src="{{ value.image.value }}"><p class="gallery-caption"><a href="/{{ current_lang }}/background/{{ value.filename }}.html#{{ html_id }}" {% if enable_tooltip == 1 %}onmouseover="showTooltip(this, '{{ tooltip_id }}')"{% endif %}>{{ value.filename }}</a></p></td>
-
-                {% if enable_tooltip == 1 %}
-                    {% do tooltip_data.update({tooltip_id: tooltip_background(value, instance_id, instance_type)}) %}
-                {% endif %}
-            {% else %}
-                <td>{{ nothing_to_show }}</td>
-            {% endfor %}
-        </tr>
-    </table>
-
-    {% if enable_tooltip == 1 %}
-        {{ tooltip_add_data_js(tooltip_data) }}
+        {% endif %}
     {% endif %}
 {% endmacro %}
 
-{% macro output_usedby_track(data_track, with_counter, html_id, instance_id, instance_type) %}
-    {% set _with_counter = with_counter or 0 %}
-    {% if instance_type in ["character", "background"] %}
-        {% set tooltip_data = {} %}
-        {% set enable_tooltip = 1 %}
-    {% endif %}
-
-    <ul>
-        {% for key, value in data_track.items() %}
-            {% set track = value.0 %}
-            {% set track_type = track_type_for_show(track) %}
-
-            {% if enable_tooltip == 1 %}
-                {% set tooltip_id = generate_tooltip_id() %}
-            {% endif %}
-
-            <li id="track-{{ track.instance_id }}"><a href="/{{ current_lang }}/track/{{ track.namespace.1 }}/{{ track.namespace.2 }}.html{% if html_id %}#{{ html_id }}{% endif %}" {% if enable_tooltip == 1 %}onmouseover="showTooltip(this, '{{ tooltip_id }}')"{% endif %}>{% if _with_counter != 0 or _with_counter %}【{{ value.1 }}】{% endif %}{{ track_type }} {{ track.no }}. {{ track.name.realname.en }} {% if track.name.realname.zh_cn %}({{ track.name.realname.zh_cn }}){% endif %}</a> by {{ track.composer.nickname }}</li>
+{# 通用的Story <a>生成 #}
+{% macro generate_story_anchor(story, tooltip_id, new_tab) %}
+    {% set value = story %}
+    {% set target_url = generate_story_url(story) %}
 
-            {% if enable_tooltip == 1 %}
-                {% do tooltip_data.update({tooltip_id: tooltip_track(track, instance_id, instance_type)}) %}
-            {% endif %}
-        {% else %}
-            <li>{{ nothing_to_show }}</li>
-        {% endfor %}
-    </ul>
-
-    {% if enable_tooltip == 1 %}
-        {{ tooltip_add_data_js(tooltip_data) }}
+    {% if value.filetype == 15 %}
+        <a href="{{ target_url }}" {{ anchor_new_tab(new_tab) }} {% if arg_check(tooltip_id) %}{{ generate_tooltip_anchor(tooltip_id) }}{% endif %}>{{ generate_story_name(story) }}</a>
+    {% elif value.filetype == 14 %}
+        <a href="{{ target_url }}" {{ anchor_new_tab(new_tab) }} {% if arg_check(tooltip_id) %}{{ generate_tooltip_anchor(tooltip_id) }}{% endif %}>{{ generate_story_name(story) }}</a>
+    {% else %}
+        <a href="{{ target_url }}" {{ anchor_new_tab(new_tab) }} {% if arg_check(tooltip_id) %}{{ generate_tooltip_anchor(tooltip_id) }}{% endif %}>{{ generate_story_name(story) }}</a>
     {% endif %}
 {% endmacro %}
 
-{% macro output_usedby_track_list(data_track, html_id, instance_type, instance_id) %}
-    <ul>
-        {% if instance_type == "story" %}
-            {% set tooltip_data = {} %}
-            {% set enable_tooltip = 1 %}
-        {% endif %}
-
-        {% for value in data_track %}
-            {% set track_type = track_type_for_show(value) %}
-
-            {% if enable_tooltip == 1 %}
-                {% set tooltip_id = generate_tooltip_id() %}
-            {% endif %}
-
-            <li id="track-{{ value.instance_id }}"><a href="/{{ current_lang }}/track/{{ value.namespace.1 }}/{{ value.namespace.2 }}.html{% if html_id %}#{{ html_id }}{% endif %}" {% if enable_tooltip == 1 %}onmouseover="showTooltip(this, '{{ tooltip_id }}')"{% endif %}>{{ track_type }} {{ value.no }}. {{ value.name.realname.en }} {% if value.name.realname.zh_cn %}({{ value.name.realname.zh_cn }}){% endif %}</a> by {{ value.composer.nickname }}</li>
-
-            {% if enable_tooltip == 1 %}
-                {% do tooltip_data.update({tooltip_id: tooltip_track(value, instance_id, instance_type)}) %}
-            {% endif %}
-        {% else %}
-            <li>{{ nothing_to_show }}</li>
-        {% endfor %}
-    </ul>
-
-    {% if enable_tooltip == 1 %}
-        {{ tooltip_add_data_js(tooltip_data) }}
-    {% endif %}
+{# 通用的Album <a>生成 #}
+{% macro generate_album_anchor(album, new_tab) %}
+    <span><a href="/{{ curr_lang }}/album/{{ album.no }}.html" {{ anchor_new_tab(new_tab) }}>{{ auto_zhcn_gen(album.name) }}&nbsp;({{ album.track_num }} discs)&nbsp;[{{ album.release_date_format }}]</a></span>
 {% endmacro %}
 
-{% macro output_usedby_video(data_video, instance_id) %}
-    <ul>
-        {% for key, value in data_video.items() %}
-            {% set value = value.0 %}
-
-            <li id="{{ value.uuid }}"><a href="/{{ current_lang }}/video/{{ value.namespace.1 }}.html{% if instance_id %}#{{ instance_id }}{% endif %}">视频<i>{{ value.name.zh_cn }}</i></a>：{{ value.desc.zh_cn }}</li>
-        {% else %}
-            <li>{{ nothing_to_show }}</li>
-        {% endfor %}
-    </ul>
+{% macro get_social_for_composer(composer) %}
+    <a href="{{ composer.contact.url.value }}" target="_blank"><img src="/static/images/social/{{ auto_zhcn_gen(composer.contact.platform) }}.png" class="social-logo">{{ auto_zhcn_gen(composer.contact.url.platform) }}: {{ composer.nickname }}</a>
 {% endmacro %}
 
-{% macro output_usedby_character(data_character, html_id, instance_id, instance_type, output_combat_info, combat_leader_pos) %}
-    {% if instance_type in ["story", "character"] %}
-        {% set enable_tooltip = 1 %}
-        {% set tooltip_data = {} %}
-    {% endif %}
-
-    <ul>
-        {% for char in data_character.character %}
-            {% if enable_tooltip == 1 %}
-                {% set tooltip_id = generate_tooltip_id() %}
-            {% endif %}
+{# 生成story parts “出现于”(appearedAt) HTML代码 #}
+{% macro generate_appearedat_html(base_story, parts) %}
+    {% for i in parts %}
+        {% set part = i.0 %}
+        {% set loop_index = i.1 %}
+        {% set seg_index = i.2 %}
+        {% set tooltip_id = i.3 %}
+        {% set ele_class = get_storypart_text_color_css(part) %}
 
-            {% if char.filetype == 52 %}
-            <li>
-                <a href="/{{ current_lang }}/character/npc/{{ char.namespace[-1]|lower }}/{% if html_id %}#{{ html_id }}{% endif %}" {% if enable_tooltip == 1 %}onmouseover="showTooltip(this, '{{ tooltip_id }}')"{% endif %}>{{ auto_zhcn_gen(char.name) }}</a>
-            </li>
-            {% else %}
-            <li>
-                {% if output_combat_info and output_combat_info == "True" %}
-                    {% if loop.index - 1 == combat_leader_pos %}<img src="/static/images/ui/Image_Conquest_Leader.png" class="story-battle-leader" />{% endif %}
-                    <span><b class="{{ get_stu_type_text_color_css(char.combatant_info.squad_type.type) }}">{{ auto_zhcn_gen(char.combatant_info.squad_type.lang) }}</b>&nbsp;&#124;</span>
-                {% endif %}
-                <img src="/static/images/schoolicon/School_Icon_{{ char.school_id|upper }}_W.png" class="invert-light schoolicon-p">
-                <span>
-                    <a href="/{{ current_lang }}/character/student/{{ char.name.path_name|lower }}/{% if html_id %}#{{ html_id }}{% endif %}" {% if enable_tooltip == 1 %}onmouseover="showTooltip(this, '{{ tooltip_id }}')"{% endif %}>
-                        <img src="/static/images/student/icon/{{ char.image.collection_texture }}.webp" class="icon-stu"/>{{ auto_zhcn_gen(char.name.personal_name) }}
-                    </a>
-                </span>
-                {% if output_combat_info and output_combat_info == "True" %}
-                    <span>&nbsp;
-                        <span class="{{ get_stu_type_text_color_css(char.combatant_info.attack_type.type) }}">{{ auto_zhcn_gen(char.combatant_info.attack_type.lang) }}</span>/<span class="{{ get_stu_type_text_color_css(char.combatant_info.armor_type.type) }}">{{ auto_zhcn_gen(char.combatant_info.armor_type.lang) }}</span>
-                    </span>
-                {% else %}
-                    <span>&nbsp;[{{ auto_zhcn_gen(char.club) }}]</span>
-                {% endif %}
-            </li>
-            {% endif %}
-
-            {% if enable_tooltip == 1 %}
-                {% do tooltip_data.update({tooltip_id: tooltip_character(char, instance_id, instance_type)}) %}
-            {% endif %}
+        {% if loop.index == 1 %}
+        <span>(出现于&nbsp;</span>
         {% else %}
-            <li>{{ nothing_to_show }}</li>
-        {% endfor %}
-    </ul>
+        <span>,&nbsp;</span>
+        {% endif %}
 
-    {% if enable_tooltip == 1 %}
-        {{ tooltip_add_data_js(tooltip_data) }}
-    {% endif %}
+        <span><a href="{{ generate_story_url(base_story) }}#story-part-{{ loop_index }}-seg-{{ seg_index }}" class="{{ ele_class }}" {% if arg_check(tooltip_id) %}{{ generate_tooltip_anchor(tooltip_id) }}{% endif %}><i>[{{ loop_index }}]&nbsp;{{ auto_zhcn_gen(part.name) }}</i></a></span>
+    {% endfor %}
+    <span>)</span>
 {% endmacro %}
 
-{# 魔改自 output_usedby_character #}
-{% macro output_relatedto_character(data_character, use_ul) %}
-    {% if not use_ul or use_ul == "True" %}
-        {% set use_ul = 1 %}
-    {% else %}
-        {% set use_ul = 0 %}
-    {% endif %}
-
-    {% if use_ul == 1 %}
-    <ul>
-    {% endif %}
-        {% for char in data_character.character %}
-            {% if use_ul == 1 %}<li>{% endif %}
-            {% if char.filetype == 52 %}
-                <a href="/{{ current_lang }}/character/npc/{{ char.namespace[-1]|lower }}/{% if instance_id %}#{{ instance_id }}{% endif %}">{{ auto_zhcn_gen(char.name) }}</a>
-
-            {% else %}
-                <span>
-                    <a href="/{{ current_lang }}/character/student/{{ char.name.path_name|lower }}/{% if instance_id %}#{{ instance_id }}{% endif %}">
-                        <img src="/static/images/student/icon/{{ char.image.collection_texture }}.webp" class="icon-stu"/>{{ auto_zhcn_gen(char.name.name) }}
-                    </a>
-                </span>
-            {% endif %}
-            {% if use_ul == 1 %}</li>{% else %}{% if not loop.last %}<br />{% endif %}{% endif %}
-        {% else %}
-            {% if use_ul %}<li>{{ nothing_to_show }}</li>{% else %}{{ nothing_to_show }}{% endif %}
-        {% endfor %}
-    {% if use_ul == 1 %}
-    </ul>
-    {% endif %}
+{# 通用的Tag <a>生成 #}
+{% macro tag_altogether(tags, instance_id) %}
+    {% for tag in tags %}<a href="/en/tag/{{ tag.namespace[-1] }}.html{% if instance_id %}#{{ instance_id }}{% endif %}" target="_blank"><span class="badge badge-{{ tag.color_css }} badge-tag">{{ auto_zhcn_gen(tag.name) }}</span></a>&nbsp;{% endfor %}
 {% endmacro %}
 
-{% macro output_usedby_character_dict(data_character, html_id, instance_id, instance_type) %}
-    {# used for track.html for exporting track-character relationship #}
-    {% set tooltip_data = {} %}
-
-    <ul>
-        {% for key, value in data_character.items() %}
-            {% set ref_counter = value.1 %}
-            {% set char = value.0 %}
-
-            {% set tooltip_id = generate_tooltip_id() %}
+{# 平铺人物<a>生成 #}
+{% macro generate_character_anchor_flat(characters, max_char) %}
+    {% if not arg_check(max_char) %}{% set max_char = 99999 %}{% endif %}
 
-            <li id="{{ char.uuid }}"><span>【{{ ref_counter }}】</span>
-            {% if "NPC_" in key %}
-                <a href="/{{ current_lang }}/character/npc/{{ char.namespace[-1]|lower }}/{% if html_id %}#{{ html_id }}{% endif %}" onmouseover="showTooltip(this, '{{ tooltip_id }}')">
-                    {{ auto_zhcn_gen(char.name) }}
-                </a>
-            {% else %}
-                <img src="/static/images/schoolicon/School_Icon_{{ char.school_id|upper }}_W.png" class="invert-light schoolicon-p">
-                <a href="/{{ current_lang }}/character/student/{{ char.name.path_name|lower }}/{% if html_id %}#{{ html_id }}{% endif %}" onmouseover="showTooltip(this, '{{ tooltip_id }}')">
-                    <img src="/static/images/student/icon/{{ char.image.collection_texture }}.webp" class="icon-stu"/>{{ auto_zhcn_gen(char.name.personal_name) }}
-                </a>
-                &nbsp;<span>[{{ auto_zhcn_gen(char.club) }}]</span>
+    {% if characters|length != 0 %}
+        {% set char_for_show = [] %}
+        {% for i in characters %}
+            {% if loop.index == max_char %}{% break %}
+            {% else %}{% do char_for_show.append(i) %}
             {% endif %}
-
-            {% do tooltip_data.update({tooltip_id: tooltip_character(char, instance_id, instance_type)}) %}
-            </li>
-        {% else %}
-            <li>{{ nothing_to_show }}</li>
         {% endfor %}
-    </ul>
-
-    {{ tooltip_add_data_js(tooltip_data) }}
-{% endmacro %}
 
-{% macro get_social_for_composer(composer) %}
-    <a href="{{ composer.contact.url.value }}"><img src="/static/images/social/{{ composer.contact.platform.en }}.png" class="social-logo">{{ composer.contact.url.platform.zh_cn }}: {{ composer.nickname }}</a>
-{% endmacro %}
-
-{% macro track_version_video_player(versions) %}
-    {% for version in versions %}
-        {% set _version_index = loop.index %}
-
-        <h3>{{ version.desc.zh_cn }}</h3>
-        {% for url in version.url %}
-            <div onclick="play_video('{{ url.value }}', 'track-video-{{ _version_index }}-{{ loop.index }}')" id="track-video-{{ _version_index }}-{{ loop.index }}" class="track-video-div">
-                <p><img src="/static/images/social/{{ url.platform.en }}.png" class="social-logo">{{ url.platform.zh_cn }} ({{ url.value }})</p>
-            </div>
-            <div id="track-video-{{ _version_index }}-{{ loop.index }}-container"></div>
-        {% endfor %}
-    {% endfor %}
+        {% for char in char_for_show[:-1] %}<span>{{ generate_character_anchor(char, 0, 0, 0, 0, 0, 0, 0) }}&nbsp;|&nbsp;</span>{% endfor %}
+        {{ generate_character_anchor(char_for_show[-1], 0, 0, 0, 0, 0, 0, 0) }}
+        {% if characters|length > char_for_show|length %}<span>&nbsp;and more.</span>{% endif %}
+    {% endif %}
 {% endmacro %}
diff --git a/template/zh_cn/_macro_new.bak.html b/template/zh_cn/_macro_new.bak.html
new file mode 100644
index 0000000..3bc1948
--- /dev/null
+++ b/template/zh_cn/_macro_new.bak.html
@@ -0,0 +1,15 @@
+{# 重写 _macro.html 的屎山代码 #}
+{# 然后所有的text都需要用<span>套起来，不然的话会莫名其妙多空格 #}
+{# 不允许直接带其它标签，如<p> <li>除非是特殊用代码 #}
+
+{# 常量 #}
+{% set current_lang = "zh_cn" %}
+
+{# 常用macro #}
+{% from 'template/zh_cn/_macro.html' import auto_zhcn_gen %}
+
+{# 各种macro #}
+{# 主要是在track.html里用 #}
+{% macro gen_album_anchor(album) %}
+    <span><a href="/{{ current_lang }}/album/{{ album.album_id }}.html">{{ album.name.zh_cn }}</a> ({{ album.disc_num }} discs) [{{ album.release_date_format }}]</span>
+{% endmacro %}
\ No newline at end of file
diff --git a/template/zh_cn/_macro_page.html b/template/zh_cn/_macro_page.html
new file mode 100644
index 0000000..affcf52
--- /dev/null
+++ b/template/zh_cn/_macro_page.html
@@ -0,0 +1,355 @@
+{% from 'template/base/_macro.html' import a_new_tab, get_storypart_text_color_css, get_stu_type_text_color_css %}
+{% from 'template/zh_cn/_macro.html' import generate_ui_anchor, generate_track_anchor, generate_track_anchor, generate_background_anchor, generate_character_anchor, generate_story_anchor, generate_appearedat_html, filetype_to_name, get_social_for_composer, auto_zhcn_gen, nothing_to_show %}
+{% from 'template/zh_cn/_macro_tooltip.html' import tooltip_add_data_js, tooltip_storyinfo, tooltip_storypart, tooltip_background, tooltip_track, tooltip_character %}
+{% set curr_lang = "zh_cn" %}
+
+{% macro output_usedby_story(data_story, instance_uuid, instance_key) %}
+    {% set _curr_filetype = namespace(filetype=0) %}
+    {% set tooltip_data = {} %}
+
+    {% for key, value in data_story.items() %}
+        {# 记录当前的filetype，稍后用于切割不同故事 #}
+        {% if _curr_filetype.filetype == 0 %}
+            {# 循环刚刚开始，加上<ul> #}
+            {% set _curr_filetype.filetype = value.0.filetype %}
+            <h4>{{ filetype_to_name(_curr_filetype.filetype) }} Story</h4><ul>
+        {% else %}
+            {% if _curr_filetype.filetype != value.0.filetype %}
+                {# 如果当前文件已经不再是之前的 #}
+                {% set _curr_filetype.filetype = value.0.filetype %}
+                </ul><h4>{{ filetype_to_name(_curr_filetype.filetype) }} Story</h4><ul>
+            {% endif %}
+        {% endif %}
+
+        {% set tooltip_id = generate_tooltip_id() %}
+
+        <li id="story-{{ value.0.instance_id }}">
+        {% set value = value.0 %}
+        {{ generate_story_anchor(value, tooltip_id) }}
+        {% do tooltip_data.update({tooltip_id: tooltip_storyinfo(value)}) %}
+
+        {# appearedAt snippet #}
+        {% if instance_uuid %}
+            {% set related_parts = [] %}
+            {% for part in value.part %}
+                {% set part_loop = namespace(part_index=loop.index, seg_index=-1) %}
+                {% for segment in part.data %}
+                    {% set seg_loop = namespace(seg_index=loop.index, is_exit=0) %}
+                    {% for obj in segment[instance_key] %}
+                        {% if obj.uuid == instance_uuid %}
+                            {% set seg_loop.is_exit = 1 %}{% break %}
+                        {% endif %}
+                    {% endfor %}
+                    {% if seg_loop.is_exit != 0 %}
+                        {% set part_loop.seg_index = loop.index %}{% break %}
+                    {% endif %}
+                {% endfor %}
+
+                {% if part_loop.seg_index != -1 %}
+                    {% set tooltip_id = generate_tooltip_id() %}
+                    {% do related_parts.append([part, loop.index, part_loop.seg_index, tooltip_id]) %}
+                    {% do tooltip_data.update({tooltip_id: tooltip_storypart(value, part)}) %}
+                {% endif %}
+            {% endfor %}
+
+            {{ generate_appearedat_html(value, related_parts) }}
+        {% endif %}
+        </li>
+    {% else %}
+        <p>{{ nothing_to_show }}</p>
+    {% endfor %}
+    </ul>
+    {{ tooltip_add_data_js(tooltip_data) }}
+{% endmacro %}
+
+{% macro output_usedby_battle(data_battle) %}
+    <ul>
+        {% for key, value in data_battle.items() %}
+            {% set value = value[0] %}
+            <li id="{{ value.uuid }}">
+            {% if value.filetype == 21 %}
+                {% if value.no[0] == "N" %}
+                    {% set mission_type = "普通" %}
+                {% else %}
+                    {% set mission_type = "困难" %}
+                {% endif %}
+                    <a href="/{{ curr_lang }}/main/battle/main/{{ value.chapter }}/{{ value.no }}.html#track" target="_blank">主线任务 第{{ value.chapter }}章 第{{ value.no[1] }}个任务 ({{ mission_type }}, 第{{ value.no[2] }}个子任务)</a>
+            {% elif value.filetype == 22 %}
+                {% if value.no[0] == "N" %}
+                    {% set mission_type = "普通" %}
+                {% else %}
+                    {% set mission_type = "挑战" %}
+                {% endif %}
+                    <a href="/{{ curr_lang }}/event/{{ value.event_id }}/{{ value.no }}.html#track" target="_blank">活动{{ auto_zhcn_gen(value.parent_data.0.name) }} 第{{ value.no[1:] }}个任务 ({{ mission_type }}): {{ auto_zhcn_gen(value.name) }}</a>
+            {% else %}
+                {% if value.filetype == 24 %}
+                    {% set mission_type = "total_assault" %}
+                {% elif value.filetype == 25 %}
+                    {% set mission_type = "bounty_hunt" %}
+                {% elif value.filetype == 26 %}
+                    {% set mission_type = "school_exchange" %}
+                {% else %}
+                    {% set mission_type = "special_commision" %}
+                {% endif %}
+                    <a href="/{{ curr_lang }}/main/battle/{{ mission_type }}/{{ value.id }}.html#track" target="_blank">{{ auto_zhcn_gen(value.name) }}</a>
+            {% endif %}
+            </li>
+        {% else %}
+            <li>{{ nothing_to_show }}</li>
+        {% endfor %}
+    </ul>
+{% endmacro %}
+
+{% macro output_usedby_ui(data_ui) %}
+    <ul>
+        {% for key, value in data_ui.items() %}
+            {% set i = value.0 %}
+
+            <!--Special case for UiInfoEvent-->
+            <li id="{{ i.uuid }}">{{ generate_ui_anchor(i) }}</li>
+        {% else %}
+            <li>{{ nothing_to_show }}</li>
+        {% endfor %}
+    </ul>
+{% endmacro %}
+
+{% macro output_usedby_ui_list(data_ui) %}
+    <ul>
+        {% for i in data_ui %}
+            <li>{{ generate_ui_anchor(i) }}</li>
+        {% else %}
+            <li>{{ nothing_to_show }}</li>
+        {% endfor %}
+    </ul>
+{% endmacro %}
+
+{% macro output_usedby_ui_for_all_ui(data_ui) %}
+    <ul>
+        {% for i in data_ui %}
+            {% set i = i[1] %}
+
+            <!--Special case for UiInfoEvent-->
+            <li>{{ generate_ui_anchor(i) }}</li>
+        {% else %}
+            <li>{{ nothing_to_show }}</li>
+        {% endfor %}
+    </ul>
+{% endmacro %}
+
+{% macro output_usedby_background(data_background, html_id, instance_id, instance_type) %}
+    {% if instance_type in ["track"] %}
+        {% set tooltip_data = {} %}
+        {% set enable_tooltip = 1 %}
+    {% endif %}
+
+    <table class="gallery">
+        <tr>
+            {% for key, value in data_background.items() %}
+                {% if enable_tooltip == 1 %}
+                    {% set tooltip_id = generate_tooltip_id() %}
+                {% endif %}
+
+                <td class="gallery-img" id="{{ value.0.uuid }}">{{ generate_background_anchor(value.0, html_id, tooltip_id) }}</td>
+
+                {% if enable_tooltip == 1 %}
+                    {% do tooltip_data.update({tooltip_id: tooltip_background(value.0, instance_id, instance_type)}) %}
+                {% endif %}
+            {% else %}
+                <td>{{ nothing_to_show }}</td>
+            {% endfor %}
+        </tr>
+    </table>
+
+    {% if enable_tooltip == 1 %}
+        {{ tooltip_add_data_js(tooltip_data) }}
+    {% endif %}
+{% endmacro %}
+
+{% macro output_usedby_background_list(data_background, html_id, instance_id, instance_type) %}
+    {% if instance_type in ["story"] %}
+        {% set tooltip_data = {} %}
+        {% set enable_tooltip = 1 %}
+    {% endif %}
+
+    <table class="gallery">
+        <tr>
+            {% for value in data_background %}
+                {% if enable_tooltip == 1 %}
+                    {% set tooltip_id = generate_tooltip_id() %}
+                {% endif %}
+
+                <td class="gallery-img">{{ generate_background_anchor(value, html_id, tooltip_id) }}</td>
+
+                {% if enable_tooltip == 1 %}
+                    {% do tooltip_data.update({tooltip_id: tooltip_background(value, instance_id, instance_type)}) %}
+                {% endif %}
+            {% else %}
+                <td>{{ nothing_to_show }}</td>
+            {% endfor %}
+        </tr>
+    </table>
+
+    {% if enable_tooltip == 1 %}
+        {{ tooltip_add_data_js(tooltip_data) }}
+    {% endif %}
+{% endmacro %}
+
+{% macro output_usedby_track(data_track, with_counter, html_id, instance_id, instance_type) %}
+    {% set _with_counter = with_counter or 0 %}
+    {% if instance_type in ["character", "background"] %}
+        {% set tooltip_data = {} %}
+        {% set enable_tooltip = 1 %}
+    {% endif %}
+
+    <ul>
+        {% for key, value in data_track.items() %}
+            {% set track = value.0 %}
+
+            {% if enable_tooltip == 1 %}
+                {% set tooltip_id = generate_tooltip_id() %}
+            {% endif %}
+
+            <li id="track-{{ track.instance_id }}">{{ generate_track_anchor(track, _with_counter, value.1, html_id, tooltip_id) }}</li>
+
+            {% if enable_tooltip == 1 %}
+                {% do tooltip_data.update({tooltip_id: tooltip_track(track, instance_id, instance_type)}) %}
+            {% endif %}
+        {% else %}
+            <li>{{ nothing_to_show }}</li>
+        {% endfor %}
+    </ul>
+
+    {% if enable_tooltip == 1 %}
+        {{ tooltip_add_data_js(tooltip_data) }}
+    {% endif %}
+{% endmacro %}
+
+{% macro output_usedby_track_list(data_track, html_id, instance_type, instance_id) %}
+    <ul>
+        {% if instance_type == "story" %}
+            {% set tooltip_data = {} %}
+            {% set enable_tooltip = 1 %}
+        {% endif %}
+
+        {% for value in data_track %}
+            {% if enable_tooltip == 1 %}
+                {% set tooltip_id = generate_tooltip_id() %}
+            {% endif %}
+
+            <li id="track-{{ value.instance_id }}">{{ generate_track_anchor(value, 0, 0, html_id, tooltip_id) }}</li>
+
+            {% if enable_tooltip == 1 %}
+                {% do tooltip_data.update({tooltip_id: tooltip_track(value, instance_id, instance_type)}) %}
+            {% endif %}
+        {% else %}
+            <li>{{ nothing_to_show }}</li>
+        {% endfor %}
+    </ul>
+
+    {% if enable_tooltip == 1 %}
+        {{ tooltip_add_data_js(tooltip_data) }}
+    {% endif %}
+{% endmacro %}
+
+{% macro output_usedby_video(data_video, instance_id) %}
+    <ul>
+        {% for key, value in data_video.items() %}
+            {% set value = value.0 %}
+
+            <li id="{{ value.uuid }}"><a href="/en/video/{{ value.namespace.1 }}.html{% if instance_id %}#{{ instance_id }}{% endif %}" target="_blank">视频 <i>{{ auto_zhcn_gen(value.name) }}</i></a>: {{ auto_zhcn_gen(value.desc) }}</li>
+        {% else %}
+            <li>{{ nothing_to_show }}</li>
+        {% endfor %}
+    </ul>
+{% endmacro %}
+
+{% macro output_usedby_character(data_character, html_id, instance_id, instance_type, output_combat_info, combat_leader_pos) %}
+    {% if instance_type in ["story", "character"] %}
+        {% set enable_tooltip = 1 %}
+        {% set tooltip_data = {} %}
+    {% endif %}
+
+    <ul>
+        {% for char in data_character.character %}
+            {% if enable_tooltip == 1 %}
+                {% set tooltip_id = generate_tooltip_id() %}
+            {% endif %}
+
+            {% if arg_check(output_combat_info) and loop.index0 == combat_leader_pos %}
+                <li>{{ generate_character_anchor(char, 1, 1, html_id, tooltip_id, output_combat_info, 1, 0) }}</li>
+            {% else %}
+                <li>{{ generate_character_anchor(char, 1, 1, html_id, tooltip_id, output_combat_info, 0, 0) }}</li>
+            {% endif %}
+
+            {% if enable_tooltip == 1 %}
+                {% do tooltip_data.update({tooltip_id: tooltip_character(char, instance_id, instance_type)}) %}
+            {% endif %}
+        {% else %}
+            <li>{{ nothing_to_show }}</li>
+        {% endfor %}
+    </ul>
+
+    {% if enable_tooltip == 1 %}
+        {{ tooltip_add_data_js(tooltip_data) }}
+    {% endif %}
+{% endmacro %}
+
+{# 魔改自 output_usedby_character #}
+{% macro output_relatedto_character(data_character, use_ul) %}
+    {% if not use_ul or use_ul == "True" %}
+        {% set use_ul = 1 %}
+    {% else %}
+        {% set use_ul = 0 %}
+    {% endif %}
+
+    {% if use_ul == 1 %}
+    <ul>
+    {% endif %}
+        {% for char in data_character.character %}
+            {% if use_ul == 1 %}<li>{% endif %}
+
+            {{ generate_character_anchor(char, 0, 0, 0, 0, 0, 0, 1) }}
+
+            {% if use_ul == 1 %}</li>{% else %}{% if not loop.last %}<br />{% endif %}{% endif %}
+        {% else %}
+            {% if use_ul == 1 %}<li>{{ nothing_to_show }}</li>{% else %}{{ nothing_to_show }}{% endif %}
+        {% endfor %}
+    {% if use_ul == 1 %}
+    </ul>
+    {% endif %}
+{% endmacro %}
+
+{% macro output_usedby_character_dict(data_character, html_id, instance_id, instance_type) %}
+    {# used for track.html for exporting track-character relationship #}
+    {% set tooltip_data = {} %}
+
+    <ul>
+        {% for key, value in data_character.items() %}
+            {% set ref_counter = value.1 %}
+            {% set char = value.0 %}
+
+            {% set tooltip_id = generate_tooltip_id() %}
+
+            <li id="{{ char.uuid }}"><span>【{{ ref_counter }}】</span>{{ generate_character_anchor(char, 1, 1, html_id, tooltip_id, 0, 0, 0) }}</li>
+            {% do tooltip_data.update({tooltip_id: tooltip_character(char, instance_id, instance_type)}) %}
+        {% else %}
+            <li>{{ nothing_to_show }}</li>
+        {% endfor %}
+    </ul>
+
+    {{ tooltip_add_data_js(tooltip_data) }}
+{% endmacro %}
+
+{% macro track_version_video_player(versions) %}
+    {% for version in versions %}
+        {% set _version_index = loop.index %}
+
+        <h3>{{ auto_zhcn_gen(version.desc) }}</h3>
+        {% for url in version.url %}
+            <div onclick="play_video('{{ url.value }}', 'track-video-{{ _version_index }}-{{ loop.index }}')" id="track-video-{{ _version_index }}-{{ loop.index }}" class="track-video-div">
+                <p><img src="/static/images/social/{{ url.platform.en }}.png" class="social-logo">{{ auto_zhcn_gen(url.platform) }} ({{ url.value }})</p>
+            </div>
+            <div id="track-video-{{ _version_index }}-{{ loop.index }}-container"></div>
+        {% endfor %}
+    {% endfor %}
+{% endmacro %}
diff --git a/template/zh_cn/_macro_tooltip.bak.html b/template/zh_cn/_macro_tooltip.bak.html
new file mode 100644
index 0000000..56dde89
--- /dev/null
+++ b/template/zh_cn/_macro_tooltip.bak.html
@@ -0,0 +1,360 @@
+{# JS代码生成 #}
+{% macro tooltip_add_data_js(data) %}
+    <script>
+        add_tooltip_data({ {% for key, value in data.items() %}'{{ key }}': '{{ value|page_minify_html|js_html_string_safe }}',{% endfor %} });
+    </script>
+{% endmacro %}
+
+{# 中文多语言输出 #}
+{# 魔改自相同函数代码（基本上就是加了个js_string_safe） #}
+{% macro multi_zhcn_gen(data) %}<span class="lang-zh-cn-cn">{{ data.zh_cn_cn|js_string_safe }}</span><span class="lang-zh-cn-splitter">(zh_cn_cn)&nbsp;/&nbsp;</span><span class="lang-zh-cn-tw">{{ data.zh_cn_tw|js_string_safe }}</span><span class="lang-zh-cn-splitter">(zh_cn_tw)&nbsp;/&nbsp;</span><span class="lang-zh-cn-jp">{{ data.zh_cn_jp|js_string_safe }}</span><span class="lang-zh-cn-splitter">(zh_cn_jp)&nbsp;</span>{% endmacro %}
+{%- macro auto_zhcn_gen(data) -%}{%- if "zh_cn" in data -%}{{ data.zh_cn }}{%- else -%}{{ multi_zhcn_gen(data) }}{%- endif -%}{%- endmacro -%}
+
+{# ----------------------------------------------------------------------------------------------------- #}
+{# ----------------------------------------------------------------------------------------------------- #}
+{# ----------------------------------------------------------------------------------------------------- #}
+
+{# 常量 #}
+{% set MAX_CHAR_DISPLAY = 11 %} {# one-indexed, total 10 #}
+{% set MAX_CHAR_DISPLAY_FOR_TRACK = 6 %} {# one-indexed, total 5 (for track usage) #}
+{% set MAX_TRACK_DISPLAY = 6 %} {# one-indexed, total 5 #}
+{% set MAX_STORY_DISPLAY = 6 %} {# one-indexed, total 6 #}
+{% set nothing_to_show = "无内容可显示！" %}
+
+{# 英语首字母大写 #}
+{% macro word_case(text) %}{{text[0]|upper}}{{text[1:]}}{% endmacro %}
+
+{# 曲子类型显示 #}
+{# 复制自同名macro #}
+{% macro track_type_for_show(track_type) %}{% if track_type == 0 %}OST{% elif track_type == 1 %}短篇动画{% elif track_type == 2 %}动画{% else %}其它{% endif %}{% endmacro %}
+
+{# 统一人物<a>生成逻辑 #}
+{# 改自 output_usedby_character #}
+{% macro gen_char_anchor(char, with_school) %}
+    {% if with_school and with_school != 0 %}
+        {% set enable_school = 1 %}
+    {% else %}
+        {% set enable_school = 0 %}
+    {% endif %}
+
+    {% if char.filetype == 52 %}
+        <a href="/zh_cn/character/npc/{{ char.namespace[-1]|lower }}/" target="_blank">{{ auto_zhcn_gen(char.name) }}</a>
+    {% else %}
+        {% if enable_school == 1 %}
+            <img src="/static/images/schoolicon/School_Icon_{{ char.school_id|upper }}_W.png" class="schoolicon-p">
+        {% endif %}
+        <span>
+            <a href="/zh_cn/character/student/{{ char.name.path_name|lower }}/" target="_blank">
+                <img src="/static/images/student/icon/{{ char.image.collection_texture }}.webp" class="icon-stu"/>{{ auto_zhcn_gen(char.name.name) }}
+            </a>
+        </span>
+    {% endif %}
+{% endmacro %}
+
+{# 统一曲子<a>生成逻辑 #}
+{# 改自 output_usedby_track #}
+{% macro gen_track_anchor(track, enable_author) %}
+    <a href="/zh_cn/track/{{ track.namespace.1 }}/{{track.namespace.2 }}.html" target="_blank">{{ track_type_for_show(track.track_type) }} {{ track.no }}. {{ track.name.realname.en }}</a>{% if enable_author and enable_author != 0 %} by {{ track.composer.nickname }}{% endif %}
+{% endmacro %}
+
+{# 统一故事<a>生成逻辑 #}
+{# 改自同名函数 #}
+{% macro gen_story_anchor(story) %}
+    {% set value = story %}
+    {% if value.filetype == 15 %}
+        {% set target_url = "/zh_cn/character/student/" + value.pos.student|string|lower + "/bond/" + value.pos.no|string + ".html" %}
+        <a href="{{ target_url }}" target="_blank">
+            <img src="/static/images/student/icon/{{ value.student.image.collection_texture }}.webp" class="icon-stu"/>{{ auto_zhcn_gen(value.student.name.name) }}的第{{ value.pos.no }}个羁绊故事：{{ auto_zhcn_gen(value.name) }}
+        </a>
+    {% elif value.filetype == 14 %}
+        {% set target_url = "/zh_cn/event/" + value.pos.event_id|string + "/story/" + value.pos.segment|string + ".html" %}
+        <a href="{{ targer_url }}" target="_blank">活动 {{ value.parent_data.0.name.zh_cn }} 的第{{ value.pos.segment }}个故事：{{ auto_zhcn_gen(value.name) }}</a>
+    {% else %}
+        {% if value.filetype == 11 %}
+            {% set story_type = "main" %}
+            {% set story_type_trans = "主线" %}
+        {% elif value.filetype == 12 %}
+            {% set story_type = "side" %}
+            {% set story_type_trans = "支线" %}
+        {% elif value.filetype == 13 %}
+            {% set story_type = "short" %}
+            {% set story_type_trans = "短篇" %}
+        {% else %}
+            {% set story_type = "other" %}
+            {% set story_type_trans = "其它" %}
+        {% endif %}
+        {% set target_url = "/zh_cn/main/story/" + story_type|string + "/" + value.pos.volume|string + "/" + value.pos.chapter|string + "/" + value.pos.segment|string + ".html" %}
+        <a href="{{ target_url }}" target="_blank">{{ story_type_trans }}故事第{{ value.pos.volume }}篇第{{ value.pos.chapter }}章第{{ value.pos.segment }}话：{{ auto_zhcn_gen(value.name) }}</a>
+    {% endif %}
+{% endmacro %}
+
+{# ----------------------------------------------------------------------------------------------------- #}
+{# ----------------------------------------------------------------------------------------------------- #}
+{# ----------------------------------------------------------------------------------------------------- #}
+
+{# 用于StoryInfo（非StoryPartInfo） #}
+{% macro tooltip_storyinfo(story) %}<div class="tooltip-div"><p class="tooltip-title tooltip-ellipsis">{{ auto_zhcn_gen(story.name) }}</p><ul>{% for desc in story.desc %}<li>{{ auto_zhcn_gen(desc) }}</li>{% endfor %}</ul></div>{% endmacro %}
+
+{# 用于Track对StoryPartInfo的显示 #}
+{# 传入的story是StoryInfo，用于显示大故事信息 [Deprecated] #}
+{# 之后的story_part才是用来显示故事小节信息的 #}
+{% macro tooltip_storypart(story, story_part) %}
+    <div class="tooltip-div">
+        <p class="tooltip-title tooltip-ellipsis">{{ auto_zhcn_gen(story_part.name) }}</p>
+        <p>{{ auto_zhcn_gen(story_part.desc) }}</p><hr />
+        <p>{% if story_part.character|length == 0 %}无人物可显示！{% else %}人物：{% for char in story_part.character %}{% if loop.index == MAX_CHAR_DISPLAY %}&nbsp;及更多。{% break %}{% else %}&nbsp;{{ gen_char_anchor(char, 0) }}{% endif %}{% endfor %}{% endif %}</p><hr />
+        <p>{% if story_part.track|length == 0 %}无曲子可显示！{% else %}曲子：{% for track in story_part.track %}{% if loop.index == MAX_TRACK_DISPLAY %}&nbsp;及更多。{% break %}{% else %}&nbsp;{{ gen_track_anchor(track, 0) }}{% endif %}{% endfor %}{% endif %}</p>
+    </div>
+{% endmacro %}
+
+{# 用于Track Story Character对BackgroundInfo的显示 #}
+{# background传入一个由BackgroundInfo #}
+{# instance_id指的是track/story的id(尤指instance_id)，用于过滤 #}
+{# instance_type可选track/story，用于适配不同数据结构 #}
+{# 假设 instance_type="track", instance_id="OST_17" #}
+{# 这一函数应生成使用了这一背景，同时BGM包含（因为不精确到小节）OST_17的故事 #}
+{% macro tooltip_background(background, instance_id, instance_type) %}
+    <div class="tooltip-div">
+        <p class="tooltip-title tooltip-ellipsis">{{ auto_zhcn_gen(background.name) }}</p>
+        <p>{{ auto_zhcn_gen(background.desc) }}</p>
+        <button type="button" class="btn btn-info"><a href="{{ background.image.value }}" target="_blank">查看完整图片</a></button>
+        <hr />
+        <p class="tooltip-subtitle">故事：</p>
+        <ol class="tooltip-ol">
+            {# 获取数据 #}
+            {% if instance_type != "story" %}
+                {% set loop_data = namespace(data=get_outer_json(instance_id, instance_type), counter=0) %}
+            {% else %}
+                {% set loop_data = namespace(data=get_outer_json(background.filename, "background"), counter=0) %}
+            {% endif %}
+            {# 提取数据 #}
+            {% set outer_data = loop_data.data.used_by.data_story %}
+
+            {# 遍历数据 #}
+            {% for story in outer_data.values() %}
+                {% set story = story.0 %}
+
+                {# 探测各个story的part #}
+                {% for part in story.part %}
+                    {# 确保内层循环终止时，外层也能终止 #}
+                    {% set _end_part_detection = namespace(flag=0) %}
+
+                    {# 探测其background #}
+                    {# 当为story时，直接输出 #}
+                    {# 当为track character时，进行二层探测 #}
+                    {% if instance_type == "story" %}
+                        <li>{{ gen_story_anchor(story) }}</li>
+                        {% set _end_part_detection.flag = 1 %}
+                        {% break %}
+                    {% else %}
+                        {% for bg in part.background %}
+                            {# 如果background的uuid对上了 #}
+                            {% if bg.uuid == background.uuid %}
+                                {# track #}
+                                {% if instance_type == "track" %}
+                                    {% for track in part.track %}
+                                        {% if track.instance_id == instance_id %}
+                                            <li>{{ gen_story_anchor(story) }}</li>
+                                            {% set _end_part_detection.flag = 1 %}
+                                            {% break %}
+                                        {% endif %}
+                                    {% endfor %}
+                                {% endif %}
+                            {% endif %}
+
+                            {% if _end_part_detection.flag == 1 %}
+                                {# 如属实，也提前终止外层 #}
+                                {% break %}
+                            {% endif %}
+                        {% endfor %}
+                    {% endif %}
+
+                    {# 检测内层循环是否提前终止 #}
+                    {% if _end_part_detection.flag == 1 %}
+                        {# 如属实，也提前终止外层 #}
+                        {% break %}
+                    {% endif %}
+                {% endfor %}
+            {% endfor %}
+        </ol>
+    </div>
+{% endmacro %}
+
+{# 用于Background Character对TrackInfo的显示 #}
+{# track传入一个TrackInfo #}
+{# instance_id指的是background/character(实为uuid)/story的instance_id，用于过滤 #}
+{# instance_type可选background/character/story #}
+{% macro tooltip_track(track, instance_id, instance_type) %}
+    <div class="tooltip-div">
+        <p class="tooltip-title tooltip-ellipsis">{{ track_type_for_show(track.track_type) }}&nbsp;{{ track.no }}.&nbsp;{{ track.name.realname.en }}</p><hr />
+
+        <p class="tooltip-subtitle">故事：</p>
+        <ol class="tooltip-ol">
+            {# 获取数据 #}
+            {% set loop_data = namespace(data=get_outer_json(track.instance_id, "track"), counter=0) %}
+
+            {# 提取数据 #}
+            {% set outer_data = loop_data.data.used_by %}
+
+            {# 遍历数据 #}
+            {% for story in outer_data.data_story.values() %}
+                {% set story = story.0 %}
+
+                {# 遍历故事的各part #}
+                {% for part in story.part %}
+                    {% set loop_control = namespace(flag=0) %}
+
+                    {# 先检测音乐 #}
+                    {# 如果instance_type是story的话那就不管 #}
+                    {% if instance_type == "story" %}
+                        <li>{{ gen_story_anchor(story) }}</li>
+                        {% break %}
+                    {% else %}
+                        {% for story_track in part.track %}
+                            {# 检测故事音乐 #}
+                            {% if story_track.instance_id == track.instance_id %}
+                                {# 根据instance的不同显示story #}
+                                {# 检测人物 #}
+                                {% if instance_type == "character" %}
+                                    {% for char in part.character %}
+                                        {# char的uuid == 传入的instance_id #}
+                                        {% if char.filetype != 52 %}
+                                            {# Student #}
+                                            {% if char.uuid == instance_id %}
+                                                <li>{{ gen_story_anchor(story) }}</li>
+                                                {% set loop_control.flag = 1 %}
+                                                {% break %}
+                                            {% endif %}
+                                        {% else %}
+                                            {# NPC #}
+                                            {% if char.namespace[-1] == instance_id %}
+                                                <li>{{ gen_story_anchor(story) }}</li>
+                                                {% set loop_control.flag = 1 %}
+                                                {% break %}
+                                            {% endif %}
+                                        {% endif %}
+                                    {% endfor %}
+                                {# 检测背景 #}
+                                {% elif instance_type == "background" %}
+                                    {% for bg in part.background %}
+                                        {# background的uuid == 传入的instance_id #}
+                                        {% if bg.uuid == instance_id %}
+                                            <li>{{ gen_story_anchor(story) }}</li>
+                                            {% set loop_control.flag = 1 %}
+                                            {% break %}
+                                        {% endif %}
+                                    {% endfor %}
+                                {% endif %}
+                            {% endif %}
+
+                            {% if loop_control.flag == 1 %}
+                                {% break %}
+                            {% endif %}
+                        {% endfor %}
+                    {% endif %}
+
+                    {% if loop_control.flag == 1 %}
+                        {% break %}
+                    {% endif %}
+                {% endfor %}
+            {% endfor %}
+        </ol>
+        {% if instance_type == "story" %}
+            <hr />
+            <p class="tooltip-subtitle">人物（前5个最相关）：</p>
+            <ul class="tooltip-ul">
+                {% for char in outer_data.data_character.values() %}
+                    {% if loop.index == MAX_CHAR_DISPLAY_FOR_TRACK %}
+                        {% break %}
+                    {% endif %}
+                    <li>{{ gen_char_anchor(char.0) }}</li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </div>
+{% endmacro %}
+
+
+{# 用于Story Track对CharacterInfo的显示 #}
+{# character传入CharacterInfo，应该是dict #}
+{% macro tooltip_character(character, instance_id, instance_type) %}
+    <div class="tooltip-div">
+        {# 获取数据 #}
+        {% if character.filetype == 52 %}
+            {# NPC #}
+            {% set loop_data = namespace(data=get_outer_json(character.namespace[-1], "character")) %}
+        {% else %}
+            {% set loop_data = namespace(data=get_outer_json(character.uuid, "character")) %}
+        {% endif %}
+        {# 提取数据 #}
+        {% if loop_data.data.filetype == 52 %}
+            {# NPC #}
+            {% set char_data = loop_data.data %}
+            {% set char_type = "npc" %}
+        {% else %}
+            {# Student #}
+            {% set char_data = loop_data.data.student %}
+            {% set char_type = "stu" %}
+        {% endif %}
+        {% set outer_data = char_data.used_by %}
+
+        {# 大标题 #}
+        {% if char_type == "npc" %}
+            <p class="tooltip-title tooltip-ellipsis">{{ auto_zhcn_gen(char_data.name) }}</p>
+        {% else %}
+            <p class="tooltip-title tooltip-ellipsis">{{ auto_zhcn_gen(char_data.name.name) }}</p>
+        {% endif %}
+        <hr />
+
+        <p class="tooltip-subtitle">故事：</p>
+        {# 同时关联的故事 #}
+        <ol class="tooltip-ol">
+            {% if instance_type == "story" %}
+                {# 是story的话，单纯显示人物在的Story #}
+                {% for story in outer_data.data_story.values() %}
+                    {% set story = story.0 %}
+                    <li>{{ gen_story_anchor(story) }}</li>
+                {% endfor %}
+            {% elif instance_type == "track" %}
+                {# 非story，需要额外验证 #}
+                {% for story in outer_data.data_story.values() %}
+                    {% set story = story.0 %}
+
+                    {% for story_part in story.part %}
+                        {% set _end_part_detection = namespace(flag=0) %}
+
+                        {% for track in story_part.track %}
+                            {# 如果曲子存在于故事中 #}
+                            {% if instance_id == track.instance_id %}
+                                {# 如果人物也存在于故事中 #}
+                                {% for story_character in story_part.character %}
+                                    {% if char_type == "stu" %}
+                                        {% if story_character.id == char_data.id %}
+                                            <li>{{ gen_story_anchor(story) }}</li>
+                                            {% set _end_part_detection.flag = 1 %}
+                                            {% break %}
+                                        {% endif %}
+                                    {% else %}
+                                        {% if story_character.uuid == char_data.uuid %}
+                                            <li>{{ gen_story_anchor(story) }}</li>
+                                            {% set _end_part_detection.flag = 1 %}
+                                            {% break %}
+                                        {% endif %}
+                                    {% endif %}
+                                {% endfor %}
+                            {% endif %}
+
+                            {% if _end_part_detection.flag == 1 %}
+                                {% break %}
+                            {% endif %}
+                        {% endfor %}
+
+                        {% if _end_part_detection.flag == 1 %}
+                            {% break %}
+                        {% endif %}
+                    {% endfor %}
+                {% endfor %}
+            {% endif %}
+        </ol>
+    </div>
+{% endmacro %}
diff --git a/template/zh_cn/_macro_tooltip.html b/template/zh_cn/_macro_tooltip.html
index 478beb0..3534e7b 100644
--- a/template/zh_cn/_macro_tooltip.html
+++ b/template/zh_cn/_macro_tooltip.html
@@ -1,3 +1,6 @@
+{% from "template/zh_cn/_macro.html" import filetype_to_name, tracktype_to_name, generate_track_anchor, generate_story_anchor, generate_appearedat_html, generate_character_anchor_flat, auto_zhcn_gen %}
+{% set curr_lang = "zh_cn" %}
+
 {# JS代码生成 #}
 {% macro tooltip_add_data_js(data) %}
     <script>
@@ -5,88 +8,18 @@
     </script>
 {% endmacro %}
 
-{# 中文多语言输出 #}
-{# 魔改自相同函数代码（基本上就是加了个js_string_safe） #}
-{% macro multi_zhcn_gen(data) %}<span class="lang-zh-cn-cn">{{ data.zh_cn_cn|js_string_safe }}</span><span class="lang-zh-cn-splitter">(zh_cn_cn)&nbsp;/&nbsp;</span><span class="lang-zh-cn-tw">{{ data.zh_cn_tw|js_string_safe }}</span><span class="lang-zh-cn-splitter">(zh_cn_tw)&nbsp;/&nbsp;</span><span class="lang-zh-cn-jp">{{ data.zh_cn_jp|js_string_safe }}</span><span class="lang-zh-cn-splitter">(zh_cn_jp)&nbsp;</span>{% endmacro %}
-{%- macro auto_zhcn_gen(data) -%}{%- if "zh_cn" in data -%}{{ data.zh_cn }}{%- else -%}{{ multi_zhcn_gen(data) }}{%- endif -%}{%- endmacro -%}
-
 {# ----------------------------------------------------------------------------------------------------- #}
 {# ----------------------------------------------------------------------------------------------------- #}
 {# ----------------------------------------------------------------------------------------------------- #}
 
 {# 常量 #}
 {% set MAX_CHAR_DISPLAY = 11 %} {# one-indexed, total 10 #}
-{% set MAX_CHAR_DISPLAY_FOR_TRACK = 6 %} {# one-indexed, total 5 (for track usage) #}
+{% set MAX_CHAR_DISPLAY_FOR_TRACK = 11 %} {# one-indexed, total 10 (for track usage) #}
 {% set MAX_TRACK_DISPLAY = 6 %} {# one-indexed, total 5 #}
 {% set MAX_STORY_DISPLAY = 6 %} {# one-indexed, total 6 #}
-{% set nothing_to_show = "无内容可显示！" %}
-
-{# 英语首字母大写 #}
-{% macro word_case(text) %}{{text[0]|upper}}{{text[1:]}}{% endmacro %}
-
-{# 曲子类型显示 #}
-{# 复制自同名macro #}
-{% macro track_type_for_show(track_type) %}{% if track_type == 0 %}OST{% elif track_type == 1 %}短篇动画{% elif track_type == 2 %}动画{% else %}其它{% endif %}{% endmacro %}
-
-{# 统一人物<a>生成逻辑 #}
-{# 改自 output_usedby_character #}
-{% macro gen_char_anchor(char, with_school) %}
-    {% if with_school and with_school != 0 %}
-        {% set enable_school = 1 %}
-    {% else %}
-        {% set enable_school = 0 %}
-    {% endif %}
-
-    {% if char.filetype == 52 %}
-        <a href="/zh_cn/character/npc/{{ char.namespace[-1]|lower }}/">{{ auto_zhcn_gen(char.name) }}</a>
-    {% else %}
-        {% if enable_school == 1 %}
-            <img src="/static/images/schoolicon/School_Icon_{{ char.school_id|upper }}_W.png" class="schoolicon-p">
-        {% endif %}
-        <span>
-            <a href="/zh_cn/character/student/{{ char.name.path_name|lower }}/">
-                <img src="/static/images/student/icon/{{ char.image.collection_texture }}.webp" class="icon-stu"/>{{ auto_zhcn_gen(char.name.name) }}
-            </a>
-        </span>
-    {% endif %}
-{% endmacro %}
 
-{# 统一曲子<a>生成逻辑 #}
-{# 改自 output_usedby_track #}
-{% macro gen_track_anchor(track, enable_author) %}
-    <a href="/zh_cn/track/{{ track.namespace.1 }}/{{track.namespace.2 }}.html{% if instance_uuid %}#{{ instance_uuid }}{% endif %}">{{ track_type_for_show(track.track_type) }} {{ track.no }}. {{ track.name.realname.en }}</a>{% if enable_author and enable_author != 0 %} by {{ track.composer.nickname }}{% endif %}
-{% endmacro %}
-
-{# 统一故事<a>生成逻辑 #}
-{# 改自同名函数 #}
-{% macro gen_story_anchor(story) %}
-    {% set value = story %}
-    {% if value.filetype == 15 %}
-        {% set target_url = "/zh_cn/character/student/" + value.pos.student|string|lower + "/bond/" + value.pos.no|string + ".html" %}
-        <a href="{{ target_url }}">
-            <img src="/static/images/student/icon/{{ value.student.image.collection_texture }}.webp" class="icon-stu"/>{{ auto_zhcn_gen(value.student.name.name) }}的第{{ value.pos.no }}个羁绊故事：{{ auto_zhcn_gen(value.name) }}
-        </a>
-    {% elif value.filetype == 14 %}
-        {% set target_url = "/zh_cn/event/" + value.pos.event_id|string + "/story/" + value.pos.segment|string + ".html" %}
-        <a href="{{ targer_url }}">活动 {{ value.parent_data.0.name.zh_cn }} 的第{{ value.pos.segment }}个故事：{{ auto_zhcn_gen(value.name) }}</a>
-    {% else %}
-        {% if value.filetype == 11 %}
-            {% set story_type = "main" %}
-            {% set story_type_trans = "主线" %}
-        {% elif value.filetype == 12 %}
-            {% set story_type = "side" %}
-            {% set story_type_trans = "支线" %}
-        {% elif value.filetype == 13 %}
-            {% set story_type = "short" %}
-            {% set story_type_trans = "短篇" %}
-        {% else %}
-            {% set story_type = "other" %}
-            {% set story_type_trans = "其它" %}
-        {% endif %}
-        {% set target_url = "/zh_cn/main/story/" + story_type|string + "/" + value.pos.volume|string + "/" + value.pos.chapter|string + "/" + value.pos.segment|string + ".html" %}
-        <a href="{{ target_url }}">{{ story_type_trans }}故事第{{ value.pos.volume }}篇第{{ value.pos.chapter }}章第{{ value.pos.segment }}话：{{ auto_zhcn_gen(value.name) }}</a>
-    {% endif %}
-{% endmacro %}
+{# 提取所有story_part里头的desc #}
+{% macro get_story_part_desc(story_part) %}{% for segment in story_part.data %}{{ auto_zhcn_gen(segment.desc) }}{% endfor %}{% endmacro %}
 
 {# ----------------------------------------------------------------------------------------------------- #}
 {# ----------------------------------------------------------------------------------------------------- #}
@@ -101,9 +34,14 @@
 {% macro tooltip_storypart(story, story_part) %}
     <div class="tooltip-div">
         <p class="tooltip-title tooltip-ellipsis">{{ auto_zhcn_gen(story_part.name) }}</p>
-        <p>{{ auto_zhcn_gen(story_part.desc) }}</p><hr />
-        <p>{% if story_part.character|length == 0 %}无人物可显示！{% else %}人物：{% for char in story_part.character %}{% if loop.index == MAX_CHAR_DISPLAY %}&nbsp;及更多。{% break %}{% else %}&nbsp;{{ gen_char_anchor(char, 0) }}{% endif %}{% endfor %}{% endif %}</p><hr />
-        <p>{% if story_part.track|length == 0 %}无曲子可显示！{% else %}曲子：{% for track in story_part.track %}{% if loop.index == MAX_TRACK_DISPLAY %}&nbsp;及更多。{% break %}{% else %}&nbsp;{{ gen_track_anchor(track, 0) }}{% endif %}{% endfor %}{% endif %}</p>
+        <p>{{ get_story_part_desc(story_part) }}</p><hr />
+
+        {# 读取全部人物与曲子 #}
+        {% set all_characters = extract_storypart_data_character(story_part) %}
+        {% set all_tracks = extract_storypart_data_track(story_part) %}
+
+        <p>{% if all_characters|length == 0 %}<span>No characters to display!</span>{% else %}人物：{{ generate_character_anchor_flat(all_characters, MAX_CHAR_DISPLAY)|page_minify_html }}{% endif %}</p><hr />
+        <p>{% if all_tracks|length == 0 %}无歌曲可显示！{% else %}歌曲：{% for track in all_tracks %}{% if loop.index == MAX_TRACK_DISPLAY %}&nbsp; and more.{% break %}{% else %}&nbsp;{{ generate_track_anchor(track, 0, 0, 0, 0, 0)|page_minify_html }}{% endif %}{% endfor %}{% endif %}</p>
     </div>
 {% endmacro %}
 
@@ -117,6 +55,7 @@
     <div class="tooltip-div">
         <p class="tooltip-title tooltip-ellipsis">{{ auto_zhcn_gen(background.name) }}</p>
         <p>{{ auto_zhcn_gen(background.desc) }}</p>
+        <button type="button" class="btn btn-info"><a href="{{ background.image.value }}" target="_blank">查看完整照片</a></button>
         <hr />
         <p class="tooltip-subtitle">故事：</p>
         <ol class="tooltip-ol">
@@ -130,50 +69,9 @@
             {% set outer_data = loop_data.data.used_by.data_story %}
 
             {# 遍历数据 #}
-            {% for story in outer_data.values() %}
-                {% set story = story.0 %}
-
-                {# 探测各个story的part #}
-                {% for part in story.part %}
-                    {# 确保内层循环终止时，外层也能终止 #}
-                    {% set _end_part_detection = namespace(flag=0) %}
-
-                    {# 探测其background #}
-                    {# 当为story时，直接输出 #}
-                    {# 当为track character时，进行二层探测 #}
-                    {% if instance_type == "story" %}
-                        <li>{{ gen_story_anchor(story) }}</li>
-                        {% set _end_part_detection.flag = 1 %}
-                        {% break %}
-                    {% else %}
-                        {% for bg in part.background %}
-                            {# 如果background的uuid对上了 #}
-                            {% if bg.uuid == background.uuid %}
-                                {# track #}
-                                {% if instance_type == "track" %}
-                                    {% for track in part.track %}
-                                        {% if track.instance_id == instance_id %}
-                                            <li>{{ gen_story_anchor(story) }}</li>
-                                            {% set _end_part_detection.flag = 1 %}
-                                            {% break %}
-                                        {% endif %}
-                                    {% endfor %}
-                                {% endif %}
-                            {% endif %}
-
-                            {% if _end_part_detection.flag == 1 %}
-                                {# 如属实，也提前终止外层 #}
-                                {% break %}
-                            {% endif %}
-                        {% endfor %}
-                    {% endif %}
-
-                    {# 检测内层循环是否提前终止 #}
-                    {% if _end_part_detection.flag == 1 %}
-                        {# 如属实，也提前终止外层 #}
-                        {% break %}
-                    {% endif %}
-                {% endfor %}
+            {% set processed_data = py_tooltip_background(background, instance_id, instance_type, outer_data) %}
+            {% for i in processed_data %}
+                <li>{{ generate_story_anchor(i.0)|page_minify_html }}&nbsp;{{ generate_appearedat_html(i.0, i.1)|page_minify_html }}</li>
             {% endfor %}
         </ol>
     </div>
@@ -185,9 +83,9 @@
 {# instance_type可选background/character/story #}
 {% macro tooltip_track(track, instance_id, instance_type) %}
     <div class="tooltip-div">
-        <p class="tooltip-title tooltip-ellipsis">{{ track_type_for_show(track.track_type) }}&nbsp;{{ track.no }}.&nbsp;{{ track.name.realname.en }}</p><hr />
+        <p class="tooltip-title tooltip-ellipsis">{{ tracktype_to_name(track.track_type) }}&nbsp;{{ track.no }}.&nbsp;{{ track.name.realname.en|js_string_safe }}</p><hr />
 
-        <p class="tooltip-subtitle">故事：</p>
+        <p class="tooltip-subtitle">Story:</p>
         <ol class="tooltip-ol">
             {# 获取数据 #}
             {% set loop_data = namespace(data=get_outer_json(track.instance_id, "track"), counter=0) %}
@@ -196,79 +94,17 @@
             {% set outer_data = loop_data.data.used_by %}
 
             {# 遍历数据 #}
-            {% for story in outer_data.data_story.values() %}
-                {% set story = story.0 %}
-
-                {# 遍历故事的各part #}
-                {% for part in story.part %}
-                    {% set loop_control = namespace(flag=0) %}
-
-                    {# 先检测音乐 #}
-                    {# 如果instance_type是story的话那就不管 #}
-                    {% if instance_type == "story" %}
-                        <li>{{ gen_story_anchor(story) }}</li>
-                        {% break %}
-                    {% else %}
-                        {% for story_track in part.track %}
-                            {# 检测故事音乐 #}
-                            {% if story_track.instance_id == track.instance_id %}
-                                {# 根据instance的不同显示story #}
-                                {# 检测人物 #}
-                                {% if instance_type == "character" %}
-                                    {% for char in part.character %}
-                                        {# char的uuid == 传入的instance_id #}
-                                        {% if char.filetype != 52 %}
-                                            {# Student #}
-                                            {% if char.uuid == instance_id %}
-                                                <li>{{ gen_story_anchor(story) }}</li>
-                                                {% set loop_control.flag = 1 %}
-                                                {% break %}
-                                            {% endif %}
-                                        {% else %}
-                                            {# NPC #}
-                                            {% if char.namespace[-1] == instance_id %}
-                                                <li>{{ gen_story_anchor(story) }}</li>
-                                                {% set loop_control.flag = 1 %}
-                                                {% break %}
-                                            {% endif %}
-                                        {% endif %}
-                                    {% endfor %}
-                                {# 检测背景 #}
-                                {% elif instance_type == "background" %}
-                                    {% for bg in part.background %}
-                                        {# background的uuid == 传入的instance_id #}
-                                        {% if bg.uuid == instance_id %}
-                                            <li>{{ gen_story_anchor(story) }}</li>
-                                            {% set loop_control.flag = 1 %}
-                                            {% break %}
-                                        {% endif %}
-                                    {% endfor %}
-                                {% endif %}
-                            {% endif %}
-
-                            {% if loop_control.flag == 1 %}
-                                {% break %}
-                            {% endif %}
-                        {% endfor %}
-                    {% endif %}
-
-                    {% if loop_control.flag == 1 %}
-                        {% break %}
-                    {% endif %}
-                {% endfor %}
+            {% set processed_data = py_tooltip_track(track, instance_id, instance_type, outer_data) %}
+            {% for i in processed_data %}
+                <li>{{ generate_story_anchor(i.0)|page_minify_html }}&nbsp;{{ generate_appearedat_html(i.0, i.1)|page_minify_html }}</li>
             {% endfor %}
         </ol>
         {% if instance_type == "story" %}
             <hr />
-            <p class="tooltip-subtitle">人物（前5个最相关）：</p>
-            <ul class="tooltip-ul">
-                {% for char in outer_data.data_character.values() %}
-                    {% if loop.index == MAX_CHAR_DISPLAY_FOR_TRACK %}
-                        {% break %}
-                    {% endif %}
-                    <li>{{ gen_char_anchor(char.0) }}</li>
-                {% endfor %}
-            </ul>
+            <p class="tooltip-subtitle">Characters (top {{ (MAX_CHAR_DISPLAY_FOR_TRACK-1)|string }} most related):</p>
+            {% set all_char = [] %}
+            {% for char in outer_data.data_character.values() %}{% do all_char.append(char.0) %}{% endfor %}
+            <p>{{ generate_character_anchor_flat(all_char, MAX_CHAR_DISPLAY_FOR_TRACK)|page_minify_html }}</p>
         {% endif %}
     </div>
 {% endmacro %}
@@ -305,55 +141,13 @@
         {% endif %}
         <hr />
 
-        <p class="tooltip-subtitle">故事：</p>
+        <p class="tooltip-subtitle">Story:</p>
         {# 同时关联的故事 #}
         <ol class="tooltip-ol">
-            {% if instance_type == "story" %}
-                {# 是story的话，单纯显示人物在的Story #}
-                {% for story in outer_data.data_story.values() %}
-                    {% set story = story.0 %}
-                    <li>{{ gen_story_anchor(story) }}</li>
-                {% endfor %}
-            {% elif instance_type == "track" %}
-                {# 非story，需要额外验证 #}
-                {% for story in outer_data.data_story.values() %}
-                    {% set story = story.0 %}
-
-                    {% for story_part in story.part %}
-                        {% set _end_part_detection = namespace(flag=0) %}
-
-                        {% for track in story_part.track %}
-                            {# 如果曲子存在于故事中 #}
-                            {% if instance_id == track.instance_id %}
-                                {# 如果人物也存在于故事中 #}
-                                {% for story_character in story_part.character %}
-                                    {% if char_type == "stu" %}
-                                        {% if story_character.id == char_data.id %}
-                                            <li>{{ gen_story_anchor(story) }}</li>
-                                            {% set _end_part_detection.flag = 1 %}
-                                            {% break %}
-                                        {% endif %}
-                                    {% else %}
-                                        {% if story_character.uuid == char_data.uuid %}
-                                            <li>{{ gen_story_anchor(story) }}</li>
-                                            {% set _end_part_detection.flag = 1 %}
-                                            {% break %}
-                                        {% endif %}
-                                    {% endif %}
-                                {% endfor %}
-                            {% endif %}
-
-                            {% if _end_part_detection.flag == 1 %}
-                                {% break %}
-                            {% endif %}
-                        {% endfor %}
-
-                        {% if _end_part_detection.flag == 1 %}
-                            {% break %}
-                        {% endif %}
-                    {% endfor %}
-                {% endfor %}
-            {% endif %}
+            {% set processed_data = py_tooltip_character(character, instance_id, instance_type, loop_data.data) %}
+            {% for i in processed_data %}
+                <li>{{ generate_story_anchor(i.0)|page_minify_html }}&nbsp;{{ generate_appearedat_html(i.0, i.1)|page_minify_html }}</li>
+            {% endfor %}
         </ol>
     </div>
 {% endmacro %}
diff --git a/template/zh_cn/base.html b/template/zh_cn/base.html
index 2668fe5..559b12a 100644
--- a/template/zh_cn/base.html
+++ b/template/zh_cn/base.html
@@ -7,63 +7,65 @@
 {% endblock header %}
 
 {% macro get_zhcn(data) %}{% if data.zh_cn %}{{ data.zh_cn }}{% else %}{{ data.zh_cn_jp }}{% endif %}{% endmacro %}
-{% block navi %}
-    {# Entry mapping #}
-    {% if background %}{% set entry_ = background %}
-    {% elif event %}{% set entry_ = event %}
-    {% elif battle %}{% set entry_ = battle %}
-    {% elif char %}{% set entry_ = char %}
-    {% elif story %}{% set entry_ = story %}
-    {% elif tag %}{% set entry_ = tag %}
-    {% elif track %}{% set entry_ = track %}
-    {% elif ui %}{% set entry_ = ui %}
-    {% elif video %}{% set entry_ = video %}
-    {% endif %}
+{% set navi_var %}
+    {% block navi %}
+        {# Entry mapping #}
+        {% if background %}{% set entry_ = background %}
+        {% elif event %}{% set entry_ = event %}
+        {% elif battle %}{% set entry_ = battle %}
+        {% elif char %}{% set entry_ = char %}
+        {% elif story %}{% set entry_ = story %}
+        {% elif tag %}{% set entry_ = tag %}
+        {% elif track %}{% set entry_ = track %}
+        {% elif ui %}{% set entry_ = ui %}
+        {% elif video %}{% set entry_ = video %}
+        {% elif album %}{% set entry_ = album %}
+        {% endif %}
 
-    {% if entry_ and entry_.filetype > 0 and entry_.filetype not in [52, 15] %}
-        <p class="navi-p"><a href=".">&lt;-- 返回到上一级目录</a></p>
-    {% else %}
-        <p class="navi-p"><a href="..">&lt;-- 返回到上一级目录</a></p>
-    {% endif %}
+        {% if (entry_ and entry_.filetype > 0 and entry_.filetype not in [52, 15]) or is_static == "static" %}
+            <p class="navi-p"><a href=".">&lt;-- 返回到上一级目录</a></p>
+        {% else %}
+            <p class="navi-p"><a href="..">&lt;-- 返回到上一级目录</a></p>
+        {% endif %}
 
-    {% if entry_ and entry_.interpage %}
-        {% if entry_.interpage %}
-            {% set _prev = entry_.interpage.prev %}
-            {% if _prev.name != "[NO_PREV]" %}
-                {% if 1 <= entry_.filetype <= 5 %}
-                    <p class="navi-p"><a href="/{{ current_lang }}/{{ _prev.namespace|join('/') }}.html">&lt;-- 上一页：{{ _prev.name.realname.en }} {% if _prev.name.realname.zh_cn %}({{ _prev.name.realname.zh_cn }}){% endif %}</a></p>
-                {% elif entry_.filetype in [52] %}
-                    {# why am i doing this #}
-                    <p class="navi-p"><a href="/{{ current_lang }}/{{ _prev.namespace[:-1]|join('/') }}/{{ _prev.namespace[-1]|lower }}">&lt;-- 上一页: {{ get_zhcn(_prev.name) }}</a></p>
-                {% elif 11 <= entry_.filetype <= 16 and entry_.filetype not in [14, 15] %}
-                    <p class="navi-p"><a href="/{{ current_lang }}/{{ _prev.namespace[:-1]|join('/') }}/{{ _prev.namespace[-1]|int|string }}.html">&lt;-- 上一页: {{ get_zhcn(_prev.name) }}</a></p>
+        {% if entry_ and entry_.interpage %}
+            {% if entry_.interpage %}
+                {% set _prev = entry_.interpage.prev %}
+                {% if _prev.name != "[NO_PREV]" %}
+                    {% if 1 <= entry_.filetype <= 5 %}
+                        <p class="navi-p"><a href="/{{ current_lang }}/{{ _prev.namespace|join('/') }}.html">&lt;-- 上一页：{{ _prev.name.realname.en }} {% if _prev.name.realname.zh_cn %}({{ _prev.name.realname.zh_cn }}){% endif %}</a></p>
+                    {% elif entry_.filetype in [52] %}
+                        {# why am i doing this #}
+                        <p class="navi-p"><a href="/{{ current_lang }}/{{ _prev.namespace[:-1]|join('/') }}/{{ _prev.namespace[-1]|lower }}">&lt;-- 上一页: {{ get_zhcn(_prev.name) }}</a></p>
+                    {% elif 11 <= entry_.filetype <= 16 and entry_.filetype not in [14, 15] %}
+                        <p class="navi-p"><a href="/{{ current_lang }}/{{ _prev.namespace[:-1]|join('/') }}/{{ _prev.namespace[-1]|int|string }}.html">&lt;-- 上一页: {{ get_zhcn(_prev.name) }}</a></p>
+                    {% else %}
+                        <p class="navi-p"><a href="/{{ current_lang }}/{{ _prev.namespace|join('/') }}.html">&lt;-- 上一页：{{ get_zhcn(_prev.name) }}</a></p>
+                    {% endif %}
                 {% else %}
-                    <p class="navi-p"><a href="/{{ current_lang }}/{{ _prev.namespace|join('/') }}.html">&lt;-- 上一页：{{ get_zhcn(_prev.name) }}</a></p>
+                    <p class="navi-p">未找到上一页</p>
                 {% endif %}
-            {% else %}
-                <p class="navi-p">未找到上一页</p>
             {% endif %}
-        {% endif %}
-        {% if entry_.interpage.next %}
-            {% set _next = entry_.interpage.next %}
-            {% if _next.name != "[NO_NEXT]" %}
-                {% if 1 <= entry_.filetype <= 5 %}
-                    <p class="navi-p"><a href="/{{ current_lang }}/{{ _next.namespace|join('/') }}.html">--&gt; 下一页：{{ _next.name.realname.en }} {% if _next.name.realname.zh_cn %}({{ _next.name.realname.zh_cn }}){% endif %}</a></p>
-                {% elif entry_.filetype in [52] %}
-                    {# why am i doing this #}
-                    <p class="navi-p"><a href="/{{ current_lang }}/{{ _next.namespace[:-1]|join('/') }}/{{ _next.namespace[-1]|lower }}">--&gt; 下一页: {{ get_zhcn(_next.name) }}</a></p>
-                {% elif 11 <= entry_.filetype <= 16 and entry_.filetype not in [14, 15] %}
-                    <p class="navi-p"><a href="/{{ current_lang }}/{{ _next.namespace[:-1]|join('/') }}/{{ _next.namespace[-1]|int|string }}.html">--&gt; 下一页: {{ get_zhcn(_next.name) }}</a></p>
+            {% if entry_.interpage.next %}
+                {% set _next = entry_.interpage.next %}
+                {% if _next.name != "[NO_NEXT]" %}
+                    {% if 1 <= entry_.filetype <= 5 %}
+                        <p class="navi-p"><a href="/{{ current_lang }}/{{ _next.namespace|join('/') }}.html">--&gt; 下一页：{{ _next.name.realname.en }} {% if _next.name.realname.zh_cn %}({{ _next.name.realname.zh_cn }}){% endif %}</a></p>
+                    {% elif entry_.filetype in [52] %}
+                        {# why am i doing this #}
+                        <p class="navi-p"><a href="/{{ current_lang }}/{{ _next.namespace[:-1]|join('/') }}/{{ _next.namespace[-1]|lower }}">--&gt; 下一页: {{ get_zhcn(_next.name) }}</a></p>
+                    {% elif 11 <= entry_.filetype <= 16 and entry_.filetype not in [14, 15] %}
+                        <p class="navi-p"><a href="/{{ current_lang }}/{{ _next.namespace[:-1]|join('/') }}/{{ _next.namespace[-1]|int|string }}.html">--&gt; 下一页: {{ get_zhcn(_next.name) }}</a></p>
+                    {% else %}
+                        <p class="navi-p"><a href="/{{ current_lang }}/{{ _next.namespace|join('/') }}.html">--&gt; 下一页: {{ get_zhcn(_next.name) }}</a></p>
+                    {% endif %}
                 {% else %}
-                    <p class="navi-p"><a href="/{{ current_lang }}/{{ _next.namespace|join('/') }}.html">--&gt; 下一页: {{ get_zhcn(_next.name) }}</a></p>
+                    <p class="navi-p">未找到下一页</p>
                 {% endif %}
-            {% else %}
-                <p class="navi-p">未找到下一页</p>
             {% endif %}
         {% endif %}
-    {% endif %}
-    <hr />
-{% endblock navi %}
+    {% endblock navi %}
+{% endset %}
 {% block footer %}
     {% include "template/zh_cn/footer.html" %}
     <script>display_char_lang_element('zh');</script>
diff --git a/template/zh_cn/footer.html b/template/zh_cn/footer.html
index 1233218..6d0eaec 100644
--- a/template/zh_cn/footer.html
+++ b/template/zh_cn/footer.html
@@ -4,6 +4,6 @@
         <p>此网站是 <a href="https://github.com/Drassil/git-wiki-theme">Git-Wiki
             v2.8.5</a> 的一个修改版本，原版本由 <a href="https://github.com/Drassil">Drassil</a> 制作。</p>
         <p>此网站托管在 GitHub Pages 上并由 CloudFlare 进行增强。</p>
-        <small><p>页面生成于{{ 0|get_current_utc }} (UTC)</p></small>
+        <small><p>页面生成于{{ get_current_utc() }} (UTC)</p></small>
     </div>
 </footer>
\ No newline at end of file
diff --git a/template/zh_cn/header.html b/template/zh_cn/header.html
index 308d0b6..3b94d11 100644
--- a/template/zh_cn/header.html
+++ b/template/zh_cn/header.html
@@ -2,7 +2,7 @@
 
 <div class=" w3-xlarge w3-hide-large" id="git-wiki-mobile-header">
     <button class="w3-button w3-teal" onclick="sidebar_toggle()">☰</button>
-    <a href="/zh_cn/">
+    <a href="/{{ current_lang }}/">
         <img src="/static/images/site/logo.png" height="30px">
         <span style="font-size: 0.9em;">BA OST Index</span>
     </a>
@@ -13,7 +13,7 @@
         <button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="sidebar_toggle()">关闭 ×</button>
         <div class="w3-hide-medium w3-hide-small">
             <div class="git-wiki-main-logo">
-                <a href="/zh_cn/">
+                <a href="/{{ current_lang }}/">
                     <img src="/static/images/site/logo.png">
                     <h1 style="margin-top: 10px; margin-bottom: 5px;">BA OST Index</h1>
                 </a>
@@ -42,44 +42,31 @@ <h1 style="margin-top: 10px; margin-bottom: 5px;">BA OST Index</h1>
         <br />
 
         <div class="git-wiki-page-list">
-            <span class="page-list-title">曲子：</span>
+            <span class="page-list-title">快速导航：</span>
             <ul class="page-list">
-                <li class="page-list-item"><a href="/{{ current_lang }}/track/ost/">OST</a></li>
-                <li class="page-list-item"><a href="/{{ current_lang }}/track/short/">短篇动画</a></li>
-                <li class="page-list-item"><a href="/{{ current_lang }}/track/animation/">官方动画</a></li>
-                <li class="page-list-item"><a href="/{{ current_lang }}/track/other/">其它</a></li>
+                <li class="page-list-item">主要故事 (<a href="/zh_cn/main/story/main/">主线</a>、<a href="/zh_cn/main/story/side/">支线</a>、<a href="/zh_cn/main/story/short/">短篇</a>、<a href="/zh_cn/main/story/other/">其它</a>)</li>
+                <li class="page-list-item">主要战斗 (<a href="/zh_cn/main/battle/main/">主线</a>、<a href="/zh_cn/main/battle/total_assault/">总力战</a>、<a href="/zh_cn/main/battle/">其它</a>)</li>
+                <li class="page-list-item">歌曲 (<a href="/zh_cn/track/ost/">OST</a>、<a href="/zh_cn/track/short/">短篇动画</a>、<a href="/zh_cn/track/other/">其它</a>)</li>
+                <li class="page-list-item">人物 (<a href="/zh_cn/character/npc/">NPC</a>、<a href="/zh_cn/character/student">学生</a>)</li>
             </ul>
         </div>
 
         <div class="git-wiki-page-list">
-            <span class="post-list-title">故事：</span>
+            <span class="post-list-title">关于本站点：</span>
             <ul class="post-list">
-                <li class="post-list-item"><a href="/{{ current_lang }}/main/story/main/">主线故事</a></li>
-                <li class="post-list-item"><a href="/{{ current_lang }}/main/story/short/">短篇故事</a></li>
-                <li class="post-list-item"><a href="/{{ current_lang }}/main/story/side/">支线故事</a></li>
-                <li class="post-list-item"><a href="/{{ current_lang }}/main/story/other/">其他故事</a></li>
+                <li class="post-list-item"><a href="/zh_cn/about.html">关于</a></li>
+                <li class="post-list-item"><a href="/zh_cn/counter_rule.html">我们如何进行计数</a></li>
+                <li class="post-list-item"><a href="/zh_cn/zhcn_technical.html">中文翻译情况简介</a></li>
             </ul>
         </div>
 
-        <div class="git-wiki-page-list">
-            <span class="post-list-title">任务：</span>
-            <ul class="post-list">
-                <li class="post-list-item"><a href="/{{ current_lang }}/main/battle/main/">主线任务</a></li>
-                <li class="post-list-item"><a href="/{{ current_lang }}/main/battle/bounty_hunt/">悬赏通缉</a></li>
-                <li class="post-list-item"><a href="/{{ current_lang }}/main/battle/school_exchange/">学园交流会</a></li>
-                <li class="post-list-item"><a href="/{{ current_lang }}/main/battle/special_commission/">特殊任务</a></li>
-                <li class="post-list-item"><a href="/{{ current_lang }}/main/battle/total_assault/">总力战</a></li>
-                <li class="post-list-item">联合作战 (待更新)</li>
-            </ul>
-        </div>
-
-        <div class="git-wiki-page-list">
-            <span class="post-list-title">关于本网站</span>
+        <div>
+            <span class="post-list-title">关于本项目：</span>
             <ul class="post-list">
-                <li class="post-list-item"><a href="/{{ current_lang }}/about.html">关于本网站</a></li>
-                <li class="post-list-item"><a href="/zh_cn/zhcn_technical.html">关于简体中文翻译的问题</a></li>
-                <li class="post-list-item"><a href="https://github.com/BA-OST-Index/">BA OST Index项目</a></li>
-                <li class="post-list-item"><a href="https://github.com/BA-OST-Index/ost_data_site">生成的网站文件存储库</a></li>
+                <li class="post-list-item"><a href="https://github.com/BA-OST-Index/" target="_blank">BA OST Index</a></li>
+                <li class="post-list-item"><a href="https://github.com/BA-OST-Index/ost_data" target="_blank">原始JSON数据</a></li>
+                <li class="post-list-item"><a href="https://github.com/BA-OST-Index/ost_data_parser" target="_blank">数据解析器</a></li>
+                <li class="post-list-item"><a href="https://github.com/BA-OST-Index/ost_data_site" target="_blank">生成的网站代码</a></li>
             </ul>
         </div>
     </div>
diff --git a/template/zh_cn/infobox/album.html b/template/zh_cn/infobox/album.html
new file mode 100644
index 0000000..8d795df
--- /dev/null
+++ b/template/zh_cn/infobox/album.html
@@ -0,0 +1,21 @@
+<table id="infobox">
+    <tr>
+        <td colspan="2" class="infobox-title">{{ album.name.en }}</td>
+    </tr>
+    <tr>
+        <td colspan="2" class="infobox-icon"><img width="80%" src="{{ album.cover_img }}"></td>
+    </tr>
+    <tr><td colspan="2" class="infobox-subtitle">基础信息</td></tr>
+    <tr>
+        <td class="infobox-col-title">发行日期</td>
+        <td class="infobox-col-value">{{ album.release_date_format }}</td>
+    </tr>
+    <tr>
+        <td class="infobox-col-title">碟片数量</td>
+        <td class="infobox-col-value">{{ album.disc_num }}</td>
+    </tr>
+    <tr>
+        <td class="infobox-col-title">曲子数量</td>
+        <td class="infobox-col-value">{{ album.track_num }}</td>
+    </tr>
+</table>
\ No newline at end of file
diff --git a/template/zh_cn/infobox/background.html b/template/zh_cn/infobox/background.html
index cef1f6d..fdece0b 100644
--- a/template/zh_cn/infobox/background.html
+++ b/template/zh_cn/infobox/background.html
@@ -4,7 +4,10 @@
         <td colspan="2" class="infobox-title">{{ background.name.zh_cn }}</td>
     </tr>
     <tr>
-        <td colspan="2" class="infobox-icon"><img width="80%" src="{{ background.image.value }}"></td>
+        <td colspan="2" class="infobox-icon">
+            <img width="90%" src="{{ background.image.value }}">
+            <button type="button" style="margin-top: 0.4em"><a href="{{ background.image.value }}" target="_blank">查看完整图片</a></button>
+        </td>
     </tr>
     <tr><td colspan="2" class="infobox-subtitle">基本信息</td></tr>
     <tr>
diff --git a/template/zh_cn/infobox/battle.html b/template/zh_cn/infobox/battle.html
index 9d387f6..0eb03ec 100644
--- a/template/zh_cn/infobox/battle.html
+++ b/template/zh_cn/infobox/battle.html
@@ -31,6 +31,8 @@
                 <span>暂未支持战术大赛！</span>
             {% elif battle.filetype == 24 %}
                 <span>总力战<br />BOSS {{ auto_zhcn_gen(battle.name) }}</span>
+            {% elif battle.filetype == 28 %}
+                <span>世界BOSS<br />BOSS {{ auto_zhcn_gen(battle.name) }}</span>
             {% else %}
                 {% if battle.filetype == 25 %}
                     <span>悬赏通缉<br/>{{ auto_zhcn_gen(battle.name) }}</span>
diff --git a/template/zh_cn/infobox/npc.html b/template/zh_cn/infobox/npc.html
index 5afef8c..e535783 100644
--- a/template/zh_cn/infobox/npc.html
+++ b/template/zh_cn/infobox/npc.html
@@ -1,4 +1,5 @@
-{% from "template/zh_cn/_macro.html" import auto_zhcn_gen, output_relatedto_character %}
+{% from "template/zh_cn/_macro_page.html" import output_relatedto_character %}
+{% from "template/zh_cn/_macro.html" import auto_zhcn_gen %}
 
 <table id="infobox">
     <tr>
diff --git a/template/zh_cn/infobox/student.html b/template/zh_cn/infobox/student.html
index 882634f..814fa1b 100644
--- a/template/zh_cn/infobox/student.html
+++ b/template/zh_cn/infobox/student.html
@@ -1,4 +1,5 @@
-{% from 'template/zh_cn/_macro.html' import auto_zhcn_gen, output_relatedto_character %}
+{% from 'template/zh_cn/_macro.html' import auto_zhcn_gen %}
+{% from 'template/zh_cn/_macro_page.html' import output_relatedto_character %}
 
 <table id="infobox">
     <tr>
diff --git a/template/zh_cn/infobox/track.html b/template/zh_cn/infobox/track.html
index f6c0183..dee087f 100644
--- a/template/zh_cn/infobox/track.html
+++ b/template/zh_cn/infobox/track.html
@@ -1,4 +1,4 @@
-{% from "template/zh_cn/_macro.html" import tag_altogether, get_social_for_composer %}
+{% from "template/zh_cn/_macro.html" import tag_altogether, get_social_for_composer, tracktype_to_name, generate_track_anchor %}
 <table id="infobox">
     <tr>
         <td colspan="2" class="infobox-title">{{ track.no }}. {{ track.name.realname.en }}</td>
@@ -9,7 +9,7 @@
     <tr><td colspan="2" class="infobox-subtitle">基本信息</td></tr>
     <tr>
         <td class="infobox-col-title">曲目名称（编号）</td>
-        <td class="infobox-col-value">{{ track.name.realname.en }} ({{ track.name.realname.zh_cn }})<br />No. {{ track.no }}</td>
+        <td class="infobox-col-value">{{ track.name.realname.en }}{% if track.name.realname.zh_cn != "" %} ({{ track.name.realname.zh_cn }}){% endif %}<br />No. {{ track.no }}</td>
     </tr>
     <tr>
         <td class="infobox-col-title">别名</td>
@@ -29,7 +29,7 @@
     </tr>
     <tr>
         <td class="infobox-col-title">曲目类型</td>
-        <td class="infobox-col-value">{{ track_type_for_show(track) }}</td>
+        <td class="infobox-col-value">{{ tracktype_to_name(track.track_type) }}</td>
     </tr>
     {% if track.composer.composer_id == "0" %}
     <tr><td colspan="2" class="infobox-subtitle">作曲家信息</td></tr>
@@ -46,7 +46,7 @@
     {% for version in track.version %}
         <tr>
             <td class="infobox-col-title">{{ version.desc.zh_cn }}</td>
-            <td class="infobox-col-value">{% for i in version.url %}<a href="{{ i.value }}" target="_blank"><img src="/static/images/social/{{ i.platform.en }}.png" class="social-logo">{{ i.platform.zh_cn }}</a> ({{ i.short_desc.zh_cn }})<br/>{% endfor %}</td>
+            <td class="infobox-col-value">{% for i in version.url %}<a href="{{ i.value }}" target="_blank"><img src="/static/images/social/{{ i.platform.en }}.png" class="social-logo">{{ i.platform.zh_cn }}</a>{% if i.short_desc.zh_cn != "" %}&nbsp;({{ i.short_desc.zh_cn }}){% endif %}<br/>{% endfor %}</td>
         </tr>
     {% endfor %}
     <tr><td colspan="2" class="infobox-subtitle">特殊信息</td></tr>
@@ -70,4 +70,9 @@
         <td class="infobox-col-title">在活动中出现</td>
         <td class="infobox-col-value">{% if track.special_case.is_event %}是{% else %}否{% endif %}</td>
     </tr>
+    <tr><td colspan="2" class="infobox-subtitle">相关曲子</td></tr>
+    <tr>
+        <td class="infobox-col-title">其它曲子</td>
+        <td class="infobox-col-value">{% for i in track.related_to.track_other %}{{ generate_track_anchor(i, 0, 0, 0, 0, 0) }}<br />{% else %}无曲子可显示！{% endfor %}</td>
+    </tr>
 </table>
\ No newline at end of file
diff --git a/test.txt b/test.txt
new file mode 100644
index 0000000..a609360
--- /dev/null
+++ b/test.txt
@@ -0,0 +1,5 @@
+{% macro test(arg1) %}
+{%if not arg_check(arg1)%}123{%endif%}
+{% endmacro %}
+
+{{ test() }}
\ No newline at end of file