Jamstack është ndoshta grupi më modern i teknologjisë tani dhe është shumë e thjeshtë të ndërtosh aplikacione jamstack. Provova dhe ndërtova një aplikacion me ndihmën e videove në youtube dhe bllokimit, njëmbëdhjetë është e ngjashme me shkrimin e vanilla.js. Prandaj është e mrekullueshme për mua dhe mendoj se ka një qasje shumë minimaliste. Në këtë kontekst, unë do të prezantoj se çfarë është eleventy dhe jamstack dhe çfarë mund të bëni me to.
Çfarë është Jamstack? Cila është origjina e Jamstack?
Siç mund ta shihni nga përkufizimi i lidhjes, jamstack është një sistem prerendering që përpiqet ta bëjë ueb-in më të shpejtë, më të sigurt dhe të lehtë për t'u shkallëzuar. Unë mendoj se pjesa "e lehtë për t'u shkallëzuar" është pjesa më e madhe e bllokimit. Jamstack po përdor paraqitjen paraprake dhe shkëputjen. Këto shihen kryesisht si të tilla==›
paraqitja:Drejtimi paraprak është krijimi i një shënimi kur bëhet një kërkesë nga serveri dhe kur është e nevojshme. Në vend të secilës kërkesë të serverit, shënjimi ndërtohet kur është e nevojshme në mënyrë që performanca dhe kostot e kohës së ndërtimit të mund të minimizohen.
shkëputja:Shkëputja është duke ndarë shërbimet dhe sistemet në program. Çdo komponent mund të sillet ndryshe dhe një sistem i lirë dhe i kapsulimit funksionon në komponentë, prandaj, përbërësit mund të ndryshohen ose fiksohen në mënyrë të pavarur. Më shumë informacion ==› https://softwareengineering.stackexchange.com/questions/244476/what-is-decoupling-and-what-development-areas-can-it-apply-to
Jamstack përdor API për të përmirësuar sistemin e tij dhe me rritjen e ekonomisë API dhe shërbime të tilla, ne mund të ndërtojmë aplikacione më komplekse. Ajo që është e mrekullueshme në lidhje me Jamstack është se ai shkruan një faqe të thjeshtë HTML, CSS, vanilla.js. Me disa nga konfigurimet, ne mund të arrijmë të shkruajmë aplikacionin jamstack, veçanërisht sistemi i njëmbëdhjetë e bën shumë të thjeshtë shkallëzimin.
Pse njëmbëdhjetë?
Mund të lexoni për të këtu shkurtimisht, njëmbëdhjetë përdorin paraqitjet e gjuhëve të shënjimit, dhe si në Django ose gjuhë të tjera, mund të konfiguroni një plan urbanistik base.html dhe të trashëgoni paraqitje të tjera prej tij. Kryesisht ajo që shkruani si kod është node.js ose vanilla.js, kështu që është shumë e thjeshtë dhe e thjeshtë për t'u përdorur.
Njëmbëdhjetë Fillimi
Së pari, ne krijojmë një dosje për të ndërtuar ose aplikuar
mkdir eleventy-sample
cd eleventy-sampleMë pas, ne krijojmë një skedar package.json për kërkesat e node.js.
npm init -yPas kësaj, ne instalojmë njëmbëdhjetë për të menaxhuar aplikacionin tonë.
npm install --save-dev @11ty/eleventyNe mund të ekzekutojmë serverin tonë të njëmbëdhjetë ashtu
npx @11ty/eleventyTutorial Online ==›
https://www.zachleat.com/web/eleventy-tutorial-level-1/
Le të ndërtojmë një blog me njëmbëdhjetë
Duke ndjekur këtë tutorial, ne mund të ndërtojmë një blog me eleventy.js
Së pari, ne krijojmë një dosje, pastaj krijojmë një skedar package.json
mkdir eleventy-blog
cd eleventy-blog
npm init (-y)Tjetra, ne instalojmë njëmbëdhjetë në nivel lokal.
npm install @11ty/eleventy --save-devPas kësaj, ne mund të krijojmë një skedar .md si HTML ose gjuhë të tjera të mbështetura nga njëmbëdhjetë.
.md është një nga opsionet dhe ne po e përdorim këtu.
Ne ekzekutojmë një kod të tillë që
npx eleventy
dhe kjo krijon një dosje _site që përfshin skedarin index.html. Pastaj pasi të ndryshojmë skedarin package.json dhe të shtojmë skriptet në mënyrë që
...
"scripts": {
"build": "npx eleventy",
"serve": "npx eleventy --serve",
"debug": "DEBUG=* npx eleventy"
},
...Pas kësaj, ne duhet të krijojmë një bazë skedari base.html për skedarët e tjerë të shënjimit që të jenë prindër dhe ata do ta trashëgojnë këtë skedar për të krijuar skedarë shënjimi në server. Ne krijojmë një dosje me emrin “_includes” dhe brenda saj krijojmë një “base-layout”. njk” dosje. Brenda në skedarin .njk, ky është shablloni ynë HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Eleventy Blog</title>
</head>
<body>
<header>
Site Header
<a href="/About">About</a>
</header>
<main>
{{ content | safe }}
</main>
<footer>Site Footer</footer>
</body>
</html>
Meqenëse paraqitjet kërkohen në dosjen “_includes”, ne vendosëm paraqitjen tonë këtu. Gjithashtu, kjo mund të konfigurohet me një sistem njëmbëdhjetë. Më pas, shtojmë se cilën paraqitje po përdorim te rreth. skedar md
---
layout: base-layout.njk
---
# About this blog
This is my special place on the big World Wide Webmë pas, ne ekzekutojmë këtë komandë për të shërbyer serverin tonë
npm run servene e shohim shënimin si ky në adresën http://localhost:8080/about/.
Krijimi i faqes kryesore
Së pari, ne krijojmë postime për t'i shfaqur në faqen kryesore me postimet e dosjeve/2019, dhe brenda kësaj dosjeje të dyanshme (brenda 2019) shtojmë "blog-post-1.md" dhe "blog-post-2.md"
kodi i blog-post-1.md:
---
layout: base-layout.njk
title: This Is My First Ever Post
date: 2019-05-30
tags: ['post']
---
This is the first post on my blog.
Eleventy is super fresh init.Kodi blog-post-2.md:
---
layout: base-layout.njk
title: How To Get Rich Quick
date: 2019-06-01
tags: ['post']
---
Buy the latest and greatest cryptocurrency that no-one has heard of.
## Legal Stuff
We do not accept any liability for any loss or damage.dhe së fundi, ne krijojmë një skedar indeksi .njk si “indeks. njk” dhe shtoni atë në dosjen rrënjë. Në fund, pema e dosjeve mund të shihet si kjo ==›
brenda index.njk vendosim këtë kod
---
layout: base-layout.njk
pagination:
data: collections.post
size: 10
reverse: true
alias: posts
---
{% for post in posts %}
<article>
<h1>
<a href="{{ post.url | url }}">{{ post.data.title }}</a>
</h1>
{{ post.date }}
</article>
{% endfor %}Nëse jeni kurioz për faqet dhe koleksionin, mund ta kontrolloni këtë dokumentacion këtu ==›
Kur shikojmë faqen kryesore pas kodit të shabllonit, shohim se data-orët nuk janë treguar bukur dhe ne mund të arrijmë ta thjeshtojmë dhe ta ndryshojmë këtë.
Së pari, ne krijojmë ".eleventy.js" mos harroni "." ne fillim. Më pas, ne e shtojmë këtë kod brenda ".eleventy.js"
const moment = require('moment');
moment.locale('en');
module.exports = function (eleventyConfig) {
eleventyConfig.addFilter('dateIso', date => {
return moment(date).toISOString();
});
eleventyConfig.addFilter('dateReadable', date => {
return moment(date).utc().format('LL'); // E.g. May 31, 2019
});
};Së pari, marrim bibliotekën e momentit dhe e lokalizojmë atë me gjuhën angleze. dhe me eksportimin e tij marrim filtra si "dateIso" dhe "dateReadable" si në këndore. Ne do t'i përdorim këto filtra në shabllone
këtë kod e shtojmë në index.njk
<time datetime="{{ post.date | dateIso }}">{{ post.date | dateReadable }}</time>Skena e fundit e indeksit.njk
---
layout: base-layout.njk
pagination:
data: collections.post
size: 10
reverse: true
alias: posts
---
{% for post in posts %}
<article>
<h1>
<a href="{{ post.url | url }}">{{ post.data.title }}</a>
</h1>
<time datetime="{{ post.date | dateIso }}">{{ post.date | dateReadable }}</time>
{% excerpt post %}
<a href="{{ post.url | url }}"
aria-label="Read more on {{ post.data.title }}">Read more</a>
</article>
{% endfor %}
Hapi tjetër është shtimi i fragmenteve për bukurinë e titujve dhe paragrafëve. Shtojmë një funksion të ndarë në .eleventy.js të tillë që
function extractExcerpt(article) {
if (!article.hasOwnProperty('templateContent')) {
console.warn('Failed to extract excerpt: Document has no property "templateContent".');
return null;
}
let excerpt = null;
const content = article.templateContent;
// The start and end separators to try and match to extract the excerpt
const separatorsList = [
{ start: '<!-- Excerpt Start -->', end: '<!-- Excerpt End -->' },
{ start: '<p>', end: '</p>' }
];
separatorsList.some(separators => {
const startPosition = content.indexOf(separators.start);
const endPosition = content.indexOf(separators.end);
if (startPosition !== -1 && endPosition !== -1) {
excerpt = content.substring(startPosition + separators.start.length, endPosition).trim();
return true; // Exit out of array loop on first match
}
});
return excerpt;
}Skena e fundit e .njëmbëdhjetë.js
const moment = require('moment');
moment.locale('en');
module.exports = function (eleventyConfig) {
eleventyConfig.addShortcode('excerpt', article => extractExcerpt(article));
eleventyConfig.addFilter('dateIso', date => {
return moment(date).toISOString();
});
eleventyConfig.addFilter('dateReadable', date => {
return moment(date).utc().format('LL'); // E.g. May 31, 2019
});
};
function extractExcerpt(article) {
if (!article.hasOwnProperty('templateContent')) {
console.warn('Failed to extract excerpt: Document has no property "templateContent".');
return null;
}
let excerpt = null;
const content = article.templateContent;
// The start and end separators to try and match to extract the excerpt
const separatorsList = [
{ start: '<!-- Excerpt Start -->', end: '<!-- Excerpt End -->' },
{ start: '<p>', end: '</p>' }
];
separatorsList.some(separators => {
const startPosition = content.indexOf(separators.start);
const endPosition = content.indexOf(separators.end);
if (startPosition !== -1 && endPosition !== -1) {
excerpt = content.substring(startPosition + separators.start.length, endPosition).trim();
return true; // Exit out of array loop on first match
}
});
return excerpt;
}
skedari blog-post-1.md final
--- layout: base-layout.njk title: This Is My First Ever Post date: 2019-05-30 tags: ["post"] --- <!-- Excerpt Start --> This is included on the homepage. <!-- Excerpt End --> <!-- Excerpt Start --> This is the first post on my blog. <!-- Excerpt End --> <!-- Excerpt Start --> Eleventy is super fresh init. <!-- Excerpt End -->
Shtojmë se ‹! — Fragmenti Fillimi — -› dhe një fund tjetër për të treguar ekspertët në skedarin.md.
Kjo është skena e fundit e faqes kryesore
Përmbledhje
Ky ishte një tutorial i thjeshtë se si të krijoni faqe në blog me eleventy.js. Në tutorialin tjetër, unë do ta shpjegoj gjerësisht këtë
Në këtë tutorial, ne krijojmë një faqe të profilit të mburrjes së qenit ose në shtëpi me eleventy.js. Ai përdor skedarë CSS dhe struktura të tjera specifike.
më themelore e jamstack është në thelb faqet HTML, CSS dhe javascript dhe këtu mund të shihni https://www.appivapp.com/
Disa aplikacione specifike me ndihmën e API-ve dhe vetëm vanilla.js vetë.
Faleminderit per leximin.
