隨著像Eleventy這樣的靜態網站生成器（SSG）的興起，建立一個時尚而高效的靜態網站從未如此簡單。
在這篇文章中，我們將探討如何使用Eleventy來製作一個令人驚歎的功能性靜態作品集網站，而不需要伺服器端語言或資料庫。
你還將學習如何將你的靜態網站直接從GitHub倉庫部署到雲服務應用託管平臺，讓你的網站快速上線。
下面是你將用Eleventy建立的靜態作品集網站的現場演示。
時尚的靜態作品集展示網站
如果你想仔細看看，你可以訪問這個專案的GitHub倉庫。
- 什麼是Eleventy？
- 如何安裝Eleventy
- Eleventy的命令和配置
- 如何預覽一個Eleventy網站
- 如何用Eleventy建立一個作品集靜態網站
- 如何建立附屬頁面並新增到主頁上
- 如何在Eleventy網站上新增主題
- 如何部署一個Eleventy網站
什麼是Eleventy？
Eleventy，也被稱為11ty，是一個靜態網站生成器，可以建立由HTML、CSS和JavaScript驅動的網站，而不需要資料庫和後端程式語言。
Eleventy以其簡單性和靈活性著稱，因為它不強迫你只使用一種模板語言或框架。它支援超過10種模板語言，甚至允許你在一個專案中使用任意多的模板語言：
Eleventy模板語言
Eleventy和大多數SSG一樣，允許你使用可重複使用的元件來構建靜態網站的內容，而不是為每個頁面建立完整的HTML文件。
如何安裝Eleventy
安裝Eleventy很容易。具體方法如下：
- 確保你的電腦上安裝了Node.js。你可以通過在終端執行
node -v命令來檢查。不可用？以下是在你的電腦上安裝Node.js的方法。 - 為你的專案建立一個新的目錄。
- 開啟你的終端，在你的專案目錄中執行命令
npm init -y，以初始化一個新的Node.js專案，建立一個帶有預設設定的package.json檔案。 - 執行命令
npm install @11ty/eleventy --save-dev，將該包作為開發依賴項安裝到你的專案中。 - 這就是了! 現在你可以通過在你的專案目錄下執行命令
npx @11ty/eleventy來執行Eleventy。這將生成你的網站檔案，並將它們輸出到你的專案資料夾中的_site目錄（或你配置的目錄）。
注意：當你執行 npx @11ty/eleventy 命令時。你會得到這樣的輸出：
[11ty] Wrote 0 files in 0.01 seconds (v2.0.0)
[11ty] Wrote 0 files in 0.01 seconds (v2.0.0)
[11ty] Wrote 0 files in 0.01 seconds (v2.0.0)
這裡，寫了0個檔案是因為你的專案資料夾裡沒有模板。
Eleventy命令和配置
你現在已經建立了你的Eleventy專案，但這還不是全部。你需要為你的靜態網站建立一些配置並瞭解一些基本的命令，這些命令可以提供給瀏覽器。
Eleventy命令
下面是一些你應該知道的Eleventy關鍵命令：
npx eleventy： 這個命令用於建立你的網站，並將結果輸出到_site資料夾（或你配置為輸出目錄的任何資料夾）。npx @11ty/eleventy --serve： 這個命令將啟動一個本地伺服器，以便你能在瀏覽器中預覽你的網站。當你對你的網站做任何改動時，你的專案將自動重建並在你的瀏覽器中更新。npx @11ty/eleventy --serve --port=8081： 這條命令啟動Eleventy伺服器，並指定一個伺服器要監聽的自定義埠。npx @11ty/eleventy --watch： 這個命令將觀察你的專案檔案是否有變化，並在必要時自動重建你的網站。
你不必記住這些命令，因為你可以在package.json檔案的scripts物件中把它們新增到一般命令中：
"scripts": {
"start": "npx @11ty/eleventy --serve",
"watch": "npx @11ty/eleventy --watch",
"build": "npx eleventy"
},
"scripts": {
"start": "npx @11ty/eleventy --serve",
"watch": "npx @11ty/eleventy --watch",
"build": "npx eleventy"
},
"scripts": {
"start": "npx @11ty/eleventy --serve",
"watch": "npx @11ty/eleventy --watch",
"build": "npx eleventy"
},
現在你可以使用 npm start 來服務你的應用程式，而不是 npx @11ty/eleventy --serve ，同時你也可以執行 npm run build 來代替 npx eleventy 。
如何用Eleventy配置你的靜態網站
Eleventy預設為 “零配置”，有靈活的配置選項。下面是一些你應該知道的關鍵配置選項：
- input：這個選項讓你指定你的專案檔案的目錄。最好的做法是使用src。
- output：這個選項讓你指定你的網站應該輸出到哪個目錄。預設情況下，Eleventy會輸出到_site資料夾中。(許多開發者使用public）。
- templateFormats：這個選項讓你指定哪些副檔名應該作為模板來處理。預設情況下，Eleventy處理.html、.njk和.md檔案作為模板。
這些只是Eleventy中可用的一些命令和配置選項。要配置你的Eleventy專案，在你的專案根部建立一個.eleventy.js檔案。然後把這些程式碼貼上到檔案中，給你的專案一個包括輸入和輸出目錄的結構：
module.exports = function (eleventyConfig) {
return {
dir: {
input: 'src',
output: 'public',
},
};
};
module.exports = function (eleventyConfig) {
return {
dir: {
input: 'src',
output: 'public',
},
};
};
module.exports = function (eleventyConfig) {
return {
dir: {
input: 'src',
output: 'public',
},
};
};
注意： eleventyConfig 作為一個引數被傳遞，提供了更多的配置選項，將在本專案的後面使用。
如何預覽一個Eleventy網站
你現在知道了一些可以用來預覽Eleventy靜態網站的關鍵命令，但是當你執行命令時，比如 npx @11ty/eleventy ，什麼都沒有提供。這是因為你沒有模板檔案。
你可以在你專案的根目錄下建立一個src資料夾，然後建立一些模板檔案，如index.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" />
<title>Eleventy Static Site</title>
</head>
<body>
Hello World!
</body>
</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" />
<title>Eleventy Static Site</title>
</head>
<body>
Hello World!
</body>
</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" /> <title>Eleventy Static Site</title> </head> <body> Hello World! </body> </html>
如果你現在執行 npx @11ty/eleventy 命令，一個public資料夾將被建立，裡面有生成的靜態檔案。你肯定想讓這個檔案提供給你的瀏覽器，並啟用一些熱過載功能。這可以通過執行以下命令來實現：
npx @11ty/eleventy --serve
npx @11ty/eleventy --serve
npx @11ty/eleventy --serve
這將在http://localhost:8080/，為你的網站提供服務。
這些命令是相當難記的，而且總是使用。你已經在你的package.json檔案中把它們加入了熟悉的語法，所以你可以使用 npm start 把你的應用程式服務到http://localhost:8080/。
如何用Eleventy建立一個作品集靜態網站
你現在知道如何用Eleventy建立一個靜態網站了。讓我們來建立作品集專案。
你可以從頭開始建立一個新的Eleventy專案，或者你想為你的專案建立圖片、CSS和實際內容，所以我們建立了一個GitHub倉庫模板來幫助你加快進度。在GitHub中，選擇Use this template > Create a new repository，將這些資產和初始配置檔案複製到你自己的新倉庫中，然後將它們下載到你的本地機器上。
你的專案將有以下結構：
├── node_modules/
├── public/
├── src/
| ├── _includes
| ├── layouts
│ ├── assets
│ ├── css
│ ├── projects
│ └── index.njk
├── .eleventy.js
├── .gitignore
├── package.lock.json
└── package.json
├── node_modules/
├── public/
├── src/
| ├── _includes
| ├── layouts
│ ├── assets
│ ├── css
│ ├── projects
│ └── index.njk
├── .eleventy.js
├── .gitignore
├── package.lock.json
└── package.json
├── node_modules/ ├── public/ ├── src/ | ├── _includes | ├── layouts │ ├── assets │ ├── css │ ├── projects │ └── index.njk ├── .eleventy.js ├── .gitignore ├── package.lock.json └── package.json
如何在Eleventy中使用模板
在使用Eleventy時，你需要了解三大型別的模板。這些模板可以用Nunjucks建立，它允許你定義變數、迴圈、條件和其他邏輯，可以用來動態生成頁面的內容。
- Page Templates：它們定義了你網站上各個頁面的結構和內容。
- Layout Templates：它們定義了你的網站頁面的整體結構和設計。它們通常包括共同的元素，如頁首、頁尾、導航選單和側邊欄，這些元素在多個頁面中共享。
- Partials Templates：它們定義了你的網站的HTML標記的小的、可重複使用的部分。它們通常用於定義常見的元素，如頁首、頁尾、導航選單和側邊欄，它們可以包含在佈局和頁面模板中。
現在你已經瞭解了這些型別的模板中的每一種。讓我們來為作品集靜態網站建立模板。
如何在Eleventy中建立佈局
在src目錄下，建立一個_includes目錄。這將包含我們所有的佈局和引數。
然後，你可以建立一個layouts資料夾（用於適當的組織）來存放你所有的佈局。這些佈局是模板，可以使用你喜歡的模板語言，如Nunjucks，我們在這裡使用。
讓我們建立一個base.njk檔案來儲存你所有頁面的一般佈局。
<!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="icon" href="/assets/favicon.jpeg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="/css/global.css" />
<title>J.'s Portfolio</title>
</head>
<body>
<div>
{{ content | safe }}
</div>
</body>
</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="icon" href="/assets/favicon.jpeg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="/css/global.css" />
<title>J.'s Portfolio</title>
</head>
<body>
<div>
{{ content | safe }}
</div>
</body>
</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="icon" href="/assets/favicon.jpeg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="/css/global.css" />
<title>J.'s Portfolio</title>
</head>
<body>
<div>
{{ content | safe }}
</div>
</body>
</html>
在上面的程式碼中，建立了一個普通的HTML標記，並從CDN中包含了Font Awesome，這樣你就可以訪問它的圖示。此外，內容變數也被傳遞，以便使用該佈局的任何頁面的所有內容都被包括在內。
但這並不是整個佈局的故事。你的佈局將有一些部分會出現在每個頁面上，例如導航欄和頁尾。讓我們為這些部分建立引數。
如何在Eleventy中使用引數
所有引數都儲存在_includes目錄下。為了適當地組織，你可以把它們存放在一個資料夾裡。在這種情況下，在_includes目錄下建立一個components資料夾，並建立導航條和頁尾模板。
下面是navbar.njk中的導航條引數：
<div class="nav-container">
<div class="logo">
<a href="/">
J.
</a>
</div>
<div class="nav">
<a href="/projects" class="link">
Projects
</a>
<a href="https://docs.google.com/document/d/10ZosQ38Z3804KYPcb_aZp9bceoXK-q3GrkHjYshqIRE/edit?usp=sharing" class="cta-btn">Resume</a>
</div>
</div>
<div class="nav-container">
<div class="logo">
<a href="/">
J.
</a>
</div>
<div class="nav">
<a href="/projects" class="link">
Projects
</a>
<a href="https://docs.google.com/document/d/10ZosQ38Z3804KYPcb_aZp9bceoXK-q3GrkHjYshqIRE/edit?usp=sharing" class="cta-btn">Resume</a>
</div>
</div>
<div class="nav-container"> <div class="logo"> <a href="/"> J. </a> </div> <div class="nav"> <a href="/projects" class="link"> Projects </a> <a href="https://docs.google.com/document/d/10ZosQ38Z3804KYPcb_aZp9bceoXK-q3GrkHjYshqIRE/edit?usp=sharing" class="cta-btn">Resume</a> </div> </div>
這裡是footer.njk中的頁尾部分：
<hr />
<div class="footer-container">
<p>© {% year %} Joel's Portfolio</p>
<div class="social_icons">
<a
href="https://twitter.com/olawanle_joel"
aria-label="Twitter"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa-brands fa-twitter"></i>
</a>
<a
href="https://github.com/olawanlejoel"
aria-label="GitHub"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa-brands fa-github"></i>
</a>
<a
href="https://www.linkedin.com/in/olawanlejoel/"
aria-label="LinkedIn"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
<hr />
<div class="footer-container">
<p>© {% year %} Joel's Portfolio</p>
<div class="social_icons">
<a
href="https://twitter.com/olawanle_joel"
aria-label="Twitter"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa-brands fa-twitter"></i>
</a>
<a
href="https://github.com/olawanlejoel"
aria-label="GitHub"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa-brands fa-github"></i>
</a>
<a
href="https://www.linkedin.com/in/olawanlejoel/"
aria-label="LinkedIn"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
<hr />
<div class="footer-container">
<p>© {% year %} Joel's Portfolio</p>
<div class="social_icons">
<a
href="https://twitter.com/olawanle_joel"
aria-label="Twitter"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa-brands fa-twitter"></i>
</a>
<a
href="https://github.com/olawanlejoel"
aria-label="GitHub"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa-brands fa-github"></i>
</a>
<a
href="https://www.linkedin.com/in/olawanlejoel/"
aria-label="LinkedIn"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
將這些引數新增到你的頁面或佈局模板中。這可以用 {% include %} 語句來完成。下面是當你包括導航條和頁尾模板時，layouts/base.njk模板會是什麼樣子：
<!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="icon" href="/assets/favicon.jpeg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="/css/global.css" />
<title>J.'s Portfolio</title>
</head>
<body>
<div>
{% include "components/navbar.njk" %}
{{ content | safe }}
{% include "components/footer.njk" %}
</div>
</body>
</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="icon" href="/assets/favicon.jpeg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="/css/global.css" />
<title>J.'s Portfolio</title>
</head>
<body>
<div>
{% include "components/navbar.njk" %}
{{ content | safe }}
{% include "components/footer.njk" %}
</div>
</body>
</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="icon" href="/assets/favicon.jpeg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="/css/global.css" />
<title>J.'s Portfolio</title>
</head>
<body>
<div>
{% include "components/navbar.njk" %}
{{ content | safe }}
{% include "components/footer.njk" %}
</div>
</body>
</html>
當你執行 npm start 命令時，這個佈局不會出現，因為它還沒有被新增到頁面模板中。建立一個頁面模板並新增這個佈局。
如何在Eleventy中建立頁面模板
在你的src資料夾中，建立一個index.njk檔案，作為你的作品集網站的主頁。這個頁面將使用基礎佈局：
---
layout: layouts/base.njk
title: Home
---
<h1> This is the {{title}} Page. </h1>
---
layout: layouts/base.njk
title: Home
---
<h1> This is the {{title}} Page. </h1>
---
layout: layouts/base.njk
title: Home
---
<h1> This is the {{title}} Page. </h1>
當你現在執行 npm start 命令時，你的靜態網站將載入到http://localhost:8080/。這就是輸出的樣子：
沒有樣式的頁面模板
如何在Eleventy中使用CSS和圖片
你現在知道了存在的各種模板，它們是如何工作的，以及它們如何一起使用。但是你會注意到，在layouts/base.njk檔案中，有一個CSS檔案被連結到作品集頁面的樣式，但是當網站載入時，CSS樣式並沒有受到影響，因為這個CSS檔案沒有被新增到public資料夾中。
要解決這個問題，你需要在你的.eleventy.js檔案中使用 eleventyConfig 引數進行配置。這樣，Eleventy就可以知道CSS檔案的存在，也可以觀察到CSS檔案可能的變化。
在src資料夾中，你可以建立一個css資料夾來存放你專案中要使用的所有CSS檔案，但在本文中，你可以使用一個CSS檔案–global.css。然後你可以對css資料夾進行配置，這樣它就可以配置該資料夾內的所有檔案：
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');
對影象也是如此。如果你在你的頁面上新增任何圖片，你會發現它不顯示。為了讓它顯示出來，你需要配置你的圖片存放的資料夾。讓我們建立一個assets資料夾來儲存我們所有的圖片並配置assets資料夾。
eleventyConfig.addPassthroughCopy('src/assets');
eleventyConfig.addPassthroughCopy('src/assets');
eleventyConfig.addPassthroughCopy('src/assets');
這就是你的配置檔案現在的樣子：
module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy('src/assets');
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');
return {
dir: {
input: 'src',
output: 'public',
},
};
};
module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy('src/assets');
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');
return {
dir: {
input: 'src',
output: 'public',
},
};
};
module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy('src/assets');
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');
return {
dir: {
input: 'src',
output: 'public',
},
};
};
當你執行 npm start 時，CSS樣式將起作用，你的主頁將看起來像這樣：
新增布局後的模板外觀
建立部分佈局並新增到主頁中
你現在已經成功地建立了一個佈局並將其新增到你的主頁（index.njk）。讓我們自定義主頁，以容納一些關於你自己的資訊，如關於你的更多資訊，你的技能，和聯絡資訊。
你可以決定將你的程式碼和標記直接新增到index.njk模板中，但讓我們為主頁、關於、技能和聯絡資訊建立單獨的Partials。
Hero部分
這是導航欄下面的第一個部分，其主要目的是讓使用者瞭解網站的內容。
<div class="hero-container">
<img src='assets/profile.jpeg' class="profile-img" alt="Joe's personal headshot" />
<div class="hero-text">
<h1>Hey, I'm Joe 👋</h1>
<p>
I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing) exceptional websites, applications, and everything in between.
</p>
<div class="social-icons">
<a href="https://twitter.com/olawanle_joel">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="https://github.com/olawanlejoel">
<i class="fa-brands fa-github"></i>
</a>
<a href="https://www.linkedin.com/in/olawanlejoel/">
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
</div>
<div class="hero-container">
<img src='assets/profile.jpeg' class="profile-img" alt="Joe's personal headshot" />
<div class="hero-text">
<h1>Hey, I'm Joe 👋</h1>
<p>
I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing) exceptional websites, applications, and everything in between.
</p>
<div class="social-icons">
<a href="https://twitter.com/olawanle_joel">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="https://github.com/olawanlejoel">
<i class="fa-brands fa-github"></i>
</a>
<a href="https://www.linkedin.com/in/olawanlejoel/">
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
</div>
<div class="hero-container"> <img src='assets/profile.jpeg' class="profile-img" alt="Joe's personal headshot" /> <div class="hero-text"> <h1>Hey, I'm Joe 👋</h1> <p> I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing) exceptional websites, applications, and everything in between. </p> <div class="social-icons"> <a href="https://twitter.com/olawanle_joel"> <i class="fa-brands fa-twitter"></i> </a> <a href="https://github.com/olawanlejoel"> <i class="fa-brands fa-github"></i> </a> <a href="https://www.linkedin.com/in/olawanlejoel/"> <i class="fa-brands fa-linkedin"></i> </a> </div> </div> </div>
上面的程式碼中包含了關於你的一些細節，還有一些社交圖示，以連線到你的社交媒體資料的連結。
Hero部分應該看起來像這樣：
Hero展示
你可以在Hero部分新增更多的內容，改變css/globals.css檔案中的樣式，甚至建立你自己的這部分版本。
About部分
關於部分告訴訪問你的作品集的人關於你的更多資訊，可以有很多段落。如果你有更多的資訊需要講述，這可以是一個單獨的頁面。
<div class="about-container">
<h2>About Me</h2>
<div class="flex-about">
<div class="about-text">
<p>
As a developer, I have always been passionate about creating elegant and effective solutions to complex problems. I have a strong foundation in software development, with a focus on web technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and back-end of applications, and I am always looking for ways to optimize performance, improve user experience, and ensure the highest level of code quality.
</p>
<p>Throughout my career, I have worked on a wide range of projects, from simple static websites to complex enterprise-level applications. I am experienced in working with a variety of development tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager to learn and explore new technologies, and I am constantly seeking out opportunities to improve my skills and knowledge.</p>
</div>
<div class="about-img">
<Image src='/assets/about.jpeg' class="profile-img" alt="Joe and animal relaxing and having fun" />
</div>
</div>
</div>
<div class="about-container">
<h2>About Me</h2>
<div class="flex-about">
<div class="about-text">
<p>
As a developer, I have always been passionate about creating elegant and effective solutions to complex problems. I have a strong foundation in software development, with a focus on web technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and back-end of applications, and I am always looking for ways to optimize performance, improve user experience, and ensure the highest level of code quality.
</p>
<p>Throughout my career, I have worked on a wide range of projects, from simple static websites to complex enterprise-level applications. I am experienced in working with a variety of development tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager to learn and explore new technologies, and I am constantly seeking out opportunities to improve my skills and knowledge.</p>
</div>
<div class="about-img">
<Image src='/assets/about.jpeg' class="profile-img" alt="Joe and animal relaxing and having fun" />
</div>
</div>
</div>
<div class="about-container"> <h2>About Me</h2> <div class="flex-about"> <div class="about-text"> <p> As a developer, I have always been passionate about creating elegant and effective solutions to complex problems. I have a strong foundation in software development, with a focus on web technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and back-end of applications, and I am always looking for ways to optimize performance, improve user experience, and ensure the highest level of code quality. </p> <p>Throughout my career, I have worked on a wide range of projects, from simple static websites to complex enterprise-level applications. I am experienced in working with a variety of development tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager to learn and explore new technologies, and I am constantly seeking out opportunities to improve my skills and knowledge.</p> </div> <div class="about-img"> <Image src='/assets/about.jpeg' class="profile-img" alt="Joe and animal relaxing and having fun" /> </div> </div> </div>
該程式碼包含關於你的資訊（一張圖片和一些文字）。這就是 “About” 部分應該有的樣子：
About部分
Skills部分
本節用於顯示你使用或喜歡使用的技術。
<div class="skills-container">
<h2>Skills</h2>
<div class="grid-skills">
<div class="skill-card html">
<i class="fa-brands fa-html5 html-icon"></i>
<p>HTML</p>
</div>
<div class="skill-card css">
<i class="fa-brands fa-css3-alt css-icon"></i>
<p>CSS</p>
</div>
<div class="skill-card js">
<i class="fa-brands fa-js-square js-icon"></i>
<p>JavaScript</p>
</div>
<div class="skill-card react">
<i class="fa-brands fa-react react-icon"></i>
<p>React</p>
</div>
<div class="skill-card node">
<i class="fa-brands fa-node-js node-icon"></i>
<p>Node</p>
</div>
<div class="skill-card python">
<i class="fa-brands fa-python python-icon"></i>
<p>Python</p>
</div>
</div>
</div>
<div class="skills-container">
<h2>Skills</h2>
<div class="grid-skills">
<div class="skill-card html">
<i class="fa-brands fa-html5 html-icon"></i>
<p>HTML</p>
</div>
<div class="skill-card css">
<i class="fa-brands fa-css3-alt css-icon"></i>
<p>CSS</p>
</div>
<div class="skill-card js">
<i class="fa-brands fa-js-square js-icon"></i>
<p>JavaScript</p>
</div>
<div class="skill-card react">
<i class="fa-brands fa-react react-icon"></i>
<p>React</p>
</div>
<div class="skill-card node">
<i class="fa-brands fa-node-js node-icon"></i>
<p>Node</p>
</div>
<div class="skill-card python">
<i class="fa-brands fa-python python-icon"></i>
<p>Python</p>
</div>
</div>
</div>
<div class="skills-container"> <h2>Skills</h2> <div class="grid-skills"> <div class="skill-card html"> <i class="fa-brands fa-html5 html-icon"></i> <p>HTML</p> </div> <div class="skill-card css"> <i class="fa-brands fa-css3-alt css-icon"></i> <p>CSS</p> </div> <div class="skill-card js"> <i class="fa-brands fa-js-square js-icon"></i> <p>JavaScript</p> </div> <div class="skill-card react"> <i class="fa-brands fa-react react-icon"></i> <p>React</p> </div> <div class="skill-card node"> <i class="fa-brands fa-node-js node-icon"></i> <p>Node</p> </div> <div class="skill-card python"> <i class="fa-brands fa-python python-icon"></i> <p>Python</p> </div> </div> </div>
上面的程式碼建立了一個卡片，用來存放字型漂亮的技術圖示和每個技能的名稱。你還可以新增更多的樣式，並修改程式碼，使其更有吸引力和特色。這就是技能部分應該有的樣子：
Skills部分
Contact部分
既然這是一個作品集，你應該為潛在客戶新增一個聯絡你的途徑。一種方法是讓人們向你傳送電子郵件。
<div class="contact-container">
<h2>Get In Touch</h2>
<p>If you want us to work together, have any question or want me to speak at your event, my inbox is always open. Whether just want to say hi, I'll try my best to get back to you! Cheers!</p>
<a href="mailto:joelolawanle@kinsta.com" class='cta-btn'>Say Hello</a>
</div>
<div class="contact-container">
<h2>Get In Touch</h2>
<p>If you want us to work together, have any question or want me to speak at your event, my inbox is always open. Whether just want to say hi, I'll try my best to get back to you! Cheers!</p>
<a href="mailto:joelolawanle@kinsta.com" class='cta-btn'>Say Hello</a>
</div>
<div class="contact-container"> <h2>Get In Touch</h2> <p>If you want us to work together, have any question or want me to speak at your event, my inbox is always open. Whether just want to say hi, I'll try my best to get back to you! Cheers!</p> <a href="mailto:joelolawanle@kinsta.com" class='cta-btn'>Say Hello</a> </div>
用你自己的標籤替換 a 標籤中的電子郵件地址，這樣按鈕就會啟動一個電子郵件應用程式，讓人們給你發資訊。
Contact部分
你現在已經成功地為你的主頁建立了所有的Partials。接下來，你需要將它們包含在你的index.njk檔案中，這樣它們就可以顯示在主頁上：
---
layout: layouts/base.njk
title: Home
---
{% include "components/hero.njk" %}
{% include "components/about.njk" %}
{% include "components/skills.njk" %}
{% include "components/contact.njk" %}
---
layout: layouts/base.njk
title: Home
---
{% include "components/hero.njk" %}
{% include "components/about.njk" %}
{% include "components/skills.njk" %}
{% include "components/contact.njk" %}
---
layout: layouts/base.njk
title: Home
---
{% include "components/hero.njk" %}
{% include "components/about.njk" %}
{% include "components/skills.njk" %}
{% include "components/contact.njk" %}
當你執行start命令時，你的主頁將相應地顯示所有新增的Partials。
如何在Eleventy中使用集合
在Eleventy中，集合是一種將相關內容分組的方式，這樣你就可以根據這些內容來生成頁面。例如，如果你有類似內容（部落格文章）的markdown檔案儲存在你專案的部落格資料夾中，你可以使用集合來獲取它們，並顯示所有內容的列表。同時，你可以建立一個佈局來處理這些內容的顯示方式。
集合是在.eleventy.js配置檔案中定義的，可以包括來自不同來源的資料，如markdown或JSON檔案。
對於這個作品集網站，讓我們在src目錄下建立一個projects目錄，用來儲存每個專案的markdown內容。這些內容將包括專案的細節，解決的問題，使用的技術，遇到的挑戰，以及學到的教訓。
你可以用專案的名字（quotes-generator.md）建立一個markdown檔案，然後貼上下面的程式碼：
---
title: Quotes Generator
description: "Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards."
gitHubURL: "https://github.com/olawanlejoel/random-quote-generator"
image: "/assets/quotes-banner.jpeg"
---
The quotes generator project is a software tool designed to display random inspirational or thought-provoking quotes to users. This project aims to solve the problem of lack of motivation or inspiration by providing users with a quick and easy way to access inspiring quotes.
### Technologies Used
The technologies used in this project include HTML, CSS, and JavaScript. The application utilizes an API to fetch random quotes and display them to the user.
### Challenges and Lessons Learned
One of the main challenges faced during this project was designing the user interface to be visually appealing and responsive on different devices. The team had to consider various design elements such as font sizes, colors, and layout to create a user-friendly and aesthetically pleasing interface.
Another challenge was handling errors and edge cases such as network connectivity issues or invalid API responses. The team had to implement error handling and fallback mechanisms to ensure that the application would continue to function smoothly under various conditions.
Throughout the project, the team learned valuable lessons about front-end development, such as the importance of clean and efficient code, effective debugging and troubleshooting, and responsive design principles. They also learned the importance of utilizing APIs to access and display data from external sources.
Overall, the quotes generator project was a valuable learning experience that allowed the team to develop their technical and creative skills, and create a useful tool for users looking for daily inspiration or motivation.
---
title: Quotes Generator
description: "Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards."
gitHubURL: "https://github.com/olawanlejoel/random-quote-generator"
image: "/assets/quotes-banner.jpeg"
---
The quotes generator project is a software tool designed to display random inspirational or thought-provoking quotes to users. This project aims to solve the problem of lack of motivation or inspiration by providing users with a quick and easy way to access inspiring quotes.
### Technologies Used
The technologies used in this project include HTML, CSS, and JavaScript. The application utilizes an API to fetch random quotes and display them to the user.
### Challenges and Lessons Learned
One of the main challenges faced during this project was designing the user interface to be visually appealing and responsive on different devices. The team had to consider various design elements such as font sizes, colors, and layout to create a user-friendly and aesthetically pleasing interface.
Another challenge was handling errors and edge cases such as network connectivity issues or invalid API responses. The team had to implement error handling and fallback mechanisms to ensure that the application would continue to function smoothly under various conditions.
Throughout the project, the team learned valuable lessons about front-end development, such as the importance of clean and efficient code, effective debugging and troubleshooting, and responsive design principles. They also learned the importance of utilizing APIs to access and display data from external sources.
Overall, the quotes generator project was a valuable learning experience that allowed the team to develop their technical and creative skills, and create a useful tool for users looking for daily inspiration or motivation.
--- title: Quotes Generator description: "Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards." gitHubURL: "https://github.com/olawanlejoel/random-quote-generator" image: "/assets/quotes-banner.jpeg" --- The quotes generator project is a software tool designed to display random inspirational or thought-provoking quotes to users. This project aims to solve the problem of lack of motivation or inspiration by providing users with a quick and easy way to access inspiring quotes. ### Technologies Used The technologies used in this project include HTML, CSS, and JavaScript. The application utilizes an API to fetch random quotes and display them to the user. ### Challenges and Lessons Learned One of the main challenges faced during this project was designing the user interface to be visually appealing and responsive on different devices. The team had to consider various design elements such as font sizes, colors, and layout to create a user-friendly and aesthetically pleasing interface. Another challenge was handling errors and edge cases such as network connectivity issues or invalid API responses. The team had to implement error handling and fallback mechanisms to ensure that the application would continue to function smoothly under various conditions. Throughout the project, the team learned valuable lessons about front-end development, such as the importance of clean and efficient code, effective debugging and troubleshooting, and responsive design principles. They also learned the importance of utilizing APIs to access and display data from external sources. Overall, the quotes generator project was a valuable learning experience that allowed the team to develop their technical and creative skills, and create a useful tool for users looking for daily inspiration or motivation.
注意：如果你使用了入門模板，你應該已經有了它們，否則你可以從GitHub上我們的入門模板的專案目錄中複製它們。
這些檔案頂部的frontmatter和模板一樣，使數值可以注入你的模板中。
因為這些Markdown檔案在src目錄下，Eleventy會把它們當作模板，併為每個檔案生成一個HTML頁面。它們的URL將是/projects/quotes-generator之類的。
沒有佈局的專案外觀
然而，Eleventy不會知道對這些頁面使用什麼佈局，因為它們的前言中還沒有一個佈局值。
讓我們首先為這些內容建立一個佈局，然後再建立一個集合，並將它們作為一個列表新增到專門的專案頁面。
像以前一樣，在layouts資料夾中建立一個佈局檔案（project.njk）。為了避免重複，因為這個檔案將使用預設的HTML標記，你通過建立一個塊來調整base.njk佈局，以表示你的佈局中將要改變的部分。
<!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="icon" href="/assets/favicon.jpeg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="/css/global.css" />
<title>J.'s Portfolio</title>
</head>
<body>
<div>
{% include "components/navbar.njk" %}
{% block content %}
{{ content | safe }}
{% endblock %}
{% include "components/footer.njk" %}
</div>
</body>
</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="icon" href="/assets/favicon.jpeg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="/css/global.css" />
<title>J.'s Portfolio</title>
</head>
<body>
<div>
{% include "components/navbar.njk" %}
{% block content %}
{{ content | safe }}
{% endblock %}
{% include "components/footer.njk" %}
</div>
</body>
</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="icon" href="/assets/favicon.jpeg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="/css/global.css" />
<title>J.'s Portfolio</title>
</head>
<body>
<div>
{% include "components/navbar.njk" %}
{% block content %}
{{ content | safe }}
{% endblock %}
{% include "components/footer.njk" %}
</div>
</body>
</html>
該塊被賦予了一個名字content，因為你可以在你的模板中擁有許多塊。現在你可以把它擴充套件到你的project.njk佈局中，所以你只需要指定內容塊：
{% extends "layouts/base.njk" %}
{% block content %}
<div class="project-layout">
<h2>{{title}}</h2>
<img src="{{image}}" alt="image" class="banner-img" />
<a href="{{gitHubURL}}" class="cta-btn pt-btn">
<div class="small-icons">
GitHub <i class="fa-brands fa-github"></i>
</div>
</a>
{{ content | safe }}
</div>
{% endblock %}
{% extends "layouts/base.njk" %}
{% block content %}
<div class="project-layout">
<h2>{{title}}</h2>
<img src="{{image}}" alt="image" class="banner-img" />
<a href="{{gitHubURL}}" class="cta-btn pt-btn">
<div class="small-icons">
GitHub <i class="fa-brands fa-github"></i>
</div>
</a>
{{ content | safe }}
</div>
{% endblock %}
{% extends "layouts/base.njk" %}
{% block content %}
<div class="project-layout">
<h2>{{title}}</h2>
<img src="{{image}}" alt="image" class="banner-img" />
<a href="{{gitHubURL}}" class="cta-btn pt-btn">
<div class="small-icons">
GitHub <i class="fa-brands fa-github"></i>
</div>
</a>
{{ content | safe }}
</div>
{% endblock %}
在上面的程式碼中，你正在指定每個專案將如何顯示。它將從fronttmatter獲取title、image和gitHubURL，然後使用內容變數（ {{ content | safe }} ）新增其他內容。
下一步將是為每個專案的前言新增一個佈局鍵和值：
---
layout: layouts/project.njk
title: Quotes Generator
description: "Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards."
gitHubURL: "https://github.com/olawanlejoel/random-quote-generator"
image: "/assets/quotes-banner.jpeg"
---
…
---
layout: layouts/project.njk
title: Quotes Generator
description: "Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards."
gitHubURL: "https://github.com/olawanlejoel/random-quote-generator"
image: "/assets/quotes-banner.jpeg"
---
…
--- layout: layouts/project.njk title: Quotes Generator description: "Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards." gitHubURL: "https://github.com/olawanlejoel/random-quote-generator" image: "/assets/quotes-banner.jpeg" --- …
當你重新載入每個專案的URL時，例如/projects/quotes-generator，你會發現它現在使用建立的佈局：
專案外觀與佈局
如何在模板中使用集合
現在你的每個專案都能很好地顯示出指定的佈局，但人們如何能訪問這些專案呢？你需要建立一個列表，人們可以點選它來訪問每個專案。這就是集合的作用。
要使用集合，你必須在.eleventy.js配置檔案中使用 addCollection() 方法定義它。
module.exports = function (eleventyConfig) {
// …
eleventyConfig.addCollection('projects', (collection) => {
return collection.getFilteredByGlob('src/projects/*.md');
});
return {
// ...
};
};
module.exports = function (eleventyConfig) {
// …
eleventyConfig.addCollection('projects', (collection) => {
return collection.getFilteredByGlob('src/projects/*.md');
});
return {
// ...
};
};
module.exports = function (eleventyConfig) {
// …
eleventyConfig.addCollection('projects', (collection) => {
return collection.getFilteredByGlob('src/projects/*.md');
});
return {
// ...
};
};
在上面的程式碼中， addCollection() 方法被用來定義一個叫做projects的集合。傳遞給 addCollection() 的回撥函式使用 getFilteredByGlob() 方法返回projects目錄下的所有markdown檔案。
一旦你定義了一個集合，你可以在模板中使用它來生成基於該內容的頁面。讓我們建立一個projects.njk頁面模板，它將使用base.njk佈局，但其內容將是projects集合中的專案：
---
layout: layouts/base.njk
title: Projects
---
<div class="projects-container">
<h2>Projects</h2>
<div class="projects-grid">
{% for project in collections.projects %}
<div class="project-card">
<div class="project-header">
<i class="fa-regular fa-folder-open folder-icon"></i>
<div class="small-icons">
<a href={{project.data.gitHubURL}}><i class="fa-brands fa-github"></i></a>
</div>
</div>
<h3>{{project.data.title}}</h3>
<p>{{project.data.description}}</p>
<a href="{{project.url}}" class="cta-btn">Read more</a>
</div>
{% endfor %}
</div>
</div>
---
layout: layouts/base.njk
title: Projects
---
<div class="projects-container">
<h2>Projects</h2>
<div class="projects-grid">
{% for project in collections.projects %}
<div class="project-card">
<div class="project-header">
<i class="fa-regular fa-folder-open folder-icon"></i>
<div class="small-icons">
<a href={{project.data.gitHubURL}}><i class="fa-brands fa-github"></i></a>
</div>
</div>
<h3>{{project.data.title}}</h3>
<p>{{project.data.description}}</p>
<a href="{{project.url}}" class="cta-btn">Read more</a>
</div>
{% endfor %}
</div>
</div>
---
layout: layouts/base.njk
title: Projects
---
<div class="projects-container">
<h2>Projects</h2>
<div class="projects-grid">
{% for project in collections.projects %}
<div class="project-card">
<div class="project-header">
<i class="fa-regular fa-folder-open folder-icon"></i>
<div class="small-icons">
<a href={{project.data.gitHubURL}}><i class="fa-brands fa-github"></i></a>
</div>
</div>
<h3>{{project.data.title}}</h3>
<p>{{project.data.description}}</p>
<a href="{{project.url}}" class="cta-btn">Read more</a>
</div>
{% endfor %}
</div>
</div>
在上面的程式碼中，{% for %} 語句被用來迴圈瀏覽projects集合中的所有專案，併為每個專案生成一個專案卡。
你可以使用 project.data.[key] 來訪問所有的變數。例如，上面的程式碼將顯示專案的標題、描述和GitHub URL。你還可以使用 project.url 訪問專案的URL。
當你執行start命令並導航到專案頁面時，當你新增許多專案時，你的頁面會是這個樣子：
專案模板頁
如何使用簡碼
短碼是一種定義自定義HTML標籤或JavaScript動態值的方法，你可以在你的模板中重複使用。例如，你可以定義一個簡碼來生成當前年份並將其新增到你的網站。
在.eleventy.js配置檔案中，你可以使用 addShortcode() 方法定義一個短碼。例如，下面的程式碼定義了一個名為year的短碼：
module.exports = function (eleventyConfig) {
// ...
eleventyConfig.addShortcode('year', () => {
return `${new Date().getFullYear()}`;
});
return {
// ...
};
};
module.exports = function (eleventyConfig) {
// ...
eleventyConfig.addShortcode('year', () => {
return `${new Date().getFullYear()}`;
});
return {
// ...
};
};
module.exports = function (eleventyConfig) {
// ...
eleventyConfig.addShortcode('year', () => {
return `${new Date().getFullYear()}`;
});
return {
// ...
};
};
上面的年份簡碼將返回當前年份，你可以將其新增到你的專案中的任何模板中。例如，你可以使用 {% year %} 動態新增年份，而不是硬編碼到這個網站的頁尾，所以它每年都會自我更新：
<hr />
<div class="footer-container">
<p>© {% year %} Joel's Portfolio</p>
<div class="social_icons">
// ...
</div>
</div>
<hr />
<div class="footer-container">
<p>© {% year %} Joel's Portfolio</p>
<div class="social_icons">
// ...
</div>
</div>
<hr />
<div class="footer-container">
<p>© {% year %} Joel's Portfolio</p>
<div class="social_icons">
// ...
</div>
</div>
當頁面被渲染時，輸出將包括HTML p 標籤中的當前年份。
如何在Eleventy網站上新增主題
在Eleventy網站上新增主題是一個快速定製網站外觀和感覺的好方法。官方稱Eleventy將主題稱為啟動器，但要明白它們的含義是一樣的。許多網站提供免費的Eleventy主題，如官方Eleventy啟動器和Jamstack主題。
你所要做的就是選擇你喜歡的主題或啟動器，然後訪問其GitHub倉庫，將其克隆到你的本地機器上。確保你閱讀其文件，瞭解配置和定製專案的步驟。
執行 npm install 來安裝所有使用的軟體包，然後執行 npm start 來為你的應用程式提供本地服務，http://localhost:8080/。
如何部署一個Eleventy網站
你現在已經成功地用Eleventy建立了一個時尚的作品集靜態網站。在你的本地機器上擁有這種型別的網站是不夠的。你會想把它託管在網上，與任何人分享它。
眾多雲平臺，允許你託管靜態網站，包括Eleventy。這可以通過將你的程式碼推送到GitHub，最後部署到雲伺服器來完成。
推送你的Eleventy網站到GitHub
首先，在GitHub上建立一個倉庫；這將使你能夠訪問倉庫的URL。然後你就可以使用git命令來推送你的程式碼。
在推送檔案到GitHub之前，最好先建立一個.gitignore檔案，指定一些在推送程式碼時Git應該忽略的檔案和資料夾。在你的根目錄下建立一個.gitignore檔案，並新增以下內容：
# dependencies
/node_modules
# run
/public
# dependencies
/node_modules
# run
/public
# dependencies /node_modules # run /public
現在你可以通過開啟終端，導航到包含專案的目錄，並執行以下命令來初始化你的本地 Git 倉庫：
git init
git init
git init
現在用下面的命令把你的程式碼新增到本地Git倉庫：
git add
git add
git add
現在你可以使用以下命令提交你的修改：
git commit -m "my first commit"
git commit -m "my first commit"
git commit -m "my first commit"
注意：你可以用描述你的改動的簡簡訊息來代替 “my first commit”。
最後，用以下命令將你的程式碼推送到GitHub：
git remote add origin [repository URL]
git push -u origin master
git remote add origin [repository URL]
git push -u origin master
git remote add origin [repository URL] git push -u origin master
注意：確保用你自己的 GitHub 倉庫 URL 替換”[repository URL]”。
一旦你完成了這些步驟，你的程式碼將被推送到GitHub，並可以通過你的倉庫的URL訪問。
將您的Eleventy網站部署到Kinsta上
部署到Kinsta只需幾分鐘時間。從 “My Kinsta” 儀表盤開始，登入或建立你的賬戶。接下來，你將在GitHub上對Kinsta進行授權。
然後你可以點選左側邊欄的Applications，然後點選Add service，最後從下拉選單中點選Application：
部署到Kinsta的應用託管上
會出現一個模式，你可以通過這個模式選擇你想部署的倉庫。如果你的版本庫裡有多個分支，請選擇你希望部署的分支。
然後你可以為這個應用程式指定一個名稱。在25個可用的資料中心中選擇一個位置，然後Kinsta會自動檢測啟動命令。
成功部署Eleventy靜態網站
你的應用程式將開始部署。在幾分鐘內，將提供一個連結來訪問你的網站的部署版本。在這種情況下，它是https://ty-portfolio-lvjy7.kinsta.app/
小結
在這篇文章中，你已經學會了如何用Eleventy製作一個時尚的網站，如何從頭開始定製一個Eleventy靜態網站，以及如何建立一個漂亮的作品集網站。
無論你是要建立一個個人部落格，一個作品集網站，還是一個線上商店，Eleventy都可以幫助你以最小的努力和最大的影響來實現你的目標。
評論留言