feat(links): align the friends page layout and submit UI
- assemble the friends template with page header, search cover, content position, widget zones and comments - render the three page title styles and the tabbed search cover - restore card, category nav and submit modal markup for the friends page - add page content style support to the page editor - port the linked card, category nav and submit modal styles to the mobile and desktop breakpoints Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
4c562428b4
commit
f53cdd4dc8
7 files changed
+328
-402
No files matched your search
+149
-340
@@ -1,136 +1,96 @@
|
||||
/**
|
||||
* Jio 网址导航 — legacy links page shell/styles.
|
||||
* 友情链接页 — 页面主体、分类导航与提交表单。
|
||||
*
|
||||
* @package Jio
|
||||
*/
|
||||
|
||||
/* ---- cards ---- */
|
||||
.links-cat-header {
|
||||
.links-page-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.links-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: -5px;
|
||||
}
|
||||
|
||||
.links-box.links-style-image {
|
||||
flex-wrap: wrap;
|
||||
margin: calc(0px - var(--this-margin, 10px));
|
||||
margin-bottom: calc(20px - var(--this-margin, 10px));
|
||||
}
|
||||
|
||||
.links-cat-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.jio-links-submit-status {
|
||||
margin: 10px 0;
|
||||
font-size: 0.92em;
|
||||
}
|
||||
|
||||
.jio-links-submit-status.text-success {
|
||||
color: var(--c-green, #22a06b);
|
||||
}
|
||||
|
||||
.jio-links-submit-status.text-danger {
|
||||
color: var(--c-red, #ff5473);
|
||||
}
|
||||
|
||||
.jio-links-submit-status.text-muted {
|
||||
color: var(--muted-2-color);
|
||||
}
|
||||
|
||||
.links-card .avatar-dest {
|
||||
display: block;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.link-page-search-cover .page-mask {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Category nav sits inside the fixed-wrap column on desktop. */
|
||||
.links-page-container .links-cat-box .title-theme {
|
||||
position: relative;
|
||||
padding-left: 1.2em;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.links-page-container .links-cat-header {
|
||||
padding: 0 15px 10px;
|
||||
}
|
||||
|
||||
.links-box:not(.jio-panel):not(.links-style-simple):not(.links-style-image) {
|
||||
margin: -5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.links-box .links-card {
|
||||
padding: 10px 4px 10px 8px;
|
||||
min-width: 0;
|
||||
margin: 5px;
|
||||
width: calc(50% - 10px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.links-style-bigcard {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.links-box .links-card.big-card {
|
||||
padding: 20px 10px 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.links-box:not(.jio-panel) .links-card {
|
||||
background: var(--main-bg-color, var(--surface-1, #fff));
|
||||
}
|
||||
|
||||
.author-minicard.links-card {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 4px var(--main-shadow, rgba(0, 0, 0, 0.06));
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.author-minicard.links-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 14px var(--main-shadow, rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
.links-card a {
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.links-card .list-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.fixed-wrap .link-nav-box .nav {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.links-card .list-inline > li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.link-img {
|
||||
--this-size: 42px;
|
||||
width: var(--this-size);
|
||||
height: var(--this-size);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.link-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
.fixed-wrap .link-nav-box .nav > li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.links-card.big-card .link-img {
|
||||
--this-size: 58px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.links-card.big-card .link-img img {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.links-style-image {
|
||||
--link-img-size: 60px;
|
||||
--this-margin: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.links-style-image .link-img.link-only-img {
|
||||
margin: var(--this-margin);
|
||||
--this-size: var(--link-img-size);
|
||||
}
|
||||
|
||||
.links-style-image .link-img.link-only-img img {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* ---- fixed category nav ---- */
|
||||
.fixed-wrap .fixed-wrap-nav.jio-panel,
|
||||
.link-nav-box .jio-panel {
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
.fixed-wrap-nav .tab-nav-theme {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.link-nav-box .nav > li > a {
|
||||
.fixed-wrap .link-nav-box .nav > li > a {
|
||||
display: block;
|
||||
padding: 6px;
|
||||
color: var(--muted-2-color, #888);
|
||||
margin: 1px 0;
|
||||
font-size: 16px;
|
||||
color: var(--muted-2-color);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link-nav-box .nav > li > a:hover,
|
||||
.link-nav-box .nav > .active > a {
|
||||
color: var(--focus-color, var(--color-primary, #f04494));
|
||||
.fixed-wrap .link-nav-box .nav > li > a:hover {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.fixed-wrap .link-nav-box .nav > li:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.link-nav-submit,
|
||||
@@ -142,224 +102,7 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.links-page-container .title-theme {
|
||||
font-weight: 600;
|
||||
font-size: 1.15em;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.jio-links-submit-status {
|
||||
margin: 10px 0;
|
||||
font-size: 0.92em;
|
||||
}
|
||||
|
||||
.jio-links-logo-preview {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* ---- search cover ---- */
|
||||
.link-page-search-cover.page-cover {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-bottom: calc(25% + 100px);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.link-page-search-cover .fit-cover {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.link-page-search-cover .header-slider-search {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: min(560px, 92%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.link-page-search-cover .tab-nav-theme {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 8px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.link-page-search-cover .tab-nav-theme li a {
|
||||
opacity: 0.7;
|
||||
padding: 0 10px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link-page-search-cover .tab-nav-theme li a:hover,
|
||||
.link-page-search-cover .tab-nav-theme li.active a {
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.link-page-search-cover .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.link-page-search-cover .tab-pane.active,
|
||||
.link-page-search-cover .tab-pane.in.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.link-page-search-cover .line-form {
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.link-page-search-cover .line-form-input {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
padding: 8px 36px 8px 4px;
|
||||
}
|
||||
|
||||
.link-page-search-cover .abs-right {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.link-page-search-cover .abs-right button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: var(--muted-2-color, #666);
|
||||
}
|
||||
|
||||
.link-page-search-cover .header-slider-search-more {
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* ---- submit modal ---- */
|
||||
#submit-links-modal.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1050;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
#submit-links-modal.modal.is-open,
|
||||
#submit-links-modal.modal.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#submit-links-modal .modal-dialog {
|
||||
width: min(520px, 100%);
|
||||
max-height: 90vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#submit-links-modal .modal-content {
|
||||
background: var(--main-bg-color, #fff);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
#submit-links-modal .modal-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#submit-links-modal .close {
|
||||
float: right;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#submit-links-modal .preview-square {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border: 1px dashed var(--main-border-color, #ddd);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#submit-links-modal .preview-square img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#submit-links-modal .hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#submit-links-modal .form-control {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--main-border-color, #ddd);
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#submit-links-modal .row.gutters-5 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -5px;
|
||||
}
|
||||
|
||||
#submit-links-modal .col-sm-6,
|
||||
#submit-links-modal .col-sm-12 {
|
||||
padding: 0 5px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
#submit-links-modal .col-sm-6 {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- responsive grid ---- */
|
||||
@media (min-width: 992px) {
|
||||
.links-box .links-card {
|
||||
width: calc(25% - 10px);
|
||||
}
|
||||
|
||||
.site-layout-1 .links-box .links-card,
|
||||
.fluid-widget-wrap .links-box .links-card {
|
||||
width: calc(20% - 10px);
|
||||
}
|
||||
|
||||
.fluid-widget-wrap .links-box.links-style-bigcard .links-card,
|
||||
.site-layout-1 .links-box.links-style-bigcard .links-card {
|
||||
width: calc(16.6665% - 10px);
|
||||
}
|
||||
|
||||
.sidebar .links-box .links-card {
|
||||
width: calc(50% - 10px);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.fixed-wrap {
|
||||
position: relative;
|
||||
--fixed-width: 120px;
|
||||
@@ -374,9 +117,23 @@
|
||||
margin-left: calc(var(--fixed-width) + 15px);
|
||||
}
|
||||
|
||||
.fixed-wrap > .fixed-wrap-nav ~ .affix-clone {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fixed-wrap-nav.affix {
|
||||
position: sticky;
|
||||
top: 80px;
|
||||
position: fixed;
|
||||
left: auto;
|
||||
right: auto;
|
||||
transition: top 0.1s;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.links-box .links-card {
|
||||
width: calc(25% - 10px);
|
||||
margin: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fixed-wrap .tab-nav-theme.mini-scrollbar {
|
||||
@@ -395,21 +152,25 @@
|
||||
margin: 1px 0;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
color: var(--muted-2-color, #888);
|
||||
color: var(--muted-2-color);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fixed-wrap .tab-nav-theme.mini-scrollbar > li > a:hover {
|
||||
color: var(--main-color, var(--color-primary));
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.fixed-wrap .tab-nav-theme.mini-scrollbar > li.active > a {
|
||||
color: var(--focus-color, var(--color-primary));
|
||||
color: var(--focus-color);
|
||||
font-weight: 500;
|
||||
background: color-mix(in srgb, var(--focus-color, var(--color-primary)) 12%, transparent);
|
||||
border-radius: 6px;
|
||||
background: var(--focus-color-opacity05);
|
||||
border-radius: var(--mini-radius);
|
||||
}
|
||||
|
||||
.fixed-wrap .tab-nav-theme.mini-scrollbar > li::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.link-nav-submit {
|
||||
@@ -428,16 +189,21 @@
|
||||
|
||||
.link-nav-box > .jio-panel {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.link-nav-box:not(.affix) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.link-nav-box .nav {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
margin: 0 0 10px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
@@ -448,23 +214,66 @@
|
||||
}
|
||||
|
||||
.link-nav-box .nav > li > a {
|
||||
padding: 2px 6px;
|
||||
font-size: 1.05em;
|
||||
padding: 2px;
|
||||
font-size: 1.2em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.link-nav-box .nav > li > a:hover,
|
||||
.link-nav-box .nav > .active > a {
|
||||
background: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.links-box .links-card {
|
||||
width: calc(50% - 10px);
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.link-page-search-cover .tab-nav-theme li a {
|
||||
padding: 0 3px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.link-nav-box.affix-bottom,
|
||||
.link-nav-box.affix {
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
||||
.links-page-container .fixed-wrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
#submit-links-modal .preview-square {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#submit-links-modal .preview-square img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border: 1px dashed var(--main-border-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#submit-links-modal .edit-footer {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#submit-links-modal .modal-title .toggle-radius {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -30,6 +30,18 @@
|
||||
});
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
var modal = document.getElementById('submit-links-modal');
|
||||
if (!modal) return;
|
||||
if (window.jQuery) {
|
||||
window.jQuery(modal).modal('hide');
|
||||
return;
|
||||
}
|
||||
modal.classList.remove('show', 'in', 'is-open');
|
||||
modal.setAttribute('aria-hidden', 'true');
|
||||
document.body.classList.remove('modal-open');
|
||||
}
|
||||
|
||||
form.addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
if (button && button.disabled) return;
|
||||
@@ -70,11 +82,7 @@
|
||||
if (button) button.disabled = false;
|
||||
if (button) button.innerHTML = original;
|
||||
if (captcha) captcha.reset('friend_link', form);
|
||||
window.setTimeout(function () {
|
||||
var modal = document.getElementById('submit-links-modal');
|
||||
if (modal) modal.classList.remove('show', 'is-open');
|
||||
setStatus('', '');
|
||||
}, 1800);
|
||||
window.setTimeout(closeModal, 1800);
|
||||
}).catch(function (error) {
|
||||
setStatus(error.message || i18n.error || '提交失败,请重试', 'danger');
|
||||
if (button) {
|
||||
@@ -84,4 +92,12 @@
|
||||
if (captcha) captcha.reset('friend_link', form);
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
var dismiss = event.target.closest('#submit-links-modal [data-dismiss="modal"]');
|
||||
if (dismiss) {
|
||||
event.preventDefault();
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
})();
|
||||
+79
-18
@@ -110,7 +110,6 @@ if (!function_exists('jio_links_box')) :
|
||||
return '';
|
||||
}
|
||||
$type = in_array($type, ['card', 'bigcard', 'image', 'simple'], true) ? $type : 'card';
|
||||
$placeholder = get_template_directory_uri() . '/assets/img/placeholder.svg';
|
||||
$html = '';
|
||||
$i = 0;
|
||||
|
||||
@@ -151,8 +150,8 @@ if (!function_exists('jio_links_box')) :
|
||||
$blank = !empty($link['blank']) ? ' target="_blank"' : '';
|
||||
$dec = !empty($link['desc']) ? (string) $link['desc'] : '';
|
||||
$rel = $nofollow ? ' rel="nofollow noopener noreferrer"' : ' rel="noopener noreferrer"';
|
||||
$img_src = $src !== '' ? $src : $placeholder;
|
||||
$img = '<img' . jio_get_lazy_attr('lazy_other', $img_src, 'avatar') . ' alt="">';
|
||||
$img_src = $src !== '' ? $src : (function_exists('jio_get_lazy_thumb') ? jio_get_lazy_thumb() : '');
|
||||
$img = '<img' . jio_get_lazy_attr('lazy_other', $img_src, 'avatar', jio_get_lazy_thumb()) . ' alt="">';
|
||||
$data_dec = $dec !== ''
|
||||
? ' title="' . esc_attr($title) . '" data-content="' . esc_attr($dec) . '"'
|
||||
: ' data-content="' . esc_attr($title) . '"';
|
||||
@@ -256,7 +255,7 @@ if (!function_exists('jio_page_links_html')) :
|
||||
$offset_top = $is_mobile ? '-8' : '';
|
||||
$offset_bottom = $is_mobile ? '20' : '-30';
|
||||
$links_con = '<div class="fixed-wrap">'
|
||||
. '<div class="fixed-wrap-nav affix-header-sm affix link-nav-box tab-auto-center-sm" data-offset-top="' . esc_attr((string) $offset_top) . '" data-offset-bottom="' . esc_attr((string) $offset_bottom) . '">'
|
||||
. '<div class="fixed-wrap-nav affix-header-sm affix link-nav-box tab-auto-center-sm" offset-top="' . esc_attr((string) $offset_top) . '" offset-bottom="' . esc_attr((string) $offset_bottom) . '">'
|
||||
. '<div class="jio-panel"><ul class="nav list-inline scroll-x mini-scrollbar tab-nav-theme">' . $link_cat_nav . '</ul></div>'
|
||||
. $submit_nav
|
||||
. '</div><div class="fixed-wrap-content">' . $link_cat_con . $submit_con . '</div></div>';
|
||||
@@ -290,9 +289,64 @@ if (!function_exists('jio_page_links_html')) :
|
||||
}
|
||||
endif;
|
||||
|
||||
if (!function_exists('jio_links_page_header')) :
|
||||
/**
|
||||
* Render the links page title using the page header style setting.
|
||||
*/
|
||||
function jio_links_page_header(int $post_id = 0): string {
|
||||
$post_id = $post_id > 0 ? $post_id : (int) get_queried_object_id();
|
||||
if ($post_id <= 0) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$meta_style = (string) get_post_meta($post_id, 'page_header_style', true);
|
||||
if ($meta_style === 'not') {
|
||||
return '';
|
||||
}
|
||||
$style = $meta_style !== ''
|
||||
? $meta_style
|
||||
: (class_exists('\Jio\Settings\Settings')
|
||||
? (string) (\Jio\Settings\Settings::get_other_page_settings()['header_style'] ?? '')
|
||||
: '');
|
||||
if (!in_array($style, ['1', '2', '3'], true)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$title = (string) get_the_title($post_id);
|
||||
if ($title === '') {
|
||||
return '';
|
||||
}
|
||||
|
||||
if ($style === '1') {
|
||||
return '<div class="box-body notop"><h3 class="title-h-center text-center mt10">' . esc_html($title) . '</h3></div>';
|
||||
}
|
||||
if ($style === '2') {
|
||||
return '<div class="jio-panel"><div><h3 class="title-h-center text-center">' . esc_html($title) . '</h3></div></div>';
|
||||
}
|
||||
|
||||
$img = (string) get_the_post_thumbnail_url($post_id, 'full');
|
||||
if ($img === '') {
|
||||
$img = (string) get_post_meta($post_id, 'page_header_cover_img', true);
|
||||
}
|
||||
if ($img === '' && class_exists('\Jio\Settings\Settings')) {
|
||||
$img = (string) (\Jio\Settings\Settings::get_other_page_settings()['header_cover_img'] ?? '');
|
||||
}
|
||||
if ($img === '') {
|
||||
$img = get_template_directory_uri() . '/assets/img/user_t.jpg';
|
||||
}
|
||||
$placeholder = function_exists('jio_get_lazy_thumb') ? jio_get_lazy_thumb() : '';
|
||||
|
||||
return '<div class="page-cover theme-box radius8 main-shadow">'
|
||||
. '<img' . jio_get_lazy_attr('lazy_cover', $img, 'fit-cover no-scale', $placeholder) . ' alt="">'
|
||||
. '<div class="absolute page-mask"></div>'
|
||||
. '<div class="list-inline box-body abs-center text-center"><div class="title-h-center"><h3>' . esc_html($title) . '</h3></div></div>'
|
||||
. '</div>';
|
||||
}
|
||||
endif;
|
||||
|
||||
if (!function_exists('jio_link_get_search_cover')) :
|
||||
/**
|
||||
* Search cover with multi-engine tabs (legacy).
|
||||
* Search cover with multi-engine tabs.
|
||||
*/
|
||||
function jio_link_get_search_cover(int $post_id = 0): string {
|
||||
$post_id = $post_id > 0 ? $post_id : (int) get_queried_object_id();
|
||||
@@ -344,7 +398,7 @@ if (!function_exists('jio_link_get_search_cover')) :
|
||||
$cfg = $search_types_args[$k];
|
||||
$active = $i === 0 ? ' active' : '';
|
||||
$pane_id = 'link-page-' . $post_id . '-' . $k;
|
||||
$type_nav .= '<li class="' . esc_attr(trim($active)) . '"><a href="javascript:;" data-jio-tab-target="#' . esc_attr($pane_id) . '">'
|
||||
$type_nav .= '<li class="' . esc_attr(trim($active)) . '"><a data-toggle="tab" data-target="#' . esc_attr($pane_id) . '" href="javascript:;">'
|
||||
. esc_html($cfg['name']) . '</a></li>';
|
||||
$type_con .= '<div class="tab-pane' . ($i === 0 ? ' in active' : '') . '" id="' . esc_attr($pane_id) . '">'
|
||||
. '<form method="get" target="_blank" class="padding-10 search-form" action="' . esc_url($cfg['url']) . '">'
|
||||
@@ -376,12 +430,12 @@ if (!function_exists('jio_link_get_search_cover')) :
|
||||
$img = (string) ($other['header_cover_img'] ?? '');
|
||||
}
|
||||
if ($img === '') {
|
||||
$img = get_template_directory_uri() . '/assets/img/placeholder.svg';
|
||||
$img = get_template_directory_uri() . '/assets/img/user_t.jpg';
|
||||
}
|
||||
$src = get_template_directory_uri() . '/assets/img/placeholder.svg';
|
||||
$src = function_exists('jio_get_lazy_thumb') ? jio_get_lazy_thumb() : '';
|
||||
|
||||
$search = '<div class="header-slider-search abs-center"><div class="header-slider-search-more text-center before">'
|
||||
. '<div class="em14 font-bold mb10">' . esc_html($title) . '</div></div>'
|
||||
. '<div class="em14 font-bold mb10">' . esc_html((string) $title) . '</div></div>'
|
||||
. '<div class="search-input"><div class="flex jc"><ul class="list-inline scroll-x mini-scrollbar tab-nav-theme">' . $type_nav . '</ul></div>'
|
||||
. '<div class="tab-content">' . $type_con . '</div></div></div>';
|
||||
|
||||
@@ -399,17 +453,18 @@ if (!function_exists('jio_submit_links_modal')) :
|
||||
*/
|
||||
function jio_submit_links_modal(array $args = [], int $post_id = 0): string {
|
||||
$defaults = [
|
||||
'title' => __('申请入驻', 'jio'),
|
||||
'dec' => '',
|
||||
'sign' => true,
|
||||
'cats' => [],
|
||||
'title' => __('申请入驻', 'jio'),
|
||||
'dec' => '',
|
||||
'show_title' => true,
|
||||
'sign' => true,
|
||||
'cats' => [],
|
||||
];
|
||||
$args = array_merge($defaults, $args);
|
||||
$post_id = $post_id > 0 ? $post_id : (int) get_queried_object_id();
|
||||
$title = (string) $args['title'];
|
||||
$header = $title !== ''
|
||||
$header = $title !== '' && !empty($args['show_title'])
|
||||
? '<div class="mb20"><button type="button" class="close" data-dismiss="modal" aria-label="' . esc_attr__('关闭', 'jio') . '">'
|
||||
. '<i class="fa fas fa-times" aria-hidden="true"></i></button>'
|
||||
. '<svg class="ic-close" aria-hidden="true"><use xlink:href="#icon-close"></use></svg></button>'
|
||||
. '<b class="modal-title flex ac"><span class="toggle-radius mr10 b-theme"><i class="fa fas fa-edit" aria-hidden="true"></i></span>'
|
||||
. esc_html($title) . '</b></div>'
|
||||
: '';
|
||||
@@ -423,13 +478,19 @@ if (!function_exists('jio_submit_links_modal')) :
|
||||
if ($need_login) {
|
||||
$sign_url = function_exists('jio_get_login_url')
|
||||
? jio_get_login_url()
|
||||
: (function_exists('jio_get_sign_page_url') ? jio_get_sign_page_url('login') : wp_login_url());
|
||||
: (function_exists('jio_get_sign_page_url') ? jio_get_sign_page_url('signin') : wp_login_url());
|
||||
$registration_open = !class_exists('\Jio\Settings\Settings') || \Jio\Settings\Settings::registration_enabled();
|
||||
$body .= '<div class="muted-box text-center">';
|
||||
$body .= '<div class="mb20 muted-3-color">' . esc_html__('请先登录', 'jio') . '</div>';
|
||||
$body .= '<p><a href="' . esc_url($sign_url) . '" class="signin-loader but c-blue padding-lg">'
|
||||
. '<i class="fa fas fa-fw fa-sign-in-alt mr10" aria-hidden="true"></i>' . esc_html__('登录', 'jio') . '</a></p>';
|
||||
. '<i class="fa fas fa-fw fa-sign-in-alt mr10" aria-hidden="true"></i>' . esc_html__('登录', 'jio') . '</a>';
|
||||
if ($registration_open && function_exists('jio_get_register_url')) {
|
||||
$body .= '<a href="' . esc_url(jio_get_register_url()) . '" class="signup-loader ml10 but c-yellow padding-lg">'
|
||||
. '<i class="fa fas fa-fw fa-user-plus mr10" aria-hidden="true"></i>' . esc_html__('注册', 'jio') . '</a>';
|
||||
}
|
||||
$body .= '</p>';
|
||||
if (class_exists('\Jio\Auth\OAuth') && method_exists(\Jio\Auth\OAuth::get_instance(), 'render_social_buttons')) {
|
||||
$body .= (string) \Jio\Auth\OAuth::get_instance()->render_social_buttons(__('使用以下方式快速登录', 'jio'));
|
||||
$body .= (string) \Jio\Auth\OAuth::get_instance()->render_social_buttons();
|
||||
}
|
||||
$body .= '</div>';
|
||||
} else {
|
||||
|
||||
@@ -242,6 +242,10 @@ class PageAdminSet {
|
||||
$style = sanitize_key((string) wp_unslash($_POST['page_header_style']));
|
||||
update_post_meta($post_id, 'page_header_style', in_array($style, ['', 'not', '1', '2', '3'], true) ? $style : '');
|
||||
}
|
||||
if (isset($_POST['page_content_style'])) {
|
||||
$content_style = sanitize_key((string) wp_unslash($_POST['page_content_style']));
|
||||
update_post_meta($post_id, 'page_content_style', in_array($content_style, ['', 'not', 'nobox', 'full'], true) ? $content_style : '');
|
||||
}
|
||||
|
||||
$register = isset($_POST['widgets_register']) && $_POST['widgets_register'] === '1';
|
||||
update_post_meta($post_id, 'widgets_register', $register ? '1' : '');
|
||||
@@ -382,6 +386,18 @@ class PageAdminSet {
|
||||
'3' => __('封面图样式', 'jio'),
|
||||
],
|
||||
];
|
||||
$inputs[] = [
|
||||
'name' => __('内容样式', 'jio'),
|
||||
'id' => 'page_content_style',
|
||||
'std' => (string) get_post_meta($post_id, 'page_content_style', true),
|
||||
'type' => 'radio',
|
||||
'options' => [
|
||||
'' => __('默认', 'jio'),
|
||||
'not' => __('不显示', 'jio'),
|
||||
'nobox' => __('无背景', 'jio'),
|
||||
'full' => __('全屏无背景', 'jio'),
|
||||
],
|
||||
];
|
||||
$inputs[] = [
|
||||
'name' => __('模块布局', 'jio'),
|
||||
'id' => 'widgets_register',
|
||||
|
||||
@@ -8,63 +8,87 @@
|
||||
|
||||
defined('ABSPATH') || exit;
|
||||
|
||||
get_header();
|
||||
|
||||
$post_id = (int) get_queried_object_id();
|
||||
$settings = function_exists('jio_get_page_links_settings') ? jio_get_page_links_settings($post_id) : [];
|
||||
$links_html = function_exists('jio_page_links_html') ? jio_page_links_html($post_id) : '';
|
||||
$search_html = function_exists('jio_link_get_search_cover') ? jio_link_get_search_cover($post_id) : '';
|
||||
$has_sidebar = function_exists('jio_is_show_sidebar') ? jio_is_show_sidebar() : false;
|
||||
$content_style = sanitize_key((string) get_post_meta($post_id, 'page_content_style', true));
|
||||
if (!in_array($content_style, ['', 'not', 'nobox', 'full'], true)) {
|
||||
$content_style = '';
|
||||
}
|
||||
$content_style_class = $content_style !== '' ? ' page-content-' . $content_style : ' page-content-default';
|
||||
|
||||
get_header();
|
||||
|
||||
if (is_active_sidebar('page_top_fluid_' . $post_id)) {
|
||||
echo '<div class="fluid-widget-wrap">';
|
||||
dynamic_sidebar('page_top_fluid_' . $post_id);
|
||||
echo '</div>';
|
||||
}
|
||||
|
||||
if (function_exists('jio_archive_open_shell')) {
|
||||
jio_archive_open_shell([
|
||||
'main_class' => 'site-main container page-content-default',
|
||||
'has_sidebar' => false,
|
||||
'main_class' => 'site-main container' . $content_style_class,
|
||||
'has_sidebar' => $has_sidebar,
|
||||
'page_kind' => 'friends',
|
||||
]);
|
||||
}
|
||||
?>
|
||||
<div class="content-main content-main--page content-main--friends">
|
||||
<?php if (is_active_sidebar('page_top_content_' . $post_id)) : ?>
|
||||
<?php dynamic_sidebar('page_top_content_' . $post_id); ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php
|
||||
get_template_part('templates/parts/page-header', null, [
|
||||
'title' => esc_html__('友情链接', 'jio'),
|
||||
'desc' => __('与这些优秀的站点交换友链', 'jio'),
|
||||
]);
|
||||
echo $search_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- helper returns escaped markup.
|
||||
while (have_posts()) :
|
||||
the_post();
|
||||
echo function_exists('jio_links_page_header') ? jio_links_page_header($post_id) : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- helper returns escaped markup.
|
||||
echo function_exists('jio_link_get_search_cover') ? jio_link_get_search_cover($post_id) : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- helper returns escaped markup.
|
||||
|
||||
if (!empty($settings['content_s']) && ($settings['content_position'] ?? 'top') === 'top') {
|
||||
echo '<div class="zib-widget mb20"><article class="article content-main__body">';
|
||||
the_content();
|
||||
echo '</article></div>';
|
||||
}
|
||||
if (($settings['content_position'] ?? 'top') !== 'top') {
|
||||
echo function_exists('jio_page_links_html') ? jio_page_links_html($post_id) : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- helper returns escaped markup.
|
||||
}
|
||||
|
||||
echo $links_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- helper returns escaped markup.
|
||||
if (!empty($settings['content_s']) && $content_style !== 'not') {
|
||||
echo '<div class="jio-panel"><article class="article wp-posts-content">';
|
||||
the_content();
|
||||
wp_link_pages([
|
||||
'before' => '<p class="text-center post-nav-links radius8 padding-6">',
|
||||
'after' => '</p>',
|
||||
]);
|
||||
echo '</article></div>';
|
||||
}
|
||||
|
||||
if (!empty($settings['content_s']) && ($settings['content_position'] ?? 'top') !== 'top') {
|
||||
echo '<div class="zib-widget mb20"><article class="article content-main__body">';
|
||||
the_content();
|
||||
echo '</article></div>';
|
||||
}
|
||||
|
||||
if (!empty($settings['submit_s']) && !empty($settings['submit_title'])) {
|
||||
printf(
|
||||
'<p class="text-center" style="margin-top:24px;"><a class="padding-h10 hollow but c-theme btn-block" href="#submit-links-modal" data-toggle="modal">%s</a></p>',
|
||||
esc_html((string) $settings['submit_title'])
|
||||
);
|
||||
}
|
||||
if (($settings['content_position'] ?? 'top') === 'top') {
|
||||
echo function_exists('jio_page_links_html') ? jio_page_links_html($post_id) : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- helper returns escaped markup.
|
||||
}
|
||||
endwhile;
|
||||
?>
|
||||
|
||||
<?php if (is_active_sidebar('page_bottom_content_' . $post_id)) : ?>
|
||||
<?php dynamic_sidebar('page_bottom_content_' . $post_id); ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php comments_template(); ?>
|
||||
</div>
|
||||
<?php
|
||||
if (!empty($settings['submit_s'])) {
|
||||
echo jio_submit_links_modal([ // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- helper returns escaped markup.
|
||||
'title' => (string) ($settings['submit_title'] ?? ''),
|
||||
'dec' => (string) ($settings['submit_dec'] ?? ''),
|
||||
'sign' => !empty($settings['submit_sign_s']),
|
||||
'cats' => (array) ($settings['submit_cats'] ?? []),
|
||||
'title' => (string) ($settings['submit_title'] ?? ''),
|
||||
'dec' => (string) ($settings['submit_dec'] ?? ''),
|
||||
'show_title' => true,
|
||||
'sign' => !empty($settings['submit_sign_s']),
|
||||
'cats' => (array) ($settings['submit_cats'] ?? []),
|
||||
], $post_id);
|
||||
}
|
||||
|
||||
if (function_exists('jio_archive_close_shell')) {
|
||||
jio_archive_close_shell(['has_sidebar' => false]);
|
||||
jio_archive_close_shell(['has_sidebar' => $has_sidebar]);
|
||||
}
|
||||
|
||||
if (is_active_sidebar('page_bottom_fluid_' . $post_id)) {
|
||||
echo '<div class="fluid-widget-wrap">';
|
||||
dynamic_sidebar('page_bottom_fluid_' . $post_id);
|
||||
echo '</div>';
|
||||
}
|
||||
|
||||
get_footer();
|
||||
@@ -294,7 +294,7 @@ test('the top-nav user popover reproduces the reference quick-login block', () =
|
||||
// Callers append the block verbatim — no hand-rolled separator or wrapper.
|
||||
assert.match(header, /render_social_buttons\(__\('快速登录', 'jio'\)\)/);
|
||||
assert.doesNotMatch(header, /social-separator|social_loginbar/);
|
||||
assert.match(links, /render_social_buttons\(__\('使用以下方式快速登录', 'jio'\)\)/);
|
||||
assert.match(links, /render_social_buttons\(\)/);
|
||||
assert.doesNotMatch(links, /social_loginbar/);
|
||||
|
||||
// The retired .social-login-divider / .oauth-row / .oauth-btn markup and its
|
||||
|
||||
@@ -53,11 +53,11 @@ test('the user center and public user home keep their legacy rounded-square avat
|
||||
assert.doesNotMatch(userHome, /\.jio-author-hero__avatar img\s*\{[^}]*--radius-avatar/s);
|
||||
});
|
||||
|
||||
test('link page cards keep their circular logo frames', () => {
|
||||
const links = read('assets/css/routes/links.css');
|
||||
test('link page cards keep their legacy logo frames', () => {
|
||||
const main = read('assets/css/main.css');
|
||||
|
||||
assert.match(links, /\.links-card\.big-card \.link-img img\s*\{[^}]*border-radius:\s*100px/s);
|
||||
assert.match(links, /\.link-img\s*\{[^}]*width:\s*var\(--this-size\)/s);
|
||||
assert.match(main, /\.links-card\.big-card \.link-img img\s*\{[^}]*border-radius:\s*100px/s);
|
||||
assert.match(main, /\.link-img img\s*\{[^}]*border-radius:\s*4px/s);
|
||||
});
|
||||
|
||||
test('the user card name row can shrink once the VIP icon joins the badge row', () => {
|
||||
|
||||
Reference in new issue
Block a user