Jamstack:Angular+Scully+Tailwind CSS

Scully는 웹 프레임워크Angular를 위한 정적 사이트 생성기입니다.Angular 및 Scully 구축 Jamstack 프로젝트를 사용하는 방법을 학습합니다.스타일링, 체리🍒 케이크 위에🍰.

순풍 CSS TL；박사

설명도를 사용하여 Scully 및 Tailwind CSS를 추가하는 새 각도 항목을 만듭니다.Angular는 Scully 및 에서 사용할 수 있도록 설치 절차를 자동으로 생성하고 실행합니다.💯

ng new app-name --style=scss --routing true
cd app-name

# add scully
ng add @scullyio/init

# add scully blog
ng generate @scullyio/init:blog

# add tailwind
ng add ngx-tailwind

따르거나schematics.각도와 순풍에 대한 더 많은 정보는 깊이 안내서ngx-tailwind를 참조하십시오.

소스 코드 운영 구축에서 사용되지 않는 CSS 제거🧹

Tailwind는 개발 과정에서 유용한 CSS 스타일을 많이 생성합니다.Scully 응용 프로그램Angular 10 with Tailwind CSS을 배포하기 전에 purge의 tailwind.config.js 옵션을 사용하십시오.템플릿 및 TypeScript 파일의 경로를 제공합니다.

module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
+ purge: ["./src/ **/*.html", "./src/** /*.ts"],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

NODE_ENV을(를) production로 설정하면 Tailwind에서 사용하지 않는 스타일이 자동으로 지워집니다.ngx-tailwind를 사용하여 추가된 스크립트

npm run build:prod

app.component.html 템플릿을 열고 [순풍] 도구 스타일을 사용하여 추가합니다.

<div class="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0">
  <header class="flex justify-between items-center py-10">
    <div>
      <a href="/" class="text-xl font-semibold"> Angular + Scully + Tailwind = 🚀 </a>
    </div>
    <div>
      <a href="https://github.com/notiz-dev/angular-scully-tailwindcss" class="font-medium text-gray-500 hover:text-gray-700"> Source Code &rarr; </a>
    </div>
  </header>

  <main>
    <!-- Displaying Angular routes -->
    <router-outlet></router-outlet>
  </main>
</div>

에서 자신의 제목을 사용자 정의합니다.

사용하지 않는 모든 CSS 삭제 고려

처음으로 Angular를 Jamstack 응용 프로그램으로 사용하기 시작했습니다.이 순서대로 단계를 수행합니다.
Angular 애플리케이션 최초 구축

npm run build:prod

Scully 애플리케이션 구축

npm run scully

모든 미리 렌더링된 정적 필드 파일은 header 에서 생성됩니다.페이지마다 ./dist/static 파일이 표시됩니다.
Scully 애플리케이션

npm run scully:serve

가장 좋아하는 브라우저를 열고 play.tailwindcss.com Scully 정적 서버를 보고 Angular 서버를 보십시오.
너는 두 개의 링크에서 봐야 돼. - 각도 꼭대기.👆, 사고려 강바닥👇.
http://localhost:1668/

http://localhost:1864/ 사고리는 또 무엇을 첨가했습니까?🔍

Scully는 루트 폴더에 파일index.html을 생성합니다.잠시 후에 이 점을 보실 수 있습니다.
또한 첫 번째 Scully가 새 파일을 만들면 Scully는 몇 개의 새 파일을 생성합니다.scully.<projectname>.config.ts 파일에 추가합니다.

