PageSourceSearch

https://4think.blog/table-of-contents-auto/

html 4think.blog collected 2026-09-28 07:07:43 UTC 46,318 bytes, 1,307 lines download raw bytes

1<!DOCTYPE html>
2<html lang="zh-Hant">
3
4<head>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <title>文章列表</title>
8    <link rel="stylesheet" href="/assets/built/screen.css?v=d507eea3ed">
9
10    <link rel="icon" href="https://4think.blog/content/images/size/w256h256/2026/04/Logo_Alpha_Black_144px-Circle.png" type="image/png">
11    <link rel="canonical" href="https://4think.blog/table-of-contents-auto/">
12    <meta name="referrer" content="no-referrer-when-downgrade">
13    
14    <meta property="og:site_name" content="4THINK | 為自主思考而閲讀">
15    <meta property="og:type" content="website">
16    <meta property="og:title" content="文章列表">
17    <meta property="og:description" content="4THINK 是 Roxas 楊大輝的知識部落格,深度解讀好書與思維方法,主題包括深度學習、深度思考、心理學與理性決策。">
18    <meta property="og:url" content="https://4think.blog/table-of-contents-auto/">
19    <meta property="og:image" content="https://4think.blog/content/images/size/w1200/2026/04/library_bg_logo-4.png">
20    <meta property="article:published_time" content="2026-04-07T11:46:07.000Z">
21    <meta property="article:modified_time" content="2026-04-07T15:04:30.000Z">
22    <meta property="article:publisher" content="https://www.facebook.com/4think.blog">
23    <meta name="twitter:card" content="summary_large_image">
24    <meta name="twitter:title" content="文章列表">
25    <meta name="twitter:description" content="4THINK 是 Roxas 楊大輝的知識部落格,深度解讀好書與思維方法,主題包括深度學習、深度思考、心理學與理性決策。">
26    <meta name="twitter:url" content="https://4think.blog/table-of-contents-auto/">
27    <meta name="twitter:image" content="https://4think.blog/content/images/size/w1200/2026/04/library_bg_logo-4.png">
28    <meta name="twitter:label1" content="Written by">
29    <meta name="twitter:data1" content="Roxas 楊大輝">
30    <meta property="og:image:width" content="1200">
31    <meta property="og:image:height" content="500">
32    
33    
33<script type="application/ld+json">
34{
35    "@context": "https://schema.org",
36    "@type": "Article",
37    "publisher": {
38        "@type": "Organization",
39        "name": "4THINK | 為自主思考而閲讀",
40        "url": "https://4think.blog/",
41        "logo": {
42            "@type": "ImageObject",
43            "url": "https://4think.blog/content/images/size/w256h256/2026/04/Logo_Alpha_Black_144px-Circle.png",
44            "width": 60,
45            "height": 60
46        }
47    },
48    "author": {
49        "@type": "Person",
50        "name": "Roxas 楊大輝",
51        "image": {
52            "@type": "ImageObject",
53            "url": "https://4think.blog/content/images/size/w1200/2026/04/Roxas_Shooting_02-5.jpg",
54            "width": 1200,
55            "height": 800
56        },
57        "url": "https://4think.blog/author/roxas/",
58        "sameAs": []
59    },
60    "headline": "文章列表",
61    "url": "https://4think.blog/table-of-contents-auto/",
62    "datePublished": "2026-04-07T11:46:07.000Z",
63    "dateModified": "2026-04-07T15:04:30.000Z",
64    "image": {
65        "@type": "ImageObject",
66        "url": "https://4think.blog/content/images/size/w1200/2026/04/library_bg_logo-4.png",
67        "width": 1200,
68        "height": 500
69    },
70    "mainEntityOfPage": "https://4think.blog/table-of-contents-auto/"
71}
72    </script>
72
73
74    <meta name="generator" content="Ghost 6.43">
75    <link rel="alternate" type="application/rss+xml" title="4THINK | 為自主思考而閲讀" href="https://4think.blog/rss/">
76    
76<script defer src="https://cdn.jsdelivr.net/ghost/portal@~2.68/umd/portal.min.js" data-i18n="true" data-ghost="https://4think.blog/" data-key="218e5a957a1e20b0ffa5d1db78" data-api="https://4think.blog/ghost/api/content/" data-locale="zh-Hant" crossorigin="anonymous"></script>
76<style id="gh-members-styles">.gh-post-upgrade-cta-content,
77.gh-post-upgrade-cta {
78    display: flex;
79    flex-direction: column;
80    align-items: center;
81    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
82    text-align: center;
83    width: 100%;
84    color: #ffffff;
85    font-size: 16px;
86}
87
88.gh-post-upgrade-cta-content {
89    border-radius: 8px;
90    padding: 40px 4vw;
91}
92
93.gh-post-upgrade-cta h2 {
94    color: #ffffff;
95    font-size: 28px;
96    letter-spacing: -0.2px;
97    margin: 0;
98    padding: 0;
99}
100
101.gh-post-upgrade-cta p {
102    margin: 20px 0 0;
103    padding: 0;
104}
105
106.gh-post-upgrade-cta small {
107    font-size: 16px;
108    letter-spacing: -0.2px;
109}
110
111.gh-post-upgrade-cta a {
112    color: #ffffff;
113    cursor: pointer;
114    font-weight: 500;
115    box-shadow: none;
116    text-decoration: underline;
117}
118
119.gh-post-upgrade-cta a:hover {
120    color: #ffffff;
121    opacity: 0.8;
122    box-shadow: none;
123    text-decoration: underline;
124}
125
126.gh-post-upgrade-cta a.gh-btn {
127    display: block;
128    background: #ffffff;
129    text-decoration: none;
130    margin: 28px 0 0;
131    padding: 8px 18px;
132    border-radius: 4px;
133    font-size: 16px;
134    font-weight: 600;
135}
136
137.gh-post-upgrade-cta a.gh-btn:hover {
138    opacity: 0.92;
139}</style>
139<script async src="https://js.stripe.com/v3/"></script>
139
140    
140<script defer src="https://cdn.jsdelivr.net/ghost/sodo-search@~1.8/umd/sodo-search.min.js" data-key="218e5a957a1e20b0ffa5d1db78" data-styles="https://cdn.jsdelivr.net/ghost/sodo-search@~1.8/umd/main.css" data-sodo-search="https://4think.blog/" data-locale="zh-Hant" crossorigin="anonymous"></script>
140
141    
142    <link href="https://4think.blog/webmentions/receive/" rel="webmention">
143    
143<script defer src="/public/cards.min.js?v=d507eea3ed"></script>
143
144    <link rel="stylesheet" type="text/css" href="/public/cards.min.css?v=d507eea3ed">
145    
145<script defer src="/public/member-attribution.min.js?v=d507eea3ed"></script>
145<style>:root {--ghost-accent-color: #099999;}</style>
146    <style>
147
148/* ============================================================
149   1. ANONYMOUS PRO (for site title "4THINK")
150   ============================================================ */
151
152@font-face {
153  font-family: 'Anonymous Pro';
154  font-style: normal;
155  font-weight: 400;
156  font-display: swap;
157  src: url('/assets/fonts/anonymous-pro-v22-latin-regular.woff2') format('woff2');
158}
159
160@font-face {
161  font-family: 'Anonymous Pro';
162  font-style: normal;
163  font-weight: 700;
164  font-display: swap;
165  src: url('/assets/fonts/anonymous-pro-v22-latin-700.woff2') format('woff2');
166}
167
168/* ============================================================
169   2. NOTO SANS TC (for Traditional/Simplified Chinese characters)
170   ============================================================ */
171
172 
173@font-face {
174  font-family: 'Noto Sans TC';
175  font-style: normal;
176  font-weight: 400;
177  font-display: swap;
178  src: url('/assets/fonts/noto-sans-tc-v39-chinese-traditional_latin-regular.woff2') format('woff2');
179}
180
181@font-face {
182  font-family: 'Noto Sans TC';
183  font-style: normal;
184  font-weight: 700;
185  font-display: swap;
186  src: url('/assets/fonts/noto-sans-tc-v39-chinese-traditional_latin-700.woff2') format('woff2');
187}
188
189@font-face {
190  font-family: 'Noto Sans SC';
191  font-style: normal;
192  font-weight: 400;
193  font-display: swap;
194  src: url('/assets/fonts/noto-sans-sc-v40-chinese-simplified_latin-regular.woff2') format('woff2');
195}
196
197@font-face {
198  font-family: 'Noto Sans SC';
199  font-style: normal;
200  font-weight: 700;
201  font-display: swap;
202  src: url('/assets/fonts/noto-sans-sc-v40-chinese-simplified_latin-700.woff2') format('woff2');
203}
204
205/* ============================================================
206   3. OVERRIDE GHOST'S FONT VARIABLES
207   ============================================================ */
208
209:root {
210  --gh-font-body: 'Noto Sans TC', sans-serif;
211  --gh-font-heading: 'Noto Sans TC', sans-serif;
212}
213
214/* ============================================================
215   4. GLOBAL APPLICATION
216   ============================================================ */
217
218body,
219h1, h2, h3, h4, h5, h6, p,
220.gh-article-title, .gh-card-title .kg-product-card {
221  font-family: 'Noto Sans TC', sans-serif !important;
222}
223
224
225/* Site title only: Anonymous Pro (Latin) → Noto Sans TC (Chinese) */
226.gh-head-logo .signup-title .signup-desc{
227  font-family: 'Anonymous Pro', 'Noto Sans TC', serif !important;
228}
229
230/* Standardize heading weights */
231h1, h2, h3, .gh-article-title {
232  font-weight: 700 !important;
233}
234
235/* Keep code blocks monospace */
236code, pre, kbd, samp {
237  font-family: monospace !important;
238  font-size: 0.9em;
239}
240
241/* Font smoothing */
242body {
243  -webkit-font-smoothing: antialiased;
244  -moz-osx-font-smoothing: grayscale;
245}
246
247/* ============================================================
248   5. SITE TITLE TUNING
249   ============================================================ */
250
251.gh-head-logo {
252  font-size: 0 !important;
253  display: flex !important;
254  flex-direction: column !important;
255  align-items: flex-start !important;
256  line-height: 1.2 !important;
257
258}
259
260.gh-head-logo::before {
261  content: '4THINK';
262  font-family: 'Anonymous Pro', monospace !important;
263  font-size: 3.3rem;
264  font-weight: 700;
265  line-height: 1;
266  letter-spacing: 0.1em; /* adjust spacing between letters */  
267}
268
269.gh-head-logo::after {
270  content: '為自主思考而閲讀';
271  font-family: 'Noto Sans TC', sans-serif !important;
272  font-size: 1.5rem;
273  font-weight: 400;
274  line-height: 1.4;
275  letter-spacing: 0.03em; /* adjust spacing between letters */  
276}
277
278.cover {
279  display:none;
280}
281
282.gh-head-btn.gh-btn {
283    font-size: inherit;
284    font-weight: 700;
285    color: #fff;
286}
287
288/* ============================================================
289   6. BLOCKQUOTE SPACING
290   ============================================================ */
291
292blockquote p {
293  margin-bottom: 1em;
294}
295
296blockquote p:last-child {
297  margin-bottom: 0;
298}
299
300/* ============================================================
301   7. FORCE NO ITALIC
302   ============================================================ */
303  
304.gh-content * {
305  font-style: normal !important;
306}
307
308/* ============================================================
309   8. ACCENT COLOR ADJUSTMENT
310   ============================================================ */
311
312
313@media (prefers-color-scheme: light) {
314  html:not(.theme-dark) { 
315    --ghost-accent-color: #006666 !important; 
316  }
317}
318
319html.theme-light {
320  --ghost-accent-color: #006666 !important;
321}
322
323/* ============================================================
324   9. H1 H2 ADJUSTMENT
325   ============================================================ */
326
327h2:not(.feed-title), 
328h2:not(.feed-title) span,
329.gh-content h2:not(.feed-title), 
330.gh-content h2:not(.feed-title) span {
331  color: var(--ghost-accent-color) !important;
332}
333
334h1:not(.feed-title), 
335h1:not(.feed-title) span,
336.gh-content h1:not(.feed-title), 
337.gh-content h1:not(.feed-title) span {
338  /*color: #F59E0B !important;*/
339  color: var(--ghost-accent-color) !important;
340}
341  
342.feed-title, 
343.feed-title span {
344  color: inherit !important;
345}
346
347
348/* ============================================================
349   10. HYPERLINK COLOR ADJUSTMENT
350   ============================================================ */
351
352/* 5. HYPERLINK COLOR */
353.gh-content a, 
354.gh-content a span {
355  color: inherit !important;
356  opacity: 0.9;
357  text-decoration: underline;
358}
359.gh-content a:hover {
360  color: var(--ghost-accent-color) !important;
361  opacity: 0.9;
362}
363
364
365/* ============================================================
366   11. 排版
367   ============================================================ */
368/*    文章內容容器
369      Ghost 的文章內容預設 class 為 .gh-content */
370.gh-content {
371  font-size: 18px;
372  letter-spacing: normal;
373  letter-spacing: 0.015em !important;
374}
375
376/*    文章標題(Post Title / H1)    */
377.gh-article-title,
378.article-title,
379h1.post-full-title {
380  font-family: "Noto Sans TC", sans-serif;
381  font-size: 40px;
382  font-weight: 700;
383  letter-spacing: normal;
384  margin-top: 0;
385  margin-bottom: 1em;
386}
387
388/*    段落(Paragraph) */
389.gh-content p {
390  font-size: 18px;
391  letter-spacing: normal;
392  letter-spacing: 0.015em !important;
393}
394
395/*    標題層級(Headings in content)    */
396
397/* H2 */
398.gh-content h2 {
399  font-family: "Noto Sans TC", sans-serif;
400  font-size: 25px;
401  font-weight: 700;
402  letter-spacing: normal;
403  text-rendering: optimizeLegibility;
404}
405
406/* H3(預設樣式,原站無出現,補全備用) */
407.gh-content h3 {
408  font-family: "Noto Sans TC", sans-serif;
409  font-size: 21px;
410  font-weight: 700;
411  text-rendering: optimizeLegibility;
412}
413
414/* H4(備用) */
415.gh-content h4 {
416  font-family: "Noto Sans TC", sans-serif;
417  font-size: 18px;
418  font-weight: 700;
419  text-rendering: optimizeLegibility;
420}
421
422
423/*    超連結    */
424.gh-content a {
425  text-decoration: none;
426  box-shadow: 0 1px 0 0 currentColor; /* 底線效果(非 underline,用 box-shadow 模擬) */
427  transition: color 0.2s ease, box-shadow 0.2s ease;
428}
429
430.gh-content a:hover,
431.gh-content a:focus {
432  box-shadow: none;         /* hover 時移除底線 */
433  outline: none;
434}
435
436/*    引用區塊(Blockquote)    */
437.gh-content blockquote {
438  font-family: "Noto Sans TC", sans-serif;
439  font-size: 18px;
440  letter-spacing: normal;
441  letter-spacing: 0.015em !important;
442  overflow: hidden;
443}
444
445.gh-content blockquote p {
446  font-size: 18px;
447  letter-spacing: normal;
448}
449
450.gh-content blockquote em,
451.gh-content blockquote i,
452.gh-content blockquote cite {
453  font-style: normal;
454}
455
456.gh-content blockquote strong,
457.gh-content blockquote b {
458  font-weight: 400;
459}
460
461.gh-content blockquote cite,
462.gh-content blockquote small {
463  display: block;
464  font-size: 14px;
465}
466
467.gh-content blockquote cite::before,
468.gh-content blockquote small::before {
469  content: "— ";
470}
471
472/*    對齊(WordPress 標準 align classes,Ghost 亦沿用)   */
473.gh-content .alignleft {
474  float: left;
475  margin: 0 1.5em 1em 0;
476}
477
478.gh-content .alignright {
479  float: right;
480  margin: 0 0 1em 1.5em;
481}
482
483.gh-content .aligncenter {
484  display: block;
485  margin-left: auto;
486  margin-right: auto;
487}
488
489.gh-content blockquote.alignleft {
490  margin: 0.3158em 1.4737em 1.4737em 0;
491}
492
493.gh-content blockquote.alignright {
494  margin: 0.3158em 0 1.4737em 1.4737em;
495}
496
497/* ============================================================
498   12. DARK MODE READABILITY OPTIMIZATIONS
499   ============================================================ */
500/* Target both System Dark Mode and Manual Toggle */
501@media (prefers-color-scheme: dark) {
502    html:not(.theme-light) body {
503        color: #E0E0E0 !important;
504    }
505}
506
507html.theme-dark body {
508    color: #E0E0E0 !important;
509}
510
511/* ============================================================
512   13. SOCIAL MEDIA ICON
513   ============================================================ */
514
515.gh-head-social {
516    display: inline-flex;
517    align-items: center;
518    gap: 10px;
519    margin-right: 4px;
520    vertical-align: middle;
521}
522.gh-head-social-link {
523    display: flex;
524    align-items: center;
525    opacity: 1;
526    transition: opacity 0.2s;
527    line-height: 1;
528}
529.gh-head-social-link:hover {
530    opacity: 1;
531}
532
533.gh-foot-social {
534    display: flex;
535    align-items: center;
536    gap: 16px;
537    margin-bottom: 8px;
538    justify-content: center;
539}
540.gh-foot-social-link {
541    display: flex;
542    align-items: center;
543    opacity: 1;
544    transition: opacity 0.2s;
545    filter: drop-shadow(0px 1px 3px #099999);
546}
547.gh-foot-social-link:hover {
548    opacity: 0.5;
549}
550
551/* ============================================================
552   14. FEATURED POST
553   ============================================================ */
554
555
556.featured-title {
557    display: none;
558}
559
560.owl-nav {
561    display: none;
562}
563
564.featured-feed {
565    overflow: visible !important;
566}
567.owl-stage-outer {
568    overflow-x: hidden !important;
569    overflow-y: visible !important;
570    padding-bottom: 16px !important;
571    margin-bottom: -16px !important;
572}
573
574/* Card hover animation */
575.featured-feed article {
576    transition: transform 0.2s ease, box-shadow 0.2s ease;
577    border-radius: 6px;
578    overflow: hidden;
579}
580.featured-feed article:hover {
581    transform: translateY(-6px);
582    box-shadow: 0 6px 0 #006666;
583}
584
585/* Image zoom on hover */
586.featured-feed article img {
587    transition: transform 0.2s ease;
588}
589.featured-feed article:hover img {
590    transform: scale(1.05);
591}
592
593/* ============================================================
594   15. LOAD MORE
595   ============================================================ */
596  
597.load-more {
598  margin-bottom: 60px;
599    }
600
601/* ============================================================
602   16. SIGN UP
603   ============================================================ */
604
605.signup-section {
606    background-color: #005555;
607    padding: 100px 40px;
608    text-align: center;
609    width: 100%;
610}
611.signup-section-inner {
612    max-width: 600px;
613    margin: 0 auto;
614    display: flex;
615    flex-direction: column;
616    align-items: center;
617}
618.signup-logo {
619    width: 100px;
620    height: 100px;
621    border-radius: 50%;
622    margin-bottom: 10px;
623    background: white;
624    padding: 4px;
625}
626.signup-title {
627    color: #ffffff !important;
628    font-size: 0;
629    font-weight: 700;
630    margin: 0 0 8px 0;
631}
632
633.signup-title::before {
634    content: '4THINK';
635    color: #ffffff !important;
636    font-size: 50px;
637    font-weight: 700;
638    margin: 0 0 8px 0;
639    font-family: 'Anonymous Pro', serif !important;
640    letter-spacing: 0.1em; /* adjust spacing between letters */    
641}
642
643.signup-title::after {
644    content: ' | 為自主思考而閲讀';
645    color: #ffffff !important;
646    font-size: 42px;
647    font-weight: 700;
648    margin: 0 0 8px 0;
649    font-family: 'Noto Sans TC', serif !important;
650    letter-spacing: 0.03em; /* adjust spacing between letters */  
651}
652
653.signup-desc {
654    color: rgba(255,255,255,0.95);
655    font-size: 16px;
656    margin: -8px 0 24px 0;
657    font-family: 'Anonymous Pro', 'Noto Sans TC', serif !important;
658}
659
660.signup-section-inner {
661  margin-top: -20px
662}
663
664@media (max-width: 480px) {
665    .signup-title::after {
666        display: none;
667    }
668}
669
670/* ============================================================
671   17. FEED LIST
672   ============================================================ */
673
674.feed{
675    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
676}
677  
678.feed:hover{
679    transform: translateX(6px);
680}
681  
682
683.feed-right:hover {
684  transform: none !important;
685}
686
687.feed-right {
688  transition: margin .2s var(--animation-base);
689}
690
691.feed:hover .feed-right {
692    margin-right: 0px;
693}
694
695.button {
696  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
697}
698  
699.button:hover{
700  transform: scale(1.05);
701}
702
703/* ============================================================
704   18. FEATURE IMAGE
705   ============================================================ */
706
707
708.single-header .single-media {
709  grid-column: main;
710}
711
712
713</style>
714
715<meta name="google-site-verification" content="G8rGuionyIyHkf1PwmZo6UWkSrkfa1mo45VSLRqVgmc" />
716    <link rel="preconnect" href="https://fonts.bunny.net"><link rel="stylesheet" href="https://fonts.bunny.net/css?family=noto-sans:400,700"><style>:root {--gh-font-heading: Noto Sans;--gh-font-body: Noto Sans;}</style>
717</head>
718
719<body class='page-template page-table-of-contents-auto gh-font-heading-noto-sans gh-font-body-noto-sans is-head-stacked'>
720<div class="site">
721
722    <header id="gh-head" class="gh-head gh-outer">
723        <div class="gh-head-inner gh-inner">
724            <div class="gh-head-brand">
725                <div class="gh-head-brand-wrapper">
726                    <a class="gh-head-logo" href="https://4think.blog">
727                            4THINK | 為自主思考而閲讀
728                    </a>
729                </div>
730                <button class="gh-search gh-icon-btn" aria-label="搜尋本站內容" data-ghost-search><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="20" height="20"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></button>
731                <button class="gh-burger" aria-label="切換選單"></button>
732            </div>
733
734            <nav class="gh-head-menu">
735                <ul class="nav">
736    <li class="nav-zhu-ye"><a href="https://4think.blog/">主頁</a></li>
737    <li class="nav-guan-yu"><a href="https://4think.blog/about/">關於</a></li>
738    <li class="nav-wen-zhang-lie-biao nav-current"><a href="https://4think.blog/table-of-contents-auto">文章列表</a></li>
739    <li class="nav-dian-zi-shu-xia-zai"><a href="https://4think.blog/legacy-product-download/">電子書下載</a></li>
740    <li class="nav-wo-xie-de-shu"><a href="https://4think.blog/roxas-yong-books/">我寫的書</a></li>
741    <li class="nav-mei-zhou-du-dong-yi-ben-shu"><a href="https://4think.blog/read-a-book-plus-waiting/">每週讀懂一本書 +</a></li>
742</ul>
743
744            </nav>
745
746            <div class="gh-head-actions">
747                    <button class="gh-search gh-icon-btn" aria-label="搜尋本站內容" data-ghost-search><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="20" height="20"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></button>
748                    <div class="gh-head-members">
749                                <a class="gh-head-link" href="#/portal/signin" data-portal="signin">登入</a>
750                                <a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signup" data-portal="signup">訂閱</a>
751                    </div>
752            </div>
753        </div>
754    </header>
755
756
757    <div class="site-content">
758        <main class="site-main">
759    <article class="gh-article">
760        <header class="gh-article-header gh-canvas">
761<figure class="gh-article-image" style="margin-bottom: 4rem;">
762    <img src="https://4think.blog/content/images//2026/04/quoted_card.png" alt="文章列表">
763</figure>
764            <h1 class="gh-article-title">文章列表</h1>
765            <p><span>如果你不知道要從何開始,可以在下面的列表挑一個你感興趣的開始閱讀,然後順藤摸瓜的找到更多你感興趣的閱讀。</span>
766            <span>
766以下列表會持續更新。</span></p>
767        </header>
768        <div class="gh-content gh-canvas">
769
770            <!-- Tag Cloud -->
771            <div id="tag-cloud-wrapper" style="margin-bottom: 2.4rem;">
772                <div id="tag-cloud" style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
773                    <span id="tag-cloud-loading" style="color: var(--color-secondary-text); font-size: 15px;">載入標籤中…</span>
774                </div>
775            </div>
776
777            <!-- Active filter label -->
778            <div id="active-filter" style="display: none; margin-bottom: 1.2rem; font-size: 15px; color: var(--color-secondary-text);">
779                篩選標籤:<strong id="active-filter-name"></strong>
780                <button id="clear-filter" style="margin-left: 0.6rem; background: none; border: none; cursor: pointer; color: var(--ghost-accent-color); font-size: 15px; padding: 0; text-decoration: underline;">清除篩選</button>
781            </div>
782
783            <ol id="post-list" style="list-style: none; padding: 0;"></ol>
784            <p id="post-empty" style="display: none; color: var(--color-secondary-text);">此標籤下沒有文章。</p>
785            <p id="post-loading" style="color: var(--color-secondary-text);">載入中…</p>
786        </div>
787    </article>
788</main>
789<script>
790(async function() {
791    const apiUrl = 'https://4think.blog/ghost/api/content/posts/';
792    const tagsUrl = 'https://4think.blog/ghost/api/content/tags/';
793    const apiKey = '5c31655748337b1881005b2d82';
794    const CACHE_KEY = '4think_post_list_v2';
795    const TAGS_CACHE_KEY = '4think_tags';
796    const CACHE_TTL = 10 * 60 * 1000; // 10分鐘
797
798    const list = document.getElementById('post-list');
799    const loading = document.getElementById('post-loading');
800    const tagCloud = document.getElementById('tag-cloud');
801    const tagCloudLoading = document.getElementById('tag-cloud-loading');
802    const activeFilter = document.getElementById('active-filter');
803    const activeFilterName = document.getElementById('active-filter-name');
804    const clearFilter = document.getElementById('clear-filter');
805    const postEmpty = document.getElementById('post-empty');
806
807    let allPosts = [];
808    let activeTag = null;
809
810    // ── Tag Cloud ──────────────────────────────────────────────
811
812    function renderTagCloud(tags) {
813        tagCloudLoading.remove();
814
815        // "全部" button
816        const allBtn = document.createElement('button');
817        allBtn.textContent = '全部';
818        allBtn.dataset.slug = '';
819        styleTagBtn(allBtn, true);
820        allBtn.addEventListener('click', () => filterByTag('', '全部', allBtn));
821        tagCloud.appendChild(allBtn);
822
823        tags.forEach(tag => {
824            const btn = document.createElement('button');
825            btn.textContent = tag.name;
826            btn.dataset.slug = tag.slug;
827            styleTagBtn(btn, false);
828            btn.addEventListener('click', () => filterByTag(tag.slug, tag.name, btn));
829            tagCloud.appendChild(btn);
830        });
831    }
832
833    function styleTagBtn(btn, active) {
834        btn.style.cssText = `
835            display: inline-block;
836            padding: 0.25rem 0.7rem;
837            border-radius: 2rem;
838            border: 1px solid ${active ? 'var(--ghost-accent-color)' : 'var(--color-border)'};
839            background: ${active ? 'var(--ghost-accent-color)' : 'transparent'};
840            color: ${active ? '#fff' : 'var(--color-base)'};
841            font-size: 15px;
842            cursor: pointer;
843            font-family: inherit;
844        `;
845    }
846
847    function filterByTag(slug, name, clickedBtn) {
848        activeTag = slug || null;
849
850        // Update button styles
851        tagCloud.querySelectorAll('button').forEach(b => {
852            const isActive = b.dataset.slug === slug;
853            styleTagBtn(b, isActive);
854        });
855
856        // Show/hide filter label
857        if (slug) {
858            activeFilter.style.display = 'block';
859            activeFilterName.textContent = name;
860        } else {
861            activeFilter.style.display = 'none';
862        }
863
864        renderPosts(allPosts);
865    }
866
867    clearFilter.addEventListener('click', () => {
868        filterByTag('', '全部', tagCloud.querySelector('button'));
869    });
870
871    // ── Post List ──────────────────────────────────────────────
872
873    function renderPosts(posts) {
874        list.innerHTML = '';
875        const filtered = activeTag
876            ? posts.filter(p => p.tags && p.tags.some(t => t.slug === activeTag))
877            : posts;
878
879        postEmpty.style.display = filtered.length === 0 ? 'block' : 'none';
880
881        filtered.forEach((post, index) => {
882            const li = document.createElement('li');
883            li.style.cssText = 'margin-bottom: 1.2rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.8rem; display: flex; align-items: baseline;';
884            li.innerHTML = `
885                <span style="font-weight: bold; color: var(--color-secondary-text); margin-right: 15px; min-width: 30px; font-family: monospace;">
886                    ${index + 1}.
887                </span>
888                <a href="${post.url}" style="font-weight: 600; text-decoration: none; line-height: 1.4;">
889                    ${post.title}
890                </a>
891            `;
892            list.appendChild(li);
893        });
894    }
895
896    // ── Fetch Tags ─────────────────────────────────────────────
897
898    async function loadTags() {
899        try {
900            const cached = JSON.parse(localStorage.getItem(TAGS_CACHE_KEY));
901            if (cached && Date.now() - cached.ts < CACHE_TTL) {
902                renderTagCloud(cached.tags);
903                return;
904            }
905        } catch(e) {}
906
907        const res = await fetch(`${tagsUrl}?key=${apiKey}&limit=all&order=count.posts%20desc&include=count.posts`);
908        const data = await res.json();
909        const tags = (data.tags || []).filter(t => t.count.posts > 0 && !t.slug.startsWith('hash-'));
910
911        try {
912            localStorage.setItem(TAGS_CACHE_KEY, JSON.stringify({ ts: Date.now(), tags }));
913        } catch(e) {}
914
915        renderTagCloud(tags);
916    }
917
918    // ── Fetch Posts ────────────────────────────────────────────
919
920    async function loadPosts() {
921        try {
922            const cached = JSON.parse(localStorage.getItem(CACHE_KEY));
923            if (cached && Date.now() - cached.ts < CACHE_TTL) {
924                allPosts = cached.posts;
925                loading.remove();
926                renderPosts(allPosts);
927                return;
928            }
929        } catch(e) {}
930
931        const firstRes = await fetch(`${apiUrl}?key=${apiKey}&limit=100&page=1&order=published_at%20desc&fields=title,url&include=tags`);
932        const firstData = await firstRes.json();
933        const totalPages = firstData.meta.pagination.pages;
934
935        const remainingFetches = [];
936        for (let p = 2; p <= totalPages; p++) {
937            remainingFetches.push(
938                fetch(`${apiUrl}?key=${apiKey}&limit=100&page=${p}&order=published_at%20desc&fields=title,url&include=tags`)
939                .then(r => r.json())
940                .then(d => d.posts)
941            );
942        }
943        const remainingResults = await Promise.all(remainingFetches);
944        allPosts = [firstData.posts, ...remainingResults].flat();
945
946        try {
947            localStorage.setItem(CACHE_KEY, JSON.stringify({ ts: Date.now(), posts: allPosts }));
948        } catch(e) {}
949
950        loading.remove();
951        renderPosts(allPosts);
952    }
953
954    // ── Init ───────────────────────────────────────────────────
955    await Promise.all([loadTags(), loadPosts()]);
956})();
957</script>
957
958
959    </div>
960
961    <footer class="gh-foot gh-outer">
962        <div class="gh-foot-inner gh-inner">
963            <div class="gh-copyright">
964                4THINK | 為自主思考而閲讀 © 2026
965            </div>
966                <nav class="gh-foot-menu">
967                    <ul class="nav">
968    <li class="nav-fu-wu-tiao-kuan-yu-yin-si-quan-zheng-ce"><a href="https://4think.blog/terms-of-service-and-privacy-policy-tc/">服務條款與隱私權政策</a></li>
969    <li class="nav-tui-kuan-zheng-ce"><a href="https://4think.blog/refund-policy-tc/">退款政策</a></li>
970    <li class="nav-lian-luo-wo"><a href="/cdn-cgi/l/email-protection#0b7964736a784b3f7f63626560256967646c">聯絡我</a></li>
971</ul>
972
973                </nav>
974            <div class="gh-foot-social">
975                <a class="gh-foot-social-link" href="https://www.facebook.com/4think.blog" target="_blank" rel="noopener" aria-label="Facebook">
976                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
977                </a>
978                <a class="gh-foot-social-link" href="https://www.instagram.com/4think.blog" target="_blank" rel="noopener" aria-label="Instagram">
979                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
980                </a>
981                <a class="gh-foot-social-link" href="https://www.threads.net/@4think.blog" target="_blank" rel="noopener" aria-label="Threads">
982                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 192 192" fill="currentColor"><path d="M141.537 88.988a66.667 66.667 0 00-2.518-1.143c-1.482-27.307-16.403-42.94-41.457-43.1h-.34c-14.986 0-27.449 6.396-35.12 18.036l13.779 9.452c5.73-8.695 14.724-10.548 21.348-10.548h.229c8.249.053 14.474 2.452 18.503 7.129 2.932 3.405 4.893 8.111 5.864 14.05-7.314-1.243-15.224-1.626-23.68-1.14-23.82 1.371-39.134 15.264-38.105 34.568.522 9.792 5.4 18.216 13.735 23.719 7.047 4.652 16.124 6.927 25.557 6.412 12.458-.683 22.231-5.436 29.049-14.127 5.178-6.6 8.452-15.153 9.899-25.93 5.937 3.583 10.337 8.298 12.767 13.966 4.132 9.635 4.373 25.468-8.546 38.376-11.319 11.308-24.925 16.2-45.488 16.351-22.809-.169-40.06-7.484-51.275-21.742C35.236 139.966 29.808 120.682 29.605 96c.203-24.682 5.63-43.966 16.133-57.317C56.954 24.425 74.204 17.11 97.013 16.94c22.975.17 40.526 7.52 52.171 21.847 5.71 7.026 10.015 15.86 12.853 26.162l16.147-4.308c-3.44-12.68-8.853-23.606-16.219-32.668C147.036 10.606 125.202 1.203 97.07 1h-.377C68.717 1.203 47.17 10.637 32.853 28.054 19.948 43.741 13.33 65.157 13.11 95.933L13 96l.11.067c.22 30.777 6.838 52.193 19.743 67.88C47.17 181.363 68.717 190.797 96.693 191h.377c24.813-.173 42.908-6.64 57.682-21.401 19.269-19.232 18.678-43.292 12.348-58.054-4.561-10.63-13.451-19.208-25.563-24.557zM98.034 140.17c-10.442.579-21.286-4.098-21.821-14.135-.397-7.442 5.296-15.746 22.461-16.735 1.966-.113 3.895-.169 5.79-.169 6.235 0 12.068.606 17.37 1.765-1.978 24.702-13.58 28.713-23.8 29.274z"/></svg>
983                </a>
984            </div>
985        </div>
986    </footer>
987
988</div>
989
990    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
991    <div class="pswp__bg"></div>
992
993    <div class="pswp__scroll-wrap">
994        <div class="pswp__container">
995            <div class="pswp__item"></div>
996            <div class="pswp__item"></div>
997            <div class="pswp__item"></div>
998        </div>
999
1000        <div class="pswp__ui pswp__ui--hidden">
1001            <div class="pswp__top-bar">
1002                <div class="pswp__counter"></div>
1003
1004                <button class="pswp__button pswp__button--close" title="關閉 (Esc)"></button>
1005                <button class="pswp__button pswp__button--share" title="分享"></button>
1006                <button class="pswp__button pswp__button--fs" title="切換全螢幕"></button>
1007                <button class="pswp__button pswp__button--zoom" title="放大/縮小"></button>
1008
1009                <div class="pswp__preloader">
1010                    <div class="pswp__preloader__icn">
1011                        <div class="pswp__preloader__cut">
1012                            <div class="pswp__preloader__donut"></div>
1013                        </div>
1014                    </div>
1015                </div>
1016            </div>
1017
1018            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
1019                <div class="pswp__share-tooltip"></div>
1020            </div>
1021
1022            <button class="pswp__button pswp__button--arrow--left" title="上一個(左方向鍵)"></button>
1023            <button class="pswp__button pswp__button--arrow--right" title="下一個(右方向鍵)"></button>
1024
1025            <div class="pswp__caption">
1026                <div class="pswp__caption__center"></div>
1027            </div>
1028        </div>
1029    </div>
1030</div>
vendor: 109 bytes, lines 1030-1031
1030
1031<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
1031<script
1032    src="https://code.jquery.com/jquery-3.5.1.min.js"
1033    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
1034    crossorigin="anonymous">
1035</script>
vendor: 1 bytes, line 1035
1035
1036<script src='/assets/built/main.min.js?v=d507eea3ed'></script>
1036
1037
1038<!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 1038-1039
1038
1039<script async src="https://www.googletagmanager.com/gtag/js?id=
1039G-5CBVN627ST
vendor: 12 bytes, line 1039
1039"></script>
1040<script>
1041  window.dataLayer = window.dataLayer || [];
1042  function gtag(){dataLayer.push(arguments);}
1043  gtag('js', new Date());
1044
1045  gtag('config', 'G-5CBVN627ST');
1046</script>
1046
1047
1048<!-- Meta Pixel Code -->
1049<script>
vendor: 399 bytes, lines 1049-1058
1049
1050!function(f,b,e,v,n,t,s)
1051{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
1052n.callMethod.apply(n,arguments):n.queue.push(arguments)};
1053if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
1054n.queue=[];t=b.createElement(e);t.async=!0;
1055t.src=v;s=b.getElementsByTagName(e)[0];
1056s.parentNode.insertBefore(t,s)}(window, document,'script',
1057'https://connect.facebook.net/en_US/fbevents.js');
1058fbq('init', '
1058116470495504687
vendor: 30 bytes, lines 1058-1059
1058');
1059fbq('track', 'PageView');
1060</script>
1060
1061<noscript><img height="1" width="1" style="display:none"
1062src="https://www.facebook.com/tr?id=116470495504687&ev=PageView&noscript=1"
1063/></noscript>
1064<!-- End Meta Pixel Code -->
1065
1066<script>
1067document.addEventListener('DOMContentLoaded', function() {
1068    setTimeout(function() {
1069        var owl = jQuery('.featured-feed');
1070        owl.trigger('destroy.owl.carousel');
1071        owl.owlCarousel({
1072            dots: false,
1073            margin: 30,
1074            nav: true,
1075            loop: true,
1076            autoplay: true,
1077            autoplayTimeout: 5000,
1078            autoplayHoverPause: true,
1079            autoplaySpeed: 600,
1080            navText: ['&#8249;', '&#8250;'],
1081            responsive: {
1082                0: { items: 1 },
1083                768: { items: 2 },
1084                992: { items: 3 }
1085            }
1086        });
1087    }, 500);
1088});
1089</script>
1089
1090
1091<!--
1092  GHOST CODE INJECTION — Site Footer
1093  Or paste into Settings → Code injection → Site Footer
1094-->
1095
1096<style>
1097  .gated-audio-player {
1098    margin: 1.5rem 0 2rem;
1099    padding: 1rem;
1100    background: var(--color-lighter-gray, #f5f5f5);
1101    border: 1px solid var(--color-border, #e5e5e5);
1102    border-radius: 8px;
1103  }
1104  .gated-audio-player audio {
1105    width: 100%;
1106    display: block;
1107  }
1108  .gated-audio-player .audio-label {
1109    font-size: 0.85em;
1110    opacity: 0.6;
1111    margin-bottom: 0.5rem;
1112  }
1113</style>
1114
1115<script>
1116(function() {
1117  // ⚠️ CHANGE THIS to your audio Worker URL
1118  const WORKER_BASE = 'https://audio-gated-player.roxas-yong-786.workers.dev';
1119
1120  // Auto-detect episode from URL slug
1121  const match = window.location.pathname.match(/^\/read-a-book-s2-e(\d+)\/?$/);
1122  if (!match) return;
1123  const episode = match[1];
1124
1125  async function getMemberUUID() {
1126    try {
1127      const res = await fetch('/members/api/member/', { credentials: 'include' });
1128      if (!res.ok) return null;
1129      const data = await res.json();
1130      return data.uuid || null;
1131    } catch(e) {
1132      return null;
1133    }
1134  }
1135
1136  async function init() {
1137    const uuid = await getMemberUUID();
1138    if (!uuid) return;
1139
1140    const audioUrl = WORKER_BASE + '/api/audio?uuid=' + encodeURIComponent(uuid) + '&episode=' + encodeURIComponent(episode);
1141
1142    fetch(audioUrl, { method: 'GET', headers: { 'Range': 'bytes=0-0' } })
1143      .then(function(res) {
1144        if (res.status === 206 || res.status === 200) {
1145          var content = document.querySelector('.gh-content');
1146          if (!content) return;
1147
1148          var container = document.createElement('div');
1149          container.className = 'gated-audio-player';
1150          container.innerHTML =
1151            '<div class="audio-label">🎧 每週讀懂一本書音頻 第二季 — 第 ' + escapeHtml(episode) + ' 集</div>' +
1152            '<audio controls preload="none">' +
1153            '<source src="' + escapeHtml(audioUrl) + '" type="audio/mpeg">' +
1154            '</audio>';
1155          content.insertBefore(container, content.firstChild);
1156        }
1157      })
1158      .catch(function() {});
1159  }
1160
1161  function escapeHtml(str) {
1162    var div = document.createElement('div');
1163    div.textContent = str;
1164    return div.innerHTML;
1165  }
1166
1167  init();
1168})();
1169</script>
1169
1170
1171<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/full.js"></script>
1171
1172
1173<script>
1174(function () {
1175  window.addEventListener('load', function () {
1176    if (typeof OpenCC === 'undefined') return;
1177
1178    const toSimplified  = OpenCC.Converter({ from: 'tw', to: 'cn' });
1179    const toTraditional = OpenCC.Converter({ from: 'cn', to: 'tw' });
1180
1181    const SC_FONTS = '"Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif';
1182
1183    const scStyle = document.createElement('style');
1184    scStyle.id = 'sc-font-override';
1185    scStyle.textContent = `
1186      :root {
1187        --gh-font-body: ${SC_FONTS} !important;
1188        --gh-font-heading: ${SC_FONTS} !important;
1189      }
1190      body,
1191      h1, h2, h3, h4, h5, h6, p,
1192      .gh-article-title, .gh-card-title, .kg-product-card,
1193      .gh-content,
1194      .gh-content p,
1195      .gh-content h2,
1196      .gh-content h3,
1197      .gh-content h4,
1198      .gh-content blockquote,
1199      .gh-content blockquote p,
1200      .article-title,
1201      h1.post-full-title {
1202        font-family: ${SC_FONTS} !important;
1203      }
1204    `;
1205
1206    /* ── Button ── */
1207    const btn = document.createElement('button');
1208    btn.id = 'zhs-toggle';
1209    btn.setAttribute('aria-label', '切換簡體中文');
1210    btn.textContent = '简/繁';
1211    Object.assign(btn.style, {
1212      background:    'none',
1213      border:        'none',
1214      color:         'inherit',
1215      fontSize:      '15px',
1216      fontFamily:    '"Noto Sans TC", sans-serif',
1217      fontWeight:    '400',
1218      cursor:        'pointer',
1219      opacity:       '0.8',
1220      padding:       '0px 0px',
1221      marginRight:   '0px',
1222      lineHeight:    '1',
1223      transition:    'opacity 0.2s ease',
1224      letterSpacing: '0.0em',
1225      verticalAlign: 'middle',
1226    });
1227
1228    btn.addEventListener('mouseenter', () => { btn.style.opacity = '1'; });
1229    btn.addEventListener('mouseleave', () => { btn.style.opacity = simplified ? '1' : '0.8'; });
1230
1231    /* ── Insert inside .gh-head-members, before 帳號 ── */
1232    try {
1233      const members = document.querySelector('.gh-head-members');
1234      const actions = document.querySelector('.gh-head-actions');
1235      if (members) {
1236        members.insertBefore(btn, members.firstChild);
1237      } else if (actions) {
1238        actions.append(btn);
1239      }
1240    } catch (e) {
1241      console.warn('zhs-toggle: could not insert button', e);
1242    }
1243
1244    /* ── Text node walker ── */
1245    function walkAndConvert(root, converter) {
1246      const walker = document.createTreeWalker(
1247        root,
1248        NodeFilter.SHOW_TEXT,
1249        {
1250          acceptNode: function (node) {
1251            const parent = node.parentElement;
1252            if (!parent) return NodeFilter.FILTER_REJECT;
1253            const tag = parent.tagName;
1254            if (tag === 'SCRIPT' || tag === 'STYLE' || tag === 'NOSCRIPT') return NodeFilter.FILTER_REJECT;
1255            if (parent.closest('#zhs-toggle')) return NodeFilter.FILTER_REJECT;
1256            return node.textContent.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
1257          }
1258        }
1259      );
1260      const nodes = [];
1261      while (walker.nextNode()) nodes.push(walker.currentNode);
1262      nodes.forEach(n => { n.textContent = converter(n.textContent); });
1263    }
1264
1265    /* ── Toggle ── */
1266    let simplified = false;
1267
1268    btn.addEventListener('click', function () {
1269      simplified = !simplified;
1270
1271      walkAndConvert(document.body, simplified ? toSimplified : toTraditional);
1272
1273      if (simplified) {
1274        document.head.appendChild(scStyle);
1275      } else {
1276        const existing = document.getElementById('sc-font-override');
1277        if (existing) existing.remove();
1278      }
1279
1280      btn.textContent      = simplified ? '简/繁' : '简/繁';
1281      btn.style.opacity    = simplified ? '1' : '0.8';
1282      btn.style.fontFamily = simplified
1283        ? '"Noto Sans SC", sans-serif'
1284        : '"Noto Sans TC", sans-serif';
1285      btn.setAttribute('aria-label', simplified ? '切換繁體中文' : '切換簡體中文');
1286
1287      localStorage.setItem('4think-lang', simplified ? 'sc' : 'tc');
1288    });
1289
1290    /* ── Restore saved preference ── */
1291    if (localStorage.getItem('4think-lang') === 'sc') {
1292      simplified = true;
1293      walkAndConvert(document.body, toSimplified);
1294      document.head.appendChild(scStyle);
1295      btn.textContent      = '简/繁';
1296      btn.style.opacity    = '1';
1297      btn.style.fontFamily = '"Noto Sans SC", sans-serif';
1298      btn.setAttribute('aria-label', '切換繁體中文');
1299    }
1300
1301  });
1302})();
1303</script>
1303
1304
1305<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a420e9af2885b8c9',t:'MTc5MDU3OTI2Mw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
1305<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"85f1ecc43e674dcc917767793765d32a","r":1,"spa":2}' crossorigin="anonymous"></script>
1305
1306</body>
1307</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.