techblog-wp-theme/single.php

<?php
/**
 * Single Post Template
 *
 * @package TechBlog Pro
 */

get_header();
?>

<article class="single-post" <?php post_class(); ?>>
    <?php while (have_posts()) : the_post(); ?>
    
    <header class="post-header">
        <?php
        $categories = get_the_category();
        if (!empty($categories)) :
        ?>
        <a href="<?php echo esc_url(get_category_link($categories[0]->term_id)); ?>" class="post-category">
            <?php echo esc_html($categories[0]->name); ?>
        </a>
        <?php endif; ?>
        
        <h1 class="post-title"><?php the_title(); ?></h1>
        
        <div class="post-meta-full">
            <div class="author-avatar">
                <?php echo get_avatar(get_the_author_meta('ID'), 40); ?>
            </div>
            
            <div>
                <a href="<?php echo esc_url(get_author_posts_url(get_the_author_meta('ID'))); ?>">
                    <?php the_author(); ?>
                </a>
                <span style="margin: 0 8px;">·</span>
                <time datetime="<?php echo get_the_date('c'); ?>">
                    <?php echo get_the_date('Y年m月d日'); ?>
                </time>
                <span style="margin: 0 8px;">·</span>
                <span><?php echo techblog_reading_time(); ?> 分钟阅读</span>
                <span style="margin: 0 8px;">·</span>
                <span><?php echo techblog_format_views(techblog_get_post_views()); ?> 次阅读</span>
            </div>
        </div>
    </header>

    <div class="post-content">
        <?php
        the_content();
        
        // Link Pages (for multi-page posts)
        wp_link_pages(array(
            'before' => '<div class="page-links">分页：',
            'after'  => '</div>',
        ));
        ?>
    </div>

    <!-- Share & Tags -->
    <footer class="post-footer">
        <?php
        $tags = get_the_tags();
        if (!empty($tags)) :
        ?>
        <div class="post-tags">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"/>
                <line x1="7" y1="7" x2="7.01" y2="7"/>
            </svg>
            <?php foreach ($tags as $tag) : ?>
            <a href="<?php echo esc_url(get_tag_link($tag->term_id)); ?>">
                <?php echo esc_html($tag->name); ?>
            </a>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
        
        <div class="share-section">
            <span class="share-label">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="18" cy="5" r="3"/>
                    <circle cx="6" cy="12" r="3"/>
                    <circle cx="18" cy="19" r="3"/>
                    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
                    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
                </svg>
                分享文章
            </span>
            <div class="share-buttons">
                <a href="https://twitter.com/intent/tweet?url=<?php echo urlencode(get_the_permalink()); ?>&text=<?php echo urlencode(get_the_title()); ?>" 
                   target="_blank" class="share-btn share-twitter" title="分享到 Twitter">
                    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                    </svg>
                </a>
                <a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo urlencode(get_the_permalink()); ?>&title=<?php echo urlencode(get_the_title()); ?>" 
                   target="_blank" class="share-btn share-linkedin" title="分享到 LinkedIn">
                    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                    </svg>
                </a>
                <button class="share-btn share-copy" onclick="copyLink()" title="复制链接">
                    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/>
                        <path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/>
                    </svg>
                </button>
            </div>
        </div>
    </footer>

    <!-- Post Navigation -->
    <nav class="post-navigation" style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 48px;">
        <?php
        $prev_post = get_previous_post();
        $next_post = get_next_post();
        ?>
        
        <?php if ($prev_post) : ?>
        <a href="<?php echo esc_url(get_permalink($prev_post)); ?>" 
           style="padding: 20px; background: var(--bg-secondary); border-radius: 12px; border: 1px solid var(--border-color);">
            <span style="font-size: 0.8125rem; color: var(--text-muted);">← 上一篇</span>
            <div style="font-weight: 600; margin-top: 8px; color: var(--text-primary);">
                <?php echo esc_html($prev_post->post_title); ?>
            </div>
        </a>
        <?php else : ?>
        <div></div>
        <?php endif; ?>
        
        <?php if ($next_post) : ?>
        <a href="<?php echo esc_url(get_permalink($next_post)); ?>" 
           style="padding: 20px; background: var(--bg-secondary); border-radius: 12px; border: 1px solid var(--border-color); text-align: right;">
            <span style="font-size: 0.8125rem; color: var(--text-muted);">下一篇 →</span>
            <div style="font-weight: 600; margin-top: 8px; color: var(--text-primary);">
                <?php echo esc_html($next_post->post_title); ?>
            </div>
        </a>
        <?php else : ?>
        <div></div>
        <?php endif; ?>
    </nav>

    <!-- Comments -->
    <?php
    if (comments_open() || get_comments_number()) {
        comments_template();
    }
    ?>
    
    <?php endwhile; ?>
</article>

<?php get_footer(); ?>