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:
kate522andClaude Opus 5 committed 2026-11-05 21:09:40 +08:00
1 parent 4c562428b4
commit f53cdd4dc8
7 files changed
+328 -402

No files matched your search

+79 -18
View File
@@ -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 {