资讯详情

资讯详情

7-Zip 官方中文网站:基于 Astro 的静态站构建、配置与本地部署指南

文档前端【免费下载链接】7z7-Zip Official Chinese Simplified Repository (Homepage and 7z Extra package)项目地址https://gitcode.com/gh_mirrors/7z1/7z点击查看免费下载本文以 website/README.md 为核心讲解 7-Zip 简体中文仓库中官方中文网站website/目录的技术底座一个由npm create astrolatest的 Basics 模板初始化、基于 Astro 框架构建的静态站点。读完后你将掌握该站的目录结构、本地开发/构建/预览的完整命令体系、关键构建配置base、build.format、sitemap 集成的含义以及配套的 deploy.sh 本地部署脚本的用法能够独立在该站点上进行查看、开发构建与本地部署。仓库背景7z 仓库中的 website 目录根目录 README.md 说明了本仓库的定位与结构这是一个 7-Zip 的简体中文仓库7-Zip Official Chinese Simplified Repository仓库结构部分明确列出一项website/— 基于 Astro 的静态站点Astro-based static site也就是说7-Zip 的命令行工具、压缩格式等核心代码并不在本仓库中本仓库承载的是简体中文官网的内容与配套资料zh-cn/中文文档、extra/附加包、help-src/帮助文档源文件而website/目录就是官网的前端工程本身。根 README 同时注明整个仓库的许可为 LGPL。website/目录的实际文件构成如下website/ ├── README.md # 即本篇所依据的文档Astro Starter Kit: Basics ├── astro.config.mjs # Astro 站点配置 ├── package.json # 依赖与 npm scripts ├── tsconfig.json # TypeScript 配置 ├── bun.lock # 包锁文件 ├── deploy.sh # 本地部署脚本 ├── public/ # 静态资源直接原样发布 │ ├── favicon.ico │ └── img/ # 站点图片7ziplogo.png、7zfm*.png 等 └── src/ ├── layouts/ │ └── Layout.astro # 全站公共布局侧边菜单 全局样式 ├── pages/ # 路由页面一个文件 一个 URL │ ├── index.astro # 首页 │ ├── 7z.astro # 7z 格式 │ ├── sdk.astro # LZMA SDK │ ├── download.astro # 下载 │ ├── faq.md # 常见问题Markdown 页面 │ ├── support.astro # 支持 │ ├── links.astro # 链接 │ └── robots.txt.ts.disabled # 已禁用的 robots.txt 生成器 ├── components/ │ └── Welcome.astro ├── data/ │ └── versions.ts # 版本与下载链接数据 └── assets/ ├── astro.svg └── background.svg项目结构从最小骨架到实际站点website/README.md 以 Astro Basics 模板的标准方式介绍了 Astro 项目的最小目录骨架/ ├── public/ │ └── favicon.svg ├── src/ │ ├── layouts/ │ │ └── Layout.astro │ └── pages/ │ └── index.astro └── package.json对照 7z 仓库的实际工程可以发现真实站点严格保留了这个骨架的三大要素并在此基础上扩展public/静态资源目录Astro 会将其内容原样复制到构建产物中。本仓库的public/下存放了favicon.ico与img/图片目录7ziplogo.png、7zfm.png、7zfm-vista.png、7zfm-win7.png等供布局与页面直接引用。src/pages/路由目录Astro 的文件即路由约定——pages/下的每个文件对应一个 URL。本仓库据此实现了首页index.astro、下载download.astro、常见问题faq.md等页面且同时支持.astro组件与.mdMarkdown 两种页面写法。src/layouts/布局组件Layout.astro 是整个站点的公共外壳用slot /承载各页面内容并提供左侧 120px 宽的菜单栏首页 / 7z 格式 / LZMA SDK / 下载 / 常见问题 / 支持 / 链接由源码中的menuItems数组驱动、语言切换区简体中文 / 正體中文 / Other Languages与版权页脚。相比最小骨架实际工程额外增加了src/data/结构化数据、src/components/可复用组件与src/assets/构建期资源目录这是 Astro 官方项目结构约定的标准延伸。本地开发与构建命令体系README 的核心内容是一张命令速查表所有命令都在**项目根目录即website/**的终端中执行命令作用npm install安装依赖npm run dev在localhost:4321启动本地开发服务器npm run build将生产站点构建到./dist/npm run preview在部署前本地预览构建产物npm run astro ...运行 CLI 命令如astro add、astro checknpm run astro -- --help查看 Astro CLI 帮助这些命令与 package.json 中的scripts字段一一对应scripts: { dev: astro dev, build: astro build, preview: astro preview, astro: astro }几点值得注意npm install并非脚本而是 npm 内置命令它安装的两项生产依赖即package.json中声明的astro当前为^6.1.9与astrojs/sitemap^3.7.2。仓库中的 bun.lock 表明该项目也使用 Bun 作为包管理器但package.json的脚本本身与包管理器无关npm/Bun 均可执行。npm run dev启动 Astro 开发服务器默认端口为4321支持文件修改后的即时热更新适合编辑src/pages/下的页面。npm run build产出到./dist/产物形态由 astro.config.mjs 中的build.format: file决定详见下一节是后续部署的直接输入。npm run preview在本机临时托管dist/产物用于部署前验证页面路径、资源引用是否正确。npm run astro ...通过astro: astro这个透传脚本把参数原样传给 Astro CLI。例如npm run astro check执行类型检查npm run astro add用于安装集成或模板README 表中的-- --help形式npm run astro -- --help中--之后的内容会原样传递给底层 CLI。首次初始化一个同类站点时README 给出的官方命令是npm create astrolatest -- --template basicswebsite/README.md 末尾也保留了 Astro Basics 模板的提示语Seasoned astronaut? Delete this file. Have fun!说明该文件正是模板自带 README被沿用为本子项目的说明文档。站点配置site、base 与 build.format 的协作astro.config.mjs 全文如下是本站最重要的配置文件// ts-check import { defineConfig } from astro/config; import sitemap from astrojs/sitemap; // https://astro.build/config export default defineConfig({ site: https://sparanoid.com, base: /lab/7z, build: { // https://docs.astro.build/en/reference/configuration-reference/#buildformat format: file, }, markdown: { // https://docs.astro.build/en/reference/configuration-reference/#markdownsyntaxhighlight syntaxHighlight: false, }, integrations: [sitemap()], });逐项解读site站点的规范 URL值为https://sparanoid.com。Astro 用它在构建期生成绝对 URL如 sitemap、canonical 链接等。从源码结构看site与下一项base组合起来表示本站实际发布在https://sparanoid.com/lab/7z/路径下——这一推断与 deploy.sh 中的默认目标目录sparanoid.com-prod和默认BASE_PATHlab/7z相互印证。base: /lab/7z所有生成页面的资源链接统一加上/lab/7z前缀。这是站点部署在域名子路径而非独立域根下的关键配置。在 Astro 中页面组件通过import.meta.env.BASE_URL读取该前缀Layout.astro 第 25 行即const baseUrl import.meta.env.BASE_URL;随后用${baseUrl}/favicon.ico、${baseUrl}/img/7ziplogo.png以及${baseUrl}/${item.href}拼接侧边菜单链接确保无论站点挂在哪个子路径下图标与菜单链接都不会 404。build.format: file决定路由的产物形态。file格式下src/pages/7z.astro生成dist/7z.html而默认的directory格式会生成dist/7z/index.html。本仓库选择file格式并非偶然——Layout.astro中的菜单直接以静态 HTML 文件形式互链href: 7z.html、href: faq.html等与file格式的产物天然匹配且这种一个 URL 对应一个文件的产物适合直接 rsync 同步到已有站点目录。markdown.syntaxHighlight: false关闭 Markdown 页面的语法高亮。由于本站以中文说明页为主如 faq.md源码中基本不出现代码块关闭后生成的 HTML 更干净。integrations: [sitemap()]引入astrojs/sitemap集成构建时依据sitebase自动生成站点地图便于搜索引擎收录。这也是package.json中唯一的外部依赖。另外src/pages/下存在一个名为 robots.txt.ts.disabled 的文件通过.disabled后缀禁用该文件说明当前版本未启用robots.txt 生成该功能可随时通过恢复文件扩展名重新启用。TypeScript 配置继承 Astro 严格模式tsconfig.json 只有一行实质内容{ extends: astro/tsconfigs/strict, include: [.astro/types.d.ts, **/*], exclude: [dist] }extends: astro/tsconfigs/strict继承 Astro 官方提供的严格模式TypeScript 预设使.astro文件、frontmatter 与src/data/中的数据模块都获得类型检查支持include中的.astro/types.d.ts是 Astro 在构建/生成时产出的类型定义文件纳入后编辑器才能理解import.meta.env.BASE_URL等构建期注入值exclude排除构建产物dist/避免对生成代码做类型检查。页面层数据驱动的下载与首页src/pages/下共 7 个在线页面 1 个 FAQ Markdown 页与Layout.astro的menuItems菜单一一对应home、7z、sdk、download、faq、support、links页面统一通过Layout title... currentPage...复用公共外壳currentPage用于高亮当前菜单项并决定title的拼接方式非首页时标题为7-Zip - {title}。首页 index.astro从../data/versions导入versions数据动态渲染下载 7-Zip {version}{date}的推荐下载表Windows x64 / x86 / ARM64 三个.exe安装链接均用模板字符串拼接形如https://www.7-zip.org/a/7z${versions.stable.short}-x64.exe并内联维护了一个news数组展示最近三个版本的发布动态页面正文还包含许可协议说明GNU LGPL 为主部分 BSD 3-clause部分受 unRAR 许可限制与 7-Zip 的主要特征列表支持的压缩/解压缩格式、AES-256 加密、自释放压缩包、资源管理器集成等。下载页 download.astro则是数据驱动的典型示范它把currentDownloads与legacyDownloads合并为resolvedDownloads循环渲染链接 / 类型 / 系统 / 描述四列表格并固定输出我们更建议使用 exe 版本的安装包而不是 msi 安装包的提示。版本数据集中在 versions.ts 中维护其类型结构为export interface Version { long: string; // 如 26.04用于页面展示 short: string; // 如 2604用于拼接下载文件名 type?: string; // 如 beta date: string; // 发布日期 sdk: { long: string; short: string; date: string }; } export interface DownloadLink { url: string; // 完整下载链接 type: string; // 如 .exe、.msi、.tar.xz system: string; // 目标平台描述 description?: string; rowspan?: number; }versions.ts当前导出的数据包括稳定版stable26.042026-10-05与beta两个VersionDatacurrentDownloads覆盖 Windowsx64/x86/arm64 的.exe与.msi、附加包7z{short}-extra.7z含 7z 独立命令行版本、7z DLL、Far 管理器插件、Linuxx86-64/x86/arm64/arm 的.tar.xz、macOS.tar.xz、源代码.7z/.tar.xz、LZMA SDK 与7zr.exelegacyDownloads则维护旧版本如 23.01 系列的历史下载链接。这种数据与页面分离的组织方式意味着更新版本号只需改versions.ts一处首页、下载页即自动同步这也是整个站点可维护性的关键设计。部署deploy.sh 本地部署脚本website/deploy.sh 是一个自包含的 bash 脚本负责把npm run build产出的dist/目录同步到部署目标使用方式来自脚本头部注释./deploy.sh [--no-commit] [source_dir] [dest_dir] [base_path]参数解析逻辑为--no-commit是开关参数关闭自动提交其余位置参数按顺序依次覆盖三个默认值——源目录默认dist、目标目录默认$HOME/Git/sparanoid.com-prod、基础路径默认lab/7z。脚本的核心行为建目录mkdir -p $DEST_DIR/site/$BASE_PATH即产物最终落在目标仓库的site/lab/7z/下与astro.config.mjs的base: /lab/7z精确对齐同步文件rsync -avz --delete --progress $SOURCE_DIR/ $DEST_DIR/site/$BASE_PATH--delete会删除目标端多余文件保证目标与dist/完全一致因此该目标目录应视为纯部署目录不要在site/lab/7z/下手工放置脚本之外的文件可选自动提交若未加--no-commit且目标目录中存在名为auto-commit的脚本则执行cd $DEST_DIR bash auto-commit把本次变更提交到部署目标仓库全程留痕所有步骤的时间戳、源/目标路径、rsync 详细输出都追加写入当前目录下的deploy-sparanoid.log便于事后排查。结合site/base/BASE_PATH三处一致的lab/7z配置可以推断该站点作为sparanoid.com主站的一个子目录发布整个流程即本地astro build→ rsync 到远端站点工作目录 → 自动提交生效。需要注意的是DEST_DIR指向的是维护者本地的部署目标路径默认值中的$HOME/Git/sparanoid.com-prod在不同机器上应通过第二个位置参数按实际情况覆盖。小结与可维护性要点命令体系npm install→npm run dev4321 端口开发→npm run build产物在dist/→npm run preview部署前预览完整继承 Astro Basics 模板的约定见 website/README.md。路径安全base: /lab/7zimport.meta.env.BASE_URLdeploy.sh的site/lab/7z目标三层联动修改任意一处路径时三处必须同步否则会出现资源 404 或发布位置错位。产物形态build.format: file使页面以xxx.html文件形式输出与布局中硬编码的.html菜单互链相匹配也契合 rsync 同步的部署方式。数据驱动版本与下载链接集中在 versions.ts升版号时只需更新该文件sitemap 由astrojs/sitemap集成在构建时自动生成。类型安全tsconfig.json 继承astro/tsconfigs/strict配合npm run astro check可对全站 frontmatter 与数据模块做严格类型检查。以上流程均只涉及在website/目录内查看、构建与本地部署不改动仓库其他部分zh-cn/、extra/、help-src/等中文资料目录保持独立。赞分享文档前端【免费下载链接】7z7-Zip Official Chinese Simplified Repository (Homepage and 7z Extra package)项目地址https://gitcode.com/gh_mirrors/7z1/7z点击查看免费下载相关推荐Redux Toolkit 官方文档网站基于 Docusaurus 的本地开发、静态构建与部署全指南Redux Toolkit 官方文档网站基于 Docusaurus 的本地开发、静态构建与部署全指南 本指南以仓库中的 website/README.md h前端状态管理git-cliff 官网构建指南基于 Docusaurus 的文档站搭建、本地开发与静态部署git cliff 官网构建指南基于 Docusaurus 的文档站搭建、本地开发与静态部署 git cliff 是一个高度可定制的 Changelog 生成CLI开发工具React Bootstrap 官网文档站构建指南基于 Docusaurus 的安装、本地开发与静态部署React Bootstrap 官网文档站构建指南基于 Docusaurus 的安装、本地开发与静态部署 本文围绕 React Bootstrap 仓库中 w前端UI组件创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
觉得有用,分享给同行:

为您的企业打造数字门面

稳重轻奢商务风格,端正雅致视觉,长效耐看不易过时。

立即咨询 →