Skip to content

feat: support left sidebar show category #621

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mohuishou wants to merge 3 commits into from
Closed

feat: support left sidebar show category #621

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ae6d6bd
feat: support left sidebar show category
mohuishou Dec 6, 2021
bde1c5b
fix: remove debug log
mohuishou Dec 6, 2021
d786f39
fix: remove debug comment
mohuishou Dec 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -649,6 +649,11 @@ post:
# The specified plugin needs to set the necessary parameters at the same time
# Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis
type: disqus

# 分类，是否展示左侧分类目录
# categories
categories:
enable: false


#---------------------------
Expand Down
70 changes: 70 additions & 0 deletions layout/_partial/categories.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<%
var orderBy = theme.category.order_by || 'name'
if (theme.category.order_by === 'weight') orderBy = order_by_weight
%>

<% function render_categories(cats, option) { %>
<% let { depth, showSubIcon, activeIds } = option %>
<% depth = depth || 0 %>
<% activeIds = activeIds || [] %>
<% return cats.each((cat) => { %>
<% var subCats = site.categories.find({parent: cat._id}).sort(orderBy).filter(cat => cat.length) %>
<% var collapsed = subCats.length === 0 || depth >= theme.category.collapse_depth %>
<% if(activeIds.includes(cat._id)) collapsed = false %>
<div class="<%= depth <= 0 ? 'category' : 'category-sub' %> row">
<a class="<%= depth <= 0 ? 'category-item' : 'category-subitem' -%>
<%= collapsed ? 'collapsed' : '' -%>
list-group-item category-item-action col-10 col-md-11 col-xm-11"
id="heading-<%= md5(cat.name) %>" role="tab" data-toggle="collapse" href="#collapse-<%= md5(cat.name) %>"
aria-expanded="<%= collapsed ? 'false' : 'true' %>"
>
<%= cat.name.trim() %><%= showSubIcon ? '' : `(${cat.posts.length})` %>
<i class="iconfont icon-arrowright"></i>
</a>
<% if(showSubIcon) { %>
<a href="<%= url_for(cat.path) %>" class="category-count col-2 col-md-1 col-xm-1">
<i class="iconfont icon-articles"></i>
<span><%= cat.posts.length %></span>
</a>
<% } %>
<div class="category-collapse collapse <%= collapsed ? '' : 'show' -%>" id="collapse-<%= md5(cat.name) %>" role="tabpanel" aria-labelledby="heading-<%= md5(cat.name) %>">
<% var posts = cat.posts.sort(theme.category.post_order_by || config.index_generator.order_by || '-date') %>
<% if (subCats.length > 0) { %>
<% var filteredPosts = posts.filter((p) => {
return p.categories.filter(catOnPost => catOnPost.parent === cat._id).length === 0;
}) %>
<%- render_posts(filteredPosts, cat, activeIds) %>
<% option.depth++ %>
<%- render_categories(subCats, option) %>
<% } else { %>
<%- render_posts(posts, cat, activeIds) %>
<% } %>
</div>
</div>
<% }) %>
<% } %>

<% function render_posts(posts, cat, activeIds) { %>
<div class="category-post-list">
<% var limit = theme.category.post_limit %>
<% for (var idx = 0; idx < posts.length; idx++) { %>
<% var post = posts.data[idx] %>
<% if (idx && limit && idx >= limit) { %>
<a href="<%= url_for(cat.path) %>" class="list-group-item list-group-item-action">
<span class="category-post">More...</span>
</a>
<% break %>
<% } else { %>
<a href="<%= url_for(post.path) %>"
class="list-group-item list-group-item-action
<%= activeIds.includes(post._id) ? 'active' : '' %>">
<span class="category-post"><%= post.title %></span>
</a>
<% } %>
<% } %>
</div>
<% } %>

<div class="category-list">
<%- render_categories(cats, option) %>
</div>
8 changes: 8 additions & 0 deletions layout/_partial/post-categories.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<%
var orderBy = theme.category.order_by || 'name'
var parent = page.categories.filter(c => !c.parent)
var activeIds = page.categories.map(c => c._id)
activeIds.push(page._id)
var option = { depth: 0, showSubIcon: false, activeIds: activeIds }
%>
<%- partial('_partial/categories', {cats: parent, option: option }) %>
54 changes: 1 addition & 53 deletions layout/categories.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,64 +5,12 @@ page.subtitle = theme.category.subtitle || __('category.subtitle')
page.banner_img = theme.category.banner_img
page.banner_img_height = theme.category.banner_img_height
page.banner_mask_alpha = theme.category.banner_mask_alpha

var orderBy = theme.category.order_by || 'name'
%>

