1- <!DOCTYPE html>
21< html lang ="zh ">
32< head >
43 < meta charset ="UTF-8 ">
1110 < link rel ="preconnect " href ="https://fonts.gstatic.com " crossorigin >
1211 < link href ="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap " rel ="stylesheet ">
1312 < style >
14- /* 原有样式保留 */
1513 .docs-selection {
1614 display : grid;
1715 grid-template-columns : repeat (auto-fit, minmax (300px , 1fr ));
3836 margin-bottom : 20px ;
3937 color : var (--accent-color );
4038 }
41-
42- /* 语言选择弹窗样式 */
43- .lang-modal {
44- display : none;
45- position : fixed;
46- top : 0 ;
47- left : 0 ;
48- width : 100% ;
49- height : 100% ;
50- background : rgba (0 , 0 , 0 , 0.7 );
51- backdrop-filter : blur (5px );
52- align-items : center;
53- justify-content : center;
54- z-index : 2000 ;
55- opacity : 0 ;
56- transition : opacity 0.3s ease;
57- }
58-
59- .lang-modal .active {
60- display : flex;
61- opacity : 1 ;
62- }
63-
64- .lang-modal-content {
65- background : var (--bg-color );
66- border-radius : 24px ;
67- padding : 40px ;
68- max-width : 400px ;
69- width : 90% ;
70- text-align : center;
71- border : 1px solid var (--border-color );
72- box-shadow : 0 20px 40px rgba (0 , 0 , 0 , 0.4 );
73- transform : scale (0.95 );
74- transition : transform 0.3s ease;
75- }
76-
77- .lang-modal .active .lang-modal-content {
78- transform : scale (1 );
79- }
80-
81- .lang-modal h2 {
82- font-size : 2rem ;
83- margin-bottom : 10px ;
84- background : linear-gradient (135deg , var (--accent-color ), # ff7b89 );
85- -webkit-background-clip : text;
86- -webkit-text-fill-color : transparent;
87- }
88-
89- .lang-modal p {
90- color : var (--text-secondary );
91- margin-bottom : 30px ;
92- }
93-
94- .lang-options {
95- display : flex;
96- gap : 20px ;
97- justify-content : center;
98- }
99-
100- .lang-option {
101- flex : 1 ;
102- padding : 16px 0 ;
103- border : 2px solid var (--border-color );
104- border-radius : 16px ;
105- background : transparent;
106- color : var (--text-color );
107- font-weight : 600 ;
108- font-size : 1.2rem ;
109- cursor : pointer;
110- transition : all 0.2s ;
111- display : flex;
112- flex-direction : column;
113- align-items : center;
114- gap : 8px ;
115- }
116-
117- .lang-option i {
118- font-size : 2rem ;
119- color : var (--accent-color );
120- }
121-
122- .lang-option : hover {
123- border-color : var (--accent-color );
124- background : rgba (var (--accent-rgb ), 0.1 );
125- transform : translateY (-2px );
126- }
127-
128- .lang-option : active {
129- transform : translateY (0 );
130- }
131-
132- .close-modal {
133- margin-top : 30px ;
134- background : none;
135- border : none;
136- color : var (--text-secondary );
137- cursor : pointer;
138- font-size : 0.95rem ;
139- text-decoration : underline;
140- }
141-
142- .close-modal : hover {
143- color : var (--accent-color );
144- }
145-
146- /* 确保按钮指针事件正常 */
147- .btn {
148- cursor : pointer;
149- }
150-
151- /* 移动端适配 */
152- @media (max-width : 480px ) {
153- .lang-options {
154- flex-direction : column;
155- gap : 10px ;
156- }
157- }
15839 </ style >
15940</ head >
16041< body >
16142 < canvas id ="starfield "> </ canvas >
16243
163- <!-- 语言选择弹窗 -->
164- < div id ="langModal " class ="lang-modal ">
165- < div class ="lang-modal-content ">
166- < h2 id ="modalTitle " data-en ="Choose Language " data-zh ="选择语言 "> 选择语言</ h2 >
167- < p id ="modalSub " data-en ="Select documentation version " data-zh ="选择文档版本 "> 选择文档版本</ p >
168- < div class ="lang-options ">
169- < button class ="lang-option " id ="chooseChinese ">
170- < i class ="fas fa-language "> </ i >
171- < span data-en ="中文 " data-zh ="中文 "> 中文</ span >
172- </ button >
173- < button class ="lang-option " id ="chooseEnglish ">
174- < i class ="fas fa-globe "> </ i >
175- < span data-en ="English " data-zh ="英文 "> 英文</ span >
176- </ button >
177- </ div >
178- < button class ="close-modal " id ="closeModal " data-en ="Cancel " data-zh ="取消 "> 取消</ button >
179- </ div >
180- </ div >
181-
18244 < nav class ="navbar ">
18345 < div class ="container navbar-container ">
18446 < div class ="navbar-logo ">
@@ -214,8 +76,7 @@ <h2 class="section-title" data-en="Development Documentation" data-zh="开发文
21476 </ div >
21577 < h3 data-en ="Source Code Development " data-zh ="源码开发 "> 源码开发</ h3 >
21678 < p data-en ="Complete guide for engine source code development and customization " data-zh ="引擎源码开发与定制的完整指南 "> 引擎源码开发与定制的完整指南</ p >
217- <!-- 添加自定义属性 data-doc-type 用于区分文档类型 -->
218- < button class ="btn btn-primary doc-link " data-doc-type ="source " data-en ="View Documentation " data-zh ="查看文档 "> 查看文档</ button >
79+ < a href ="source_dev.html " class ="btn btn-primary " data-en ="View Documentation " data-zh ="查看文档 "> 查看文档</ a >
21980 </ div >
22081
22182 < div class ="doc-card ">
@@ -224,7 +85,7 @@ <h3 data-en="Source Code Development" data-zh="源码开发">源码开发</h3>
22485 </ div >
22586 < h3 data-en ="Hscript Development " data-zh ="Hscript脚本开发 "> Hscript脚本开发</ h3 >
22687 < p data-en ="Guide for creating mods and content using Hscript " data-zh ="使用Hscript创建Mod和内容的指南 "> 使用Hscript创建Mod和内容的指南</ p >
227- < button class ="btn btn-primary doc-link " data-doc-type =" hscript " data- en ="View Documentation " data-zh ="查看文档 "> 查看文档</ button >
88+ < a href =" docs/hscript_dev.html " class ="btn btn-primary " data-en ="View Documentation " data-zh ="查看文档 "> 查看文档</ a >
22889 </ div >
22990
23091 < div class ="doc-card ">
@@ -233,7 +94,7 @@ <h3 data-en="Hscript Development" data-zh="Hscript脚本开发">Hscript脚本开
23394 </ div >
23495 < h3 data-en ="Lua Development " data-zh ="Lua开发 "> Lua开发</ h3 >
23596 < p data-en ="Guide for Lua scripting in NovaFlare Engine " data-zh ="NovaFlare Engine中的Lua脚本指南 "> NovaFlare Engine中的Lua脚本指南</ p >
236- < button class ="btn btn-primary doc-link " data-doc-type =" lua " data- en ="View Documentation " data-zh ="查看文档 "> 查看文档</ button >
97+ < a href =" lua_docs.html " class ="btn btn-primary " data-en ="View Documentation " data-zh ="查看文档 "> 查看文档</ a >
23798 </ div >
23899 </ div >
239100 </ section >
@@ -266,121 +127,5 @@ <h3 data-en="Lua Development" data-zh="Lua开发">Lua开发</h3>
266127 < script src ="js/starfield.js "> </ script >
267128 < script src ="js/theme.js "> </ script >
268129 < script src ="js/language.js "> </ script >
269- < script >
270- ( function ( ) {
271- // 语言弹窗逻辑
272- const modal = document . getElementById ( 'langModal' ) ;
273- const closeBtn = document . getElementById ( 'closeModal' ) ;
274- const chineseBtn = document . getElementById ( 'chooseChinese' ) ;
275- const englishBtn = document . getElementById ( 'chooseEnglish' ) ;
276-
277- // 存储当前要跳转的文档类型
278- let currentDocType = null ;
279-
280- // 所有“查看文档”按钮
281- const docButtons = document . querySelectorAll ( '.doc-link' ) ;
282-
283- // 打开弹窗,记录文档类型
284- function openLangModal ( docType ) {
285- currentDocType = docType ;
286- modal . classList . add ( 'active' ) ;
287- // 弹窗内容多语言已在显示时由之前的language.js处理,但为了防止切换不及时,手动更新一下?
288- // 可以触发一下更新标题,但language.js通常全局监听,这里不再重复。
289- // 如果有必要,可以调用更新函数,但language.js已经通过观察者或者事件处理了。
290- }
291-
292- // 关闭弹窗
293- function closeLangModal ( ) {
294- modal . classList . remove ( 'active' ) ;
295- currentDocType = null ;
296- }
297-
298- // 根据选择的语言跳转
299- function redirectToDocs ( lang ) {
300- if ( ! currentDocType ) return ;
301-
302- let url = '' ;
303- // 根据文档类型和语言拼接URL
304- // 中文文档假设为 *_zh.html,英文文档假设为 *_en.html,但也可以保持原有规则
305- // 原有链接:source_dev.html, docs/hscript_dev.html, lua_docs.html
306- // 假设中文版:source_dev_zh.html, docs/hscript_dev_zh.html, lua_docs_zh.html
307- // 英文版:source_dev_en.html, docs/hscript_dev_en.html, lua_docs_en.html
308- // 但也可以根据实际情况调整,这里使用简单规则:在文件名插入 _语言
309- switch ( currentDocType ) {
310- case 'source' :
311- url = lang === 'zh' ? 'source_dev_zh.html' : 'source_dev_en.html' ;
312- break ;
313- case 'hscript' :
314- // 注意原链接有 docs/ 前缀
315- url = lang === 'zh' ? 'docs/hscript_dev_zh.html' : 'docs/hscript_dev_en.html' ;
316- break ;
317- case 'lua' :
318- url = lang === 'zh' ? 'lua_docs_zh.html' : 'lua_docs_en.html' ;
319- break ;
320- default :
321- return ;
322- }
323-
324- // 如果文件不一定存在,可以回退到原链接,这里不做回退,直接跳转
325- window . location . href = url ;
326- }
327-
328- // 绑定按钮事件
329- docButtons . forEach ( btn => {
330- btn . addEventListener ( 'click' , function ( e ) {
331- e . preventDefault ( ) ; // 阻止任何默认行为(如果是button则无所谓)
332- const docType = this . getAttribute ( 'data-doc-type' ) ;
333- openLangModal ( docType ) ;
334- } ) ;
335- } ) ;
336-
337- // 关闭弹窗
338- closeBtn . addEventListener ( 'click' , closeLangModal ) ;
339-
340- // 点击模态背景关闭
341- modal . addEventListener ( 'click' , function ( e ) {
342- if ( e . target === modal ) {
343- closeLangModal ( ) ;
344- }
345- } ) ;
346-
347- // 语言选择
348- chineseBtn . addEventListener ( 'click' , function ( ) {
349- redirectToDocs ( 'zh' ) ;
350- closeLangModal ( ) ; // 关闭弹窗,实际上跳转后页面关闭
351- } ) ;
352-
353- englishBtn . addEventListener ( 'click' , function ( ) {
354- redirectToDocs ( 'en' ) ;
355- closeLangModal ( ) ;
356- } ) ;
357-
358- // 键盘ESC关闭
359- document . addEventListener ( 'keydown' , function ( e ) {
360- if ( e . key === 'Escape' && modal . classList . contains ( 'active' ) ) {
361- closeLangModal ( ) ;
362- }
363- } ) ;
364-
365- // 额外的:如果language.js切换语言时,可能需要更新弹窗内的文本,但language.js通常会自动处理带有data-en/data-zh的元素
366- // 由于弹窗内元素已有这些属性,language.js会更新。但language.js可能在此时已经执行,为了确保modal内的文字更新,可以手动调用一次?
367- // 这里假设language.js会监听lang-toggle点击,并更新全页,所以无需额外操作。
368- } ) ( ) ;
369- </ script >
370-
371- <!-- 补丁:为了演示,如果没有language.js或theme.js,保证基本功能不报错 -->
372- < script >
373- // 如果js文件缺失或未加载,提供极简后备,防止按钮无效
374- ( function silentFallback ( ) {
375- // 确保theme切换按钮不报错
376- const themeBtn = document . getElementById ( 'theme-toggle' ) ;
377- if ( themeBtn ) {
378- themeBtn . addEventListener ( 'click' , function ( ) {
379- document . body . classList . toggle ( 'light-theme' ) ; // 假设有对应样式
380- } ) ;
381- }
382- // 简单语言切换演示:切换data-en/zh显示,但因为我们用了language.js,这里不做复杂处理
383- } ) ( ) ;
384- </ script >
385130</ body >
386131</ html >
0 commit comments