kate522/wordpress-theme-aksrt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): replace article system with Zibll 9.0

Browse Source
This commit is contained in:
kate522 committed 2026-08-18 16:06:47 +08:00
1 parent 2881c69e9c
commit 0f2ac6c34a
69 files changed
+2603 -4163
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

inc/helpers/posts-renderer/markup.php
+131 -276
View File
@@ -1,6 +1,6 @@
<?php
/**
* Shared post renderer helpers.
* Zibll 9.0 article-list DOM contract.
*
* @package AKSRT
*/
@@ -8,351 +8,206 @@
defined('ABSPATH') || exit;
if (!function_exists('aksrt_renderer_list')) {
/**
* Render a horizontal list card.
*
* @param array<string,mixed> $data Collected post data.
* @param array<string,mixed> $cfg Renderer config.
* @return string
*/
function aksrt_renderer_list(array $data, array $cfg): string {
$classes = ['posts-item', 'list', 'ajax-item', 'flex', 'posts-item--' . ($cfg['card_style'] ?: 'standard')];
if ($cfg['style'] !== '' && $cfg['style'] !== 'default') {
$classes[] = $cfg['style'];
}
if ($cfg['style'] === 'style2') {
$classes[] = 'xx';
$classes = ['posts-item', 'list', 'ajax-item'];
if ((string) ($cfg['style'] ?? '') !== '') {
$classes[] = (string) $cfg['style'];
}
if (!empty($data['is_mult_thumb'])) {
$classes[] = 'mult-thumb';
}
if ($cfg['context'] === 'home') {
$classes[] = 'posts-item--home-list';
}
if (empty($data['has_img'])) {
if (!empty($data['is_no_thumb'])) {
$classes[] = 'no-thumb';
}
if (($cfg['list_show_type'] ?? 'separate') === 'no_margin') {
$classes[] = 'no-margin';
if (!empty($cfg['no_margin'])) {
$classes[] = 'no_margin';
}
$classes[] = ($cfg['style'] ?? '') === 'style2' ? 'flex xx' : 'flex';
$title = '<h2 class="item-heading' . (!empty($cfg['heading_bold']) ? ' font-bold' : '') . '"><a' . (!empty($cfg['target_blank']) ? ' target="_blank"' : '') . ' href="' . esc_url((string) $data['permalink']) . '">' . aksrt_renderer_title_markup($data, $cfg) . '</a></h2>';
$excerpt_class = ($cfg['style'] ?? '') === 'style2' ? 'text-ellipsis-2' : 'text-ellipsis';
$excerpt = '<div class="item-excerpt muted-color ' . $excerpt_class . ' mb6">' . aksrt_renderer_excerpt_markup($data, $cfg) . '</div>';
$thumb = aksrt_renderer_thumb($data, $cfg);
$mult = aksrt_renderer_mult_thumb($data);
if (!empty($data['is_mult_thumb'])) {
// Zibll's multi-image mode replaces the primary graphic; both must
// never be emitted for the same list item.
$thumb = '';
$mult = aksrt_renderer_mult_thumb($data, $cfg);
$graphic = '';
if ($thumb !== '' && empty($data['is_mult_thumb'])) {
$graphic = '<div class="post-graphic' . (($cfg['img_position'] ?? 'left') === 'right' ? ' order1' : '') . '">' . $thumb . '</div>';
}
if ($cfg['card_style'] === 'text' || ($cfg['card_style'] === 'thumb_if_has' && empty($data['has_img']))) {
$thumb = '';
$mult = '';
$classes[] = 'no-thumb';
$classes[] = 'posts-item--text';
}
$title_markup = aksrt_renderer_title_markup($data, $cfg);
$excerpt_markup = aksrt_renderer_excerpt_markup($data, $cfg);
$badges = aksrt_renderer_badges($data, $cfg);
$meta = aksrt_renderer_meta($data, $cfg);
$target_attr = !empty($cfg['target_blank']) ? ' target="_blank"' : '';
$heading_cls = !empty($cfg['heading_bold']) ? 'item-heading item-heading--bold' : 'item-heading';
$title_html = '<h2 class="' . $heading_cls . '"><a href="' . esc_url($data['permalink']) . '" rel="bookmark"' . $target_attr . '>' . $title_markup . '</a></h2>';
$excerpt_html = $cfg['show_excerpt'] && $excerpt_markup !== ''
? '<p class="item-excerpt">' . $excerpt_markup . '</p>'
: '';
$html = '<article ' . aksrt_renderer_article_attrs($classes, $data) . '>';
if ($cfg['style'] === 'style2') {
$html .= $title_html;
$html .= '<div class="flex">';
$html .= $thumb;
$html .= '<div class="item-body flex xx flex1 jsb">';
$html .= $mult ?: $excerpt_html;
$html .= $badges;
$html .= $meta;
$html .= '</div></div>';
$meta = aksrt_renderer_meta($data, $cfg, false);
$html = '<posts class="' . esc_attr(implode(' ', $classes)) . '">';
if (($cfg['style'] ?? '') === 'style2') {
$html .= $title . '<div class="flex">' . $graphic . '<div class="item-body flex xx flex1 jsb">';
$html .= $mult !== '' ? $mult : $excerpt;
$html .= $badges . $meta . '</div></div>';
} else {
$html .= $thumb;
$html .= '<div class="item-body flex xx flex1 jsb">';
$html .= $title_html;
$html .= $mult ?: $excerpt_html;
$html .= '<div>' . $badges . $meta . '</div>';
$html .= '</div>';
$html .= $graphic . '<div class="item-body flex xx flex1 jsb">' . $title;
$html .= $mult !== '' ? $mult : $excerpt;
$html .= '<div>' . $badges . $meta . '</div></div>';
}
$html .= '</article>';
return $html;
return $html . '</posts>';
}
}
if (!function_exists('aksrt_renderer_card')) {
/**
* Render a vertical card or CMS resource card.
*
* @param array<string,mixed> $data Collected post data.
* @param array<string,mixed> $cfg Renderer config.
* @return string
*/
function aksrt_renderer_card(array $data, array $cfg): string {
$classes = ['posts-item', 'card', 'ajax-item', 'posts-item--' . ($cfg['card_style'] ?: 'standard')];
if ($cfg['style'] !== '' && $cfg['style'] !== 'default') {
$classes[] = $cfg['style'];
}
if ($cfg['context'] === 'home') {
$classes[] = 'posts-item--home';
}
if ($cfg['mode'] === 'grid-cms') {
$classes[] = 'posts-item--cms';
}
if (!empty($data['is_mult_thumb'])) {
$classes[] = 'mult-thumb';
}
if (empty($data['has_img'])) {
$classes[] = 'no-thumb';
$classes = ['posts-item', 'card', 'ajax-item'];
if ((string) ($cfg['style'] ?? '') !== '') {
$classes[] = (string) $cfg['style'];
}
$title = '<h2 class="item-heading' . (!empty($cfg['heading_bold']) ? ' font-bold' : '') . '"><a' . (!empty($cfg['target_blank']) ? ' target="_blank"' : '') . ' href="' . esc_url((string) $data['permalink']) . '">' . aksrt_renderer_title_markup($data, $cfg) . '</a></h2>';
$thumb = aksrt_renderer_thumb($data, $cfg);
$badges = aksrt_renderer_badges($data, $cfg);
$resource_strip = aksrt_renderer_resource_strip($data);
$meta = aksrt_renderer_meta($data, $cfg);
$title_markup = aksrt_renderer_title_markup($data, $cfg);
$html = '<article ' . aksrt_renderer_article_attrs($classes, $data) . '>';
$html .= $thumb;
$html .= '<div class="item-body">';
$target_attr = !empty($cfg['target_blank']) ? ' target="_blank"' : '';
$heading_cls = !empty($cfg['heading_bold']) ? 'item-heading item-heading--bold' : 'item-heading';
$html .= '<h2 class="' . $heading_cls . '"><a href="' . esc_url($data['permalink']) . '" rel="bookmark"' . $target_attr . '>' . $title_markup . '</a></h2>';
$html .= $badges;
if ($cfg['mode'] === 'grid-cms') {
$html .= $resource_strip;
}
$html .= $meta;
$html .= '</div></article>';
return $html;
$html = '<posts class="' . esc_attr(implode(' ', $classes)) . '">';
$html .= aksrt_renderer_thumb($data, $cfg);
$html .= '<div class="item-body">' . $title;
$html .= aksrt_renderer_badges($data, $cfg);
$html .= aksrt_renderer_meta($data, $cfg, true);
return $html . '</div></posts>';
}
}
if (!function_exists('aksrt_renderer_mini')) {
/**
* Render a compact mini card.
*
* @param array<string,mixed> $data Collected post data.
* @param array<string,mixed> $cfg Renderer config.
* @return string
*/
function aksrt_renderer_mini(array $data, array $cfg): string {
$classes = ['posts-mini'];
if (!empty($cfg['extra_class'])) {
$classes[] = $cfg['extra_class'];
function aksrt_renderer_mini(array $data, array $cfg = []): string {
$target = !empty($cfg['target_blank']) ? ' target="_blank"' : '';
$thumb = '';
$show_thumb = !array_key_exists('show_thumb', $cfg) || !empty($cfg['show_thumb']);
$show_meta = !array_key_exists('show_meta', $cfg) || !empty($cfg['show_meta']);
if ($show_thumb && (string) $data['primary'] !== '') {
$default_attr = empty($data['has_real']) ? ' data-thumb="default"' : '';
$thumb = '<div class="mr10"><div class="item-thumbnail"><a' . $target . ' href="' . esc_url((string) $data['permalink']) . '"><img' . $default_attr . aksrt_get_lazy_attr('lazy_posts_thumb', (string) $data['primary'], 'fit-cover radius8') . ' alt="' . esc_attr((string) $data['title']) . '"></a></div></div>';
}
if (empty($data['has_img'])) {
$classes[] = 'posts-mini--no-thumb';
$number = '';
if (!empty($cfg['show_number'])) {
$number_value = max(1, (int) ($cfg['number_offset'] ?? 1));
$colors = ['c-red', 'c-yellow', 'c-purple', 'c-blue', 'c-green'];
$number_class = $colors[$number_value - 1] ?? '';
$number = '<span class="badg badg-sm mr3 ' . esc_attr($number_class) . '">' . $number_value . '</span>';
}
$number_html = '';
if ($cfg['show_number'] && $cfg['number_offset'] > 0) {
$badge_colors = ['c-red', 'c-yellow', 'c-orange', 'c-blue', 'c-green'];
$index = $cfg['number_offset'] - 1;
$color = $badge_colors[$index] ?? '';
$number_html = '<span class="badg badg-sm mr3 ' . esc_attr($color) . '">' . (int) $cfg['number_offset'] . '</span>';
$title_class = $show_thumb ? ' text-ellipsis-2' : ' text-ellipsis' . (!$show_meta && empty($cfg['show_number']) ? ' icon-circle' : '');
$title = esc_html((string) $data['title']);
if ((string) ($data['subtitle'] ?? '') !== '') {
$title .= '<span class="focus-color">' . esc_html((string) $data['subtitle']) . '</span>';
}
$thumb_html = '';
$target_attr = !empty($cfg['target_blank']) ? ' target="_blank"' : '';
if ($cfg['show_thumb'] && !empty($data['has_img'])) {
$fit_class = !empty($cfg['thumb_fit']) && $cfg['thumb_fit'] === 'contain' ? 'fit-contain' : 'fit-cover';
$thumb_attr = aksrt_get_lazy_attr('lazy_posts_thumb', (string) $data['img_url'], $fit_class);
$thumb_img = '<img' . $thumb_attr . ' alt="' . esc_attr($data['title']) . '">';
$thumb_html = '<a href="' . esc_url($data['permalink']) . '" class="item-thumbnail" aria-label="' . esc_attr($data['title']) . '"' . $target_attr . '>' . $thumb_img . '</a>';
$meta = '';
if ($show_meta) {
$show_time = !empty($cfg['show_time']);
if (!empty($cfg['show_author'])) {
$author_value = $show_time ? (string) $data['time_ago'] : (string) $data['author_name'];
$meta_left = '<item class="meta-author flex ac"><img class="avatar-mini" src="' . esc_url((string) $data['avatar_url']) . '" alt="" width="20" height="20"><span class="ml6">' . esc_html($author_value) . '</span></item>';
} else {
$meta_left = $show_time ? '<item title="' . esc_attr((string) $data['time_title']) . '" class="icon-circle mln3">' . esc_html((string) $data['time_ago']) . '</item>' : '';
}
$pay = aksrt_renderer_pay_badge($data, true);
if ($meta_left === '') {
$meta_left = $pay;
$pay = '';
}
if ($meta_left === '') {
$meta_left = '<item></item>';
}
$meta_right = $pay . '<item class="meta-view">' . aksrt_renderer_svg_icon('view') . esc_html(aksrt_renderer_meta_number((int) $data['views'])) . '</item>';
$meta = '<div class="item-meta muted-2-color flex jsb ac' . (!$show_thumb ? ' mt6' : '') . '">' . $meta_left . '<div class="meta-right">' . $meta_right . '</div></div>';
}
$heading_class = 'item-heading' . (!empty($cfg['heading_bold']) ? ' item-heading--bold' : '') . (!empty($data['has_img']) ? ' text-ellipsis-2' : ' text-ellipsis');
$title_html = '<h2 class="' . esc_attr($heading_class) . '">' . $number_html . '<a href="' . esc_url($data['permalink']) . '"' . $target_attr . '>' . aksrt_renderer_title_markup($data, $cfg) . '</a></h2>';
$html = '<div class="' . esc_attr(implode(' ', array_unique($classes))) . '">';
$html .= $thumb_html;
$html .= '<div class="posts-mini-con flex xx flex1 jsb">';
$html .= $title_html;
$html .= aksrt_renderer_meta($data, $cfg);
$html .= '</div></div>';
return $html;
$class = trim('posts-mini ' . (string) ($cfg['class'] ?? ''));
return '<div class="' . esc_attr($class) . '">' . $thumb . '<div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading' . esc_attr($title_class) . '">' . $number . '<a' . $target . ' href="' . esc_url((string) $data['permalink']) . '">' . $title . '</a></h2>' . $meta . '</div></div>';
}
}
if (!function_exists('aksrt_render_post')) {
/**
* Render one post item inside a loop.
*
* @param array<string,mixed> $config Renderer config overrides.
* @return string
*/
function aksrt_render_post(array $config = []): string {
$cfg = aksrt_renderer_config($config);
function aksrt_render_post(array $args = []): string {
$cfg = aksrt_renderer_config($args);
$data = aksrt_renderer_collect_post_data($cfg);
if (empty($data)) {
if (!$data) {
return '';
}
switch ($cfg['mode']) {
case 'card':
case 'grid-cms':
return aksrt_renderer_card($data, $cfg);
case 'mini':
return aksrt_renderer_mini($data, $cfg);
case 'list':
default:
return aksrt_renderer_list($data, $cfg);
}
return ($cfg['mode'] ?? 'list') === 'card'
? aksrt_renderer_card($data, $cfg)
: aksrt_renderer_list($data, $cfg);
}
}
if (!function_exists('aksrt_render_post_list')) {
/**
* Render a query loop with the unified renderer.
* Render the canonical article stream.
*
* @param WP_Query|null $query Posts query. Falls back to global loop.
* @param array<string,mixed> $config Renderer config overrides.
* @param bool $echo Whether to echo output.
* @return string
* @param array<string,mixed> $args Zibll-shaped list arguments.
* @param WP_Query|null $query Optional custom query.
*/
function aksrt_render_post_list(?WP_Query $query = null, array $config = [], bool $echo = true): string {
$cfg = aksrt_renderer_config($config);
$wrapper_classes = ['posts-row', 'ajaxpager'];
if ($cfg['context'] === 'home') {
$wrapper_classes[] = 'aksrt-homepage__posts';
$wrapper_classes[] = 'post-grid';
$wrapper_classes[] = 'post-grid--home';
} elseif ($cfg['mode'] !== 'mini') {
$wrapper_classes[] = 'post-grid';
$wrapper_classes[] = 'post-grid--' . $cfg['mode'];
function aksrt_render_post_list(array $args = [], ?WP_Query $query = null, bool $echo = true): string {
$cfg = aksrt_renderer_config($args);
$has_posts = $query instanceof WP_Query ? $query->have_posts() : have_posts();
if (!$has_posts) {
$html = aksrt_get_null(__('暂无内容', 'aksrt'), 100, 'null-post.svg');
if ($echo) {
echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
return '';
}
return $html;
}
if (!empty($config['wrapper_class']) && is_string($config['wrapper_class'])) {
foreach (preg_split('/\s+/', trim($config['wrapper_class'])) as $extra_class) {
$extra_class = sanitize_html_class($extra_class);
if ($extra_class !== '') {
$wrapper_classes[] = $extra_class;
}
$classes = ['posts-row', 'ajaxpager'];
foreach (preg_split('/\s+/', trim((string) ($cfg['wrapper_class'] ?? ''))) ?: [] as $class) {
$class = sanitize_html_class($class);
if ($class !== '') {
$classes[] = $class;
}
}
$wrapper_attr = 'class="' . esc_attr(implode(' ', array_unique($wrapper_classes))) . '"';
if ($cfg['columns'] > 1) {
$wrapper_attr .= ' style="--aksrt-widget-columns:' . (int) $cfg['columns'] . '"';
}
$data_view = in_array($cfg['mode'], ['card', 'grid-cms'], true) ? 'card' : $cfg['mode'];
// Homepage panel already provides .posts-row.ajaxpager — allow callers to skip nesting.
$skip_wrapper = !empty($config['skip_wrapper']);
$html = '';
$html = empty($cfg['skip_wrapper'])
? '<div class="' . esc_attr(implode(' ', array_unique($classes))) . '" data-view="' . esc_attr((string) $cfg['mode']) . '">'
: '';
if ($query instanceof WP_Query) {
if (!$query->have_posts()) {
$html = '<div class="no-results"><p>' . esc_html__('暂无文章', 'aksrt') . '</p></div>';
} else {
if (!$skip_wrapper) {
$html .= '<div ' . $wrapper_attr . ' data-view="' . esc_attr($data_view) . '">';
}
$number = $cfg['number_offset'];
while ($query->have_posts()) {
$query->the_post();
if ($cfg['mode'] === 'mini' && $cfg['show_number']) {
$number++;
$config['number_offset'] = $number;
$cfg = aksrt_renderer_config($config);
}
$html .= aksrt_render_post($cfg);
}
if (!$skip_wrapper) {
$html .= '</div>';
}
while ($query->have_posts()) {
$query->the_post();
$html .= aksrt_render_post($cfg);
}
wp_reset_postdata();
} else {
if (!have_posts()) {
$html = '<div class="no-results"><p>' . esc_html__('暂无文章', 'aksrt') . '</p></div>';
} else {
if (!$skip_wrapper) {
$html .= '<div ' . $wrapper_attr . ' data-view="' . esc_attr($data_view) . '">';
}
while (have_posts()) {
the_post();
$html .= aksrt_render_post($cfg);
}
if (!$skip_wrapper) {
$html .= '</div>';
}
while (have_posts()) {
the_post();
$html .= aksrt_render_post($cfg);
}
}
if (empty($cfg['skip_wrapper'])) {
$html .= '</div>';
}
if ($echo) {
echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
return '';
}
return $html;
}
}
if (!function_exists('aksrt_render_mini_list')) {
/**
* Convenience wrapper for mini lists.
*
* @param WP_Query $query Posts query.
* @param array<string,mixed> $config Renderer config overrides.
* @param bool $echo Whether to echo output.
* @return string
*/
function aksrt_render_mini_list(WP_Query $query, array $config = [], bool $echo = true): string {
$config['mode'] = 'mini';
return aksrt_render_post_list($query, $config, $echo);
function aksrt_render_mini_list(WP_Query $query, array $args = [], bool $echo = true): string {
$cfg = aksrt_renderer_config($args);
$html = '';
$number = max(0, (int) ($args['number_offset'] ?? 0));
while ($query->have_posts()) {
$query->the_post();
$data = aksrt_renderer_collect_post_data($cfg);
if (!$data) {
continue;
}
$number++;
$html .= aksrt_renderer_mini($data, array_merge($cfg, ['number_offset' => $number]));
}
wp_reset_postdata();
if ($echo) {
echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
return '';
}
return $html;
}
}
if (!function_exists('aksrt_render_placeholder')) {
/**
* Render skeleton placeholders for loading states.
*
* @param string $mode list|card|mini.
* @param int $count Number of placeholders.
* @return string
*/
function aksrt_render_placeholder(string $mode = 'list', int $count = 3): string {
$count = max(1, min(12, $count));
$html = '';
if ($mode === 'card') {
$item = '<div class="posts-item card"><div class="item-thumbnail"><div class="radius8 item-thumbnail placeholder"></div></div>'
. '<div class="item-body"><h2 class="item-excerpt placeholder t1 item-heading"></h2>'
. '<p class="mt10 placeholder k2"></p>'
. '<i class="flex jsb"><i class="placeholder s1"></i><i class="placeholder s1 ml10"></i></i></div></div>';
$html = str_repeat($item, $count);
} elseif ($mode === 'mini') {
$item = '<div class="posts-mini"><div class="item-thumbnail"><div class="radius8 placeholder"></div></div>'
. '<div class="posts-mini-con"><div class="placeholder t1"></div>'
. '<div class="placeholder k2 mt6"></div></div></div>';
$html = str_repeat($item, $count);
} else {
$item = '<div class="posts-item list flex"><div class="post-graphic"><div class="radius8 item-thumbnail placeholder"></div></div>'
. '<div class="item-body flex xx flex1 jsb"><p class="placeholder t1"></p>'
. '<h4 class="item-excerpt placeholder k1"></h4><p class="placeholder k2"></p>'
. '<i><i class="placeholder s1"></i><i class="placeholder s1 ml10"></i></i></div></div>';
$html = str_repeat($item, $count);
}
return $html;
$class = $mode === 'card' ? 'posts-item card' : 'posts-item list flex';
$item = '<posts class="' . esc_attr($class) . '"><div class="post-graphic"><div class="item-thumbnail placeholder"></div></div><div class="item-body flex xx flex1 jsb"><div class="placeholder t1"></div><div class="placeholder k2"></div><div class="placeholder s1"></div></div></posts>';
return str_repeat($item, $count);
}
}