feat(pages): 1:1 文档导航 + 文章归档 (zibll documentnav/archives)
Category accordion + AJAX cat/search posts for documentnav; archives month lists with view/comment/like meta, sidebar and comments shell.
This commit is contained in:
@@ -0,0 +1,83 @@
|
||||
/**
|
||||
* Archives page (zibll archives) styles.
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
.page-template-archives .content-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.page-template-archives .content-layout {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.page-template-archives .sidebar {
|
||||
flex: 0 0 300px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.archives-month-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 8px 8px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.archives-month-list .author-set-left {
|
||||
width: 3.2em;
|
||||
flex: 0 0 3.2em;
|
||||
padding: 6px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.archives-month-list .author-set-right {
|
||||
flex: 1 1 calc(100% - 3.5em);
|
||||
min-width: 0;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px dashed var(--main-border-color, rgba(0, 0, 0, 0.06));
|
||||
}
|
||||
|
||||
.archives-month-list .author-set-right a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.archives-month-list .author-set-right a:hover {
|
||||
color: var(--focus-color, var(--color-primary));
|
||||
}
|
||||
|
||||
.title-h-center {
|
||||
position: relative;
|
||||
padding-bottom: 8px;
|
||||
margin: 12px 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-h-center:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
bottom: 3px;
|
||||
width: 40px;
|
||||
height: 3px;
|
||||
border-radius: 5px;
|
||||
background: var(--theme-color, var(--color-primary));
|
||||
}
|
||||
|
||||
.ml6 {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.page-template-archives .sidebar {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,240 @@
|
||||
/**
|
||||
* Document navigation page (zibll documentnav) styles.
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
.page-template-documentnav .document-nav-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-template-documentnav .document-nav-aside {
|
||||
flex: 0 0 32%;
|
||||
max-width: 100%;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.page-template-documentnav .document-nav-main {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.document-nav .panel-group {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.document-nav .panel {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
border-top: 1px solid var(--main-border-color, #eee);
|
||||
}
|
||||
|
||||
.document-nav .panel-title {
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.document-nav .panel-toggle {
|
||||
padding: 10px;
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.document-nav .panel-toggle:not(.collapsed) {
|
||||
color: var(--focus-color, var(--color-primary));
|
||||
}
|
||||
|
||||
.document-nav .panel-toggle .fa {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.document-nav .panel-toggle:not(.collapsed) .fa {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.document-nav .panel-collapse {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.document-nav .panel-collapse.is-open,
|
||||
.document-nav .panel-collapse.in {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.document-nav .panel-child,
|
||||
.document-nav .category {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.document-nav .cat-load {
|
||||
padding: 10px;
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.document-nav > .panel-group > .cat-load {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.document-nav > .panel-group > .cat-load::before {
|
||||
content: '';
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
border: 0.1em solid var(--focus-color, var(--color-primary));
|
||||
border-radius: 1em;
|
||||
margin: 0 0.5em;
|
||||
vertical-align: 0.1em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.document-nav .cat-load.active {
|
||||
background: var(--main-border-color, rgba(0, 0, 0, 0.06));
|
||||
color: var(--focus-color, var(--color-primary));
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.document-nav .loading {
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
transition: 0.3s;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.document-nav .is-loading .loading,
|
||||
.document-nav .cat-load.is-loading .loading {
|
||||
width: 0.7em;
|
||||
opacity: 1;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.document-nav-container {
|
||||
transition: 0.3s;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.document-nav-container.is-loading {
|
||||
opacity: 0.55;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.document-search {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.document-search .line-form {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.document-search .line-form-input {
|
||||
width: 100%;
|
||||
border: 1px solid var(--main-border-color, #ddd);
|
||||
border-radius: 8px;
|
||||
padding: 10px 40px 10px 12px;
|
||||
box-sizing: border-box;
|
||||
background: var(--main-bg-color, #fff);
|
||||
}
|
||||
|
||||
.document-search .abs-right {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: var(--muted-2-color, #888);
|
||||
}
|
||||
|
||||
.document-search .search-loading {
|
||||
inset: 0;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
background: color-mix(in srgb, var(--main-bg-color, #fff) 88%, transparent);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.document-search.is-loading .search-loading {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
display: block;
|
||||
padding: 12px 14px;
|
||||
background: var(--main-bg-color, #fff);
|
||||
border-bottom: 1px solid var(--muted-border-color, #eee);
|
||||
color: var(--main-color, inherit);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.list-group-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
a.list-group-item:hover,
|
||||
a.list-group-item:focus {
|
||||
background: var(--body-bg-color, #f7f7f8);
|
||||
color: var(--focus-color, var(--color-primary));
|
||||
}
|
||||
|
||||
.list-group-item .pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.list-group-item .badg-sm {
|
||||
font-size: 12px;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.list-group-item .focus-color {
|
||||
color: var(--focus-color, var(--color-primary));
|
||||
}
|
||||
|
||||
.document-nav-container .pagenav a {
|
||||
display: inline-block;
|
||||
min-width: 32px;
|
||||
padding: 4px 8px;
|
||||
margin: 2px;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
background: var(--surface-2, #f0f0f0);
|
||||
}
|
||||
|
||||
.document-nav-container .pagenav a.current {
|
||||
background: var(--focus-color, var(--color-primary));
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.history-search .search_keywords {
|
||||
display: inline-block;
|
||||
margin: 0 6px 6px 0;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
background: var(--surface-2, #f0f0f0);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.page-template-documentnav .document-nav-aside,
|
||||
.page-template-documentnav .document-nav-main {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
/**
|
||||
* Document navigation AJAX (zibll page-template documentnav subset).
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
function ajaxUrl() {
|
||||
if (window.aksrtData && window.aksrtData.ajaxUrl) return window.aksrtData.ajaxUrl;
|
||||
return '/wp-admin/admin-ajax.php';
|
||||
}
|
||||
|
||||
function toast(msg, type) {
|
||||
if (window.aksrt && typeof window.aksrt.toast === 'function') {
|
||||
window.aksrt.toast(msg, type || 'info');
|
||||
return;
|
||||
}
|
||||
// eslint-disable-next-line no-alert
|
||||
window.alert(msg);
|
||||
}
|
||||
|
||||
function qs(sel, root) {
|
||||
return (root || document).querySelector(sel);
|
||||
}
|
||||
|
||||
function qsa(sel, root) {
|
||||
return Array.prototype.slice.call((root || document).querySelectorAll(sel));
|
||||
}
|
||||
|
||||
function documentAjax(triggerEl, data, url) {
|
||||
var container = qs('.document-nav-container');
|
||||
var searchBox = qs('.document-search');
|
||||
if (!container) return;
|
||||
|
||||
container.classList.add('is-loading');
|
||||
if (searchBox && data && data.search) searchBox.classList.add('is-loading');
|
||||
|
||||
data = data || {};
|
||||
data.one_cat = container.getAttribute('data-one-cat') || '';
|
||||
data.action = 'aksrt_documentnav_posts';
|
||||
|
||||
var body = new URLSearchParams();
|
||||
Object.keys(data).forEach(function (k) {
|
||||
if (data[k] !== undefined && data[k] !== null) body.append(k, data[k]);
|
||||
});
|
||||
|
||||
fetch(url || ajaxUrl(), {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
|
||||
body: body.toString(),
|
||||
})
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (n) {
|
||||
if (!n || n.error || !n.html) {
|
||||
toast((n && n.msg) || '加载失败，请重试', 'danger');
|
||||
}
|
||||
if (n && n.html) container.innerHTML = n.html;
|
||||
if (n && n.history_search) {
|
||||
var hist = qs('.history-search > div');
|
||||
if (hist) hist.innerHTML = n.history_search;
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
toast('网络错误', 'danger');
|
||||
})
|
||||
.finally(function () {
|
||||
container.classList.remove('is-loading');
|
||||
if (searchBox) searchBox.classList.remove('is-loading');
|
||||
if (triggerEl && triggerEl.classList) triggerEl.classList.remove('is-loading');
|
||||
});
|
||||
}
|
||||
|
||||
function initAccordion() {
|
||||
var nav = qs('.document-nav');
|
||||
if (!nav) return;
|
||||
nav.addEventListener('click', function (e) {
|
||||
var toggle = e.target.closest('.panel-toggle[data-toggle="collapse"]');
|
||||
if (!toggle) return;
|
||||
e.preventDefault();
|
||||
var targetSel = toggle.getAttribute('data-target');
|
||||
var panel = targetSel ? qs(targetSel, nav) : null;
|
||||
if (!panel) return;
|
||||
var parentSel = toggle.getAttribute('data-parent');
|
||||
if (parentSel) {
|
||||
var parent = qs(parentSel, nav);
|
||||
if (parent) {
|
||||
qsa('.panel-collapse.is-open, .panel-collapse.in', parent).forEach(function (p) {
|
||||
if (p !== panel) {
|
||||
p.classList.remove('is-open', 'in');
|
||||
var t = parent.querySelector('[data-target="#' + p.id + '"]');
|
||||
if (t) t.classList.add('collapsed');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
var open = panel.classList.contains('is-open') || panel.classList.contains('in');
|
||||
if (open) {
|
||||
panel.classList.remove('is-open', 'in');
|
||||
toggle.classList.add('collapsed');
|
||||
} else {
|
||||
panel.classList.add('is-open', 'in');
|
||||
toggle.classList.remove('collapsed');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initSearch() {
|
||||
var form = qs('.document-search-form');
|
||||
if (!form) return;
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
var input = form.querySelector('[name="s"]');
|
||||
var search = input ? String(input.value || '').trim() : '';
|
||||
if (!search.length) {
|
||||
toast('请输入搜索关键词', 'warning');
|
||||
return;
|
||||
}
|
||||
if (search.length < 2) {
|
||||
toast('关键词太短', 'warning');
|
||||
return;
|
||||
}
|
||||
qsa('.cat-load').forEach(function (el) {
|
||||
el.classList.remove('is-loading', 'active');
|
||||
});
|
||||
documentAjax(qs('.document-search'), { search: search });
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (e) {
|
||||
var kw = e.target.closest('.document-search .search_keywords');
|
||||
if (!kw) return;
|
||||
e.preventDefault();
|
||||
var text = (kw.textContent || '').trim();
|
||||
var input = qs('.document-search-form [name="s"]');
|
||||
if (input) {
|
||||
input.value = text;
|
||||
input.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
}
|
||||
if (form) form.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
|
||||
});
|
||||
}
|
||||
|
||||
function initCatLoad() {
|
||||
document.addEventListener('click', function (e) {
|
||||
var a = e.target.closest('.cat-load');
|
||||
if (!a) return;
|
||||
e.preventDefault();
|
||||
qsa('.cat-load').forEach(function (el) {
|
||||
el.classList.remove('is-loading', 'active');
|
||||
});
|
||||
a.classList.add('is-loading', 'active');
|
||||
var catId = a.getAttribute('data-cat-id') || a.getAttribute('cat-id') || '';
|
||||
documentAjax(a, { cat_id: catId });
|
||||
});
|
||||
}
|
||||
|
||||
function initPager() {
|
||||
document.addEventListener('click', function (e) {
|
||||
var a = e.target.closest('.document-nav-container .pagenav a');
|
||||
if (!a) return;
|
||||
e.preventDefault();
|
||||
var paged = a.getAttribute('data-paged') || '';
|
||||
var href = a.getAttribute('href') || '';
|
||||
if (paged) {
|
||||
// Prefer current context from last active cat or search.
|
||||
var active = qs('.cat-load.active');
|
||||
var searchInput = qs('.document-search-form [name="s"]');
|
||||
var data = { paged: paged };
|
||||
if (active) {
|
||||
data.cat_id = active.getAttribute('data-cat-id') || '';
|
||||
} else if (searchInput && searchInput.value) {
|
||||
data.search = searchInput.value.trim();
|
||||
}
|
||||
documentAjax(a, data);
|
||||
return;
|
||||
}
|
||||
if (href && href.indexOf('admin-ajax.php') !== -1) {
|
||||
documentAjax(a, {}, href);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function init() {
|
||||
if (!qs('.document-nav-container') && !qs('.document-nav')) return;
|
||||
initAccordion();
|
||||
initSearch();
|
||||
initCatLoad();
|
||||
initPager();
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user