11ty 서버 없이 동적 색상 변환기 만들기
20478 단어 11tyjamstackjavascripttutorial
Eleventy Serverless란 무엇입니까?
11ty는 정적 사이트 생성기입니다.이것은 웹 사이트가 만들어질 때 HTML (또는 파일 형식) 을 생성한다는 것을 의미한다.그런 다음 이 파일들은 CDN에서 정적 호스트로 제공됩니다.이것은 몇몇 위대한 표현을 만들었다.그것은 동적 내용이나 사용자 입력에 있어서 단점이 있다.Eleventy Serverless는 Eleventy에서 좋아하는 창작 체험(모든 템플릿 언어와 모든 데이터 형식을 포함)을 제공하지만 서버 기능이 없는 서비스를 제공할 수 있습니다.현재 Netlify 기능과 함께 사용되고 있지만 Netlify의'수요에 따라 변화하는 건설자'와도 함께 사용된다필요에 따라 구축기는 캐시 결과의 함수입니다.한 번 실행하면 실행할 때마다 정적 HTML을 가져옵니다.
대형 사이트의 구축 시간을 줄이는 것부터 사용자의 입력에 의존하는 페이지를 만드는 것까지 많은 응용 프로그램이 있다.
11ty를 사용하여 색코드 변환기 구축
우선, 우리는 프로젝트를 만들고 11ty
1.0 버전의 최신 '참새' 를 설치해야 한다.npm init -y && npm install ^1.0.0-canary.38
기본 템플릿 설정
다음은 웹 사이트를 실행하기 위한 기본 템플릿을 구축해 보겠습니다.우리는
_includes/base.njk 템플릿과 두 개의 페이지를 만들 것이다. index.njk와 color.njk.기본 템플릿은 HTML 패키지이며 기타 컨텐트가 포함됩니다.
<!DOCTYPE html>
<html lang="en">
<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="stylesheet" href="https://unpkg.com/some-nice-basic-css/global.css" />
<style>.container{max-width: 80ch;margin: auto;</style>
<title>{{ title }}</title>
</head>
<body>
<main class="container">
{{ content | safe }}
</main>
</body>
</html>
| safe 필터를 통해 보여 줍니다.다음은 홈 페이지
index.njk 템플릿입니다.--------
title: "Simple Color Converter with 11ty Serverless"
layout: "base.njk"
permalink:
build: "/"
--------
<h1>{{ pageTitle }}</h1>
<form action="/post/" id="colorForm">
<label for="type">Color Space</label>
<select name="type" id="type">
<option value="hex">Hex</option>
<option value="keyword">Keyword</option>
</select>
<label>Color String
<input name="color" type="text">
</label>
<button>Convert</button>
</form>
<pre>{{ eleventy | dump(2) }}</pre>
<script>
document.getElementById('colorForm').addEventListener('submit', function(event) {
event.preventDefault()
const type = event.target[0].value
const string = event.target[1].value
console.log(type, string)
window.location.href =`/color/${type}/${string}/`
})
</script>
permalink 이 아닌frontmatter에서 대상을 사용할 것이다.이것은 불필요하지만, 나는 이미 이런 문법에 익숙해졌다. 왜냐하면 11ty Serverless는 대상이 필요하기 때문이다.이 외에 이 페이지에는 정적 폼과 작은 스크립트가 있습니다.양식과 스크립트는 16진수나 키워드와 같은 색상 값과 색상 값을 사용하여 사용자를 동적 경로로 리디렉션합니다.폼을 제출할 때
color.njk 파일을 만들지 않았거나 서버를 만들지 않았다면, 많은 일이 일어나지 않았을 것입니다.첫 번째 서버 템플릿 없음 만들기
color.njk 파일은 서버 템플릿이 없습니다.11ty Serverless에서는 상황에 따라 다른 영구 링크를 지정할 수 있습니다.기본permalink는 우리가 build에서 본 index.njkpermalink입니다.permalinks 대상의 다른 키는 .eleventy.js 프로필의 이름과 일치해야 합니다.템플릿을 만들기 전에
.eleventy.js 파일을 만듭니다.const { EleventyServerlessBundlerPlugin } = require("@11ty/eleventy");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(EleventyServerlessBundlerPlugin, {
name: "color", // The serverless function name from your permalink object
functionsDir: "./netlify/functions/",
});
}
color 를 명명하고, 11ty가 우리의 새 Netlify 함수를 어디서 찾을 수 있는지 알려 줍니다.주요 출력은 Netlify 함수에 사용할 수 있는 인프라를 만드는 것입니다.구문은
/netlify/functions/color 디렉터리를 생성하고 필요한 모든 내용을 삽입합니다.netlify/functions/color/index.js 파일에서 전체 동적 또는 캐시를 선택할 수 있습니다.내 돈을 위해서 내가 이겼다.Netlify On Demand Builders를 일반적인 서버 함수 없이 사용하려면
index.js 파일의 마지막 줄을 편집합니다.이렇게 많은 색상만 선택할 수 있기 때문에 장기적인 성능이 향상될 것이다.Netlify는 색상/유형을 사용할 때마다 결과를 캐시하고 스크립트를 다시 실행하지 않습니다.// /netlify/color/index.js
// Choose one:
// * Runs on each request: AWS Lambda (or Netlify Function)
// * Runs on first request only: Netlify On-demand Builder
// (don’t forget to `npm install @netlify/functions`)
// exports.handler = handler;
const { builder } = require("@netlify/functions");
exports.handler = builder(handler);
.gitignore 파일에 항목을 추가할 수 있습니다.netlify/functions/color/*
netlify/functions/color/**/*
!netlify/functions/color/index.js
.gitignore 파일의 파일을 볼 수 없습니다.11ty가 방금 만든 index.js 파일을 저장하고 볼 필요가 있습니다.이 파일은 처음 실행할 때 생성되지만, 11ty가 나중에 덮어쓰지 않기 때문에 안전하게 편집할 수 있습니다.이제 템플릿에서 사용할 수 있도록 우아하게 만들어진 서버 함수가 있습니다.새
color.njk 파일에서permalink 대상에 동적 루트를 만듭니다.--------
layout: "base.njk"
permalink:
color: "/color/:type/:color/"
--------
{% set color = eleventy.serverless.path.color %}
{% set type = eleventy.serverless.path.type %}
<h1>Color Conversions for {{ type }} {{ color }}</h1>
color 키를 사용하면 11ty가 이 파일을 처리할 때 서버 함수가 없는 것을 알려 줍니다.이 스크립트를 실행하면 데이터의 새로운 eleventy.serverless 대상에 접근할 수 있습니다.라우트의 경로 및/또는 질의가 있는 위치입니다.이 예에서, 우리는permalink 정의의 :color 와 :type 와 일치하는 색상과 형식 데이터를 가지고 있다.사용자가 URL을 입력할 수 있는 동적 세그먼트입니다.사용하기 편리하도록 이 변수들을 간소화하기 위해 Nunjucks
{% set %} 표시를 사용합니다.이것이 바로 동적 노선을 설정하는 데 필요한 모든 내용이다.여기서 서로 다른 프로젝트 조합을 시도해 보고 페이지에 표시된 데이터가 어떻게 변화하는지 봅시다.동적 노선은 이미 설정되었을지 모르지만 아직 많은 일을 완성하지 못했다.사용자 정의 필터를 만들어서
type 와 color 을 가져오고 유용한 내용을 되돌려줍니다.점차적으로 증강되는 것 외에
이 강좌 앞에서 우리가 표에 조작을 추가했다는 것을 알 수 있습니다.우리가
event.preventDefault()를 사용한 이래로 이 조작은 아무런 작용이 없다.그러나 누군가가 JavaScript를 닫았다면 어떻게 될까요?놀라운 서버 없는 작업, 그리고!작업 URL이 있기 때문에 Netlify에서 폼 URL을 최종 URL로 다시 지정하고 구축 과정에서 첨부된 조회 파라미터를 사용하는 방법을 알려 드리겠습니다.
netlify.toml 파일 (11ty에 서버 코드가 없는 것) 에 새로운 리셋 규칙을 추가합니다.[[redirects]]
from = "/post/"
to = "/color/:type/:color/"
status = 301
[redirects.query]
color = ":color"
type = ":type"
/post/ 에서 /color/:type/:color/ 로 변경되었다고 알려 드리겠습니다.301 상태를 추가하고 [redirects.query] 검색 매개 변수를 어떤 'splats' 로 대체할지 지정하십시오.이제 JavaScript를 닫으면 자연 양식 제출도 작동합니다.색상 변환을 표시하는 사용자 정의 필터 만들기
이때 우리는 다른 11ty 템플릿처럼 이 템플릿을 대할 수 있다.색상 코드를 16진수와 키워드에서 HSL, RGB 및 기타 유형으로 변환하는 경우 값을 적용하고 변환 목록을 반환하는 필터를 만들 수 있습니다.이를 위해 NPM 패키지
color-convert를 사용합니다.npm install color-convert
.eleventy.js 설정에 필터를 추가할 것입니다.const { EleventyServerlessBundlerPlugin } = require("@11ty/eleventy");
// Require the package we just installed
const convert = require('color-convert');
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(EleventyServerlessBundlerPlugin, {
name: "color", // The serverless function name from your permalink object
functionsDir: "./netlify/functions/",
});
eleventyConfig.addFilter("convert", function (color, type) {
// usage: {{ color | convert(typeValue) | safe }}
// Our conversion targets
const colorSpaces = [
"rgb", "hsl", "hex", "lch"
]
// Map over the conversion targets and convert
// based on the type and color provided
// Full details on how this package work can be found
// here: https://www.npmjs.com/package/color-convert
const conversions = colorSpaces.map(space => {
// Since we can't convert a hex to a hex
// We protect with this boolean value
const doWrite = type != space
// Create the conversion value if doWrite is true
const conversion = doWrite ? convert[type][space](color.toLowerCase()) : ''
// Return a list item with the text we want to show on the frontend
// And then join the map we're in
return doWrite ? `<li>
${space}: <code>${conversion}</code>
</li>
` : ''
}).join('')
// Return an unordered list (or whatever markup you want)
return `<ul>
${conversions}
</ul>`
});
};
color.njk 템플릿에서 색상과 형식을 가져오고 무질서한 변환 값 목록을 되돌려줍니다.매번 변환할 때마다 시작 색 공간과 끝 색 공간을 알아야 한다.따라서, 우리는 색 공간 목표를 만들고
color-convert 제공된 방법으로 그것들을 구축할 것입니다.모든 키워드가 소문자로 되어 있는지 확인하고, 유형과 목표가 일치하지 않는지 확인합니다. (NPM 패키지가 이를 처리할 수 없기 때문입니다.)그런 다음 템플릿
color.njk에 추가합니다.--------
layout: "base.njk"
permalink:
color: "/color/:type/:color/"
--------
{% set color = eleventy.serverless.path.color %}
{% set type = eleventy.serverless.path.type %}
<a href="/">« Head on home</a>
<h1>Color Conversions for {{ type }} {{ color }}</h1>
<h2>Conversions</h2>
{{ color | convert(type) | safe }}
Eleventy Serverless로 뭘 하려고요?
Reference
이 문제에 관하여(11ty 서버 없이 동적 색상 변환기 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/brob/creating-a-dynamic-color-converter-with-11ty-serverless-4a77텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
