Let's Learn 11ty Part 2: 부분, 스타일링 및 이미지
부분
부분 파일은 탐색, 바닥글과 같이 많이 변경되지 않는 사이트 전체에서 반복되는 정보/데이터를 포함하는 파일입니다.
이제 사이트를 좀 더 잘 구성할 때입니다. 내비게이션을 먼저 만들어 봅시다
src 폴더에서 about.md 파일을 만들고 여기에 넣습니다.---
layout: base
title: "About"
---
# About Page
_includes 폴더에서 부분 폴더를 만든 다음 그 안에 _navigation.njk 파일을 만듭니다.<!-- _includes/partials/_navigation.njk-->
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
Later on we will improve this navigation, but for now it's fine
base.njk <body>
{% include "partials/_navigation.njk" %}
<main>
{{content | safe}}
</main>
</body>
We can repeat the same steps for the
_footer.njkfile
서버를 실행하고 지금까지 우리가 무엇을 가지고 있는지 봅시다
npm start
스타일링
이제 사이트를 좀 더 보기 좋게 만들어 보겠습니다. 글꼴로 시작합니다. 머리에 Google 글꼴을 추가합니다.
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Sora:wght@300;400;500;600&display=swap" rel="stylesheet">
<title>My Eleventy Site - {{title}}</title>
</head>
CSS 파일
또한 스타일 변경 사항을 적용하려면 CSS 파일을 추가해야 합니다. 자산 폴더를 만들어 보겠습니다. 그 안에 css를 넣은 다음
style.css 파일을 넣습니다./* src/assets/css/style.css*/
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Sora", sans-serif;
}
위는 내 CSS에 사용하는 일반적인 재설정입니다.
그런 다음 head 태그에도 추가해야 합니다.
<link rel="stylesheet" href="{{ '/assets/css/style.css' | url }}">
모든 작업을 수행하고 사이트를 확인한 후 이상한 점을 발견하게 될 것입니다. 스타일이 적용되지 않습니다.
사이트 파일이 생성되는
_site 폴더를 확인하면 거기에 CSS 파일이 없습니다.그런데 왜 그럴까요?
패스스루 카피
우리가 시작했을 때를 기억한다면 Eleventy가 여러 가지 템플릿 언어(사이트를 작성하는 방법)를 지원한다고 언급한 바 있습니다. 이러한 파일 형식을 사용하면 Eleventy가 자동으로 html로 변환합니다.
CSS와 JavaScript는 이러한 언어의 일부가 아닙니다. 그들과 함께 Pass Through Copy라는 프로세스를 통해 해당 파일을 출력 디렉토리에 복사하도록 Eleventy에 실제로 지시해야 합니다.
.eleventy.js 파일을 열고 다음과 같이 수정합니다.module.exports = function(eleventyConfig) {
eleventyConfig.addPassthroughCopy("src/assets/css/style.css");
return {
dir: {
input: "src",
data: "_data",
includes: "_includes",
layouts: "_layouts",
},
};
};
NOTE: Any files that are not part of the template languages that you want to be present on the site will need to have a Pass Through Copy - that goes for images, local fonts, icons etc
이제 사이트를 확인하면 스타일이 적용되고 있습니다.
이제 스타일 시트에 더 많은 스타일을 추가할 수 있습니다.
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Sora", sans-serif;
line-height: 1.5;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
nav {
display: flex;
justify-content: center;
align-items: center;
height: 3.5rem;
width: 100%;
background-color: black;
color: lightgray;
}
nav > a {
display: block;
padding: 1rem 2rem;
color: lightgray;
}
nav > a:hover {
color: aqua;
}
main {
max-width: 50rem;
margin: 0 auto;
padding: 3rem 2rem;
min-height: 100vh;
}
main > h1 {
margin: 2rem 0 0.5rem;
}
main > img {
border-radius: 5px;
}
footer {
background-color: black;
color: lightgray;
padding: 2rem;
}
이미지
사이트에 이미지를 추가하여 너무 평범해 보이지 않도록 합시다.
.eleventy.js에서 이미지 폴더에 대한 통과 복사본을 추가합니다. eleventyConfig.addPassthroughCopy("src/assets/images");
index.md에 이미지 추가---
layout: base
title: Home
---
# My Eleventy Site
I am a site built with [Eleventy](https://www.11ty.io/).
우리가 간다:
더 많은 정보
{{content | safe }} 및 {{ '/assets/css/style.css' | url }}에서 사용한 필터를 필터라고 하며 특정 정보를 렌더링하는 방법을 결정하는 데 사용합니다. 우리는 이번에 좋은 거래를 했습니다:
지금은:
읽어주셔서 감사합니다. 연결합시다!
저의 작은 구석을 찾아주셔서 감사합니다. , Polywork 및
Reference
이 문제에 관하여(Let's Learn 11ty Part 2: 부분, 스타일링 및 이미지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/psypher1/lets-learn-11ty-part-2-partials-styling-images-84m텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
