list.html (3991B)
1 <!doctype html> 2 <html lang="jp"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Trinity Library - Fanfic Index</title> 6 <meta name="author" content="ハチか" /> 7 <meta name="description" content="ファンフィクション(二次創作置き場)" /> 8 <link rel="stylesheet" href="styles.css" /> 9 </head> 10 <body> 11 <header> 12 Library 13 <button class="theme-toggle" id="theme-btn">MODE: LIGHT</button> 14 </header> 15 <nav> 16 <a href="index.html">ホーム</a> 17 <a href="list.html">蔵書目録</a> 18 <a href="sns.html">sns一覧</a> 19 <a href="about.html">about</a> 20 </nav> 21 <main> 22 <span class="doc-id" id="doc-id" 23 >DOC_TYPE: INDEX / REF_NO: 773</span 24 > 25 <h1>蔵書目録</h1> 26 <ul id="article-list"></ul> 27 </main> 28 <footer> 29 このページは主にBlue 30 Archiveの二次創作であり，公式を模す意図はありません． 31 </footer> 32 33 <script> 34 const btn = document.getElementById("theme-btn"); 35 const docId = document.getElementById("doc-id"); 36 let isDark = false; 37 38 btn.addEventListener("click", () => { 39 isDark = !isDark; 40 document.documentElement.setAttribute( 41 "data-theme", 42 isDark ? "dark" : "light", 43 ); 44 btn.textContent = isDark ? "MODE: DARK" : "MODE: LIGHT"; 45 46 docId.textContent = isDark 47 ? "DOC_TYPE: NIGHT_ARCHIVE / REF_NO: 404" 48 : "DOC_TYPE: INDEX / REF_NO: 773"; 49 }); 50 51 window.addEventListener("DOMContentLoaded", () => { 52 const articleListElement = 53 document.getElementById("article-list"); 54 55 async function fetchArticleTitle(id) { 56 try { 57 const response = await fetch(`articles/${id}.txt`); 58 if (!response.ok) { 59 return null; 60 } 61 const text = await response.text(); 62 const title = text.split("\n")[0]; 63 return title; 64 } catch (error) { 65 console.error(`Error fetching article ${id}:`, error); 66 return null; 67 } 68 } 69 70 async function loadAllArticles() { 71 articleListElement.innerHTML = "<li>Loading...</li>"; 72 let id = 1; 73 const articles = []; 74 75 while (true) { 76 const title = await fetchArticleTitle(id); 77 if (title) { 78 articles.push({ id, title }); 79 id++; 80 } else { 81 break; 82 } 83 } 84 85 articleListElement.innerHTML = ""; 86 87 if (articles.length > 0) { 88 articles.reverse(); 89 articles.forEach((article) => { 90 const listItem = document.createElement("li"); 91 const link = document.createElement("a"); 92 link.href = `article.html?id=${article.id}`; 93 link.textContent = article.title; 94 listItem.appendChild(link); 95 articleListElement.appendChild(listItem); 96 }); 97 } else { 98 articleListElement.innerHTML = 99 "<li>No articles found.</li>"; 100 } 101 } 102 103 loadAllArticles(); 104 }); 105 </script> 106 </body> 107 </html>