1
//- - author:
2
//-   avatar:
3
//-   date:
4
//-   content:
5
//-   tags:
6
//-     - tag1
7
//-     - tag2
8

9
- page.toc = false
10
- const artalkServer = theme.artalk.server
11
- const artalkSite = theme.artalk.site
12
#article-container
13
  if page.comments !== false && theme.comments.use
14
    - commentsJsLoad = true
15

16
    script.
17
      (() => {
18
        const commentDiv = `!{partial('includes/third-party/comments/index', {}, {cache: true})}`
19

20
        const runDestroy = (shuoshuoComment) => {
21
          if (!shuoshuoComment) return
22

23
          for (const [key, fn] of Object.entries(shuoshuoComment)) {
24
            if (key.startsWith('destroy')) fn()
25
          }
26
        }
27

28
        window.addCommentToShuoshuo = e => {
29
          const btn = e.target.closest('.shuoshuo-comment-btn')
30
          if (!btn) return
31

32
          const ele = btn.closest('.container').nextElementSibling
33
          const { shuoshuoComment } = window
34
          const isInclude = ele.classList.contains('no-comment')
35
          runDestroy(shuoshuoComment)
36
          if (isInclude) {
37
            ele.classList.remove('no-comment')
38
            ele.innerHTML = commentDiv
39
            const key = `${location.pathname.replace(/\/$/, '')}?key=${ele.getAttribute('data-key')}`
40
            btf.switchComments(ele, key)
41
            shuoshuoComment.loadComment && shuoshuoComment.loadComment(ele, key)
42
          }
43
        }
44
      })()
45

46
  if page.shuoshuo_url
47
    script.
