Skip to content

Commit ac59a9a

Browse files
CC11001100CC11001100
committed
feat: completely refresh GitHub Pages with modern design and npm focus
- Update page title and header description to emphasize modern approach - Add prominent GitHub and npm package links in header - Redesign feature grid with 6 key features including npm creation and banner support - Highlight npm creation as the recommended method with clear advantages - Update project structure documentation to show complete file layout - Improve development workflow documentation - Add visual emphasis on npm package availability - Enhance user experience with better information hierarchy The GitHub Pages site now properly showcases the npm package as the primary way to use the template, making it much more accessible to users.
1 parent b632a00 commit ac59a9a

File tree

1 file changed

+78
-18
lines changed

1 file changed

+78
-18
lines changed

‎website/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)