perf: optimize page template render

XPoet · Mar 7, 2024 · b667036 · b667036
1 parent 39df4b7
commit b667036
Show file tree

Hide file tree

Showing 17 changed files with 359 additions and 307 deletions.
diff --git 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 → layout/_template/friends-link.ejs b/layout/_partial/templates/friends-link.ejs → 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
@@ -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 → layout/_template/photo-album.ejs b/layout/_partial/templates/photo-album.ejs → 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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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)
     }