48
      (() => {
49
        const limitConfig = !{ JSON.stringify(page.limit || {}) }
50
        let pageToken = ""
51
        let isLoading = false
52
        let baseUrl = `!{url_for(page.shuoshuo_url)}/api/v1/memos?parent=users/1`
53
        let count_url = `!{url_for(page.shuoshuo_url)}/api/v1/users/-/stats`
54
        let page_title = document.querySelector(".page-title")
55
        let totalCount = 0
56

57
        const formatToTimeZone = (date) => {
58
          const fullDate = date.length === 10 ? `${date} 00:00:00` : date
59
          const visitorTimeZone = '#{config.timezone}' || Intl.DateTimeFormat().resolvedOptions().timeZone
60
          const options = {
61
            timeZone: visitorTimeZone,
62
            year: 'numeric',
63
            month: '2-digit',
64
            day: '2-digit',
65
            hour: '2-digit',
66
            minute: '2-digit',
67
            second: '2-digit',
68
            hour12: false
69
          }
70
          const [day, month, year, hour, minute, second] = new Intl.DateTimeFormat('en-GB', options)
71
            .format(new Date(fullDate))
72
            .match(/\d+/g)
73
          return `${year}-${month}-${day} ${hour}:${minute}:${second}`
74
        }
75

76
        const createLoadButton = () => {
77
          const existingBtn = document.querySelector("#loadmore")
78
          if (!existingBtn && pageToken) {
79
            const btn = document.createElement('button')
80
            btn.id = 'loadmore'
81
            btn.type = 'button'
82
            btn.textContent = '加载更多'
83
            btn.addEventListener('click', loadMoreHandler)
84
            document.querySelector("#page").appendChild(btn)
85
          }
86
        }
87

88
        const loadMoreHandler = async () => {
89
          if (isLoading || !pageToken) return
90

91
          const btn = document.querySelector("#loadmore")
92
          btn.innerHTML = `<i class="fa-solid fa-spinner fa-spin"></i>`
93
          btn.disabled = true
94
          isLoading = true
95

96
          try {
97
            await loadShuoshuo(false)
98
          } finally {
99
            isLoading = false
100
            btn.disabled = false
101
            btn.textContent = '加载更多'
102
          }
103
        }
104

105
        const loadShuoshuo = async (isFirstLoad = true) => {
106
          try {
107
            const currentUrl = isFirstLoad ? baseUrl : `${baseUrl}&pageToken=${pageToken}`
108
            const response = await fetch(currentUrl)
109
            const data = await response.json()
110
            let memos = data.memos
111

112
            if (isFirstLoad) {
113
              const count_response = await fetch(count_url,{method:"POST"})
114
              const count_data = await count_response.json()
115
              totalCount = count_data.userStats[0].memoDisplayTimestamps.length
116
              page_title.innerHTML = "共有" + totalCount + "条说说"
117
            }
118

119
            pageToken = data.nextPageToken || ""
120

121
            if (!pageToken) {
122
              const btn = document.querySelector("#loadmore")
123
              btn.remove()
124
            } else if (isFirstLoad) {
125
              createLoadButton()
126
            }
127

128
            const container = document.getElementById('article-container')
129
            let start = 0
130

131
            const renderData = (dataSlice) => {
132
              const content = dataSlice.map(item => {
133
                let formattedDate = formatToTimeZone(item.createTime)
134
                let date = ""
135
                let pinned = ""
136
                let resources = ""
137
                let location = null
138
                let isSingleImage = ''
139

140
                if(btf.diffDate(formattedDate, false) <= 30) {
141
                  date = btf.diffDate(formattedDate, true)
142
                }else{
143
                  date = formattedDate
144
                }
145

146
                if (item.pinned != ""){
147
                  pinned = `<i class="fa-solid fa-thumbtack"></i>`
148
                }
149

150
                const tags = item.tags && item.tags.map(tag => `<span class="shuoshuo-tag">${tag}</span>`).join('') || ''
151

152
                if(item.resources.length != 0){
153
                  resources = item.resources.map(r => {
154
                    const isExternal = r.externalLink !== "";
155
                    const [thumbLink, fileUrl] = isExternal ? [
156
                      r.externalLink.replace("memos/", "memos/thumb/").split('?')[0],
157
                      r.externalLink
158
                    ] : [
159
                      `!{url_for(page.shuoshuo_url)}/file/${r.name}/${r.filename}?thumbnail=true`,
160
                      `!{url_for(page.shuoshuo_url)}/file/${r.name}/${r.filename}`
161
                    ];
162

163
                    return `<span class="shuoshuo-resources-image">
164
                      <a href="${fileUrl}" data-fancybox="gallery">
165
                        <img class="lazy" src="${thumbLink}">
166
                      </a>
167
                    </span>`;
168
                  }).join('');
169
                }
170

171
                if(item.location!=undefined){
172
                  location = item.location.placeholder
173
                }
174

175
                let content = item.content.replace(/^(#\S+\s*)+/, '')
176
                content = DOMPurify.sanitize(marked.parse(content.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/,"")))
177

178
                const commentButton = item.name && !{commentsJsLoad}
179
                  ? `
180
                  <div class="shuoshuo-comment-btn" onclick="addCommentToShuoshuo(event)">
181
                      <span class="artalk-count" data-page-key="/essay?key=${item.name}"><i class="fa-solid fa-spinner fa-spin"></i></span>
182
                      <i class="fa-solid fa-comments"></i>
183
                  </div>
184
                  <div class="shuoshuo-like-btn" onclick="addLike('${item.name}')">
185
                    <span class="like-count" data-page-name="${item.name}"><i class="fa-solid fa-spinner fa-spin"></i></span>
186
                    <i class="fa-solid fa-thumbs-up"></i>
187
                  </div>
188
                  `
189
                  : ''
190
                const commentContainer = item.name
191
                  ? `<div class="shuoshuo-comment no-comment" data-key="${item.name}"></div>`
192
                  : ''
193

194
                return `
195
                  <div class="shuoshuo-item">
196
                    <div class="container">
197
                      <div class="shuoshuo-item-header">
198
                        <div class="shuoshuo-avatar">
199
                          <img class="no-lightbox" src="${item.avatar || '!{url_for(theme.avatar.img)}'}">
200
                        </div>
201
                        <div class="shuoshuo-info">
202
                          <div class="shuoshuo-author">${item.author || '!{config.author}'}</div>
203
                          <time class="shuoshuo-date" title="${formattedDate}">
204
                            ${date}
205
                          </time>
206
                        </div>
207
                        <div class="shuoshuo-other-info">
208
                          ${pinned}
209
                          ${location ? `<div class="shuoshuo-location"><i class="fa-solid fa-location-dot"></i> ${location}</div>` : ''}
210
                        </div>
211
                      </div>
212
                      <div class="shuoshuo-content">${content}</div>
213
                      <div class="shuoshuo-resources${isSingleImage}">${resources}</div>
214
                      <div class="shuoshuo-footer ${tags ? 'flex-between' : 'flex-end'}">
215
                        ${tags ? `<div class="shuoshuo-tags">${tags}</div>` : ''}
216
                        ${commentButton}
217
                      </div>
218
                    </div>
219
                    ${commentContainer}
220
                  </div>`
221
              }).join('')
222

223
              container.insertAdjacentHTML('beforeend', content)
224

225
              window.lazyLoadInstance.update()
226
              btf.loadLightbox(document.querySelectorAll('#article-container img:not(.no-lightbox)'))
227
            }
228

229
            const handleIntersection = (entries) => {
230
              if (!entries[0].isIntersecting) return
231
              observer.unobserve(entries[0].target)
232

233
              const slice = memos.slice(start, start + 10)
234
              renderData(slice)
235
              start += 10
236

237
              if (start < memos.length) {
238
                setTimeout(() => observer.observe(container.lastElementChild), 100)
239
              } else {
240
                observer.disconnect()
241
              }
242
            };
243

244
            const observer = new IntersectionObserver(handleIntersection, {
245
              root: null,
246
              rootMargin: '0px',
247
              threshold: 1.0
248
            })
249

250
            renderData(memos.slice(start, 10))
251
            start += 10
252

253
            // 移除加载文本
254
            let loadingText = document.querySelector("#loading")
255
            if (loadingText){
256
              loadingText.remove()
257
            }
258

259
            // 获取点赞数
260
            if(page.likes_url != ""){
261
              let likeId = localStorage.getItem('like_id') || crypto.randomUUID();
262
              localStorage.setItem('like_id', likeId);
263
              const likeGroup = document.querySelectorAll('.like-count')
264
              const pageNameArray = Array.from(likeGroup).map(i => i.getAttribute('data-page-name'))
265
              try{
266
                const params = new URLSearchParams({
267
                  'page_names': pageNameArray
268
                })
269
                const likesData = await fetch(`!{url_for(page.likes_url)}/like/pages?like_id=${likeId}&${params}`)
270
                const likesResult = await likesData.json()
271
                const likedArray = likesResult.liked
272
                pageNameArray.forEach((key, index) => {
273
                  const btn = likeGroup[index].closest('.shuoshuo-like-btn');
274
                  likeGroup[index].textContent = likesResult.data[key]
275
                  btn.classList.toggle('active', likedArray.includes(key));
276
                })
277
              }catch(e){
278
                console.log(e)
279
                pageNameArray.forEach((key, index) => {
280
                  likeGroup[index].textContent = "-"
281
                })
282
              }
283
            }
284

285
            // 获取评论数
286
            const eleGroup = document.querySelectorAll('.artalk-count')
287
            const keyArray = Array.from(eleGroup).map(i => i.getAttribute('data-page-key'))
288
            const headerList = {
289
              method: 'GET',
290
            }
291
            const searchParams = new URLSearchParams({
292
              'site_name': '!{artalkSite}',
293
              'page_keys': keyArray
294
            })
295
            const res = await fetch(`!{artalkServer}/api/v2/stats/page_comment?${searchParams}`, headerList)
296
            const result = await res.json()
297
            keyArray.forEach((key, index) => {
298
              eleGroup[index].textContent = result.data[key] || 0
299
            })
300

301
            if(Prism != null) Prism.highlightAll()
302

303
            if (container.lastElementChild) observer.observe(container.lastElementChild)
304
          } catch (error) {
305
            console.error(error)
306
            const main = document.querySelector("#page")
307
            main.innerHTML = '<h1>加载失败，请刷新重试</h1>'
308
          }
309
        };
310

311
        window.pjax ? loadShuoshuo() : window.addEventListener('load', () => loadShuoshuo(true))
312
      })()
313
  else
314
    if site.data.shuoshuo
315
      each i in shuoshuoFN(site.data.shuoshuo, page)
316
        .shuoshuo-item
317
          .container
318
            .shuoshuo-item-header
319
              .shuoshuo-avatar
320
                img.no-lightbox(src=i.avatar || url_for(theme.avatar.img))
321
              .shuoshuo-info
322
                .shuoshuo-author=i.author || config.author
323
                time.shuoshuo-date(title=i.date)=i.date
324
            .shuoshuo-content
325
              !=markdown(i.content)
326
            .shuoshuo-footer(class=i.tags && i.tags.length ? 'flex-between' : 'flex-end')
327
              if i.tags
328
                .shuoshuo-tags
329
                  each tag in i.tags
330
                    span.shuoshuo-tag=tag
331
              if i.key && commentsJsLoad
332
                .shuoshuo-comment-btn(onclick='addCommentToShuoshuo(event)')
333
                  i.fa-solid.fa-comments
334
          if i.key && commentsJsLoad
335
            .shuoshuo-comment.no-comment(data-key=i.key)
336

337
  #article-container.container
338
    != page.content

1
---
2
title: 说说
3
type: 'shuoshuo'
4
aside: false
5
top_img: false
6
shuoshuo_url: https://memos.dotuoodo.top
7
likes_url: https://api.example.com
8
---
9
{% raw %}
10
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/15.0.2/marked.min.js"></script>
11
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.2.1/purify.min.js"></script>
12
<p id="loading"><i class="fa-solid fa-spinner fa-spin"></i>加载中...</p>
13
<style>
14
  /* 说说 */
15

16
  .layout.hide-aside {
17
    max-width: 720px;
18
  }
19

20
  #loadmore {
21
    width: max-content;
22
    padding: 15px 30% 15px 30%;
23
    margin: 0 auto;
24
    display: block;
25
    border: 1px solid transparent;
26
    border-color: var(--btn-beautify-color, #777);
27
    background-color: transparent;
28
    color: var(--btn-beautify-color, #777);
29
    transition: .3s;
30
    border-radius: 5px;
31
  }
32

33
  #loadmore:hover{
34
    background-color: var(--btn-beautify-color, #428bca);
35
    color: #fff !important;
36
  }
37

38
  .shuoshuo-other-info {
39
    margin-left: auto;
40
  }
41

42
  #article-container .shuoshuo-content {
43
    padding: 10px 0 0px !important;
44
  }
45

46
  .shuoshuo-resources:not(.single-image) {
47
    display: grid;
48
    gap: 10px;
49
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
50
    margin-bottom: 10px;
51
  }
52

53
  .shuoshuo-resources:empty {
54
    margin-bottom: 3px;
55
}
56

57
  .shuoshuo-resources-image {
58
    width: 100%;
59
    height: 0;
60
    padding-bottom: 100%;
61
    position: relative;
62
    overflow: hidden;
63
  }
64

65
  .shuoshuo-resources-image img {
66
    position: absolute;
67
    top: 50%;
68
    left: 50%;
69
    width: 100%;
70
    height: 100%;
71
    object-fit: cover;
72
    transform: translate(-50%, -50%);
73
  }
74

75
  /* 当只有一张图片时，调整显示方式 */
76
  .shuoshuo-resources .shuoshuo-resources-image:only-child {
77
    width: 100%;
78
    height: auto;
79
    padding-bottom: 0;
80
    display: block;
81
  }
82

83
  .shuoshuo-resources .shuoshuo-resources-image:only-child img {
84
    position: static;
85
    width: 100%;
86
    height: auto;
87
    object-fit: cover;
88
    transform: none;
89
  }
90

91
  .shuoshuo-resources.single-image {
92
    display: block;
93
  }
94

95
  .inline-image {
96
    display: inline !important;
97
     vertical-align: middle;
98
  }
99

100
  #article-container .shuoshuo-item {
101
    padding: 20px 30px 20px !important;
102
  }
103

104
  #article-container .shuoshuo-footer {
105
    display: flex;
106
    justify-content: space-between;
107
    position: relative;
108
  }
109

110
  #article-container .shuoshuo-footer .shuoshuo-comment-btn {
111
    position: absolute;
112
    left: 50%;
113
    transform: translateX(-50%);
114
  }
115

116
  #article-container .shuoshuo-footer .shuoshuo-like-btn {
117
    margin-left: auto;
118
  }
119

120
  #article-container .shuoshuo-footer .shuoshuo-like-btn {
121
    padding: 2px;
122
    color: #90a4ae;
123
    cursor: pointer;
124
  }
125

126
  #article-container .shuoshuo-footer .shuoshuo-like-btn.active {
127
    color: #49b1f5;
128
  }
129
</style>
130
{% endraw %}