From b667036ae1a8a360f9d97b576ab3602ab2caa849 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Thu, 7 Mar 2024 15:50:55 +0800
Subject: [PATCH] perf: optimize page template render

---
 layout/_partial/first-screen.ejs              |  11 +-
 .../templates => _template}/friends-link.ejs  |   2 +-
 layout/_template/page-template.ejs            |  59 +++++
 .../templates => _template}/photo-album.ejs   |   2 +-
 layout/_template/tools-nav.ejs                |   3 +
 layout/page-template.ejs                      |  44 ----
 layout/page.ejs                               |  14 +-
 scripts/events/config-handle.js               |  13 +-
 source/css/common/css-variables.styl          |   4 +-
 source/css/layout/_partial/header.styl        |   5 +
 source/css/layout/_template/friends-link.styl | 183 +++++++++++++
 .../css/layout/_template/page-template.styl   |  43 +++
 source/css/layout/_template/photo-album.styl  |  19 ++
 source/css/layout/page-template.styl          | 244 ------------------
 source/css/layout/page.styl                   |   5 +
 source/css/style.styl                         |   4 +-
 source/js/main.js                             |  11 +
 17 files changed, 359 insertions(+), 307 deletions(-)
 rename layout/{_partial/templates => _template}/friends-link.ejs (95%)
 create mode 100644 layout/_template/page-template.ejs
 rename layout/{_partial/templates => _template}/photo-album.ejs (79%)
 create mode 100644 layout/_template/tools-nav.ejs
 delete mode 100644 layout/page-template.ejs
 create mode 100644 source/css/layout/_template/friends-link.styl
 create mode 100644 source/css/layout/_template/page-template.styl
 create mode 100644 source/css/layout/_template/photo-album.styl
 delete mode 100644 source/css/layout/page-template.styl

diff --git a/layout/_partial/first-screen.ejs b/layout/_partial/first-screen.ejs
index 7c8fbe8d..fc37534a 100644
--- a/layout/_partial/first-screen.ejs
+++ b/layout/_partial/first-screen.ejs
@@ -71,13 +71,14 @@ const { enable: sc_enable, links: sc_links } = theme?.social_contact || {}
                     <% } %>
 
                     <!-- custom svg icons -->
