一个纯静态的整合包发布网站:下载客户端 / 服务端、更新日志、模组列表与致谢、安装教程与 FAQ、赞助入口、QQ 群。
没有构建步骤,不需要 Node、不需要 npm。所有可改的内容都集中在两个文件里。
- 用 VS Code 打开这个文件夹(
野火网站)。 - 右键
index.html→ Open with Live Server。 - 浏览器打开
http://127.0.0.1:5500/index.html就能看到站点。
Live Server 会在你保存文件后自动刷新页面,所以改完 config.js / data.js 直接看效果就行。
也可以直接双击
index.html用浏览器打开(file://方式)。本站没有用 ES Module,所以这种方式同样能正常运行。
野火网站/
├─ index.html 首页
├─ downloads.html 下载中心
├─ changelog.html 更新日志
├─ mods.html 模组列表与致谢
├─ faq.html 安装教程 / 常见问题
├─ support.html 赞助 & 加群
├─ 404.html 找不到页面时的提示页
└─ assets/
├─ css/style.css 样式(一般不用动)
├─ js/
│ ├─ config.js ★ 站点配置:站名、QQ 群、赞助、联系方式
│ ├─ data.js ★ 内容数据:下载版本、更新日志、模组、教程、FAQ
│ └─ render.js 渲染逻辑(不用动)
└─ img/
├─ icon.png ★ 小火堆图标(68×68 像素图)。顶栏 / 首屏 / 页脚 / 标签页都用它
├─ logo.png 组合标识(营火 + WILDFIRE 字样)。只用于社交分享卡片 og:image
└─ background.jpg 全站背景图(模糊后铺满窗口)
└─ font/
├─ fusion-pixel-12px-proportional-zh_hans.ttf.woff2 缝合像素字体(906 KB)
├─ LICENSE-FusionPixel-OFL.txt 字体授权(SIL OFL-1.1)
└─ LICENSES/ 上游字体的授权原文
你平时只需要改 config.js 和 data.js。 改的时候只动引号 " " 里的内容,别删引号、逗号和花括号。
mark、logo、favicon是三个不同的东西,别搞混:
mark(icon.png)是纯图形的小火堆,用在顶栏、首屏大图、页脚、标签页。logo(logo.png)带 "WILDFIRE" 字样,尺寸大、字才看得清,所以只用在分享卡片上。- 为什么首屏大图不用
logo.png:它是 164×146 的 1:1 原图, 缩到 136px 或 34px 属于非整数倍缩小,像素会被切碎,看着像花屏。icon.png是 68×68 的像素图、原生网格 17×17, 所以 34 / 68 / 102 / 136 都是整数倍,任何尺寸都锐利。 要换图标请换成像素图,并把显示尺寸设成原生尺寸的整数倍。
打开 assets/js/config.js(站名 / QQ 群 / 赞助;下载链接和日志在 data.js):
| 位置 | 状态 |
|---|---|
qq.group |
✅ 群号 124636164 |
qq.qr |
✅ assets/img/qq-qr.png(QQ 导出的圆点艺术码,已裁成 224×224 正方形) |
qq.joinUrl |
⬜ 手机「一键加群」链接,可选;在手机 QQ 群资料里点「分享群链接」拿,留空就只有群号 |
donate.afdian |
✅ https://afdian.com/a/xiankuangxk |
donate.methods[0](爱发电) |
✅ 主页链接 + 收款码 assets/img/afdian-qr.png |
donate.methods[1..](微信 / 支付宝) |
⬜ 暂时注释掉了;有收款码再解开注释,别留着空框 |
donate.sponsors |
⬜ 赞助者名单,现在还是「感谢名单待填写」 |
contact.* |
⬜ B 站 / GitHub / 邮箱,没有就留空(会自动隐藏) |
icp |
⬜ 备案号,没有就留空 |
再打开 assets/js/data.js,把下载链接填上(客户端搜 野火整合包-客户端、服务端搜 野火整合包-服务端):
{
version: "0.3.7",
mem: "8 GB", // 最低内存分配,面板上显示成「最低内存」那一格
url: "https://pan.quark.cn/s/xxxx", // 主线路。现在放的是夸克网盘分享页
mirrors: [
{ name: "百度网盘", url: "", code: "" } // 备用网盘,name 和 url 全空的行会被跳过
],
sha1: "" // 文件校验值,推荐填
}
mirrors一行只要name或url有一个非空就会画出来。 所以「百度网盘」「蓝奏云」 这种光有名字没链接的占位行不能留在数组里 —— 页面上会出现一排点不动的灰按钮。 有备用链接再把整行加回来。
链接留空会怎样? 按钮会变成灰色的「待填写」并且点不动 —— 这是故意的, 免得访客点到一个空链接。填上就自动变成可点的下载按钮。
mem是可选的。 哪个端填了哪个端才显示「最低内存」这一格 —— 当前客户端填的是8 GB,服务端没填所以不显示(服务端的配置建议写在notes里)。 改了这个数,记得把安装教程的「分配内存」和 FAQ 的配置问答一起改, 不然下载页说 8G、教程说 4G,访客会不知道听谁的。
downloads.javaWarn是整个下载区共用的一句硬提醒,显示在下载卡规格格的下面, 客户端和服务端都会显示(因为它俩要求的 Java 版本是同一个)。留空""就不显示。 现在写的是「必须用 Java 21(64 位)。装 Java 17 能进游戏,但会有一堆 bug。」—— 以后换 Java 版本时,安装教程和 FAQ 里的说法要跟着一起改。
- 把图片存到
assets/img/,例如assets/img/qq-qr.png。 - 在
config.js里把路径填进去:qr: "assets/img/qq-qr.png"。
没配图片时,页面会显示一个中性的「暂无二维码」占位框,不会出现裂图。
两点经验:
- 存正方形。 二维码歪一点、拉伸一点,手机扫起来就费劲。QQ 直接导出的图经常
带一圈不对称白边(现在的
qq-qr.png原图是 227×224),先裁成正方形再放进来。 - 背景色跟着码走。
qq-qr.png是深色底 + 蓝色圆点的艺术码,afdian-qr.png是 标准黑白码。页面会给二维码垫一层白底,所以两种都不会花;但别拿截图工具二次压缩, 一糊就可能扫不出来。换码之后最好自己扫码试一下。
config.js 顶部:name、fullName、nameEn、motto、hero.title、hero.lead。
首页大标题里用 <em>野火</em> 包住的部分会显示成火焰渐变色。
顶栏和页脚用的是两份不同的列表,都在 render.js 里:
NAV—— 顶栏那几项,基础是首页 / 更新日志。navItems()—— 在NAV后面补上「加入 QQ 群」。config.js里qq.group留空的话这条不显示,免得顶栏出现一个点进去只有空占位框的入口。FOOTER_NAV—— 页脚「站内导航」,保留全部六个页面。
之所以拆开:downloads.html(下载中心)、mods.html(模组列表)、
faq.html(教程 / FAQ)在顶栏没有入口,页脚是它们唯一的兜底入口,
所以这份列表不能跟着一起减。要往顶栏加/去项,只改 NAV;
页脚想跟着变,再改 FOOTER_NAV。
首屏那排按钮现在是 安装教程 / 下载整合包 / 赞助 三颗,「下载整合包」故意放在正中间:
- 它不跳页面,而是原地向下滚到「选择你要下载的端」那一节
(
index.html里带id="pick"的<section>)。滚动落位靠style.css里html上的scroll-padding-top(桌面 96px / ≤760px 84px),它负责让标题不被 72px 的吸顶导航压住 —— 以后再加页内锚点,不用单独写scroll-margin-top。 - 「加入 QQ 群」搬到顶栏了,原来那一格换成「赞助」(也指向
support.html)。 .hero__actions > .btn上有一句min-width: 168px。整排本来就是居中的, 但左边 4 个字、右边 2 个字会把中间那颗往右顶 24px,配平之后它才正压在中线上。 换按钮文字时留意这一句:两边字数差太多的话它又会偏。
版本号现在写在三个地方,发版时要一起改,否则页面会自相矛盾:
config.js里hero.facts的「当前版本」、data.js里的下载条目、data.js里的changelog首条。当前版本是 0.3.7 公测,走的是0.x加channel: "beta"。
在 data.js 的 downloads.client.versions 数组最前面加一条,并把旧版本的
recommended: true 改成 false(推荐版本只能有一个,否则页面会取到第一个)。
页面上只渲染 recommended 那一条。旧版本留在数组里不会出现在任何地方 ——
「选择版本」下拉和「全部版本一览」表格都已经去掉,全站同时只对外提供一个版本的链接。
{
version: "0.3.7",
channel: "beta", // release 正式版 / beta 测试版(公测阶段用 beta)
recommended: true, // 只有最新版写 true
mc: "1.20.1",
loader: "Forge 47.4.23",
java: "Java 21(64 位)",
mem: "8 GB", // 最低内存分配,只有客户端填了才会显示
file: "野火整合包-客户端-v0.3.7.zip",
size: "1.28 GB",
date: "2026-10-04",
url: "你的下载直链",
mirrors: [{ name: "百度网盘", url: "链接", code: "abcd" }],
sha1: "40位的SHA1",
notes: "这一版改了什么,写一句话。"
}服务端同理,改 downloads.server.versions。
在 data.js 的 changelog 数组最前面加一条,version 带 v 前缀,按时间从新到旧排列:
{
version: "v0.3.7", // 带 v 前缀
date: "2026-10-04", // 发布日期,YYYY-MM-DD
tags: ["公测", "推荐"], // 小标签,随便写;初始版写 ["公测", "初始版"]
summary: "一句话说明这一版干了什么。", // 可留空 ""
changes: [
{ type: "add", text: "新增 ……" },
{ type: "fix", text: "修复 ……" },
{ type: "change", text: "调整 ……" },
{ type: "remove", text: "移除 ……" }
]
}type四选一,决定左边那个彩色小标签:add新增(绿)/fix修复(蓝)/change调整(黄)/remove移除(红)。写别的值会按「调整」显示。text是纯文本,不要写 HTML,会被转义成字面量。- 第一条(数组里最靠前的)会额外挂一个橙色「最新」标签,首页「最近更新」取前两条,
每条只列前 5 条改动,剩下的显示成「上面是前 5 条,还有 N 条在完整更新日志里」并链接到
changelog.html。想改这个条数,就改render.js里renderHomeChangelog()的{ max: 5 }。 changes留空[]时,页面上显示「这一版的更新内容还没整理,稍后补上。」 —— 所以刚发版还没整理内容时可以先放个空数组,不用编内容。- 当前时间线的初始版是 v0.3.0,再往前没有记录了。
在 data.js 的 mods.list 里加一条:
{ name: "Sodium", orig: "钠", category: "性能优化", author: "CaffeineMC", desc: "一句话说明。" }category必须是mods.categories里已有的分类,否则筛选不到它。要加新分类就先加到categories。url留空会自动生成 Modrinth 搜索链接(这样链接永远不会失效);想指向精确项目地址就填url。
分别改 data.js 里的 guide.client / guide.server(每项一张编号卡片)和 faq(每项一个折叠条)。
FAQ 的答案里可以直接写 HTML,比如 <b>加粗</b>、<code>代码</code>。
整站都是静态文件,传到任何静态托管都能跑。
git init
git add .
git commit -m "野火整合包发布站"
git branch -M main
git remote add origin https://github.com/你的用户名/仓库名.git
git push -u origin main然后仓库 Settings → Pages → Source 选 main 分支 / (root) 目录,等一两分钟即可。
⚠️ 不要把几百 MB 的整合包 zip 提交进 git 仓库。 Git 仓库不适合存大文件, 超过 100MB 单个文件 GitHub 会直接拒绝,仓库也会变得极难克隆。 正确做法:整合包本体传到 GitHub Releases(单个文件上限 2GB)或网盘, 然后把链接填到data.js的url/mirrors里。
- Gitee Pages:国内访问快,但需要实名且 Pages 功能要手动更新。
- Cloudflare Pages / Vercel / Netlify:直接连 GitHub 仓库,推代码自动发布,带免费 HTTPS。
- 自己的虚拟主机 / 服务器:把整个文件夹丢进网站根目录就行。
整站风格对齐 complementary.dev:扁平、克制的极简暗色。 想加新组件时,请沿用这套规则,否则会显得格格不入:
| 项目 | 取值 |
|---|---|
| 页面底色 | rgb(40,40,42)(--bg) |
| 卡片 / 内嵌块 | rgba(28,28,30,.78)(--inset),半透明,背景图会透出来 |
| 卡片内部凹槽 | rgba(18,18,20,.55)(--sunken):代码、输入框、内层表格 |
| 悬浮态 | rgba(48,48,53,.86)(--raised) |
| 交替分节 | rgba(30,30,33,.60)(--band) |
| 分隔线 | rgba(120,120,126,.30)(--line),弱化线 --line-soft |
| 正文 | rgb(254,254,254),次要文字用 --text-dim / --text-mute |
| 强调色 | rgb(255,180,80)(--accent,野火橙) |
| 链接色 | rgb(100,200,255)(--link) |
| 圆角 | 卡片 10px(--radius),按钮和标签用胶囊(--radius-pill) |
| 阴影 | 一律不用。 层次靠底色深浅和 1px 边框表达 |
这些面的透明度是配着算过的:叠在
--bg上算出来的颜色和纯色版几乎一致。 所以把background.image留空时,页面观感回到原来的纯色版,不会有"半透明却没背景"的怪状。
另外两条硬性约定:
- 不要引入发光、渐变文字、硬阴影。 这是旧版像素风的做法,已全部移除。
- 不要加载外部字体。 参考站用的 Rubik / Montserrat 在国内访问不稳定。
现有字体栈是系统无衬线。注意中文字体普遍没有 Light 字重,
强行写
font-weight: 300会被浏览器伪轻量化、反而发虚,所以正文一律用 400。
背景是两层固定在窗口上的伪元素(html::before 放模糊图、html::after 放压暗层),
内容是正常滚动的。旋钮都在 config.js 的 background 里:
| 旋钮 | 作用 |
|---|---|
image |
图片路径;留空 "" 就退回纯色背景 |
blur |
高斯模糊半径(px),越大越柔和 |
lift / contrast |
提亮倍数与对比度,都填 1 就是完全不动原图 |
dim |
压暗程度,0 = 不压暗 |
当前是 lift: 1 / contrast: 1 / dim: 0,也就是直接用图片本来的明暗,只做了模糊。
这张图本身偏暗(平均亮度 25/255),深黑底配上中央那团营火暖光,观感比提亮过更沉稳。
如果你换成一张偏暗、又想让画面更清楚的图,可以把 lift 调到 2~3、contrast 调到 0.6 左右:
两者配合等效一条 gamma 曲线,能在"抬起暗部"的同时不把高光冲白。
只调 lift 会让高光直接死白(这张图有 13% 的像素亮度 >51,一提就削平)。
用当前参数(不提亮、不压暗)实测,裸背景最亮处亮度约 50,此时: 次要文字 7.19:1、弱化文字 4.57:1,都还在 WCAG AA 之上,所以裸放文字也是安全的。
但如果你把 lift 调大,裸背景会跟着变亮 —— 提到 lift: 3 时裸背景最亮能到 94,
次要文字会掉到 4.08:1(不达标)。所以样式表里保留了一条兜底规则:
.section > .wrap 下直接写的小标题、段落、列表会自动获得面板。
调亮背景后不用逐处检查文字;但如果你在某个透明容器里新写了文字,加个 class="card" 更保险。
- CSS 变量里的相对
url()会解析错。 自定义属性里的url()是按"使用它的那条声明 所在的样式表"为基准解析的,也就是assets/css/下。所以url("assets/img/bg.jpg")会变成assets/css/assets/img/bg.jpg→ 404, 而且不报错、背景直接不显示,非常难查。render.js里已经用new URL(img, document.baseURI)转成绝对地址,改这段代码时别删掉。 - 改完
config.js一定要强刷(Ctrl+F5)。 背景是由render.js动态注入的, 如果浏览器缓存了旧的 JS,你会看到"新版样式 + 完全没有背景",很容易误判成没生效。 - 面板不要做太厚。 营火的光晕正好落在屏幕中央,面板越不透明就越把图最亮的部分盖住,
结果是"背景更看不见了"。现在
--inset用的是.58,图像透出来约 42%。
想换背景图:把图片放进 assets/img/,改 image 路径,然后按上面第 2 条强刷。
站内标题和界面字用的是 缝合像素字体(Fusion Pixel Font),
作者 TakWolf,授权 SIL OFL-1.1
(可商用、可自托管、可再分发,要求保留授权文件)。
字体文件已放进 assets/font/,不依赖任何外部 CDN,断网或 file:// 直接打开都正常。
上游字体(Ark Pixel、Cubic 11、Galmuri 等)的授权原文在 assets/font/LICENSES/,别删。
用的是 12px 比例(proportional)简体中文版,ttf 转 woff2,906 KB,全站只此一个文件。
只保留了一个字重,所以 style.css 里统一写 font-weight: 400;
写 700 会触发浏览器的伪粗体(faux bold),笔画会糊成一团。
这个字体是按 12px 点阵设计的,只有在 12 / 24 / 36 / 48 / 60 这些尺寸下才会逐像素对齐、边缘锐利。 写 13px、14.5px 这种非整数倍,笔画会被切碎,比不用字体还糊。
实测(同一段中文,统计"中间灰度"像素占比,越低越锐利):
| 字号 | 中间灰度占比 |
|---|---|
| 12px | 35.7% |
| 24px | 20.3% |
| 36px | 13.7% |
| 15px | 58.0% ← 反面教材 |
style.css 第 14 节就是为此把全站字号"吸"到 12 / 24 / 36 三档上的。
以后加新样式,字号请从这三档里挑,别写 13px、15px。
顺带一提:
clamp()/vw这类流体字号天然不是整数倍, 所以像素字体下,首屏大标题和各页标题改成了媒体查询的几档固定值(36 → 48 → 60)。
在 config.js 里:
font: {
pixel: true, // false = 完全不加载像素字体,全站回到系统字体
scope: "display" // "display" = 只用于标题和界面字(当前默认)
// "all" = 正文也用像素字,整站变成复古游戏界面
}display:标题、按钮、导航、标签、表头、版本号、首屏底部那行数据 (游戏版本 / 加载器 / 当前版本)用像素字,正文保持 16px 系统字。 界面有像素味,长文仍然好读。all:正文也是像素字,会被压到 12px(比现在小 25%), 像一款复古游戏界面;教程和 FAQ 这种长页面会明显更累眼。 此时首屏数据行的标签和数值会一起压回 12px(14.3 里的规则写在 14.2 后面,靠顺序取胜)。
两种都已经截图确认过。改完记得 Ctrl+F5 强刷 —— 字体有 906 KB,浏览器缓存得很牢。
交付前用无头浏览器(真实 Chrome)和 DOM 模拟跑过下列检查,全部通过:
- 7 个页面均能正常渲染,浏览器控制台无报错,站内链接与锚点无死链。
- 下载页客户端 / 服务端两张卡各自独立渲染,互不影响。
- 模组页支持按名称、中文名、作者、说明搜索,并可与分类筛选叠加。
- 移动端导航折叠、复制群号均正常。
- 在 478px / 746px / 1418px 三种视口下,
html.scrollWidth均等于视口宽度,页面无横向溢出。 (引入像素字体后复测:7 个页面 ×display/all两种范围 × 3 种视口 = 42 组, 全部OVF=0、控制台ERR=0。精简顶栏 / 去掉赞助条之后又复测一轮: 7 个页面 × 3 种视口 = 21 组,同样全部OVF=0、ERR=0。 后来又复测一轮(顶栏加「加入 QQ 群」、首屏按钮换成「安装教程 / 下载整合包 / 赞助」): 同样 21 组OVF=0、ERR=0,且每组都确认顶栏 3 项(首页 / 更新日志 / 加入 QQ 群)、 页脚 6 项,support.html上aria-current正确落在「加入 QQ 群」。 - 「下载整合包」是否真在正中间,也是量出来的:比较它的
getBoundingClientRect()中点和.hero__inner面板中点,1420 / 1100 / 900 / 760 / 700 / 660 / 640 七种宽度下偏差都是 0.0px(加min-width之前是偏右 24px)。 ≤620px 时整排会换成两行(安装教程 + 下载整合包 / 赞助居中),这是折行不是跑偏。 - 「下载整合包」的页内跳转是量出来的,不是目测:把滚动设为即时后设 hash,
#pick的getBoundingClientRect().top稳定落在 96px(桌面)/ 84px(≤760px), 与scroll-padding-top完全一致,也大于吸顶栏的 73px —— 标题不会被挡住。 (顺带一个坑:headless 的--dump-dom不产生合成帧,scroll-behavior: smooth的动画永远不推进,window.scrollY会一直是 0,必须临时改成即时滚动才量得到真实落点。) - 像素字体确实加载并生效,是在真实浏览器里读
document.documentElement的data-font属性和计算后的font-family确认的(命中"Fusion Pixel"), 不只是肉眼看截图。file://直接打开也正常。 - 字体对中文的覆盖:抽出页面上出现过的 1081 个字符逐个用 canvas 像素比对,
只缺 23 个 emoji / 符号(
🎮🖥️📦⚠等),中文、英文、标点一个都不缺; 缺的那些只出现在正文里,而正文用的是系统字体,所以不影响显示。 - 图标是否被"整数倍缩放"是逐像素算出来的,不是猜的:
icon.png的原生网格是 17×17,所以 34 / 68 / 102 / 136 都是整数倍、必然锐利;logo.png是 164×146 的 1:1 原图,缩到 136px 就是 0.83 倍、像素会被切碎, 所以它已经不再用于页面显示,只留给分享卡片。 - 背景图是否真的加载,是在真实页面上逐像素验证的(留白列亮度标准差 12.1、
出现
rgb(101,79,82)这类暖色起伏),而不是只看代码或测试页。 - 文字对比度实测(当前参数):面板内 18.27:1 / 9.75:1 / 5.60:1, 裸背景上 12.22:1 / 7.19:1 / 4.57:1 —— 三种文字、两种位置全部达到 AA 的 4.5:1。
- 把
background.image置空后复测,留白区域 84% 的像素是精确的rgb(40,40,42), 确认能干净地退回纯色背景、不残留压暗层。
顺带记一笔:
.table-wrap/table.tbl那套表格样式在去掉「全部版本一览」之后 已经没有页面在用了,但 CSS 留在style.css里没删 —— 以后想加真正的表格 (比如模组对照表)可以直接拿class="tbl"用,不用担心窄屏撑破页面。
另外记一笔:无头 Chrome 的
--screenshot按窗口尺寸出图, 而实际视口是「窗口宽 −22px、窗口高 −98px」(有浏览器边框的占位)。 所以截图底部会多出约 98px 的页面底色区域 —— 那是截图假象,不是页面没铺满。
以后自己改 data.js 时,最容易踩的两个坑是:
① 模组的 category 写了个分类表里没有的名字(结果筛选后是空的);
② 两个版本同时写了 recommended: true(首页取到的不一定是新版)。
- 本站代码可自由修改使用。
- 缝合像素字体(Fusion Pixel Font) 授权为 SIL OFL-1.1,作者 TakWolf,
授权原文见
assets/font/LICENSE-FusionPixel-OFL.txt与assets/font/LICENSES/。 - 整合包内的所有模组,著作权归各自原作者所有,本站页面已标注作者并链接其项目主页。
- 本站与 Mojang Studios 及微软无隶属关系,请支持正版游戏。
- 页脚的免责声明可在
config.js的disclaimer里修改。