Skip to content

Commit

Permalink
refactor: simplify page rendering logic and improve code structure
Browse files Browse the repository at this point in the history 
• Introduce getPagePartialPath helper for dynamic partial selection
• Add getPageData and getPageTitle helpers for centralized page info
• Refactor page.ejs to use new helpers for cleaner rendering logic
• Create metaHelpers.js for generating SEO-friendly meta tags
• Adjust layout.ejs for consistent indentation and formatting
  • Loading branch information
@EvanNotFound
EvanNotFound committed Nov 17, 2024
1 parent 5455c10 commit fb31d33
Show file tree
Hide file tree
Showing 27 changed files with 808 additions and 800 deletions.
2 changes: 1 addition & 1 deletion layout/_partials/head.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<% } %>
<% } %>
<!--- Seo Part-->
<%- generate_seo(theme, page) %>
<%- generateMeta(theme, page) %>
<%- autoCanonical(config, page) %>
<meta name="robots" content="index,follow">
<meta name="googlebot" content="index,follow">
Expand Down
4 changes: 2 additions & 2 deletions layout/_partials/navbar.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<%
let link = theme.navbar.links[i];
let hasSubmenus = link.submenus;
let isActive = isInHomePaging(page.path, link.path) || is_current(link.path);
let isActive = isHomePagePagination(page.path, link.path) || is_current(link.path);
let linkHref = hasSubmenus ? '#' : url_for(link.path);
let onClickAction = hasSubmenus ? 'onClick="return false;"' : '';
let iconClass = link.icon ? `<i class="${link.icon} fa-fw"></i>` : '';
Expand Down Expand Up @@ -85,7 +85,7 @@
<%
// Function to check if link is active
function isActiveLink(pagePath, linkPath) {
return isInHomePaging(pagePath, linkPath) || is_current(linkPath);
return isHomePagePagination(pagePath, linkPath) || is_current(linkPath);
}
// Variables for cleaner code
Expand Down
63 changes: 22 additions & 41 deletions layout/_partials/page-template.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,23 @@
<div class="page-template-container">
<%
const friendsTitle = ['friends', 'friend', '友情链接', '友情鏈接', '友情鏈結', '友情鏈結', '朋友', '朋友們', '朋友们', 'links','link', 'Link', 'Links'];
const friendsTypes = ['links', 'link'];
const isLoadFriendsLink = (
theme.links
&& (friendsTypes.includes(page.type) || friendsTitle.includes(page.title))
);
const shuoshuoTitle = ['essays', 'essay', 'shuoshuo', '说说', '即刻短文', 'Shuoshuo'];
const shuoshuoTypes = ['essays', 'essay', 'shuoshuo'];
const isLoadShuoshuo = (
(theme.essays || theme.shuoshuo)
&& (shuoshuoTypes.includes(page.type) || shuoshuoTitle.includes(page.title))
);
const masonryTitles = ['masonry', 'gallery', 'Masonry', 'Gallery', '照片墙', '照片牆', '相册', '相冊', '瀑布流', '瀑布流', 'photos', 'Photos', 'photo', 'Photo'];
const masonryTypes = ['masonry', 'gallery', '瀑布流', '相册', 'photos', 'photo'];
const isLoadMasonry = (
(theme.masonry || theme.gallery || theme.photos)
&& (masonryTypes.includes(page.type) || masonryTitles.includes(page.title))
)
%>

<% if (isLoadFriendsLink) { %>
<%- partial('_widgets/friends-link') %>
<% } else if (isLoadShuoshuo) { %>
<%- partial('_widgets/essays') %>
<% } else if (isLoadMasonry) { %>
<%- partial('_widgets/masonry') %>
<% } %>
<div class="page-template-content markdown-body">
<% if (isLoadFriendsLink || page.content || isLoadShuoshuo || isLoadMasonry) { %>
<%- page.content %>
<% } else { %>
<h1><%- page.title %></h1>
<% } %>
</div>
<div class="page-template-comments">
<% if (page.hasOwnProperty('comment') && (page.comment === true || page.comments === true) ) { %>
<%- partial('_partials/comments/comment') %>
<% } %>
</div>
</div>
<% const currentPageType = Object.entries(getPageData()).find(([type, config]) => {
return config.types.includes(page.type) || config.titles.includes(page.title);
}); %>

<% if (currentPageType) { %>
<%- partial(currentPageType[1].partial) %>
<% } %>

