Skip to content

Commit b632a00

Browse files
CC11001100CC11001100
committed
feat: enhance GitHub Pages with npm support and banner documentation
- Add npm package creation method as recommended approach in quick start - Add comprehensive banner.txt support documentation with examples - Update navigation to include banner section - Improve user experience with tabbed interface for different creation methods - Resolves #1: 完善README，把使用文档做成GitHub Pages的形式，阅读起来更方便 The GitHub Pages site now provides a complete, user-friendly documentation experience with all the latest features including npm package usage.
1 parent ac47512 commit b632a00

File tree

1 file changed

+84
-16
lines changed

1 file changed

+84
-16
lines changed

‎website/index.html‎

Lines changed: 84 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -966,6 +966,7 @@ <h1>UserScript Template</h1>
966966
<ul>
967967
<li><a href="#features" class="active">核心特性</a>
968968
<li><a href="#quick-start">快速开始</a></li>
969+
<li><a href="#banner">Banner支持</a></li>
969970
<li><a href="#usage">调试指南</a></li>
970971
</ul>
971972
</nav>
@@ -1018,22 +1019,38 @@ <h2>快速开始</h2>
10181019
<ol class="steps">
10191020
<li>
10201021
<h3>创建项目</h3>
1021-
<p>在 GitHub 模板仓库选择 "Use this template" 创建新仓库</p>
1022-
<a href="https://github.com/JSREI/userscript-template" target="_blank" class="repo-link">
1023-
<span class="text">
1024-
<svg viewBox="0 0 16 16">
1025-
<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>
1026-
</svg>
1027-
前往模板仓库
1028-
</span>
1029-
<span class="star-count">
1030-
<svg viewBox="0 0 16 16">
1031-
<path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"></path>
1032-
</svg>
1033-
<span id="quick-start-star-count">Loading...</span>
1034-
</span>
1035-
</a>
1036-
<img src="images/image-20230816233501101.png" alt="创建项目示例" class="demo-image">
1022+
<div class="tabs">
1023+
<button class="tab-button active" data-tab="npm-create">npm 创建（推荐）</button>
1024+
<button class="tab-button" data-tab="github-template">GitHub 模板</button>
1025+
</div>
1026+
1027+
<div class="tab-content active" data-tab="npm-create">
1028+
<p>使用 npm 命令直接创建新项目：</p>
1029+
<pre><code>npm create @javascript-reverse-engineering-infrastructure/userscript my-userscript</code></pre>
1030+
<p>或者使用 npx：</p>
1031+
<pre><code>npx @javascript-reverse-engineering-infrastructure/create-userscript my-userscript</code></pre>
1032+
<p>然后进入项目目录：</p>
1033+
<pre><code>cd my-userscript</code></pre>
1034+
</div>
1035+
1036+
<div class="tab-content" data-tab="github-template">
1037+
<p>在 GitHub 模板仓库选择 "Use this template" 创建新仓库</p>
1038+
<a href="https://github.com/JSREI/userscript-template" target="_blank" class="repo-link">
1039+
<span class="text">
1040+
<svg viewBox="0 0 16 16">
1041+
<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>
1042+
</svg>
1043+
前往模板仓库
1044+
</span>
1045+
<span class="star-count">
1046+
<svg viewBox="0 0 16 16">
1047+
<path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"></path>
1048+
</svg>
1049+
<span id="quick-start-star-count">Loading...</span>
1050+
</span>
1051+
</a>
1052+
<img src="images/image-20230816233501101.png" alt="创建项目示例" class="demo-image">
1053+
</div>
10371054
</li>
10381055
<li>
10391056
<h3>安装依赖</h3>
@@ -1137,6 +1154,57 @@ <h3>构建发布</h3>
11371154
</div>
11381155
</div>
11391156

