이 시점까지 우리 익스프레스 담당자는 완전히 unstaged ht m l 아무 자바 스크립트도 포함하지 않았습니다. C Ss just pure h t m l.
이 비디오에서는 스타일 시트 또는 일부 자바 스크립트와 같은 애셋을 포함 할 수있는 방법을 보여 드리겠습니다.
또한 Parshall의 템플릿을 사용하여 템플릿을 완전히 말릴 수있는 방법을 알려 드리려고합니다.
시작하겠습니다.
나는 우리가 우리의 앱을 가지고있는 지난 2 개의 비디오에서 사용하고있는 것과 동일한 앱을 사용하고있다.
예, 세 가지 주요 경로가 있습니다.
우리는 Ejay가 H1과 Palm C의 사랑스럽고 매력적인 이미지를 가진 템플릿으로 렌더링 한 다음, Slash와 사랑에 빠지게됩니다.
각각의 템플릿을 향한 사랑을 표현할 가변적 인 물건 경로는 우리가 그 길에 썼던 모든 것과 사랑에 빠졌던 것을 보여줄 것입니다.
그리고 나서 성명서를 작성한 다음 하단에 작은 단락을 작성한 다음 우리는 또한 E.J. 템플리트로 그리고 그것의 내부.
우리는 두 개의 고리를 가지고 있습니다.
이제 우리는 몇 가지 스타일을 포함시키고 자한다고 가정 해 봅시다.
그래서 지금 당신이 아는 것처럼 나는 자주색을 좋아합니다.
모든 시체를 보라색으로 만들고 싶다면 모든 다른 템플릿의 모든 텍스트 색상이 보라색이어야합니다.
포스트 페이지부터 시작하여 스타일 태그를 포함하여 스타일을 열고 닫을 수 있도록하고 여기에 내 스타일을 쓸 수 있으며 그렇게 자주색을하고 저장하게됩니다.
그리고 이것은 실제로 스타일을 포함하는 이상적인 방법이 아니라는 것을 기억하십시오. 왜냐하면 우리는 리팩터링하고 잠시 후에 개선하기 때문에 먼저 그 이유를 보여주기 때문입니다. 다만 작동하는지 확인해 보겠습니다.
몸 색깔이 보라색이에요.
서버 노드 app을 시작하자.
예, 브라우저로 가서 게시물의 페이지를 새로 고치면 보라색이 보입니다.
그리고 다른 길로 가면 자주색이되지 않습니다.
그리고 그것들은 완전히 별개의 템플릿이기 때문에 우리는 포스트 템플리트에 스타일 태그를 추가했습니다.
그래서 제가 세 템플릿 모두에 보라색이되기를 원한다면, 우리는 Ejay와 같은 스타일의 태그를 집안에 다른 스타일의 태그로 추가 할 수 있습니다.
예 그리고 서버를 다시 시작하면 내 페이지가 새로 고쳐집니다. 여기에 자주색 H-1이 생기고 러스티와 사랑에 빠지면 스타일 태그에서 자주색 텍스트가 나타납니다.
여기에는 우리에게 직면 한 두 가지 주요 문제가 있습니다.
하나는이 코드가 3 번 반복되는 문제입니다.
세 가지 다른 템플리트에서 동일한 스타일을 원한다면이를 수행하는 더 좋은 방법이 있어야합니다.
그리고 거기에 있습니다.
그리고 우리는 그 두 번째를 언급 할 것입니다.
우리는 좋은 생각이 아닌 스타일 태그를 사용하여이 문제를 해결함으로써 시작할 것입니다.
대신 우리는 외부 스타일 시트를 사용하고 링크 태그를 사용하여 해당 스타일 시트에 연결합니다.
그래서 먼저 링크 태그를 씁니다. 아직 스타일 시트가 없기 때문에 작동하지 않을 것입니다.하지만 우리는 그 두 번째 태그를 만들 것입니다.
그래서 링크와 우리는 평평한 스타일 시트를 제공해야합니다.
그리고 이것은 우리의 스타일 시트의 이름이되어야하며 우리는 그냥 Dot이라고 부를 것입니다.
SS 좋아, 그럼 이건 Post의 E.J. 템플릿이 지금 저장됩니다.
그리고 그 아파트를 만들자.
C ss는 apt와 같은 디렉토리에 그것을 만드는 것을 제외하고는 Ss J 예, 우리는 실제로 우리가 쓰는 모든 자바 스크립트와 우리가 원하는 다른 모든 애트리뷰트를 모든 스타일 시트에 넣을 다른 디렉토리를 만들 것입니다. 사용할 수 있고 우리는 그것을 public이라고 부르 겠지만 아무 것도 지명 될 수 있지만 public이라는 것은이 디렉토리의 매우 일반적인 이름입니다.
언제 올바른 장소에 있는지 확인하십시오.
디렉토리를 공개하고 공공 파일을 작성하여 공개 파일을 만들면 여기에 파일 이름을 저장하고 저장합니다. 그러면 공개하지 말고 잠깐 기다려주세요.
슬래시 평가.
불행히도 대답은 '아니오'입니다.
SSI가 말한대로 스타일 시트와 자바 스크립트가 공개 디렉토리 안에 있고 대중에게 공개 디렉토리를 제공하여 파일 이름 만 사용하여 링크 할 수 있도록 알려줍니다. 그 순간을 보여주세요.
SS 파일을보고 일부 스타일을 추가하는 공개 슬래시 앱을 열어 보겠습니다.
뭔가 다른 것을 해보 죠.
몸이나 배경을 할 것입니다.
그것은 무시 무시할 것입니다.
우리는 배경을 노랑색으로하고 색깔은 여전히 ​​자주색으로합니다.
좋아, 이제 우리는 그녀가 정의한 정말로 총체적인 스타일을 가지고 여기서 우리가 끝낼 수 있고 그것이 작동하는지 알 수있을 것이다.
이 게시물 E.J. 템플릿이 자주색 텍스트의 끔찍한 노란색 배경으로 나타나기 때문에 아직 작동하지 않을 것이지만 직접 보게 될 것입니다.
그래서 Noad apt.
J.S. 우리는 돌아가서 페이지를 새로 고치고 게시 페이지로 가야하고 우리는 아무것도 얻지 못합니다.
그리고 영사를 여기서 열면 연구에 실 패하지 못했다는 오류가 나옵니다.
서버가 404의 상태로 응답하여 장치 성공을 찾지 못했습니다.
그리고 이것에 대한 이유는 꽤 간단합니다.
웹 응용 프로그램을 만들고 Express를 사용하여 웹 서버를 시작하면 웹 서버가 시작될 때마다 자동으로 모든 파일을 제공하는 것이 아니라 원하는 것을 알 수 있습니다.
그리고 기본값은 아무것도 제공하지 않는 것입니다.
views 디렉토리를 제외하고.
그래서 우리가 명시 적으로 표현할 필요가있는 다른 것을 원한다면 공개 디렉토리 나 우리가 가지고있는 다른 이사를 제공해야합니다.
우리는 그것을 표현하기 위해 표현할 필요가 있으며 가능한 표현은 우리가 행위 내에서 그렇게 할 수있는 쉬운 방법을 제공합니다.
예 위로 사용하려면 괄호 안에 앱을 추가 할 것입니다.
EXPRESS 정적입니다.
그리고 다시 괄호 안에 public이라는 단어가 우리 디렉토리의 이름입니다.
그리고 이것은 공개 디렉토리의 내용을 제공하도록 명시 할 것입니다.
그리고 이제 서버를 다시 시작하고 페이지를 새로 고침하면 영사관을 닫을 수 있습니다. 노랑색 배경과 보라색 글씨체가 나오고 협의회에 오류가 없습니다.
그리고 그 스타일 시트를 다른 페이지에 포함 시키려면이 링크 태그를 복사하여 맨 위에 올리십시오.
물론 우리가 원한다면 여러 스타일 시트를 가질 수 있습니다. 우리는 서로 다른 이름을 부여하고 둘 다 공용 디렉토리에 있는지 확인하여 링크 할 수 있습니다.
우리가 Parshall로 이동하기 전에 잠시 시간을내어 코드를 좀 더 짧게 만들 수있는 정말 빠른 것을 보여주고 싶습니다. 우리가 각 E.J. 그렇습니다.
E.J. E.J.를 게시했습니다 ..
네, 이건 정말 사소한 일이지만, 우리는 Ejay를 미리 사용하겠다고 분명하게 말할 수 있습니다. 우리는 Ejay를 사용하지 않을 것이며,이 파일을 남겨두고 집에서 작성하고 진화 시키면 자동으로 파일이 Ejaz 파일이 될 것으로 예상됩니다.
그리고 우리는 app 데이터 세트 뷰 엔진을 사용하고 두 번째 인수를 E.J로 전달합니다. 그것과 똑같아.
그리고 우리가 서버를 다시 시작하면 그 파일들이 Ejaz 파일이 될 것이라고 기대할 것입니다.
그리고 우리가 새로 고침하면.
아무것도 바꿔서는 안됩니다.
여전히 작동합니다.
그리고 이제 우리는 명시 적으로 Ejay라고 말할 필요가 없습니다.
그래서 그것은 아주 사소한 변화입니다.
다음에 내가 보여주고 싶은 것은 조금 더 중요합니다. 그러면 템플릿을 말라 버릴 수 있습니다.
지금 우리는이 스타일 시트를 가지고 있습니다.
스타일 시트에 대한이 링크는 모든 템플릿에서 반복되지만, 보일러 플레이트 전체가 누락 된 것보다 훨씬 중요한 의미가 있습니다.
여기 덕트 테이프가 없습니다.
Andrew 실종자는 그에게 오래된 태그와 우리가 머리와 머리 안쪽에 기대하는 모든 정규 상용구를 노화시킵니다.
제목이 필요하며 앱에 제목을 지정합니다.
데모 앱이라고 부르면 시체도 필요합니다.
그리고 몸 안에 우리는이 내용을 넣어야합니다. 그러면 다른 모든 파일에서 똑같은 일을 할 필요가 있습니다.
시간 낭비이기 때문에 그렇게하지 않을 것입니다.이 단일 링크 태그를 복사 할 필요가없는 것처럼이 코드를 복사하여 모든 단일 템플릿에 넣지 않아도되는 더 쉬운 솔루션이 있습니다. 모든 단일 템플릿에도이 템플릿을 넣습니다.
Parshall과 Parshall은 기본적으로 우리가 작성할 수있는 파일 템플릿이며 다른 템플릿에 포함 할 수있는 템플릿은 다음과 같은 템플릿을 만듭니다.
그래서 우리는 보일러 판의 상반부를 모두 머리 속에 넣을 것입니다.
이것은 거의 항상 주어진 사이트에서 만드는 모든 단일 페이지에서 동일합니다.
동일한 스타일 시트는 같은 제목입니다.
그래서 우리는이 템플릿을 자체 템플릿으로 만 만들 것입니다.
그런 다음 아래쪽에이 템플릿을 만듭니다.
그리고 그 둘 사이에는 우리가 어떤 템플릿을 사용하고 있거나 어떤 페이지에 있는지에 따라 내용이 달라집니다.
그래서 우리가 할 일은 기본적으로 이것을 자신의 템플릿으로 바꾸는 것입니다.
이 템플릿을 자체 템플릿으로 바꾸고 각 템플릿에서 참조하는 템플릿을 사용하면됩니다.
그래서 우리는 다음과 같이 말할 것입니다. 그리고 이것은 유효한 코드가 아니지만 우리는 include header template와 같은 것을 할 것입니다. 그리고 바닥에 footer를 제외하고 똑같은 것을 할 것입니다.
그래서 우리는 그 템플릿이나 Parshall을 만들 필요가 있습니다. 그렇게하기 위해서 우리는 뷰 대신에 새로운 디렉토리를 만들고 우리는 Parshall의 디렉토리를 호출 할 것입니다.
그래서 우리는 디렉토리 뷰를 Parshall과 똑같이 처리 할 것입니다.
그리고 나서 Parshall 대신에 두 개의 파일을 만들고 첫 번째 파일은 Parshall의 슬래시 헤더 일 것입니다. 각각 우리와 우리는 바닥 글을 제외하고 똑같은 다른 부분을 똑같이 만들 것입니다. 그리고 여러분은 이것들을 위와 아래처럼 호출 할 수도 있습니다. Ejaz 첫 번째와 두 번째는 당신이 그들에게 전화하기를 원하지만 머리글과 바닥 글은 확실히 표준 이름입니다.
그래서 나는 그 두 파일을 만들고 그것들을 열어 학교에 여기 저기 열어 머리말을 열어서이 보일러 판을 복사 해 보겠습니다. 머리글.
그래서 이것은 우리가 모든 페이지의 맨 위에서 원하는 것입니다. 그리고 footer 대신에 우리가 정말로 원하는 것은 body와 closing team 태그 인 template의 밑 부분입니다.
그냥 그렇게.
그리고 우리가 다른 것을 원한다면.
그래서 나는 좀 더 명백한 것을 할 것입니다.
웹 사이트에서 볼 수있는 상표 또는 다른 꼬리말 텍스트와 같은 내용의 하단에 단락을 작성해 보겠습니다.
우리는 그걸 그냥 맡길거야.
그리고 우리는 footer를 포함하는 모든 페이지에서 이것을 볼 것으로 예상합니다.
부분.
승인.
그래서 두 부분이 완성됩니다.
그것들을 닫으십시오.
이 문제를 이와 같이 수정하십시오.
알았어.
이제 우리는 부분을 포함시키고 자합니다.
그러니 우리의 사랑으로 시작합시다.
우리 각자 그리고 지금 우리는 그 헤더 부분을 포함시킬 것입니다.
그래서 우리는 Ejay에서 새로운 태그를 사용해야한다.
그리고 파일의 이름은 단지 hetter이며 이미 Ejaz 파일을 찾고 있기 때문에 Ejay를 추가 할 필요가 없습니다.
헤더 만 포함하면 실제로 작동하지 않으며 그 이유를 알려 드리겠습니다.
바닥 글도 여기 넣으십시오.
그리고 서버를 시작하면 여기서 공간을 제거한 다음 노드를 지울 것입니다.
아포지 예.
그리고 당신이 페이지를 리프레쉬한다면 이것은 러브 스터디 J.S.에만 포함됩니다. 주형.
그래서 우리는 슬래시에 가야합니다.
resti와 사랑에 빠지면 오류가 발생합니다.
해당 파일이나 디렉토리가 없습니다.
예 데모 슬래시보기 슬래시 헤터.
E.J. 예.
그래서 이것은 우리에게 두 가지를 말해줍니다.
하나는 그것이 Ejaz 파일이어야한다는 것을 알고 있습니다.
헤더를 찾고 있습니다.
네,하지만 그것은 사용자 디렉토리에서 직접보고 있습니다.
그러나 우리는 Parshall의 슬래시 이단 Ejay를 슬래시보기로 바라보고 싶습니다. 여기 Parshall의 슬래시보기를 볼 수 있습니다.
그래서 우리는 여기서 우리의 길을 약간 바꿔야하며, Parshall의 슬래시 Hetter와 Parshall의 슬래시 바닥 글을 말하도록 바꾸어야합니다.
그러나 그것은 여전히 ​​그것을 고치지 않을 것입니다.
그리고 다시 한 번 시작하고 부분을 새로 고침 할 때 일어나는 일을 한 번 더 보여 드리겠습니다.
그리고 요소로 가면 밑 부분에 바닥 글이 생기고 몸이 있습니다.
그리고 매번 태그를 닫지 만 스타일은 적용되지 않습니다.
보라색과 노랑색이어야하며 흑백이어야합니다.
그리고 머리를 들여다 보면 링크 태그가 있고 apcupsd라는 파일에 연결됩니다.
SS 그러나 이것은 효과가 없습니다.
그리고 소스 탭을 보면 Rustie 파일이 보내졌고 우리 헤더가 있고 그 내용이 주 내용이고 꼬리말도 있습니다.
그래서 우리가 하나의 응답을 하나의 응답으로 되 돌리는 것을 기억하기 때문에 이것은 하나의 어셈블 된 파일과 같습니다.
그래서 우리의 세 가지 Parshall 또는 두 개의 Parshall 's Plus 콘텐츠로이 파일을 하나의 파일로 만들고이를 다시 보냅니다.
그리고이 ACT-UP은 완전히 비어 있다고 말합니다.
이것이 의미하는 바는 APS-C가 잘못 평가되었다는 것입니다.
그래서 그냥 빈 파일로 나타나고 그것은 우리가 할 필요가 있지만 정말 간단한 수정 여기서 바로 슬래시를 추가 할 수 있습니다.
나는 당신에게 경로의 중요성을 보여주고 우리의 경로가 올바르게 설정되어 있는지 확인하는 것입니다.
따라서 ACT-UP 성공과 슬래시를 추가 할 때의 평가 사이에 차이가 있습니다.
근본적으로 말하길 우리가 찾는 디렉토리는 당신이 현재있는 디렉토리가 아니라 루트 디렉토리에 있다고 말합니다.
더 나은 일러스트를 보여 드리겠습니다.
현재 Rusti 템플릿과 동일한 디렉토리에서 성공을 찾고 있습니다.
이제 슬래시로 저장하고 서버를 다시 시작하면 여기로 돌아가서 새로 고칩니다.
보세요.
우리 스타일이 작동합니다.
또한 우리는 ht m l을 가진 파일을 가지고 있고 우리는 SS와 같은 폴더에 있지 않은 SS에 적절한 디렉토리를 가지고 있고 그것을 찾을 필요가있는 파일을 찾았 음을 의미하는 올바른 스타일을 가지고 있습니다.
그래서 그 비눗물은 아주 사소한 것처럼 보이지만 그것은 실제로 중요한 세부 사항입니다.
그래서 우리의 스타일 시트의 이름을 공개 디렉토리 안에 넣으십시오.
결국 슬래시 스타일 시트가 ACT-UP을 평가 한 다음 스크립트 소스 태그를 사용하여 스크립트를 슬래시 (slash) 할 수 있습니다.
예.
그래서 우리는 공용 디렉토리 스크립트 디렉토리와 스타일 시트 디렉토리 안에 있습니다.
현재로서는 하나의 스타일 시트 만 가지고 있으므로 이렇게 남겨 두겠습니다.
신속하게 마무리하고 다른 파일에도 부분을 추가하십시오.
그래서이 집에서는 우리 각자가 지불해야 할 금액을 지불하고 하단은 부풀려서 꼬리말로 바꾸어 저장하고 게시합니다.
예.
같은 것.
머리글과 바닥 글이 필요합니다.
모든 파일에서 그걸 제거하십시오.
Parshall의 슬래시 바닥 글.
그리고 그것은 우리에게 좋을 것입니다.
새로 고침을 다시 시작해 서버를 다시 시작하면 동일하게 보입니다.
이제 우리가 올바른 길로 가면 우리는 또한 스타일을 얻습니다. 그리고 우리가 슬래시 포스트에 가면 거기에서도 스타일을 얻습니다.
괜찮아.
그럼이 모든 것을 요약 해 보겠습니다.
우리가 한 첫 번째 일 중 하나는 공용 디렉토리를 만들고 그 안에 스타일 시트를 추가하는 것이었고,이를 위해서는 공용 디렉토리를 제공하기 위해 express에 말하도록해야했습니다.
그런 다음 우리가 한 번 우리는 명시하지 않는 한 우리의 모든 템플릿이 예스가 될 것이라고 표현하는 작은 변화를 만들었습니다.
따라서 모든 템플릿 이름 뒤에 각각 Yes를 쓸 필요는 없습니다.
그리고 우리가 만든 큰 변화는 Parshall 's를 도입 한 것입니다.
그래서 우리는 Parshall이라고 불리는 디렉토리를 만들 수 있습니다.
어떤 사람들은 레이아웃이라고 부릅니다. Parshall 's는 또한 매우 일반적입니다.
그리고 나서 두 개의 파일이나 머리말과 꼬리말이 있었고 이것의 요점은 모든 코드를 하나의 템플릿에 추가 할 필요가 없도록 코드를 말라 버리는 것입니다.
대신 우리는 템플릿에 들어가서 Parshall의 슬래시 헤더를 포함시켜 작성해야합니다. 우리는 모든 단일 페이지에 탐색 표시 줄이있는 경우 탐색 표시 줄에 대해 머리글과 바닥 글을 제한하지 않습니다.
우리는 이전 Parshall의 슬래시 neph를 포함하는 또 다른 부분을 가질 수 있습니다.
그래서 우리가 할 수 있고 할 수없는 것에 대한 어떤 규칙도 없습니다.
그러나 가장 일반적인 것은 머리말과 꼬리말입니다.