<% function render_categories(cats, depth) { %>
<% depth = depth || 0 %>
<% return cats.each((cat) => { %>
<% var subCats = site.categories.find({parent: cat._id}).sort(orderBy).filter(cat => cat.length) %>
<% var collapsed = subCats.length === 0 || depth >= theme.category.collapse_depth %>
<div class="<%= depth <= 0 ? 'category' : 'category-sub' %> row">
<a
class="<%= depth <= 0 ? 'category-item' : 'category-subitem' %> <%= collapsed ? 'collapsed' : '' %> list-group-item category-item-action col-10 col-md-11"
id="heading-<%= md5(cat.name) %>" role="tab" data-toggle="collapse" href="#collapse-<%= md5(cat.name) %>"
aria-expanded="<%= collapsed ? 'false' : 'true' %>"
>
<%= cat.name %>
<i class="iconfont icon-arrowright"></i>
</a>
<a href="<%= url_for(cat.path) %>" class="category-count col-2 col-md-1">
<i class="iconfont icon-articles"></i>
<span><%= cat.posts.length %></span>
</a>
<div class="category-collapse collapse" id="collapse-<%= md5(cat.name) %>" role="tabpanel" aria-labelledby="heading-<%= md5(cat.name) %>">
<% var posts = cat.posts.sort(theme.category.post_order_by || config.index_generator.order_by || '-date') %>
<% if (subCats.length > 0) { %>
<% var filteredPosts = posts.filter((p) => {
return p.categories.filter(catOnPost => catOnPost.parent === cat._id).length === 0;
}) %>
<%- render_posts(filteredPosts, cat) %>
<%- render_categories(subCats, depth + 1) %>
<% } else { %>
<%- render_posts(posts, cat) %>
<% } %>
</div>
</div>
<% }) %>
<% } %>

<% function render_posts(posts, cat) { %>
<div class="category-post-list">
<% var limit = theme.category.post_limit %>
<% for (var idx = 0; idx < posts.length; idx++) { %>
<% var post = posts.data[idx] %>
<% if (idx && limit && idx >= limit) { %>
<a href="<%= url_for(cat.path) %>" class="list-group-item list-group-item-action">
<span class="category-post">More...</span>
</a>
<% break %>
<% } else { %>
<a href="<%= url_for(post.path) %>" class="list-group-item list-group-item-action">
<span class="category-post"><%= post.title %></span>
</a>
<% } %>
<% } %>
</div>
<% } %>

<div class="category-list">
<% cats = site.categories.find({parent: {$exists: false}}).sort(orderBy).filter(cat => cat.length) %>
<%- render_categories(cats) %>
<%- partial('_partial/categories', {cats: cats, option: {showSubIcon: true} }) %>
</div>
149 changes: 75 additions & 74 deletions layout/post.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,113 +1,114 @@
<%
page.banner_img = page.banner_img || theme.post.banner_img
<% page.banner_img = page.banner_img || theme.post.banner_img
page.banner_img_height = page.banner_img_height || theme.post.banner_img_height
page.banner_mask_alpha = page.banner_mask_alpha || theme.post.banner_mask_alpha
%>

