typecho-theme-imm/post.php at main · airinghost/typecho-theme-imm · 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php $this->need('header.php'); ?>

<main>
    <?php $this->need('article.php'); ?>

    <style>
        /* 导航按钮 */
        .post-nav-buttons {
            display: flex;
            justify-content: space-between;
            margin: 2rem 1rem 4rem 1rem;
            gap: 1rem;
        }

        .nav-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            font-size: .7rem;
            padding-top: .4rem;
            margin: 0 1rem;
            color: var(--color-text-lighter);
            font-weight: bold;
        }

        .post-nav-buttons a {
            position: absolute;
            box-sizing: border-box;
            color: var(--color-text-lighter);
            font-size: .7rem;
            background: transparent;
            border-radius: 3px;
            transition: all 0.3s ease;
            border: 1px dashed var(--color-border);
            width: 7rem;
            padding: 1.5rem .4rem .4rem .4rem;
            display: inline-block;
            max-width: 7rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            z-index: 2;
            line-height: 1.5;
            top: 0;
        }

        .nav-button a:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }

        .nav-button.disabled {
            cursor: not-allowed;
        }

        /* 灯箱覆盖层，默认隐藏 */
        .lightbox-overlay {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: var(--color-transparent-night);
          z-index: 99;
          justify-content: center;
          align-items: center;
        }

        /* 灯箱内的大图样式 */
        .lightbox-overlay img {
          max-width: 90%;
          max-height: 90%;
          border: 2px solid #fff;
          border-radius: 4px;
        }
    </style>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 获取所有带有'simple-lightbox'类的图片
      const lightboxTriggers = document.querySelectorAll('img.simple-lightbox');

      lightboxTriggers.forEach(function(trigger) {
        trigger.addEventListener('click', function(event) {
          // 检查灯箱是否已存在
          let overlay = document.querySelector('.lightbox-overlay');

          if (overlay) {
            // 如果灯箱已存在且正在显示，则关闭它
            if (overlay.style.display === 'flex') {
              overlay.style.display = 'none';
              return;
            }
          } else {
            // 如果灯箱不存在，则创建它
            overlay = document.createElement('div');
            overlay.className = 'lightbox-overlay';

            // 创建图片元素
            const img = document.createElement('img');
            overlay.appendChild(img);

            // 点击灯箱任意位置关闭
            overlay.addEventListener('click', function() {
              this.style.display = 'none';
            });

            document.body.appendChild(overlay);
          }

          // 设置大图源（使用触发图片的src）并显示灯箱
          overlay.querySelector('img').src = this.src;
          overlay.style.display = 'flex';
        });
      });
    });
    </script>

    <div class="post-nav-buttons">
        <?php $this->theNext(
            '<div class="nav-button next-button">
                <span class="button-label">⇐ 新的故事&nbsp;</span>%s
            </div>',
            '<div class="nav-button disabled">
                <span class="button-label">⇐ 暂无更多&nbsp;</span>
            </div>',
            array('tag' => 'div')
        ); ?>
        <?php $this->thePrev(
            '<div class="nav-button prev-button">
                <span class="button-label">&nbsp;旧的回忆 ⇒</span>%s
            </div>',
            '<div class="nav-button disabled">
                <span class="button-label">&nbsp;没有更多 ⇒</span>
            </div>',
            array('tag' => 'div')
        ); ?>
    </div>

    <?php $this->need('comments.php'); ?>
</main>

<?php $this->need('footer.php'); ?>