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: ['‹', '›'], 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.