From 5f7c6698ce6e3e6cd2b51237cd58d1289503038c Mon Sep 17 00:00:00 2001 From: PJ568 Date: Thu, 24 Oct 2024 19:07:40 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=9B=B4=E6=96=B0=E3=80=91=E8=AE=BA?= =?UTF-8?q?=E5=9D=9B=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/main.css | 304 +++++++++++++++++++++++++++++++++ forum/index.html | 67 ++++++++ index.html | 433 +---------------------------------------------- js/main.js | 216 +++++++++++++++++++++++ 4 files changed, 591 insertions(+), 429 deletions(-) create mode 100644 css/main.css create mode 100644 forum/index.html create mode 100644 js/main.js diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..bbd62aa --- /dev/null +++ b/css/main.css @@ -0,0 +1,304 @@ +/* 全局 */ +html { + height: 100%; +} + +* { + margin: 0px; + padding: 0px; + font-family: Arial, sans-serif; + color: #fff; + text-decoration: none; +} + +body { + font-family: 'Exo', sans-serif; +} + +a { + cursor: pointer; + text-decoration: underline; +} + +.max-width { + max-width: 1024px; + width: 100%; +} + +/* 导航栏 */ +nav { + width: 100%; + box-sizing: border-box; + background-color: rgba(0, 0, 0, 0.2); + display: flex; + justify-content: center; +} + +nav .logo img, +nav .logo svg { + width: 30px; + margin: 1rem; +} + +nav .nav-content { + display: flex; + justify-content: space-between; + align-items: center; +} + +nav .ul { + height: 100%; + align-items: center; + margin-right: 1rem; + list-style: none; + display: flex; +} + +nav .ul a { + text-decoration: none; + display: inline; + position: relative; + padding: 0.5rem 1rem; + box-sizing: border-box; + transition: background-color 0.3s; +} + +nav .ul a[href="#"] { + background-color: rgba(255, 255, 255, 0.1); +} + +nav .ul a:hover { + background-color: #555; +} + +/* 主要内容 */ +.container { + margin: 6rem auto; + box-sizing: border-box; + padding: 1rem; + flex-direction: column; + align-items: center; + display: flex; + justify-content: center; +} + +.container h1 { + text-align: center; + font-size: 50px; +} + +.container p { + margin-top: 1rem; + text-align: center; + font-size: 20px; +} + +.container exegesis { + color: gray; +} + +.container .main-logo { + width: 75%; + max-width: 256px; +} + +.container .contact { + margin-top: 1rem; + text-align: center; + display: flex; + gap: 2rem; + flex-wrap: wrap; + justify-content: center; + font-size: 30px; +} + +.container .contact a { + text-decoration: none; + color: inherit; + align-items: center; + border-radius: .5rem; + box-sizing: border-box; + display: flex; + padding: .5rem; + text-align: center; +} + +/* 加载进度条 */ +.loading-bar { + position: fixed; + top: 0; + left: 0; + z-index: 99999; + opacity: 0; + transition: opacity .4s linear; + + .progress { + position: fixed; + top: 0; + left: 0; + width: 0; + height: 4px; + background-color: #ffffff; + box-shadow: 0 0 10px rgba(119, 182, 255, .7); + } + + &.loading { + opacity: 1; + transition: none; + + .progress { + transition: width .4s ease; + } + } +} + +/* 背景 */ +.area { + z-index: -1; + position: fixed; + left: 0; + top: 0; + background: #4e54c8; + background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8); + width: 100%; + height: 100vh; +} + +.circles { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +.circles li { + position: absolute; + display: block; + list-style: none; + width: 20px; + height: 20px; + background: rgba(255, 255, 255, 0.2); + animation: animate 25s linear infinite; + bottom: -150px; +} + +.circles li:nth-child(1) { + left: 25%; + width: 80px; + height: 80px; + animation-delay: 0s; +} + +.circles li:nth-child(2) { + left: 10%; + width: 20px; + height: 20px; + animation-delay: 2s; + animation-duration: 12s; +} + +.circles li:nth-child(3) { + left: 70%; + width: 20px; + height: 20px; + animation-delay: 4s; +} + +.circles li:nth-child(4) { + left: 40%; + width: 60px; + height: 60px; + animation-delay: 0s; + animation-duration: 18s; +} + +.circles li:nth-child(5) { + left: 65%; + width: 20px; + height: 20px; + animation-delay: 0s; +} + +.circles li:nth-child(6) { + left: 75%; + width: 110px; + height: 110px; + animation-delay: 3s; +} + +.circles li:nth-child(7) { + left: 35%; + width: 150px; + height: 150px; + animation-delay: 7s; +} + +.circles li:nth-child(8) { + left: 50%; + width: 25px; + height: 25px; + animation-delay: 15s; + animation-duration: 45s; +} + +.circles li:nth-child(9) { + left: 20%; + width: 15px; + height: 15px; + animation-delay: 2s; + animation-duration: 35s; +} + +.circles li:nth-child(10) { + left: 85%; + width: 150px; + height: 150px; + animation-delay: 0s; + animation-duration: 11s; +} + +@keyframes animate { + 0% { + transform: translateY(0) rotate(0deg); + opacity: 1; + border-radius: 0; + } + + 100% { + transform: translateY(-1000px) rotate(720deg); + opacity: 0; + border-radius: 50%; + } +} + +/* 翻译按钮相关 */ +.translateSelectLanguage { + z-index: 10; + width: 100%; + height: 100%; + opacity: 0; + cursor: pointer; + position: absolute; + top: 0; + left: 0 +} + +/* 深色模式相关 */ +.darkmode--activated img, +.darkmode--activated svg { + isolation: isolate; + mix-blend-mode: difference +} + +.darkmode--activated .area { + isolation: isolate; + mix-blend-mode: difference; + background-color: #000; +} + +.darkmode--activated select { + background-color: #000; + color: #E0E0E0 +} \ No newline at end of file diff --git a/forum/index.html b/forum/index.html new file mode 100644 index 0000000..72e7900 --- /dev/null +++ b/forum/index.html @@ -0,0 +1,67 @@ + + + + + + + + WeDot Forum + + + + + + + + + + + +
+ +
+ + + + + +
+

WeDot Forum

+
+
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/index.html b/index.html index 83914fd..42e979c 100644 --- a/index.html +++ b/index.html @@ -7,438 +7,13 @@ WeDot Engine - + - + @@ -465,8 +40,8 @@ Temporary Icon
- Home - Forum + Home + Forum About diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..e6db9cb --- /dev/null +++ b/js/main.js @@ -0,0 +1,216 @@ +// 使用 IIFE 包裹以避免全局变量污染 +(function () { + var loadingBar = document.querySelector(".loading-bar"); + var progress = document.querySelector(".loading-bar .progress"); + var timer = null; + let pjax; + + function initAni() { + loadingBar = document.querySelector(".loading-bar"); + progress = document.querySelector(".loading-bar .progress"); + } + + // 初始化 PJAX + function initPjax() { + try { + const Pjax = window.Pjax || function () { }; + pjax = new Pjax({ + selectors: [ + "head meta", + "head title", + "nav .ul", + ".container", + ".pjax-reload" + ], + cacheBust: false + }); + } catch (e) { + console.log('PJAX 初始化出错：' + e); + } + } + + // translate-js 翻译系统 + //// 初始化翻译系统 + function initTranslate() { + try { + translate.service.use('client.edge'); + translate.listener.start(); + translate.setAutoDiscriminateLocalLanguage(); + translate.language.setLocal('english'); + translate.language.setUrlParamControl(); + translate.ignore.class.push('notTranslate'); + translate.nomenclature.append('english', 'chinese_simplified', ` + WeDot Engine=众点引擎 + WeDot Forum=众点论坛 + WeDot=众点 + Home=主页 + Home page=主页 + About=关于 + `); + translate.execute(); + } catch (e) { + console.error('翻译系统出错：' + e); + } + } + //// 获取用户使用的语种并转换为 giscus 可识别的标记 + const getCurrentLanguage = function () { + var lang = translate.language.getCurrent(); + var giscus_lang = "en"; + switch (lang) { + case "chinese_simplified": + giscus_lang = "zh-CN"; + break; + case "chinese_traditional": + giscus_lang = "zh-TW"; + break; + case "english": + giscus_lang = "en"; + break; + case "spanish": + giscus_lang = "es"; + break; + case "japanese": + giscus_lang = "ja"; + break; + case "korean": + giscus_lang = "ko"; + break; + case "french": + giscus_lang = "fr"; + break; + case "arabic": + giscus_lang = "ar"; + break; + case "catalan": + giscus_lang = "ca"; + break; + case "danish": + giscus_lang = "da"; + break; + case "deutsch": + giscus_lang = "de"; + break; + case "persian": + giscus_lang = "fa"; + break; + case "greek": + giscus_lang = "gr"; + break; + case "serbian": + giscus_lang = "hbs"; + break; + case "hebrew": + giscus_lang = "he"; + break; + case "hungarian": + giscus_lang = "hu"; + break; + case "italian": + giscus_lang = "it"; + break; + default: + giscus_lang = "en"; + break; + } + return giscus_lang; + } + + // Giscus 评论系统 + var SetupGiscus = function (giscus_lang) { + const script = document.createElement("script"); + script.type = "text/javascript"; + script.src = "https://giscus.app/client.js"; + + script.setAttribute("data-repo", "Wedot-Engine/Wedot-Engine.github.io"); + script.setAttribute("data-repo-id", "R_kgDONDfw-A"); + script.setAttribute("data-category", "Announcements"); + script.setAttribute("data-category-id", "DIC_kwDONDfw-M4Cjpk1"); + + script.setAttribute("data-mapping", "pathname"); + script.setAttribute("data-strict", "1"); + script.setAttribute("data-reactions-enabled", "0"); + script.setAttribute("data-emit-metadata", "0"); + script.setAttribute("data-input-position", "top"); + script.setAttribute("data-theme", "cobalt"); + script.setAttribute("data-lang", giscus_lang); + + script.crossOrigin = "anonymous"; + script.async = true; + + document.getElementById("giscus-container").appendChild(script); + } + + // Darkmode.js 深色模式 + function initDarkmode() { + try { + const Darkmode = window.Darkmode || function () { + console.warn('Darkmode.js 不存在？'); + return; + }; + var darkmode = new Darkmode(); + document.body.addEventListener('click', function (event) { + if (event.target.id === 'dark_b') { + try { + darkmode.toggle(); + } catch (e) { + console.error('Darkmode.js 出错：' + e); + } + } + }); + } catch (e) { + console.error('初始化 Darkmode.js 出错：' + e); + } + } + + function endLoad() { + clearInterval(timer); + progress.style.width = "100%"; + loadingBar.classList.remove("loading"); + + setTimeout(function () { + progress.style.width = 0; + }, 400); + } + + // 初始化 + function initialize() { + // initDarkmode(); + initPjax(); + initAni(); + initTranslate(); + if (document.getElementById("giscus-container") != null) { + SetupGiscus(getCurrentLanguage()); //// 初始化评论系统 + } + } + + + // 触发器 + //// 网页加载完毕后触发 + window.addEventListener('DOMContentLoaded', () => initialize()); + //// Pjax 开始时执行的函数 + document.addEventListener("pjax:send", function () { + var loadingBarWidth = 20; + var MAX_LOADING_WIDTH = 95; + + loadingBar.classList.add("loading"); + progress.style.width = loadingBarWidth + "%"; + + clearInterval(timer); + timer = setInterval(function () { + loadingBarWidth += 3; + + if (loadingBarWidth > MAX_LOADING_WIDTH) { + loadingBarWidth = MAX_LOADING_WIDTH; + } + + progress.style.width = loadingBarWidth + "%"; + }, 500); + }); + //// 监听 Pjax 完成后加载 + document.addEventListener("pjax:complete", function () { + endLoad(); + if (document.getElementById("giscus-container") != null) { + SetupGiscus(getCurrentLanguage()); //// 初始化评论系统 + } + }); +})(); \ No newline at end of file