<div class="page-template-content markdown-body">
<% if (currentPageType || page.content) { %>
<%- page.content %>
<% } else { %>
<h1><%- page.title %></h1>
<% } %>
</div>

<div class="page-template-comments">
<% if (page.hasOwnProperty('comment') && (page.comment === true || page.comments === true) ) { %>
<%- partial('_partials/comments/comment') %>
<% } %>
</div>
</div>
53 changes: 27 additions & 26 deletions layout/_widgets/archive-list.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,29 @@
<% const postList = createNewArchivePosts(posts_new) %>
<div class="archive-list-container">
<% postList.forEach(postYear => { %>
<section class="archive-item mb-spacing-unit last:mb-0">
<div class="archive-item-header flex flex-row items-center mb-2">
<span class="archive-year font-semibold text-3xl mr-2"><%= postYear.year %></span>
<span class="archive-year-post-count text-xs md:text-sm font-bold rounded-small bg-third-background-color py-[2px] px-[10px] border border-border-color"><%= postYear.postList.length %></span>
</div>
<% let previousDate = null; %>
<ul class="article-list pl-0 md:pl-8 text-lg leading-[1.5]">
<% postYear.postList.sort((a,b) => (a.date > b.date ? -1 : (a.date < b.date ? 1 : a.title.localeCompare(b.title)))).forEach(post => { %>
<% const currentDate = date(post.date, 'MM-DD'); %>
<% if (previousDate !== currentDate) { %>
<% if (previousDate) { %>
</li>
<% } %> <!-- Close the previous LI if not the first item -->
<li class="article-item space-y-2 px-6 pt-10 pb-2 text-xl relative border-l-2 border-border-color" date-is='<%= currentDate %>'>
<% } %>
<a href="<%- url_for(post.path) %>" class="block w-fit">
<span class="article-title my-0.5 text-2xl"><%= post.title %></span>
</a>
<% previousDate = currentDate; %>
<% }) %>
</li> <!-- Ensure the last item is properly closed -->
</ul>
</section>
<% }) %>
</div>
<% postList.forEach(postYear => { %>
<section class="archive-item mb-spacing-unit last:mb-0">
<div class="archive-item-header flex flex-row items-center mb-2">
<span class="archive-year font-semibold text-3xl mr-2"><%= postYear.year %></span>
<span class="archive-year-post-count text-xs md:text-sm font-bold rounded-small bg-third-background-color py-[2px] px-[10px] border border-border-color"><%= postYear.postList.length %></span>
</div>
<% let previousDate = null; %>
<ul class="article-list pl-0 md:pl-8 text-lg leading-[1.5]">
<% postYear.postList.sort((a,b) => (a.date > b.date ? -1 : (a.date < b.date ? 1 : a.title.localeCompare(b.title)))).forEach(post => { %>
<% const currentDate = date(post.date, 'MM-DD'); %>
<% if (previousDate !== currentDate) { %>
<% if (previousDate) { %>
</li>
<% } %>
<!-- Close the previous LI if not the first item -->
<li class="article-item space-y-2 px-6 pt-10 pb-2 text-xl relative border-l-2 border-border-color" date-is='<%= currentDate %>'>
<% } %>
<a href="<%- url_for(post.path) %>" class="block w-fit">
<span class="article-title my-0.5 text-2xl"><%= post.title %></span>
</a>
<% previousDate = currentDate; %>
<% }) %>
</li> <!-- Ensure the last item is properly closed -->
</ul>
</section>
<% }) %>
</div>
35 changes: 17 additions & 18 deletions layout/_widgets/essays.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
<div class="mb-4">
<h1 class="page-title-header"><%= page.title %></h1>
<ul class="flex flex-col mb-4 gap-6">
<%
<h1 class="page-title-header"><%= page.title %></h1>
<ul class="flex flex-col mb-4 gap-6">
<%
const timezone = config.timezone || 'Asia/Shanghai';
const newessays = theme.essays.sort((a, b) => moment(b.date).diff(a.date));
%>
<% for (const e of newessays) { %>
<li class="w-full flex flex-row relative">
<div class="w-10 h-10 mr-4 rounded-lg overflow-hidden border border-border-color p-[1px] flex-shrink-0">
<%- image_tag(theme.defaults.avatar, {class: "w-full h-full rounded-[6.2px]"}) %>
</div>
<div class="w-full border-border-color rounded-xl rounded-tl-none shadow-redefine-flat overflow-hidden">
<!-- Pass the raw date here in a data attribute -->
<div class="essay-date px-4 py-1.5 text-sm border-b border-border-color bg-zinc-50 dark:bg-zinc-800 text-third-text-color"
data-date="<%= moment(e.date).tz(timezone).utc().format() %>">Loading Date...</div>
<div id="shuoshuo-content" class="px-4 py-2"><%- markdown(e.content) %></div>
</div>
<div class="absolute left-[50.5px] top-3 transform w-2 h-2 border-solid border-t border-l bg-zinc-50 -rotate-45 border-border-color dark:bg-zinc-800"></div>
</li>
<% } %>
</ul>
<% for (const e of newessays) { %>
<li class="w-full flex flex-row relative">
<div class="w-10 h-10 mr-4 rounded-lg overflow-hidden border border-border-color p-[1px] flex-shrink-0">
<%- image_tag(theme.defaults.avatar, {class: "w-full h-full rounded-[6.2px]"}) %>
</div>
<div class="w-full border-border-color rounded-xl rounded-tl-none shadow-redefine-flat overflow-hidden">
<!-- Pass the raw date here in a data attribute -->
<div class="essay-date px-4 py-1.5 text-sm border-b border-border-color bg-zinc-50 dark:bg-zinc-800 text-third-text-color" data-date="<%= moment(e.date).tz(timezone).utc().format() %>">Loading Date...</div>
<div id="shuoshuo-content" class="px-4 py-2"><%- markdown(e.content) %></div>
</div>
<div class="absolute left-[50.5px] top-3 transform w-2 h-2 border-solid border-t border-l bg-zinc-50 -rotate-45 border-border-color dark:bg-zinc-800"></div>
</li>
<% } %>
</ul>
</div>
122 changes: 58 additions & 64 deletions layout/_widgets/friends-link.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,59 @@
<div class="friends-link-container flex flex-col">
<h1 class="text-[3.2rem] mt-1.5 mb-5 font-bold leading-[1]"><%= page.title %></h1>
<% for (const category of theme.links) { %>
<div class="mt-2 mb-4">
<h2 class="text-2xl font-bold"><%= category.links_category %></h2>
</div>
<% if (category.has_thumbnail == true) { %>
<ul class="grid grid-cols-2 mb-6 w-full gap-4">
<% for (const f of category.list) { %>
<li class="group transform scale-100 transition-transform duration-100 ease-linear active:scale-95">
<a href="<%= f.link %>">
<div class="content rounded-lg redefine-box-shadow-flat">
<div class="thumbnail rounded-t-lg h-32 md:h-44 overflow-hidden">
<img class="rounded-t-lg object-cover w-full h-full" src="<%= f.thumbnail %>"/>
</div>
<div class="avainfo flex flex-row items-center gap-1 sm:gap-2 overflow-hidden min-w-0">
<div class="avatar h-16 w-16 rounded-bl-lg bg-third-background-color">
<% if (f.avatar) { %>
<img class="rounded-bl-lg h-16 w-16 max-w-none"
src="<%= f.avatar %>"
onerror="this.style.display='none'"
>
<% } else { %>
<i class="fa-solid fa-user-group"></i>
<% } %>
</div>
<div class="flex flex-col min-w-0">
<div class="text-lg text-second-text-color ellipsis group-hover:!text-primary"><%= f.name %></div>
<div class="text-third-text-color ellipsis"><%= f.description %></div>
</div>
</div>
</div>
</a>
</li>
<% } %>
</ul>
<% } else { %>
<ul class="grid mb-6 gap-4 <%= theme.page_templates.friends_column === 3 ? "grid-cols-2 sm:grid-cols-3" : "grid-cols-2" %>">
<% for (const f of category.list) { %>
<li class="group transform scale-100 transition-transform duration-100 ease-linear active:scale-95">
<a href="<%= f.link %>">
<div class="flex flex-row items-center gap-1 sm:gap-2 overflow-hidden min-w-0 rounded-lg shadow-redefine-flat">
<div class="h-16 w-16 rounded-bl-lg bg-third-background-color">
<% if (f.avatar) { %>
<img class="rounded-l-lg h-16 w-16 max-w-none"
src="<%= f.avatar %>"
onerror="this.style.display='none'"
>
<% } else { %>
<i class="fa-solid fa-user-group"></i>
<% } %>
</div>
<div class="flex flex-col min-w-0">
<div class="text-lg text-second-text-color ellipsis group-hover:!text-primary"><%= f.name %></div>
<div class="text-third-text-color ellipsis"><%= f.description %></div>
</div>
</div>
</a>
</li>
<% } %>
</ul>
<% } %>
<% } %>
<div class="clear"></div>
</div>
<h1 class="text-[3.2rem] mt-1.5 mb-5 font-bold leading-[1]"><%= page.title %></h1>
<% for (const category of theme.links) { %>
<div class="mt-2 mb-4">
<h2 class="text-2xl font-bold"><%= category.links_category %></h2>
</div>
<% if (category.has_thumbnail == true) { %>
<ul class="grid grid-cols-2 mb-6 w-full gap-4">
<% for (const f of category.list) { %>
<li class="group transform scale-100 transition-transform duration-100 ease-linear active:scale-95">
<a href="<%= f.link %>">
<div class="content rounded-lg redefine-box-shadow-flat">
<div class="thumbnail rounded-t-lg h-32 md:h-44 overflow-hidden">
<img class="rounded-t-lg object-cover w-full h-full" src="<%= f.thumbnail %>" />
</div>
<div class="avainfo flex flex-row items-center gap-1 sm:gap-2 overflow-hidden min-w-0">
<div class="avatar h-16 w-16 rounded-bl-lg bg-third-background-color">
<% if (f.avatar) { %>
<img class="rounded-bl-lg h-16 w-16 max-w-none" src="<%= f.avatar %>" onerror="this.style.display='none'">
<% } else { %>
<i class="fa-solid fa-user-group"></i>
<% } %>
</div>
<div class="flex flex-col min-w-0">
<div class="text-lg text-second-text-color ellipsis group-hover:!text-primary"><%= f.name %></div>
<div class="text-third-text-color ellipsis"><%= f.description %></div>
</div>
</div>
</div>
</a>
</li>
<% } %>
</ul>
<% } else { %>
<ul class="grid mb-6 gap-4 <%= theme.page_templates.friends_column === 3 ? "grid-cols-2 sm:grid-cols-3" : "grid-cols-2" %>">
<% for (const f of category.list) { %>
<li class="group transform scale-100 transition-transform duration-100 ease-linear active:scale-95">
<a href="<%= f.link %>">
<div class="flex flex-row items-center gap-1 sm:gap-2 overflow-hidden min-w-0 rounded-lg shadow-redefine-flat">
<div class="h-16 w-16 rounded-bl-lg bg-third-background-color">
<% if (f.avatar) { %>
<img class="rounded-l-lg h-16 w-16 max-w-none" src="<%= f.avatar %>" onerror="this.style.display='none'">
<% } else { %>
<i class="fa-solid fa-user-group"></i>
<% } %>
</div>
<div class="flex flex-col min-w-0">
<div class="text-lg text-second-text-color ellipsis group-hover:!text-primary"><%= f.name %></div>
<div class="text-third-text-color ellipsis"><%= f.description %></div>
</div>
</div>
</a>
</li>
<% } %>
</ul>
<% } %>
<% } %>
<div class="clear"></div>
</div>
4 changes: 2 additions & 2 deletions layout/_widgets/image-viewer.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<div class="image-viewer-container">
<img src="">
</div>
<img src="">
</div>
45 changes: 19 additions & 26 deletions layout/_widgets/local-search.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,20 @@
<div class="search-pop-overlay">
<div class="popup search-popup">
<div class="search-header">
<span class="search-input-field-pre">
<i class="fa-solid fa-keyboard"></i>
</span>
<div class="search-input-container">
<input autocomplete="off"
autocorrect="off"
autocapitalize="off"
placeholder="<%= __('search') %>"
spellcheck="false"
type="search"
class="search-input"
>
</div>
<span class="popup-btn-close">
<i class="fa-solid fa-times"></i>
</span>
</div>
<div id="search-result">
<div id="no-result">
<i class="fa-solid fa-spinner fa-spin-pulse fa-5x fa-fw"></i>
</div>
</div>
</div>
</div>
<div class="popup search-popup">
<div class="search-header">
<span class="search-input-field-pre">
<i class="fa-solid fa-keyboard"></i>
</span>
<div class="search-input-container">
<input autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="<%= __('search') %>" spellcheck="false" type="search" class="search-input">
</div>
<span class="popup-btn-close">
<i class="fa-solid fa-times"></i>
</span>
</div>
<div id="search-result">
<div id="no-result">
<i class="fa-solid fa-spinner fa-spin-pulse fa-5x fa-fw"></i>
</div>
</div>
</div>
</div>
Loading

0 comments on commit fb31d33

Please sign in to comment.