diff --git a/index.html b/index.html index 71cd88e..09bbed7 100644 --- a/index.html +++ b/index.html @@ -192,7 +192,7 @@ border-left: 4px solid #757575; } .article-preview { - white-space: pre-line; + white-space: pre-wrap; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; @@ -200,13 +200,24 @@ -webkit-box-orient: vertical; } .blog-preview { - white-space: pre-line; + white-space: pre-wrap; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } + .article-content { + white-space: pre-wrap; + } + .article-link { + color: #212121; + text-decoration: underline; + cursor: pointer; + } + .dark-mode .article-link { + color: #E0E0E0; + } /* 响应式设计调整 */ @media (max-width: 768px) { @@ -278,7 +289,7 @@

Joyance的博客

@@ -315,36 +326,48 @@

Joyance的博客

function toggleLanguage() { isEnglish = !isEnglish; - document.getElementById('languageToggle').textContent = isEnglish ? '中文' : 'EN'; - document.getElementById('headerTitle').textContent = isEnglish ? 'Joyance\'s Plog' : 'Joyance的博客'; - document.getElementById('navHome').textContent = isEnglish ? 'Home' : '首页'; - document.getElementById('navBlog').textContent = isEnglish ? 'Blog' : '博客'; - document.getElementById('navContact').textContent = isEnglish ? 'Contact' : '联系'; - updateContent(); + updateLanguage(); } function toggleDarkMode() { isDarkMode = !isDarkMode; document.body.classList.toggle('dark-mode'); - document.getElementById('darkModeToggle').textContent = isDarkMode ? '❍' : '☾'; + updateDarkModeButton(); + } + + function updateLanguage() { + document.getElementById('headerTitle').textContent = isEnglish ? "Joyance's Blog" : "Joyance的博客"; + document.getElementById('languageToggle').textContent = isEnglish ? "中文" : "EN"; + document.getElementById('navHome').textContent = isEnglish ? "Home" : "首页"; + document.getElementById('navBlog').textContent = isEnglish ? "More" : "更多"; + document.getElementById('navContact').textContent = isEnglish ? "Contact" : "联系"; + showPage(currentPage); + } + + function updateDarkModeButton() { + document.getElementById('darkModeToggle').textContent = isDarkMode ? "❍" : "☾"; } function showPage(page) { + currentPage = page; let content = ''; - switch (page) { + switch(page) { case 'home': - content = `
-

${isEnglish ? 'Welcome to my blog' : '❏ 欢迎来到我的个人博客'}

+ content = ` +
+

${isEnglish ? 'Welcome to my blog' : '❏ 欢迎来到我的个人博客'}

${isEnglish ? "A blog is an informational website consisting of discrete, often informal diary-style text entries (posts).It is a website or online diary managed by an individual to post new articles, pictures or videos, used to record, express emotions or share information." : "博客是一个信息网站，由离散的、通常是非正式的日记式文本条目（帖子）组成。它是由个人管理的网站或在线日记，用于发布新的文章、图片或视频，用于记录、表达情感或分享信息。"}

-
`; - content += getArticlesHTML(true); +
+ ${renderArticles(true)} + `; break; case 'blog': - content = getArticlesHTML(false); + content = renderArticles(false); break; case 'contact': - content = `
-

${isEnglish ? 'Contact Information' : '联系信息'}

+ content = ` +
+

${isEnglish ? 'Contact Information' : '联系信息'}

${isEnglish ? 'Email: ' : '邮箱：'}guangyinzhong@outlook.com -

- `).join(''); + function renderArticles(isHomePage) { + let articleHTML = ''; + let displayedArticles = isEnglish ? englishArticles : articles; + displayedArticles = isHomePage ? displayedArticles.filter(article => article.pinned) : displayedArticles; + displayedArticles.forEach((article, index) => { + articleHTML += ` +
+

${article.title}

+
${formatContent(article.content)}
+ +
+ `; + }); + return articleHTML; + } + + function formatContent(content) { + content = content.replace(/\[链接：([^\]]+)\]\(([^\)]+)\)/g, '$1'); + content = content.replace(/\[Link: ([^\]]+)\]\(([^\)]+)\)/g, '$1'); + return content; } function showFullArticle(index) { - let currentArticles = isEnglish ? englishArticles : articles; - let article = currentArticles[index]; + const article = isEnglish ? englishArticles[index] : articles[index]; document.getElementById('fullArticleContent').innerHTML = `

${article.title}

-

${article.content}

+
${formatContent(article.content)}
`; document.getElementById('fullArticle').style.display = 'block'; } @@ -401,7 +428,11 @@

${article.title}

} function showNewPostEditor() { - document.getElementById('fullScreenEditor').style.display = 'block'; + if (isLoggedIn) { + document.getElementById('fullScreenEditor').style.display = 'flex'; + } else { + alert(isEnglish ? 'Please log in to create a new post.' : '请登录以创建新文章。'); + } } function closeFullScreenEditor() { @@ -409,30 +440,30 @@

${article.title}

} function savePost() { - let title = document.getElementById('postTitle').value; - let content = document.getElementById('postContent').value; - let isPinned = document.getElementById('postPinned').checked; - if (isEnglish) { - englishArticles.unshift({ title, content, pinned: isPinned }); + const title = document.getElementById('postTitle').value; + const content = document.getElementById('postContent').value; + const isPinned = document.getElementById('postPinned').checked; + if (title && content) { + if (isEnglish) { + englishArticles.unshift({ title, content, pinned: isPinned }); + } else { + articles.unshift({ title, content, pinned: isPinned }); + } + closeFullScreenEditor(); + showPage(currentPage); } else { - articles.unshift({ title, content, pinned: isPinned }); + alert(isEnglish ? 'Please enter both title and content.' : '请输入标题和内容。'); } - closeFullScreenEditor(); - updateContent(); } - function updateContent() { - let currentPage = document.querySelector('nav a.active').getAttribute('onclick').match(/'(\w+)'/)[1]; - showPage(currentPage); - } + let currentPage = 'home'; - // 检测系统暗色模式 + // 检测浏览器是否使用暗色模式 if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { toggleDarkMode(); } - // 初始化页面 - showPage('home'); + showPage(currentPage);