Skip to content

Commit 6c215f5

Browse files
CC11001100CC11001100
committed
feat: 优化github pages
1 parent 16e1876 commit 6c215f5

File tree

1 file changed

+89
-55
lines changed

1 file changed

+89
-55
lines changed

‎website/index.html‎

Lines changed: 89 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -965,10 +965,9 @@ <h1>UserScript Template</h1>
965965
<div class="nav-container">
966966
<nav>
967967
<ul>
968-
<li><a href="#features" class="active">特性</a></li>
968+
<li><a href="#features" class="active">核心特性</a>
969969
<li><a href="#quick-start">快速开始</a></li>
970-
<li><a href="#usage">使用指南</a></li>
971-
<li><a href="#repository">GitHub</a></li>
970+
<li><a href="#usage">调试指南</a></li>
972971
</ul>
973972
</nav>
974973
</div>
@@ -1024,7 +1023,7 @@ <h3>创建项目</h3>
10241023
<a href="https://github.com/JSREI/userscript-template" target="_blank" class="repo-link">
10251024
<span class="text">
10261025
<svg viewBox="0 0 16 16">
1027-
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
1026+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.82-1.02-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
10281027
</svg>
10291028
前往模板仓库
10301029
</span>
@@ -1044,8 +1043,31 @@ <h3>安装依赖</h3>
10441043
npm install</code></pre>
10451044
</li>
10461045
<li>
1047-
<h3>开发调试</h3>
1048-
<pre><code>npm run watch</code></pre>
1046+
<h3>启动热编译</h3>
1047+
<p>在项目目录下运行以下命令启动开发服务：</p>
1048+
<div class="tabs">
1049+
<button class="tab-button active" data-tab="hot-watch">hot watch</button>
1050+
<button class="tab-button" data-tab="fuck-watch">fuck watch</button>
1051+
</div>
1052+
<div class="tab-content active" data-tab="hot-watch">
1053+
<div class="tabs">
1054+
<button class="tab-button active" data-tab="npm-hot">npm</button>
1055+
<button class="tab-button" data-tab="yarn-hot">yarn</button>
1056+
</div>
1057+
<div class="tab-content active" data-tab="npm-hot">
1058+
<pre><code>npm run watch</code></pre>
1059+
</div>
1060+
<div class="tab-content" data-tab="yarn-hot">
1061+
<pre><code>yarn watch</code></pre>
1062+
</div>
1063+
</div>
1064+
<div class="tab-content" data-tab="fuck-watch">
1065+
<pre><code>./fuck-hot-compile.sh</code></pre>
1066+
<p class="note" style="margin-top: 10px;">
1067+
<strong>说明：</strong> 这是一个简单的 shell 脚本，用于在遇到 hot watch 不工作时的替代方案
1068+
</p>
1069+
</div>
1070+
<p>此命令会监听源文件变化并自动重新编译。</p>
10491071
</li>
10501072
<li>
10511073
<h3>构建发布</h3>
@@ -1082,8 +1104,31 @@ <h3>安装依赖</h3>
10821104
yarn install</code></pre>
10831105
</li>
10841106
<li>
1085-
<h3>开发调试</h3>
1086-
<pre><code>yarn watch</code></pre>
1107+
<h3>启动热编译</h3>
1108+
<p>在项目目录下运行以下命令启动开发服务：</p>
1109+
<div class="tabs">
1110+
<button class="tab-button active" data-tab="hot-watch">hot watch</button>
1111+
<button class="tab-button" data-tab="fuck-watch">fuck watch</button>
1112+
</div>
1113+
<div class="tab-content active" data-tab="hot-watch">
1114+
<div class="tabs">
1115+
<button class="tab-button active" data-tab="npm-hot">npm</button>
1116+
<button class="tab-button" data-tab="yarn-hot">yarn</button>
1117+
</div>
1118+
<div class="tab-content active" data-tab="npm-hot">
1119+
<pre><code>npm run watch</code></pre>
1120+
</div>
1121+
<div class="tab-content" data-tab="yarn-hot">
1122+
<pre><code>yarn watch</code></pre>
1123+
</div>
1124+
</div>
1125+
<div class="tab-content" data-tab="fuck-watch">
1126+
<pre><code>./fuck-hot-compile.sh</code></pre>
1127+
<p class="note" style="margin-top: 10px;">
1128+
<strong>说明：</strong> 这是一个简单的 shell 脚本，用于在遇到 hot watch 不工作时的替代方案
1129+
</p>
1130+
</div>
1131+
<p>此命令会监听源文件变化并自动重新编译。</p>
10871132
</li>
10881133
<li>
10891134
<h3>构建发布</h3>
@@ -1144,17 +1189,29 @@ <h3>配置文件访问权限</h3>
11441189
</li>
11451190

