CyyWordpress/template-parts/content.php

<?php
/**
 * Template part for displaying posts
 *
 * Modernised card layout:
 * - 16:9 featured image with lazy-load
 * - Category colour badges
 * - Relative publish time + hover absolute time
 * - Reading-time estimate
 * - Animated "Continue reading" button
 * - Skeleton loading CSS hook `.card--loading`
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package CyyWordpress
 */

// Estimate reading time (200 wpm average).
$word_count   = str_word_count( wp_strip_all_tags( get_the_content() ) );
$reading_mins = max( 1, (int) ceil( $word_count / 200 ) );
?>

<article id="post-<?php the_ID(); ?>" <?php post_class( 'post-card card' ); ?>>

	<?php if ( has_post_thumbnail() ) : ?>
		<div class="post-card__image card-image">
			<figure class="image is-16by9">
				<?php
				the_post_thumbnail(
					'card-thumbnail',
					array(
						'class'   => 'post-card__thumb',
						'loading' => 'lazy',
						'decoding'=> 'async',
						'alt'     => the_title_attribute( array( 'echo' => false ) ),
					)
				);
				?>
			</figure>
		</div>
	<?php else : ?>
		<div class="post-card__image post-card__image--placeholder card-image" aria-hidden="true">
			<figure class="image is-16by9">
				<div class="post-card__gradient-placeholder">
					<?php
					$cats = get_the_category();
					echo '<span class="post-card__category-initial">'
					     . esc_html( $cats ? mb_substr( $cats[0]->name, 0, 1 ) : mb_substr( get_bloginfo( 'name' ), 0, 1 ) )
					     . '</span>';
					?>
				</div>
			</figure>
		</div>
	<?php endif; ?>

	<div class="card-content">

		<!-- Category badges -->
		<?php
		$categories = get_the_category();
		if ( $categories ) :
			echo '<div class="post-card__categories">';
			foreach ( array_slice( $categories, 0, 3 ) as $cat ) {
				printf(
					'<a class="post-card__category-badge tag is-link is-light" href="%s">%s</a>',
					esc_url( get_category_link( $cat->term_id ) ),
					esc_html( $cat->name )
				);
			}
			echo '</div>';
		endif;
		?>

		<!-- Title -->
		<?php
		if ( is_singular() ) :
			the_title( '<h1 class="post-card__title title is-4">', '</h1>' );
		else :
			the_title(
				'<h2 class="post-card__title title is-4"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">',
				'</a></h2>'
			);
		endif;
		?>

		<!-- Meta -->
		<?php if ( 'post' === get_post_type() ) : ?>
			<div class="post-card__meta subtitle is-6">
				<span class="post-card__date">
					<i class="fa-regular fa-calendar" aria-hidden="true"></i>
					<time
						class="entry-date published"
						datetime="<?php echo esc_attr( get_the_date( DATE_W3C ) ); ?>"
						title="<?php echo esc_attr( get_the_date() ); ?>"
					>
						<?php
						echo esc_html(
							sprintf(
								/* translators: %s: human-readable time diff */
								__( '%s前', 'cyywordpress' ),
								human_time_diff( (int) get_the_time( 'U' ), time() )
							)
						);
						?>
					</time>
				</span>

				<span class="post-card__author">
					<i class="fa-regular fa-user" aria-hidden="true"></i>
					<a href="<?php echo esc_url( get_author_posts_url( (int) get_the_author_meta( 'ID' ) ) ); ?>">
						<?php echo esc_html( get_the_author() ); ?>
					</a>
				</span>

				<span class="post-card__reading-time">
					<i class="fa-regular fa-clock" aria-hidden="true"></i>
					<?php
					printf(
						/* translators: %d: reading time in minutes */
						esc_html__( '约 %d 分钟', 'cyywordpress' ),
						(int) $reading_mins
					);
					?>
				</span>
			</div><!-- .post-card__meta -->
		<?php endif; ?>

		<!-- Content / excerpt -->
		<div class="post-card__content content">
			<?php
			if ( is_singular() ) :
				the_content(
					sprintf(
						wp_kses(
							/* translators: %s: post title (screen-reader only) */
							__( '继续阅读<span class="screen-reader-text"> "%s"</span>', 'cyywordpress' ),
							array( 'span' => array( 'class' => array() ) )
						),
						wp_kses_post( get_the_title() )
					)
				);

				wp_link_pages(
					array(
						'before' => '<div class="page-links">' . esc_html__( '页面：', 'cyywordpress' ),
						'after'  => '</div>',
					)
				);
			else :
				the_excerpt();
			endif;
			?>
		</div><!-- .post-card__content -->

		<!-- Footer: tags + read-more -->
		<?php if ( ! is_singular() ) : ?>
			<div class="post-card__footer">
				<?php cyywordpress_entry_footer(); ?>

				<a
					class="post-card__read-more button is-link is-light is-small"
					href="<?php echo esc_url( get_permalink() ); ?>"
					rel="bookmark"
					aria-label="<?php echo esc_attr( sprintf( __( '继续阅读 %s', 'cyywordpress' ), get_the_title() ) ); ?>"
				>
					<?php esc_html_e( '继续阅读', 'cyywordpress' ); ?>
					<span class="post-card__read-more-arrow" aria-hidden="true">&nbsp;&rarr;</span>
				</a>
			</div>
		<?php else : ?>
			<footer class="entry-footer">
				<?php cyywordpress_entry_footer(); ?>
			</footer>
		<?php endif; ?>

	</div><!-- .card-content -->
</article><!-- #post-<?php the_ID(); ?> -->