Skip to content

Commit ba9db93

Browse files
CC11001100CC11001100
committed
deploy: ac59a9a 
1 parent 532a4f2 commit ba9db93

File tree

1 file changed

+78
-18
lines changed

1 file changed

+78
-18
lines changed

‎index.html‎

Lines changed: 78 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>UserScript Template - 油猴脚本开发模板</title>
6+
<title>UserScript Template - 现代化油猴脚本开发模板</title>
77
<style>
88
body {
99
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
@@ -960,7 +960,36 @@
960960
<body>
961961
<header>
962962
<h1>UserScript Template</h1>
963-
<p>使用 Node.js + Webpack 模块化开发油猴脚本的高效方案</p>
963+
<p>现代化油猴脚本开发模板 - 支持模块化开发、热加载、npm包管理</p>
964+
965+
<div class="github-stats">
966+
<a href="https://github.com/JSREI/userscript-template" target="_blank" class="github-link">
967+
<span class="text">
968+
<svg viewBox="0 0 16 16">
969+
<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>
970+
</svg>
971+
GitHub 仓库
972+
</span>
973+
<span class="star-count">
974+
<svg viewBox="0 0 16 16">
975+
<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>
976+
</svg>
977+
<span id="header-star-count">Loading...</span>
978+
</span>
979+
</a>
980+
981+
<a href="https://www.npmjs.com/package/@javascript-reverse-engineering-infrastructure/create-userscript" target="_blank" class="github-link" style="background: linear-gradient(135deg, #cb3837, #ff6b6b);">
982+
<span class="text">
983+
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;">
984+
<path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z" fill="currentColor"/>
985+
</svg>
986+
npm 包
987+
</span>
988+
<span class="star-count">
989+
<span>v1.0.0</span>
990+
</span>
991+
</a>
992+
</div>
964993
<div class="nav-container">
965994
<nav>
966995
<ul>
@@ -977,18 +1006,32 @@ <h1>UserScript Template</h1>
9771006
<div class="card" id="features">
9781007
<h2>核心特性</h2>
9791008
<div class="feature-grid">
1009+
<div class="feature-item">
1010+
<div class="feature-icon">⚡</div>
1011+
<div class="feature-text">
1012+
<h3>一键创建项目</h3>
1013+
<p>通过 npm 命令一键创建项目，无需手动配置，开箱即用</p>
1014+
</div>
1015+
</div>
9801016
<div class="feature-item">
9811017
<div class="feature-icon">📦</div>
9821018
<div class="feature-text">
9831019
<h3>模块化开发</h3>
984-
<p>不再需要在单个 JavaScript 文件中组织代码，而是采用WebPack模块化管理代码，提升开发体验与效率</p>
1020+
<p>使用 Webpack 模块化管理代码，告别单文件开发的痛苦</p>
9851021
</div>
9861022
</div>
9871023
<div class="feature-item">
9881024
<div class="feature-icon">🔄</div>
9891025
<div class="feature-text">
9901026
<h3>热加载支持</h3>
991-
<p>开发时修改代码自动编译打包加载，让测试更高效</p>
1027+
<p>开发时修改代码自动编译，实时预览效果</p>
1028+
</div>
1029+
</div>
1030+
<div class="feature-item">
1031+
<div class="feature-icon">🎨</div>
1032+
<div class="feature-text">
1033+
<h3>Banner 支持</h3>
1034+
<p>支持自定义 ASCII 艺术字，让你的脚本更有个性</p>
9921035
</div>
9931036
</div>
9941037
<div class="feature-item">
@@ -998,11 +1041,11 @@ <h3>符合商店要求</h3>
9981041
<p>打包后为高可读性的单文件，完全符合油猴商店上架政策</p>
9991042
</div>
10001043
</div>
1001-
<div class="feature">
1044+
<div class="feature-item">
10021045
<div class="feature-icon">🚀</div>
10031046
<div class="feature-text">
10041047
<h3>发布友好</h3>
1005-
<p>打包后生成高可读性的单文件脚本，完全符合油猴商店的上架要求，无需额外处理</p>
1048+
<p>一键构建发布版本，无需额外处理即可上架</p>
10061049
</div>
10071050
</div>
10081051
</div>
@@ -1025,12 +1068,21 @@ <h3>创建项目</h3>
10251068
</div>
10261069

10271070
<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>
1071+
<p><strong>推荐方式</strong> - 使用 npm 命令一键创建项目：</p>
1072+
<pre><code># 使用 npm create（推荐）
1073+
npm create @javascript-reverse-engineering-infrastructure/userscript my-userscript
1074+
1075+
# 或者使用 npx
1076+
npx @javascript-reverse-engineering-infrastructure/create-userscript my-userscript
1077+
1078+
# 进入项目目录
1079+
cd my-userscript
1080+
1081+
# 安装依赖
1082+
npm install</code></pre>
1083+
<div class="note">
1084+
<strong>优势：</strong> 自动配置所有必要文件，包括 webpack 配置、package.json、banner.txt 等，开箱即用！
1085+
</div>
10341086
</div>
10351087

10361088
<div class="tab-content" data-tab="github-template">
@@ -1053,14 +1105,22 @@ <h3>创建项目</h3>
10531105
</div>
10541106
</li>
10551107
<li>
1056-
<h3>安装依赖</h3>
1057-
<pre><code>git clone [你的仓库地址]
1058-
cd [项目目录]
1059-
npm install</code></pre>
1108+
<h3>开始开发</h3>
1109+
<p>项目创建完成后，你就可以开始开发了！项目结构如下：</p>
1110+
<pre><code>my-userscript/
1111+
├── src/ # 源代码目录
1112+
│ ├── index.js # 入口文件
1113+
│ ├── foo_module/ # 示例模块
1114+
│ └── bar_module/ # 示例模块
1115+
├── dist/ # 编译输出目录
1116+
├── banner.txt # Banner 文件
1117+
├── userscript-headers.js # 油猴脚本头部配置
1118+
├── webpack.*.js # Webpack 配置
1119+
└── package.json # 项目配置</code></pre>
10601120
</li>
10611121
<li>
1062-
<h3>启动热编译</h3>
1063-
<p>在项目目录下运行以下命令启动开发服务：</p>
1122+
<h3>启动开发模式</h3>
1123+
<p>在项目目录下运行以下命令启动开发服务，支持热重载：</p>
10641124
<div class="tabs">
10651125
<button class="tab-button active" data-tab="hot-watch">hot watch</button>
10661126
<button class="tab-button" data-tab="fuck-watch">fuck watch</button>

0 commit comments

Comments
 (0)