# Scully
.scully
scully.log
src/assets/scully-routes.json
scully/plugins/*.js
scully/plugins/*.js.map

.gitignore 나중에 블로그 게시물 페이지에서 액세스할 프런트엔드 데이터를 포함하여 사용 가능한 노선에 대한 모든 정보를 포함합니다.

가격 인하 블로그

하나💍 당신의 블로그를 관리하도록 명령합니다

ng generate @scullyio/init:blog

당신은 더 많은 유연성을 필요로 합니까?다음 명령을 실행하고 몇 가지 질문에 대답해 보십시오config.

ng generate @scullyio/init:markdown

현재 너의 블로그는 이미 설치되어 있다.새로운 노선을 추가했습니다. 예를 들어 scully-routes.json, 당신의 Angular 응용 프로그램을 다시 구축하고, 사고리와 함께 새로운 노선을 탐색합니다.

npm run scully -- --scanRoutes

Scully 응용 프로그램을 제공하고 브라우저에서 생성된 첫 번째 게시물/blog/<slug>을 탐색합니다.

사고리는 당신의 localhost:1668/blog/<slug> 디렉터리에 모든 블로그 게시물을 만들 수 있습니다 index.html.
questions

스타일 블로그 게시물 페이지

네, 첫 번째 블로그 게시물 페이지를 얻었습니다. 하지만 솔직히 말하면🧐 그것은 약간의 조정이 필요하다.현재 블로그 글 페이지에 블로그 글 제목, 발표 날짜가 부족하고 내용이 스타일을 설정하지 않았습니다.
사고리에는 당신의 블로그 게시물의 앞부분을 방문하는 내장 서비스dist/static/blog가 있습니다.이것은 ScullyRoutesService 아래에 게시된 모든 게시물을 공개하고 ScullyRoutesService.available$ 아래에 현재 페이지를 공개합니다.
생성된 ScullyRoutesService.getCurrent() 열기 및 사용blog.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ScullyRoute, ScullyRoutesService } from '@scullyio/ng-lib';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.scss'],
  preserveWhitespaces: true,
  encapsulation: ViewEncapsulation.Emulated,
})
export class BlogComponent implements OnInit {
  currentPost$: Observable<ScullyRoute> = this.scully.getCurrent();

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private scully: ScullyRoutesService
  ) {}

  ngOnInit() {}
}

템플릿에서 파이핑 확장ScullyRoutesService.getCurrent()을 사용하여 액세스async 및Observable(사용자 정의 속성)을 수행합니다.

<article>
  <header *ngIf="currentPost$ | async as currentPost" class="pt-6 xl:pb-10">
    <div class="space-y-1 text-center">
      <dl class="space-y-10" *ngIf="currentPost.publishedAt">
        <div>
          <dt class="sr-only">Published on</dt>
          <dd class="text-base leading-6 font-medium text-gray-500">
            <time [dateTime]="currentPost.publishedAt"> {{ currentPost.publishedAt | date: "dd MMMM yyyy" }} </time>
          </dd>
        </div>
      </dl>
      <div>
        <h1 class="text-3xl leading-9 font-extrabold text-gray-900 tracking-tight sm:text-4xl sm:leading-10 md:text-5xl md:leading-14">{{ currentPost.title }}</h1>
      </div>
    </div>
  </header>

  <!-- This is where Scully will inject the static HTML -->
  <scully-content></scully-content>
</article>

보기, 간단하고 깨끗한 블로그를 디자인하는 참고로 사용됩니다.
blog front matter를 업데이트하여 title ~ publishedAt 로 설정하고 날짜 시간 문자열을 사용하여 published 를 추가하고 발표되지 않은 내용true을 삭제하며 자리 표시자 내용을 추가합니다.

--------
title: 2020-10-23-blog
description: 10 Top tips about your next Pizza Hawaii
published: true
publishedAt: 2020-10-31T13:37:00.000Z
--------

# Pizza 🍕

Eat **pizza** hawaii *everyday*. ~~Don't forget~~ the 🧀 on your `pizza`.



```
var pizza = "Eat 🍕";
alert(pizza);
```



## Hawaii

Ordered List

1. 🍍
2. 🥓
3. 🧀

Unordered List

* 🧀
* 🍍
* 🥓

### Diavolo

> Pizza might be very 🌶️

마지막으로 publishedAt 에서 모든 스타일을 삭제합니다.새 블로그 게시물 제목을 보려면 Angular, Scully 및 serve Scully를 재구성합니다.

경탄했어🤩 많이 좋아진 것 같습니다.스타일링이 없는데?🤨 플러그인을 설치하고 가격 인하 내용에 스타일을 적용하십시오.

npm install -D @tailwindcss/typography

플러그인을 사용자에 추가slug

module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: ["./src/ **/*.html", "./src/** /*.ts"],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [require('@tailwindcss/typography')],
};

현재 Tailwind 레이아웃 플러그인으로 제공되는 클래스 패키지blog.component.scss:

<article>
  <header>
    ...
  </header>

  <div class="prose max-w-none pt-10 pb-8">
    <!-- This is where Scully will inject the static HTML -->
    <scully-content></scully-content>
  </div>
</article>

블로그 게시물의 내용이 현재 정형화되었다😎. 이게 얼마나 쉬워요?당신은 당신의 브랜드나 개인 스타일에 따라 이 스타일들을 진일보할 수 있습니다 Tailwind Blog.

사용할 수 있는 모든 게시물을 열거하고postslug로 이동하는 일도 있습니다.

순조롭게 조판하다 블로그 개요 페이지

tailwind.config.js를 사용하여 노선<scully-content></scully-content>에 새 구성 요소를 생성하여 사용 가능한 모든 게시물을 표시합니다.

ng g module blogs --route blogs --module blog/blog.module

prose 에서 새 노선의 경로를 /blog 에서 비워 ScullyRoutesService.available$ 노선과 일치하도록 변경합니다.

const routes: Routes = [
  {
+ path: '',
- path: 'blogs',
    loadChildren: () =>
      import('../blogs/blogs.module').then((m) => m.BlogsModule),
  },
  {
    path: ':slug',
    component: BlogComponent,
  },
  {
    path: '**',
    component: BlogComponent,
  },
];

blog-routing.module.ts 열기 blogs 로 자동으로 리디렉션하려면

const routes: Routes = [
+ { path: '', redirectTo: 'blog', pathMatch: 'full' },
  {
    path: 'blog',
    loadChildren: () => import('./blog/blog.module').then((m) => m.BlogModule),
  },
];

현재 /blog 에서 사용 가능한 모든 블로그 게시물에 대한 인용을 만들고 루트가 /blog 로만 시작하는 페이지를 필터합니다.또한 app-routing.module.ts 날짜 내림차순으로 게시물을 배열합니다.

import { Observable } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { Component, OnInit } from '@angular/core';
import { ScullyRoute, ScullyRoutesService } from '@scullyio/ng-lib';

@Component({
  selector: 'app-blogs',
  templateUrl: './blogs.component.html',
  styleUrls: ['./blogs.component.scss'],
})
export class BlogsComponent implements OnInit {
  available$: Observable<ScullyRoute[]>;

  constructor(private scully: ScullyRoutesService) {}

  ngOnInit(): void {
    this.available$ = this.scully.available$.pipe(
      map((r) => r.filter((page) => page.route.startsWith('/blog/'))),
      map((r) => r.sort((page1, page2) => new Date(page2.publishedAt).getTime() - new Date(page1.publishedAt).getTime()))
    );
  }
}

중요한 것은 blogs.component.ts 에 액세스하려면 /blog/ 에서 publishedAt 를 가져와야 한다는 것입니다.
블로그 이름을 추가하고 템플릿의 모든 게시물을 순환합니다

<div class="pt-6 pb-8 space-y-2 md:space-y-5">
  <h1 class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-orange-500 via-yellow-400 to-yellow-200 tracking-tight sm:text-4xl md:text-6xl">Company Blog</h1>
  <p class="text-lg leading-7 text-gray-500">All the latest Company news.</p>
</div>

<ul class="divide-y divide-gray-200">
  <li *ngFor="let post of available$ | async" class="py-12">
    <article class="space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline">
      <dl>
        <dt class="sr-only">Published on</dt>
        <dd class="text-base leading-6 font-medium text-gray-500">
          <time [dateTime]="post.publishedAt"> {{ post.publishedAt | date: "dd MMMM yyyy" }} </time>
        </dd>
      </dl>
      <div class="space-y-5 xl:col-span-3">
        <div class="space-y-6">
          <h2 class="text-2xl leading-8 font-bold tracking-tight">
            <a [routerLink]="post.route" class="text-gray-900 hover:text-gray-700"> {{ post.title }} </a>
          </h2>
          <div class="prose max-w-none text-gray-500">{{ post.description }}</div>
        </div>
        <div class="text-base leading-6 font-medium">
          <a [routerLink]="post.route" class="text-orange-500 hover:text-orange-600"> Read more &rarr; </a>
        </div>
      </div>
    </article>
  </li>
</ul>

customize
지금 너는 단지 하나의 생각과 시간을 써서 쓸 수 있을 뿐이다. 너의 다음 박문은 매우 쉽다💆

ng generate @scullyio/init:post --name="Cool post"

Scully schematics에서 구현됩니다.
뭐 공부 해요?😄 이제 자기 블로그를 만들 때가 됐어요.🚀. 더 많은 영감이 필요합니까? Scully 및 Tailwind CSS를 사용하여 구축됩니다.😉