11461191
<li>
1147-
<h3>启动开发服务</h3>
1192+
<h3>启动热编译</h3>
11481193
<p>在项目目录下运行以下命令启动开发服务：</p>
11491194
<div class="tabs">
1150-
<button class="tab-button active" data-tab="npm-dev">npm</button>
1151-
<button class="tab-button" data-tab="yarn-dev">yarn</button>
1195+
<button class="tab-button active" data-tab="hot-watch">hot watch</button>
1196+
<button class="tab-button" data-tab="fuck-watch">fuck watch</button>
11521197
</div>
1153-
<div class="tab-content active" data-tab="npm-dev">
1154-
<pre><code>npm run watch</code></pre>
1198+
<div class="tab-content active" data-tab="hot-watch">
1199+
<div class="tabs">
1200+
<button class="tab-button active" data-tab="npm-hot">npm</button>
1201+
<button class="tab-button" data-tab="yarn-hot">yarn</button>
1202+
</div>
1203+
<div class="tab-content active" data-tab="npm-hot">
1204+
<pre><code>npm run watch</code></pre>
1205+
</div>
1206+
<div class="tab-content" data-tab="yarn-hot">
1207+
<pre><code>yarn watch</code></pre>
1208+
</div>
11551209
</div>
1156-
<div class="tab-content" data-tab="yarn-dev">
1157-
<pre><code>yarn watch</code></pre>
1210+
<div class="tab-content" data-tab="fuck-watch">
1211+
<pre><code>./fuck-hot-compile.sh</code></pre>
1212+
<p class="note" style="margin-top: 10px;">
1213+
<strong>说明：</strong> 这是一个简单的 shell 脚本，用于在遇到 hot watch 不工作时的替代方案
1214+
</p>
11581215
</div>
11591216
<p>此命令会监听源文件变化并自动重新编译。</p>
11601217
</li>
@@ -1256,6 +1313,22 @@ <h3>开发调试</h3>
12561313
}
12571314
content = content.nextElementSibling;
12581315
}
1316+
1317+
// 如果是 npm/yarn 相关的标签，同步切换其他相同类型的标签
1318+
if (tabId === 'npm-guide' || tabId === 'yarn-guide' ||
1319+
tabId === 'npm-hot' || tabId === 'yarn-hot') {
1320+
const isNpm = tabId.startsWith('npm');
1321+
// 同步切换所有 npm/yarn 标签
1322+
document.querySelectorAll('.tab-button[data-tab^="npm"], .tab-button[data-tab^="yarn"]').forEach(btn => {
1323+
if (btn !== button) { // 避免重复切换当前标签
1324+
const newTabId = isNpm ? btn.dataset.tab.replace('yarn', 'npm') : btn.dataset.tab.replace('npm', 'yarn');
1325+
const targetButton = btn.closest('.tabs').querySelector(`.tab-button[data-tab="${newTabId}"]`);
1326+
if (targetButton) {
1327+
targetButton.click();
1328+
}
1329+
}
1330+
});
1331+
}
12591332
});
12601333
});
12611334

@@ -1353,46 +1426,7 @@ <h3>开发调试</h3>
13531426
}, 2000);
13541427
}
13551428
});
1356-
1357-
pre.appendChild(button);
1358-
});
1359-
1360-
// 处理导航栏固定效果
1361-
const header = document.querySelector('header');
1362-
const navContainer = document.querySelector('.nav-container');
1363-
const headerHeight = header.offsetHeight;
1364-
let lastScrollTop = 0;
1365-
1366-
function handleScroll() {
1367-
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
1368-
1369-
// 处理 header 样式
1370-
if (scrollTop > 50) {
1371-
header.classList.add('scrolled');
1372-
} else {
1373-
header.classList.remove('scrolled');
1374-
}
1375-
1376-
// 处理导航栏固定
1377-
if (scrollTop > headerHeight / 2) {
1378-
navContainer.classList.add('fixed');
1379-
} else {
1380-
navContainer.classList.remove('fixed');
1381-
}
1382-
1383-
lastScrollTop = scrollTop;
1384-
}
1385-
1386-
window.addEventListener('scroll', handleScroll);
1387-
handleScroll(); // 初始化状态
1388-
1389-
// 折叠面板功能
1390-
document.querySelectorAll('.collapsible-header').forEach(header => {
1391-
header.addEventListener('click', () => {
1392-
const collapsible = header.closest('.collapsible');
1393-
collapsible.classList.toggle('active');
1394-
});
13951429
});
13961430
</script>
13971431
</body>
1398-
</html>
1432+
</html>

0 commit comments

Comments
 (0)