1157+
<div class="card" id="banner">
1158+
<h2>Banner 支持</h2>
1159+
<p>项目支持在编译后的代码中添加自定义 banner。在项目根目录的 <code>banner.txt</code> 文件中，你可以添加 ASCII 艺术字或其他装饰性文本。</p>
1160+
1161+
<h3>使用方法</h3>
1162+
<p>在项目根目录创建或编辑 <code>banner.txt</code> 文件：</p>
1163+
<pre><code>▗▄▄▄▖▗▖ ▗▖▗▄▄▖ ▗▄▄▄▖ ▗▄▄▖ ▗▄▄▖▗▄▄▖ ▗▄▄▄▖▗▄▄▖▗▄▄▄▖
1164+
█ ▝▚▞▘ ▐▌ ▐▌▐▌ ▐▌ ▐▌ ▐▌ ▐▌ █ ▐▌ ▐▌ █
1165+
█ ▐▌ ▐▛▀▘ ▐▛▀▀▘ ▝▀▚▖▐▌ ▐▛▀▚▖ █ ▐▛▀▘ █
1166+
█ ▐▌ ▐▌ ▐▙▄▄▖▗▄▄▞▘▝▚▄▄▖▐▌ ▐▌▗▄█▄▖▐▌ █
1167+
1168+
1169+
▗▖ ▗▖ ▗▄▄▖▗▄▄▄▖▗▄▄▖ ▗▄▄▖ ▗▄▄▖▗▄▄▖ ▗▄▄▄▖▗▄▄▖▗▄▄▄▖
1170+
▐▌ ▐▌▐▌ ▐▌ ▐▌ ▐▌▐▌ ▐▌ ▐▌ ▐▌ █ ▐▌ ▐▌ █
1171+
▐▌ ▐▌ ▝▀▚▖▐▛▀▀▘▐▛▀▚▖ ▝▀▚▖▐▌ ▐▛▀▚▖ █ ▐▛▀▘ █
1172+
▝▚▄▞▘▗▄▄▞▘▐▙▄▄▖▐▌ ▐▌▗▄▄▞▘▝▚▄▄▖▐▌ ▐▌▗▄█▄▖▐▌ █
1173+
1174+
1175+
▗▄▄▄▖▗▄▄▄▖▗▖ ▗▖▗▄▄▖ ▗▖ ▗▄▖▗▄▄▄▖▗▄▄▄▖
1176+
█ ▐▌ ▐▛▚▞▜▌▐▌ ▐▌▐▌ ▐▌ ▐▌ █ ▐▌
1177+
█ ▐▛▀▀▘▐▌ ▐▌▐▛▀▘ ▐▌ ▐▛▀▜▌ █ ▐▛▀▀▘
1178+
█ ▐▙▄▄▖▐▌ ▐▌▐▌ ▐▙▄▄▖▐▌ ▐▌ █ ▐▙▄▄▖</code></pre>
1179+
1180+
<h3>变量替换</h3>
1181+
<p>Banner 内容支持以下变量替换：</p>
1182+
<ul>
1183+
<li><code>${name}</code> - 项目名称</li>
1184+
<li><code>${version}</code> - 版本号</li>
1185+
<li><code>${description}</code> - 项目描述</li>
1186+
<li><code>${author}</code> - 作者信息</li>
1187+
<li><code>${repository}</code> - 仓库地址</li>
1188+
<li><code>${namespace}</code> - 命名空间</li>
1189+
<li><code>${document}</code> - 文档地址</li>
1190+
</ul>
1191+
1192+
<h3>编译后效果</h3>
1193+
<p>编译时，banner 内容会被自动插入到油猴脚本头部注释中：</p>
1194+
<pre><code>// ==UserScript==
1195+
// @name my-project
1196+
// @version 1.0.0
1197+
// ...
1198+
// ==/UserScript==
1199+
1200+
// ▗▄▄▄▖▗▖ ▗▖▗▄▄▖ ▗▄▄▄▖ ▗▄▄▖ ▗▄▄▖▗▄▄▖ ▗▄▄▄▖▗▄▄▖▗▄▄▄▖
1201+
// █ ▝▚▞▘ ▐▌ ▐▌▐▌ ▐▌ ▐▌ ▐▌ ▐▌ █ ▐▌ ▐▌ █
1202+
// █ ▐▌ ▐▛▀▘ ▐▛▀▀▘ ▝▀▚▖▐▌ ▐▛▀▚▖ █ ▐▛▀▘ █
1203+
// █ ▐▌ ▐▌ ▐▙▄▄▖▗▄▄▞▘▝▚▄▄▖▐▌ ▐▌▗▄█▄▖▐▌ █
1204+
1205+
// 你的代码...</code></pre>
1206+
</div>
1207+
11401208
<div class="card" id="usage">
11411209
<h2>油猴本地调试指南</h2>
11421210
<p>在开发过程中，您需要在油猴中创建一个指向本地文件的脚本。具体步骤如下：</p>

0 commit comments

Comments
 (0)