Typecho-Nebula/index.php at main · BushANQ/Typecho-Nebula · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<?php
/**
 *
 * @package Nebula
 * @author BushSEC
 * @version 1.0.0
 * @link https://bushsec.cn
 */

if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$this->need('header.php');
?>

<div class="main-layout">
    <main class="main-content" id="main" role="main">
        <?php if ($this->have()): ?>
            <div class="posts-container">
                <?php while ($this->next()): ?>
                    <article class="post post-card" itemscope itemtype="http://schema.org/BlogPosting">
                        <a href="<?php $this->permalink(); ?>" class="post-card-link">
                        <div class="post-list-content">
                            <div class="list-thumbnail">
                                <?php $thumbnail = getPostThumbnail($this); ?>
                                <?php if ($thumbnail): ?>
                                    <img src="<?php echo $thumbnail; ?>" alt="<?php $this->title(); ?>" loading="lazy">
                                <?php else: ?>
                                    <div class="thumbnail-placeholder">
                                        <i class="fas fa-file-alt"></i>
                                    </div>
                                <?php endif; ?>
                            </div>

                            <div class="list-content">
                                <div class="list-header">
                                    <h3 class="list-title">
                                        <a href="<?php $this->permalink(); ?>"><?php $this->title(); ?></a>
                                    </h3>
                                    <div class="list-meta">
                                        <span><?php $this->category(','); ?></span>
                                        <span class="separator">•</span>
                                        <span class="action-item">
                                            <i class="fas fa-eye"></i>
                                            <?php echo formatViewsNum(getPostViews($this)); ?>
                                        </span>
                                    </div>
                                </div>

                                <div class="list-excerpt">
                                    <?php echo getExcerpt($this->content, 100); ?>
                                </div>

                                <div class="list-footer">
                                    <div class="list-tags">
                                        <?php $this->tags(' ', true, ''); ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </a>
                    </article>
                <?php endwhile; ?>
            </div>

            <!-- 分页导航 -->
            <div class="pagination-wrapper">
                <?php $this->pageNav('← 上一页', '下一页 →', 3, '...', [
                    'wrapTag' => 'nav',
                    'wrapClass' => 'pagination-nav',
                    'itemTag' => '',
                    'textTag' => 'a',
                    'currentClass' => 'current',
                    'prevClass' => 'prev',
                    'nextClass' => 'next'
                ]); ?>
            </div>

        <?php else: ?>
            <div class="no-posts">
                <div class="no-posts-content">
                    <i class="fas fa-inbox"></i>
                    <h2>暂无文章</h2>
                    <p>这里还没有发布任何文章</p>
                </div>
            </div>
        <?php endif; ?>
    </main>
    <?php $this->need('sidebar.php'); ?>
</div>
<?php $this->need('footer.php'); ?>

</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 文章卡片动画
    const postCards = document.querySelectorAll('.post-card');

    if (window.IntersectionObserver) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry, index) => {
                if (entry.isIntersecting) {
                    setTimeout(() => {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                    }, index * 100);
                }
            });
        }, {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        });

        postCards.forEach(card => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            observer.observe(card);
        });
    }

    // 阅读更多按钮增强
    const readMoreBtns = document.querySelectorAll('.read-more-btn');
    readMoreBtns.forEach(btn => {
        btn.addEventListener('mouseenter', function() {
            this.querySelector('i').style.transform = 'translateX(3px)';
        });

        btn.addEventListener('mouseleave', function() {
            this.querySelector('i').style.transform = 'translateX(0)';
        });
    });
});
</script>