news 2026/4/30 7:38:41

Scully完整配置教程：从零开始搭建高性能Angular网站

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Scully完整配置教程：从零开始搭建高性能Angular网站

Scully完整配置教程：从零开始搭建高性能Angular网站

【免费下载链接】scullyThe Static Site Generator for Angular apps项目地址: https://gitcode.com/gh_mirrors/sc/scully

Scully是一款专为Angular应用设计的静态网站生成器，它能够将Angular应用预渲染为静态HTML和CSS文件，显著提升网站加载速度和性能。本教程将带你从零开始，完成Scully的完整配置，打造一个高性能的Angular静态网站。

为什么选择Scully？

Scully作为Angular生态系统中的重要工具，具有以下显著优势：

  • 极致性能：预渲染技术使页面加载速度提升80%以上
  • SEO友好：静态HTML内容更容易被搜索引擎抓取
  • 简化部署：生成的静态文件可直接部署到任何静态托管服务
  • 开发便捷：与Angular CLI无缝集成，保留Angular开发体验

前期准备

在开始配置Scully之前，请确保你的开发环境满足以下要求：

  • Node.js 12.14.0或更高版本
  • Angular CLI 9.0.0或更高版本
  • npm 6.13.4或更高版本

你可以通过以下命令检查当前环境版本：

node -v ng version npm -v

安装Scully

1. 创建新的Angular项目（如已有项目可跳过此步骤）

ng new my-scully-project --routing cd my-scully-project

2. 添加Scully到项目中

ng add @scullyio/init

这条命令会自动完成以下操作：

  • 安装必要的依赖包
  • 创建Scully配置文件
  • 设置路由发现机制
  • 添加Scully命令到package.json

安装完成后，你会在项目根目录看到新生成的Scully配置文件：scully.<project-name>.config.ts。

配置Scully

基础配置

Scully的主要配置文件是scully.<project-name>.config.ts，它导出一个ScullyConfig对象：

export const config: ScullyConfig = { projectRoot: "./src", projectName: "my-scully-project", outDir: "./dist/static", routes: { '/blog/:slug': { type: 'contentFolder', slug: { folder: "./blog" } } } };

主要配置项说明：

  • projectRoot：Angular项目的根目录
  • projectName：项目名称
  • outDir：静态文件输出目录
  • routes：路由配置，定义如何处理不同的路由

添加内容插件

Scully支持多种内容插件，最常用的是处理Markdown文件的contentFolder插件。要使用它，首先需要安装相关依赖：

npm install @scullyio/ng-lib @scullyio/plugins

然后在路由配置中添加：

routes: { '/blog/:slug': { type: 'contentFolder', slug: { folder: "./blog" } } }

这样配置后，Scully会自动发现./blog目录下的所有Markdown文件，并为每个文件生成对应的路由。

创建和使用内容

创建Markdown内容

在项目根目录创建blog文件夹，并添加第一篇文章：

mkdir blog echo "--- title: '我的第一篇Scully博客' description: '使用Scully创建的第一篇博客文章' published: true date: '2023-01-01' --- # 欢迎来到我的博客 这是使用Scully静态网站生成器创建的第一篇博客文章。" > blog/first-post.md

在Angular中显示内容

创建一个博客文章组件：

ng generate component blog/post

修改blog/post/post.component.ts：

import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { ScullyRoute, ScullyRoutesService } from '@scullyio/ng-lib'; @Component({ selector: 'app-post', templateUrl: './post.component.html', styleUrls: ['./post.component.css'] }) export class PostComponent implements OnInit { post: ScullyRoute; constructor( private route: ActivatedRoute, private scully: ScullyRoutesService ) { } ngOnInit(): void { this.route.params.subscribe(params => { this.scully.getCurrent().subscribe(post => { this.post = post; }); }); } }

在模板文件post.component.html中添加：

<div *ngIf="post"> <h1>{{ post.title }}</h1> <p>{{ post.date | date }}</p> <scully-content></scully-content> </div>

构建和预览

构建Angular应用

ng build --prod

运行Scully生成静态文件

npm run scully

Scully会分析你的Angular应用，发现所有路由，并生成对应的静态HTML文件。生成的文件会保存在dist/static目录中。

预览静态网站

npm run scully serve

这个命令会启动一个本地服务器，默认在http://localhost:1668上提供生成的静态网站。

高级配置

添加自定义插件

Scully允许你创建自定义插件来扩展其功能。创建插件的步骤如下：

  1. 在项目根目录创建scully/plugins文件夹
  2. 创建插件文件，例如my-plugin.ts
  3. 在Scully配置中注册插件