-                    <% for (const icon in theme?.icons) { %>
-                        <% if(theme.icons[icon]) { %>
+                    <% const custom_icons = theme.source_data?.icons || {} %>
+                    <% for (const icon in custom_icons) { %>
+                        <% if(custom_icons[icon]) { %>
                             <%
-                                const custom_tmpl = theme.icons[icon].link.split('|').map(x => x.trim())
+                                const custom_tmpl = custom_icons[icon].link.split('|').map(x => x.trim())
                                 let custom_is_img = false
-                                let custom_link = theme.icons[icon].link
-                                const custom_svg = theme.icons[icon].svg
+                                let custom_link = custom_icons[icon].link
+                                const custom_svg = custom_icons[icon].svg
                                 if (custom_tmpl.length > 1) {
                                     custom_link = custom_tmpl[1]
                                     custom_is_img = custom_tmpl[0] === 'img'
diff --git a/layout/_partial/templates/friends-link.ejs b/layout/_template/friends-link.ejs
similarity index 95%
rename from layout/_partial/templates/friends-link.ejs
rename to layout/_template/friends-link.ejs
index 00da40e3..249f36dd 100644
--- a/layout/_partial/templates/friends-link.ejs
+++ b/layout/_template/friends-link.ejs
@@ -1,5 +1,5 @@
 <ul class="friends-link-list border-box">
-    <% for (const f of theme?.links) { %>
+    <% for (const f of theme.source_data?.links) { %>
         <% if (f?.title) { %>
            <li class="link-type-title text-ellipsis border-box">
                <span class="type-name text-ellipsis"><%= f.title %></span>
diff --git a/layout/_template/page-template.ejs b/layout/_template/page-template.ejs
new file mode 100644
index 00000000..dfd82ca6
--- /dev/null
+++ b/layout/_template/page-template.ejs
@@ -0,0 +1,59 @@
+<%
+const page_title = page?.title?.toLowerCase()
+const use_page_template = page?.use_template !== false
+const { links: links_data, photos: photos_data, tools: tools_data } = theme?.source_data
+
+let current_page_data = null
+let current_page_template = null
+
+if (page_title === 'links' || page_title === 'link') {
+  current_page_data = links_data
+  current_page_template = 'friends-link'
+}
+
+if (page_title === 'photos' || page_title === 'photo') {
+  current_page_data = photos_data
+  current_page_template = 'photo-album'
+}
+
+if (page_title === 'tools' || page_title === 'tool') {
+  current_page_data = tools_data
+  current_page_template = 'tools-nav'
+}
+
+const max_content = page_title === 'tools' ? 'max-content' : ''
+%>
+<div class="fade-in-down-animation">
+    <div class="page-template-container border-box">
+        <% if (page?.page_cover) { %>
+            <div class="page-template-top border-box"
+                 style="height: <%= page?.page_cover_height ? page?.page_cover_height + 'px' : '200px' %>"
+            >
+                <img class="page-cover" src="<%- url_for(page.page_cover) %>"
+                     onerror="this.style.display = 'none'"
+                >
+            </div>
+        <% } %>
+
+        <div class="page-template-bottom border-box">
+            <!-- use page template -->
+            <% if (use_page_template && current_page_data && current_page_template) { %>
+                <%- partial(current_page_template) %>
+            <% } %>
+
+            <!-- page content -->
+            <div class="page-content border-box keep-markdown-body">
+                <% if (page?.content || current_page_data) { %>
+                    <%- page.content %>
+                <% } else { %>
+                    <h1><%= page_title.toUpperCase() %></h1>
+                <% } %>
+            </div>
+
+            <!-- comment plugin -->
+            <% if (page?.comment === true) { %>
+                <%- partial('_partial/comment/comment') %>
+            <% } %>
+        </div>
+    </div>
+</div>
diff --git a/layout/_partial/templates/photo-album.ejs b/layout/_template/photo-album.ejs
similarity index 79%
rename from layout/_partial/templates/photo-album.ejs
rename to layout/_template/photo-album.ejs
index 6f7888da..76676c55 100644
--- a/layout/_partial/templates/photo-album.ejs
+++ b/layout/_template/photo-album.ejs
@@ -1,5 +1,5 @@
 <div class="photo-album-box border-box">
-    <% for (const img of theme?.photos) { %>
+    <% for (const img of theme.source_data?.photos) { %>
         <img class="photo border-box" src="<%- url_for(img?.url) %>"
              title="<%= img.name %>"
              onerror="this.style.display='none'"
diff --git a/layout/_template/tools-nav.ejs b/layout/_template/tools-nav.ejs
new file mode 100644
index 00000000..63e1d73b
--- /dev/null
+++ b/layout/_template/tools-nav.ejs
@@ -0,0 +1,3 @@
+<div class="tools-nav-box border-box">
+    Tools Nav
+</div>
diff --git a/layout/page-template.ejs b/layout/page-template.ejs
deleted file mode 100644
index f5c43f7d..00000000
--- a/layout/page-template.ejs
+++ /dev/null
@@ -1,44 +0,0 @@
-<%
-const page_title = page.title.toLowerCase()
-const use_page_template = page?.use_template !== false
-const { menu: t_menu, links: links_data, photos: photos_data } = theme
-const use_friends_link = (
-  t_menu?.Links && links_data && (page_title === 'links' || page_title === 'link')
-)
-const use_photo_album = (
-  t_menu?.Photos && photos_data && (page_title === 'photos' || page_title === 'photo')
-)
-%>
-<div class="fade-in-down-animation">
-    <div class="page-template-container border-box">
-        <% if (page?.page_cover) { %>
-            <div class="page-template-top border-box"
-                 style="height: <%= page?.page_cover_height ? page?.page_cover_height + 'px' : '13rem' %>"
-            >
-                <img class="page-cover" src="<%- url_for(page.page_cover) %>"
-                     onerror="this.style.display='none'"
-                >
-            </div>
-        <% } %>
-
-        <div class="page-template-bottom border-box">
-            <% if (use_friends_link && use_page_template) { %>
-                <%- partial('_partial/templates/friends-link') %>
-            <% } %>
-            <% if (use_photo_album && use_page_template) { %>
-                <%- partial('_partial/templates/photo-album') %>
-            <% } %>
-            <div class="page-content border-box keep-markdown-body">
-                <% if (page?.content || use_friends_link || use_photo_album) { %>
-                    <%- page.content %>
-                <% } else { %>
-                    <h1><%= page_title.toUpperCase() %></h1>
-                <% } %>
-            </div>
-
-            <% if (page?.comment === true) { %>
-                <%- partial('_partial/comment/comment') %>
-            <% } %>
-        </div>
-    </div>
-</div>
diff --git a/layout/page.ejs b/layout/page.ejs
index 86c23147..d79e24e3 100644
--- a/layout/page.ejs
+++ b/layout/page.ejs
@@ -1,6 +1,9 @@
 <%- partial('_partial/progress-bar') %>
+<%
+const page_title = page?.title?.toLowerCase()
+const page_type = page?.type
+%>
 <main class="page-container border-box">
-
     <!-- home first screen  -->
     <% if (is_home() && theme?.first_screen?.enable === true && !page.prev) { %>
         <%- partial('_partial/first-screen') %>
@@ -35,25 +38,24 @@
 
                     <%- partial('tag-content') %>
 
-                <% } else if (page.title.toLowerCase() === 'category' || page.title.toLowerCase() === 'categories') { %>
+                <% } else if (page_title === 'category' || page_title === 'categories') { %>
 
                     <%- partial('category-list') %>
 
-                <% } else if (page.title.toLowerCase() === 'tag' || page.title.toLowerCase() === 'tags') { %>
+                <% } else if (page_title === 'tag' || page_title === 'tags') { %>
 
                     <%- partial('_partial/tagcloud') %>
 
-                <% } else if (page.type === '404') { %>
+                <% } else if (page_type === '404') { %>
 
                     <%- partial('404') %>
 
                 <% } else { %>
 
-                    <%- partial('page-template') %>
+                    <%- partial('_template/page-template') %>
 
                 <% } %>
             </div>
-
         </div>
 
         <div class="page-main-content-bottom border-box">
diff --git a/scripts/events/config-handle.js b/scripts/events/config-handle.js
index 43fe11df..7c419d9e 100644
--- a/scripts/events/config-handle.js
+++ b/scripts/events/config-handle.js
@@ -33,19 +33,26 @@ hexo.on('generateBefore', function () {
         hexo.theme.config = { ...hexo.theme.config, ...data.keep }
       }
 
+      hexo.theme.config.source_data = {}
+
       // friends link data
       if (data.links) {
-        hexo.theme.config.links = data.links
+        hexo.theme.config.source_data.links = data.links
       }
 
       // custom social contact icon data
       if (data.icons) {
-        hexo.theme.config.icons = data.icons
+        hexo.theme.config.source_data.icons = data.icons
       }
 
       // photo album data
       if (data.photos) {
-        hexo.theme.config.photos = data.photos
+        hexo.theme.config.source_data.photos = data.photos
+      }
+
+      // tools nav data
+      if (data.tools) {
+        hexo.theme.config.source_data.tools = data.tools
       }
     }
   }
diff --git a/source/css/common/css-variables.styl b/source/css/common/css-variables.styl
index eb2233aa..d55bd9a5 100644
--- a/source/css/common/css-variables.styl
+++ b/source/css/common/css-variables.styl
@@ -16,8 +16,8 @@
   --page-content-width 80%
   --page-content-width-tablet 88%
   --page-content-width-mobile 90%
-  --page-content-max-width 950px
-  --page-content-max-width-2 1100px
+  --page-content-max-width 960px
+  --page-content-max-width-2 calc(var(--page-content-max-width) * 1.2)
   --component-gap 36px
 
 
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
index 1c9bb64b..9d30ce26 100644
--- a/source/css/layout/_partial/header.styl
+++ b/source/css/layout/_partial/header.styl
@@ -39,6 +39,11 @@ $logo-image-box-width = 2.68rem
     }
 
 
+    .max-content & {
+      max-width var(--page-content-max-width-2)
+    }
+
+
     +keep-tablet() {
       width var(--page-content-width-tablet)
     }
diff --git a/source/css/layout/_template/friends-link.styl b/source/css/layout/_template/friends-link.styl
new file mode 100644
index 00000000..a5629a59
--- /dev/null
+++ b/source/css/layout/_template/friends-link.styl
@@ -0,0 +1,183 @@
+$friend-link-item-height = 5.2rem
+$friend-link-item-height-tablet = 4.2rem
+$friend-link-item-border-radius = 0.6rem
+
+if (hexo-config('menu') && hexo-config('menu.links')) {
+  .page-template-container {
+    .friends-link-list {
+      display grid
+      grid-gap 1.2rem
+      grid-template-columns repeat(2, 1fr)
+
+      .link-type-title {
+        display flex
+        grid-column span 2
+        align-items center
+        justify-content space-between
+        margin-top 0.6rem
+        padding 0.3rem 0 0.2rem 0.8rem
+        font-weight bold
+        font-size 1.3rem
+
+        &:first-child {
+          margin-top 0
+        }
+
+        &::before {
+          position absolute
+          top 50%
+          left 0
+          width 0.3rem
+          height 100%
+          background var(--primary-color)
+          border-radius 0.2rem
+          transform translateY(-50%)
+          content ''
+        }
+
+
+        .type-name {
+          color var(--text-color-3)
+        }
+
+        i.fa-solid {
+          margin-left 1rem
+          color var(--text-color-4)
+          font-size 1.1rem
+          cursor pointer
+        }
+      }
+
+
+      +keep-tablet() {
+        grid-gap 1.1rem
+
+        .link-type-title {
+          padding 0.1rem 0 0 0.6rem !important
+          font-size 1.2rem !important
+
+          i.fa-solid {
+            margin-left 0.8rem !important
+            font-size 1rem !important
+          }
+        }
+
+        .friends-link-item {
+          height $friend-link-item-height-tablet !important
+
+          .a-wrap {
+
+            .avatar {
+              width $friend-link-item-height-tablet !important
+
+              i.icon {
+                font-size 1.6rem !important
+              }
+            }
+
+            .details {
+              padding 0.6rem 0.8rem !important
+
+              .name {
+                font-size 1.1rem !important
+              }
+
+              .desc {
+                font-size 0.9rem !important
+              }
+            }
+          }
+        }
+      }
+
+
+      +keep-mobile() {
+        grid-gap 1rem !important
+        grid-template-columns repeat(1, 1fr) !important
+
+        .link-type-title {
+          grid-column span 1 !important
+        }
+      }
+
+
+      .friends-link-item {
+        width 100%
+        height $friend-link-item-height
+        overflow hidden
+        border-radius $friend-link-item-border-radius
+        box-shadow 1px 1px 3px var(--shadow-color)
+        cursor pointer
+        disable-user-select()
+
+        &:hover {
+          box-shadow 1px 1px 6px var(--shadow-color)
+
+          .avatar {
+            img {
+              transform scale(1.12)
+            }
+          }
+        }
+
+
+        .a-wrap {
+          display flex
+          justify-content space-between
+          width 100%
+          height 100%
+
+          .avatar {
+            flex-shrink 0
+            width $friend-link-item-height
+            height 100%
+            overflow hidden
+            background-color var(--background-color-2)
+
+            img {
+              position absolute
+              top 0
+              left 0
+              width 100%
+              height 100%
+              object-fit cover
+              background-color var(--background-color-2)
+              transform-origin center center
+              transition-t("transform", "0.1", "0.8", "linear")
+            }
+
+
+            i.icon {
+              color var(--text-color-4)
+              font-size 1.8rem
+            }
+          }
+
+
+          .details {
+            display flex
+            flex-direction column
+            justify-content space-between
+            width 100%
+            height 100%
+            padding 0.8rem 1rem
+
+            .name {
+              width 100%
+              color var(--text-color-3)
+              font-size 1.2rem
+            }
+
+
+            .desc {
+              width 100%
+              margin-top 0.4rem
+              color var(--text-color-4)
+              font-size 1rem
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/source/css/layout/_template/page-template.styl b/source/css/layout/_template/page-template.styl
new file mode 100644
index 00000000..549e4e28
--- /dev/null
+++ b/source/css/layout/_template/page-template.styl
@@ -0,0 +1,43 @@
+.page-template-container {
+  keep-container(1, 0, 2rem)
+
+  .page-template-top {
+    width 100%
+    overflow hidden
+    background-color var(--background-color-2)
+    border-top-left-radius var(--box-border-radius)
+    border-top-right-radius var(--box-border-radius)
+
+    .page-cover {
+      position absolute
+      top 0
+      left 0
+      box-sizing border-box
+      width 100%
+      height 100%
+      object-fit cover
+    }
+  }
+
+
+  .page-template-bottom {
+    width 100%
+    padding 2rem
+
+    .page-content {
+      color var(--text-color-3)
+
+      h1
+      h2
+      h3
+      h4
+      h5
+      h6 {
+
+        &:first-child {
+          margin-top 0
+        }
+      }
+    }
+  }
+}
diff --git a/source/css/layout/_template/photo-album.styl b/source/css/layout/_template/photo-album.styl
new file mode 100644
index 00000000..a62871a6
--- /dev/null
+++ b/source/css/layout/_template/photo-album.styl
@@ -0,0 +1,19 @@
+$album-img-gap = 0.8rem
+
+if (hexo-config('menu') && hexo-config('menu.photos')) {
+  .page-template-container {
+    .photo-album-box {
+      column-count 3
+      column-gap $album-img-gap
+
+      img.photo {
+        display block
+        width 100%
+        margin-bottom $album-img-gap
+        background var(--background-color-2)
+        border-radius 0.6rem
+        cursor zoom-in
+      }
+    }
+  }
+}
diff --git a/source/css/layout/page-template.styl b/source/css/layout/page-template.styl
deleted file mode 100644
index e5cc03f5..00000000
--- a/source/css/layout/page-template.styl
+++ /dev/null
@@ -1,244 +0,0 @@
-$friend-link-item-height = 5.2rem
-$friend-link-item-height-tablet = 4.2rem
-$friend-link-item-border-radius = 0.6rem
-$album-img-gap = 0.8rem
-
-.page-template-container {
-  keep-container(1, 0, 2rem)
-
-  .page-template-top {
-    width 100%
-    overflow hidden
-    background-color var(--background-color-2)
-    border-top-left-radius var(--box-border-radius)
-    border-top-right-radius var(--box-border-radius)
-
-    .page-cover {
-      position absolute
-      top 0
-      left 0
-      box-sizing border-box
-      width 100%
-      height 100%
-      object-fit cover
-    }
-  }
-
-
-  .page-template-bottom {
-    width 100%
-    padding 2rem
-
-    .page-content {
-      color var(--text-color-3)
-
-      h1
-      h2
-      h3
-      h4
-      h5
-      h6 {
-
-        &:first-child {
-          margin-top 0
-        }
-      }
-    }
-
-
-    if (hexo-config('menu') && hexo-config('menu.Links')) {
-      .friends-link-list {
-        display grid
-        grid-gap 1.2rem
-        grid-template-columns repeat(2, 1fr)
-
-        .link-type-title {
-          display flex
-          grid-column span 2
-          align-items center
-          justify-content space-between
-          margin-top 0.6rem
-          padding 0.3rem 0 0.2rem 0.8rem
-          font-weight bold
-          font-size 1.3rem
-
-          &:first-child {
-            margin-top 0
-          }
-
-          &::before {
-            position absolute
-            top 50%
-            left 0
-            width 0.3rem
-            height 100%
-            background var(--primary-color)
-            border-radius 0.2rem
-            transform translateY(-50%)
-            content ''
-          }
-
-
-          .type-name {
-            color var(--text-color-3)
-          }
-
-          i.fa-solid {
-            margin-left 1rem
-            color var(--text-color-4)
-            font-size 1.1rem
-            cursor pointer
-          }
-        }
-
-
-        +keep-tablet() {
-          grid-gap 1.1rem
-
-          .link-type-title {
-            padding 0.1rem 0 0 0.6rem !important
-            font-size 1.2rem !important
-
-            i.fa-solid {
-              margin-left 0.8rem !important
-              font-size 1rem !important
-            }
-          }
-
-          .friends-link-item {
-            height $friend-link-item-height-tablet !important
-
-            .a-wrap {
-
-              .avatar {
-                width $friend-link-item-height-tablet !important
-
-                i.icon {
-                  font-size 1.6rem !important
-                }
-              }
-
-              .details {
-                padding 0.6rem 0.8rem !important
-
-                .name {
-                  font-size 1.1rem !important
-                }
-
-                .desc {
-                  font-size 0.9rem !important
-                }
-              }
-            }
-          }
-        }
-
-
-        +keep-mobile() {
-          grid-gap 1rem !important
-          grid-template-columns repeat(1, 1fr) !important
-
-          .link-type-title {
-            grid-column span 1 !important
-          }
-        }
-
-
-        .friends-link-item {
-          width 100%
-          height $friend-link-item-height
-          overflow hidden
-          border-radius $friend-link-item-border-radius
-          box-shadow 1px 1px 3px var(--shadow-color)
-          cursor pointer
-          disable-user-select()
-
-          &:hover {
-            box-shadow 1px 1px 6px var(--shadow-color)
-
-            .avatar {
-              img {
-                transform scale(1.12)
-              }
-            }
-          }
-
-
-          .a-wrap {
-            display flex
-            justify-content space-between
-            width 100%
-            height 100%
-
-            .avatar {
-              flex-shrink 0
-              width $friend-link-item-height
-              height 100%
-              overflow hidden
-              background-color var(--background-color-2)
-
-              img {
-                position absolute
-                top 0
-                left 0
-                width 100%
-                height 100%
-                object-fit cover
-                background-color var(--background-color-2)
-                transform-origin center center
-                transition-t("transform", "0.1", "0.8", "linear")
-              }
-
-
-              i.icon {
-                color var(--text-color-4)
-                font-size 1.8rem
-              }
-            }
-
-
-            .details {
-              display flex
-              flex-direction column
-              justify-content space-between
-              width 100%
-              height 100%
-              padding 0.8rem 1rem
-
-              .name {
-                width 100%
-                color var(--text-color-3)
-                font-size 1.2rem
-              }
-
-
-              .desc {
-                width 100%
-                margin-top 0.4rem
-                color var(--text-color-4)
-                font-size 1rem
-              }
-            }
-          }
-        }
-      }
-    }
-
-
-    if (hexo-config('menu') && hexo-config('menu.Photos')) {
-      .photo-album-box {
-        column-count 3
-        column-gap $album-img-gap
-
-        img.photo {
-          display block
-          width 100%
-          margin-bottom $album-img-gap
-          background var(--background-color-2)
-          border-radius 0.6rem
-          cursor zoom-in
-        }
-      }
-    }
-  }
-}
diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl
index 82666428..117e1fc6 100644
--- a/source/css/layout/page.styl
+++ b/source/css/layout/page.styl
@@ -138,6 +138,11 @@ $post-tools-offset = calc((100vw - var(--page-content-max-width) / 2) - 5rem)
         }
 
 
+        .max-content & {
+          max-width var(--page-content-max-width-2)
+        }
+
+
         +keep-tablet() {
           width var(--page-content-width-tablet)
         }
diff --git a/source/css/style.styl b/source/css/style.styl
index 2ad7e074..ccb8bca8 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -28,7 +28,9 @@
 @import "layout/category-content.styl"
 @import "layout/tag-content.styl"
 @import "layout/404.styl"
-@import "layout/page-template.styl"
+@import "layout/_template/page-template.styl"
+@import "layout/_template/friends-link.styl"
+@import "layout/_template/photo-album.styl"
 @import "layout/_partial/tagcloud.styl"
 @import "layout/_partial/common/empty-content.styl"
 @import "layout/_partial/post/post-share.styl"
diff --git a/source/js/main.js b/source/js/main.js
index ea15ab3d..f0cc3e41 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -62,6 +62,16 @@ window.addEventListener('DOMContentLoaded', () => {
   }
   KEEP.initPrototype()
 
+  KEEP.setPageTemplateWidth = () => {
+    const ptc = document.querySelector('.page-template-container')
+    const targetClass = 'max-content'
+    if (ptc && ptc.classList.contains(targetClass)) {
+      document.body.classList.add(targetClass)
+    } else {
+      document.body.classList.remove(targetClass)
+    }
+  }
+
   KEEP.initExecute = () => {
     KEEP.initUtils()
     KEEP.initHeaderShrink()
@@ -69,6 +79,7 @@ window.addEventListener('DOMContentLoaded', () => {
     KEEP.initBack2Top()
     KEEP.initCodeBlock()
     KEEP.setFooterVersion()
+    KEEP.setPageTemplateWidth()
 
     if (local_search?.enable === true) {
       KEEP.initLocalSearch()