<div class="container-fluid nopadding-x">
<div class="row nomargin-x">
<div class="d-none d-lg-block col-lg-2"></div>
<div class="d-none d-lg-block col-lg-2 post-categories">
<% if(page.show_category || (theme.post.categories.enable && page.show_category !== false)){ %>
<%- partial('_partial/post-categories') %>
<% } %>
</div>
<div class="col-lg-8 nopadding-x-md">
<div class="container nopadding-x-md" id="board-ctn">
<div class="py-5" id="board">
<article class="post-content mx-auto">
<!-- SEO header -->
<h1 style="display: none"><%= page.subtitle || page.title %></h1>
<h1 style="display: none;"><%= page.subtitle || page.title %></h1>
<% if(theme.post.updated && theme.post.updated.enable) { %>
<p class="note note-info">
<% if (theme.post.updated.relative) { %>
<%- theme.post.updated.content %><%- relative_date(page.updated, theme.post.meta.date.format) %>
<% } else { %>
<%- theme.post.updated.content %><%- date(page.updated, theme.post.meta.date.format) %>
<% } %>
</p>
<p class="note note-info">
<% if (theme.post.updated.relative) { %> <%-
theme.post.updated.content %><%- relative_date(page.updated,
theme.post.meta.date.format) %> <% } else { %> <%-
theme.post.updated.content %><%- date(page.updated,
theme.post.meta.date.format) %> <% } %>
</p>
<% } %>
<div class="markdown-body">
<%- page.content %>
</div>
<hr>
<hr />
<div>
<div class="post-metas mb-3">
<% if (page.categories && page.categories.length > 0) { %>
<div class="post-meta mr-3">
<i class="iconfont icon-category"></i>
<% page.categories.each(function(cate) { %>
<a class="hover-with-bg" href="<%= url_for(cate.path) %>"><%- cate.name %></a>
<% }) %>
</div>
<% } %>
<% if (page.tags && page.tags.length > 0 ) { %>
<div class="post-meta">
<i class="iconfont icon-tags"></i>
<% page.tags.each(function(tag) { %>
<a class="hover-with-bg" href="<%= url_for(tag.path) %>"><%- tag.name %></a>
<% }) %>
</div>
<div class="post-meta mr-3">
<i class="iconfont icon-category"></i>
<% page.categories.each(function(cate) { %>
<a class="hover-with-bg" href="<%= url_for(cate.path) %>"
><%- cate.name %></a
>
<% }) %>
</div>
<% } %> <% if (page.tags && page.tags.length > 0 ) { %>
<div class="post-meta">
<i class="iconfont icon-tags"></i>
<% page.tags.each(function(tag) { %>
<a class="hover-with-bg" href="<%= url_for(tag.path) %>"
><%- tag.name %></a
>
<% }) %>
</div>
<% } %>
</div>
<% if(theme.post.copyright.enable && theme.post.copyright.content && page.copyright !== false) { %>
<p class="note note-warning">
<% if (typeof page.copyright === 'string' && page.copyright !== '') { %>
<%- page.copyright %>
<% } else { %>
<%- theme.post.copyright.content %>
<% if(theme.post.copyright.enable && theme.post.copyright.content
&& page.copyright !== false) { %>
<p class="note note-warning">
<% if (typeof page.copyright === 'string' && page.copyright !==
'') { %> <%- page.copyright %> <% } else { %> <%-
theme.post.copyright.content %> <% } %>
</p>
<% } %> <% if(theme.post.prev_next.enable && !page.hide) { %>
<div class="post-prevnext">
<article class="post-prev col-6">
<% const prev = prev_post(page) %> <% if (prev) { %>
<a href="<%= url_for(prev.path) %>">
<i class="iconfont icon-arrowleft"></i>
<span class="hidden-mobile"><%- prev.title %></span>
<span class="visible-mobile"><%= __('post.pre') %></span>
</a>
<% } %>
</p>
<% } %>
<% if(theme.post.prev_next.enable && !page.hide) { %>
<div class="post-prevnext">
<article class="post-prev col-6">
<% const prev = prev_post(page) %>
<% if (prev) { %>
<a href="<%= url_for(prev.path) %>">
<i class="iconfont icon-arrowleft"></i>
<span class="hidden-mobile"><%- prev.title %></span>
<span class="visible-mobile"><%= __('post.pre') %></span>
</a>
<% } %>
</article>
<article class="post-next col-6">
<% const next = next_post(page) %>
<% if (next) { %>
<a href="<%= url_for(next.path) %>">
<span class="hidden-mobile"><%- next.title %></span>
<span class="visible-mobile"><%= __('post.next') %></span>
<i class="iconfont icon-arrowright"></i>
</a>
<% } %>
</article>
</div>
</article>
<article class="post-next col-6">
<% const next = next_post(page) %> <% if (next) { %>
<a href="<%= url_for(next.path) %>">
<span class="hidden-mobile"><%- next.title %></span>
<span class="visible-mobile"><%= __('post.next') %></span>
<i class="iconfont icon-arrowright"></i>
</a>
<% } %>
</article>
</div>
<% } %>
</div>

<% if(page.comments && theme.post.comments.enable) { %>
<!-- Comments -->
<article class="comments" id="comments">
<% if (typeof page.comment === 'string' && page.comment !== '') { %>
<% type = '_partial/comments/' + page.comment %>
<% } else { %>
<% type = '_partial/comments/' + theme.post.comments.type %>
<% } %>
<%- partial(type) %>
</article>
<!-- Comments -->
<article class="comments" id="comments">
<% if (typeof page.comment === 'string' && page.comment !== '') {
%> <% type = '_partial/comments/' + page.comment %> <% } else { %>
<% type = '_partial/comments/' + theme.post.comments.type %> <% }
%> <%- partial(type) %>
</article>
<% } %>
</article>
</div>
</div>
</div>
<% if(theme.post.toc.enable && page.toc !== false){ %>
<div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
<%- partial('_partial/toc') %>
</div>
<div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
<%- partial('_partial/toc') %>
</div>
<% } %>
</div>
</div>

<!-- Custom -->
<% if(theme.post.custom.enable && theme.post.custom.content && page.custom !== false) { %>
<div class="col-lg-7 mx-auto nopadding-x-md">
<div class="container custom post-custom mx-auto">
<%- page.custom || theme.post.custom.content %>
</div>
<% if(theme.post.custom.enable && theme.post.custom.content && page.custom !==
false) { %>
<div class="col-lg-7 mx-auto nopadding-x-md">
<div class="container custom post-custom mx-auto">
<%- page.custom || theme.post.custom.content %>
</div>
</div>
<% } %>
Loading