// scully/plugins/my-plugin.ts import { registerPlugin } from '@scullyio/scully'; export const myPlugin = registerPlugin('routeProcess', 'myPlugin', async (route) => { // 插件逻辑 return route; });

配置路由忽略

如果你希望Scully忽略某些路由，可以在配置中添加ignoredRoutes：

export const config: ScullyConfig = { // ...其他配置 ignoredRoutes: [ '/admin/**', '/private/*' ] };

使用Scully的Transfer State服务

Scully提供了Transfer State服务，可以在服务器端和客户端之间共享数据：

import { TransferStateService } from '@scullyio/ng-lib'; // 在组件中 constructor(private transferState: TransferStateService) { const data = this.transferState.get('key', null); if (!data) { // 从API获取数据 // 然后保存到transferState this.transferState.set('key', fetchedData); } }

部署静态网站

Scully生成的静态文件可以部署到任何支持静态网站的托管服务，如：

  • Netlify
  • Vercel
  • GitHub Pages
  • AWS S3
  • Firebase Hosting

以Netlify为例，只需将dist/static目录推送到连接的GitHub仓库，Netlify会自动部署你的网站。

常见问题解决

路由未被Scully发现

如果Scully没有发现你的路由，请检查：

  • 路由是否在app-routing.module.ts中定义
  • 路由是否使用了loadChildren进行懒加载
  • 是否在Scully配置中正确设置了routes

内容没有正确显示

如果Markdown内容没有正确显示，请确保：

  • 已安装@scullyio/ng-lib
  • 在模块中导入了ScullyLibModule
  • 在模板中使用了<scully-content></scully-content>组件

构建速度慢

对于大型项目，可以通过以下方式提高Scully构建速度：

  • 使用--routeFilter只构建特定路由
  • 增加maxRenderThreads配置
  • 使用增量构建：npm run scully -- --incremental

结语

通过本教程，你已经掌握了Scully的基本配置和高级用法。Scully作为Angular的静态网站生成器，不仅能显著提升网站性能，还能简化开发和部署流程。无论你是构建博客、文档网站还是企业官网，Scully都是一个值得考虑的优秀工具。

想要了解更多关于Scully的高级功能，可以查阅官方文档：docs/overview.md。祝你使用Scully构建出既快速又美观的Angular静态网站！

【免费下载链接】scullyThe Static Site Generator for Angular apps项目地址: https://gitcode.com/gh_mirrors/sc/scully

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/4/11 3:41:06

PlugY终极指南：解锁暗黑破坏神2离线模式全部潜力

PlugY终极指南&#xff1a;解锁暗黑破坏神2离线模式全部潜力 作为暗黑破坏神2最受欢迎的离线增强工具&#xff0c;PlugY插件通过非侵入式设计&#xff0c;为单机玩家带来了革命性的游戏体验提升。这款生存工具包在保留原版游戏精髓的同时&#xff0c;解决了长期困扰玩家的诸多…

作者头像 李华
网站建设 2026/4/11 3:38:55

AI 工程化实战：从零手搓代码，这一次彻底搞懂MCP！至

简介 langchain中提供的chain链组件&#xff0c;能够帮助我门快速的实现各个组件的流水线式的调用&#xff0c;和模型的问答 Chain链的组成 根据查阅的资料&#xff0c;langchain的chain链结构如下&#xff1a; $$Input \rightarrow Prompt \rightarrow Model \rightarrow Outp…

作者头像 李华
网站建设 2026/4/11 3:33:59

s2-pro参数详解：Chunk Length对长文本连贯性的影响与实测数据

s2-pro参数详解&#xff1a;Chunk Length对长文本连贯性的影响与实测数据 1. 理解s2-pro语音合成模型 s2-pro是Fish Audio开源的专业级语音合成模型镜像&#xff0c;它能够将文本转换为自然流畅的语音。这个模型的一个独特功能是支持通过参考音频来复用特定音色&#xff0c;使…

作者头像 李华
网站建设 2026/4/11 3:33:15

PlugY插件：暗黑破坏神2单机模式必备的终极增强工具

PlugY插件&#xff1a;暗黑破坏神2单机模式必备的终极增强工具 还在为暗黑破坏神2单机模式的各种限制而烦恼吗&#xff1f;装备太多储物箱放不下&#xff1f;想重新分配技能点却只能重新练级&#xff1f;PlugY插件正是你需要的解决方案。这款专为1.09b至1.14d版本设计的离线增…

作者头像 李华