portfolio starter下載 - portfolio starter入門源代碼下載

portfolio starter

網站數據

1.0.0

下載

？正在進行中

這是一個具有高度的輕量級投資組合啟動可商。它針對設計師，插畫家，建築師以及有興趣分享其工作和活動的任何其他人。

預期的用戶可能不知道如何編碼，而是對他們網站後面的技術感興趣，願意在Markdown中寫作，並樂於跟進本文檔。

請訪問Portfolio-starter.sb-ph.com進行檢查。此存儲庫中的內容和代碼驅動演示站點。

特徵
無代碼設置
- 1。獲取一個GitHub帳戶
- 2。與靜態託管提供商獲取帳戶
- 3。部署您的網站
- 4。在github中編輯內容
命令行設置
- 1。在本地和github上設置回購
- 2。建立或服務您的網站
- 3。部署您的網站
- 4。在本地編輯內容
使用自定義域
更新和備份
內容參考
- 全局數據
- 降價文件和YAML FrontMatter
- 基本屬性
- 頁面
- 帖子
- 專案
- 首頁
- 博客頁面
- 錯誤頁面
- RSS提要
- 媒體
更改和擴展您的網站

特徵

低調的設計，著眼於可訪問性[todo]
有意的基本代碼庫，即使對於不熟悉代碼的人，也鼓勵修補和定制
生成一個靜態站點；靜態站點的加載速度比數據庫驅動的網站快得多，並且可以免費託管
支持帖子，項目，頁面，一級菜單和RSS開箱即用
不需要命令行；您無需使用代碼編輯器或命令行即可編輯甚至部署此網站

無代碼設置

“無代碼”有點不當。您的內容文件在技術上是用代碼編寫的，但它是一種非常可讀的語法，稱為Markdown（稍後再詳細介紹）。我們所說的“無代碼”是您不必在計算機上觸摸命令行，git或打開代碼編輯器。

1。獲取一個GitHub帳戶

GitHub是一個存儲代碼的平台。您的網站代碼和內容將在GitHub上生活。如果您已經有一個帳戶，請繼續登錄。如果沒有，請註冊一個帳戶。免費的個人帳戶就足夠了。

2。與靜態託管提供商獲取帳戶

Netlify和Zeit是託管提供商，這些提供商為擁有靜態網站的人提供慷慨的免費層。對於以下步驟，Netlify可能更加簡單，並且似乎被高高的用戶使用，但它們都是可靠的平台。如果您已經有一個帳戶，請登錄。如果不登錄，請註冊一個。

3。部署您的網站

通過單擊下面的一個按鈕，您將克隆此存儲庫（即創建一個居住在您自己的GitHub帳戶中的重複版本），然後將此新網站部署到靜態託管。

在進行之前，請確定存儲庫的名稱。它應該與網站的名稱相似，但僅包括小寫字母，數字和破折號。例如，此存儲庫的名稱是portfolio-starter 。

如果您有一個Netlify帳戶，請單擊此按鈕，然後按照Netlify的簡單說明進行連接NetLify和GitHub：

如果您有一個Zeit帳戶，請單擊下面的按鈕，然後按照Zeit的說明：

Zeit的說明將為您介紹如何為GitHub安裝Zeit，以便為您創建一個存儲庫並可以部署更改。立即安裝ZEIT時，請允許所有存儲庫。 Zeit應該自動檢測您正在使用高度的設置，如下所示（您無需擔心開發命令）：

構建命令： npx @11ty/eleventy輸出目錄： _site

按照上述說明進行Netlify或Zeit的說明，您將被重定向到網站儀表板。這會顯示您的默認子域和有關您網站的其他重要信息。您還會收到一些電子郵件，讓您知道服務已連接。

ZEIT允許您在設置存儲庫的可見性。另一方面，Netlify會自動創建一個公共存儲庫。如果要調整存儲庫的可見性，請參見GitHub文檔。

4。在github中編輯內容

要編輯或添加沒有命令行的內容，您需要使用GitHub的接口在存儲庫中的/content文件夾中瀏覽您的文件。請參閱內容參考，以了解有關/content文件夾的結構以及其中的每個文件的更多信息，尤其是包括您的網站標題和URL的全局數據文件。

要編輯或刪除現有文件，您必須在github中打開相關文件，然後單擊“編輯”按鈕（帶有鉛筆圖標的按鈕）或頁面內容上方右上角的刪除按鈕（帶垃圾箱的按鈕）。

如果要添加新頁面，則必鬚根據要添加的內容導航到posts ， projects或pages文件夾，然後單擊頁面頂部附近的“創建新文件”按鈕。這將打開一個新的編輯器頁面，您可以在其中添加文件名和文件內容。由於所有文本內容均以Markdown編寫，因此文件名必須以md結束（即my-post-name.md ）。

如果要添加媒體，則必須導航到media文件夾，然後單擊頁面頂部附近的“上傳文件”按鈕。這將為您提供一個上傳一個或多個文件的區域。有關文件類型和大小的提示，請參見媒體指南。

為了保存在GitHub中進行的編輯或添加，您必須使用頁面底部的GitHub界面進行更改。如果您在上一步中連接了NetLify或Zeit，則提交還會告訴GitHub自動部署更改。有關提交是什麼的更多信息，請參閱Github詞彙表。當您直接在GitHub中提交編輯或添加時，您可以使用已預填充的默認提交消息，並應直接提交給master分支（默認設置）。

命令行設置

命令行設置指令假定您熟悉命令行，您在計算機上安裝了Node.js的版本8或更高版本，並且您有一個GitHub帳戶。

1。設置您的存儲庫

克隆存儲庫本地通過運行git clone https://github.com/sb-ph/portfolio-starter.git my-website ，然後通過運行cd my-website更改為新的項目文件夾。運行npm install以安裝依賴項，包括高度。

運行rm -rf .git以刪除GIT歷史記錄以進行新的開始，然後運行git init以初始化新的Git Repo。提交所有文件以創建一個新的master分支，然後使用命令行添加您的項目。

2。建立或服務您的網站

要在Gitignored /_site目錄中構建網站，請運行npx @11ty/eleventy 。要旋轉服務器以進行本地開發或內容編輯，請運行npx @11ty/eleventy --serve 。這將使您的網站在http：// localhost：8080中提供，並且在進行任何更改時將自動重新加載。

3。部署您的網站

如果您想使用NetLify或Zeit，請按照其文檔來將存儲庫連接到託管帳戶進行連續部署。如果要使用另一個託管提供商，則可以在生成構建後在/_site目錄中找到靜態文件。

4。在本地編輯內容

要在本地編輯內容，請通過運行npx @11ty/eleventy --serve請調整/content目錄中的Markdown和JSON文件。如果您的網站已連續部署已連接，請確保您將更改提交正確的分支（可能是master ），否則將不會部署它們。

使用自定義域

部署網站時，NetLify和Zeit會自動為您提供默認子域，因此這是一個可選的步驟。如果您想使用自己的域，則應按照他們的說明進行設置。在Zeit上閱讀有關自定義域的更多信息，或在Netlify上閱讀有關自定義域的更多信息。

這兩種指南都會引導您完成如何設置域名系統（DNS）。請注意， DNS可能很細膩。 DNS記錄您的域名記錄瀏覽器在哪裡可以找到您的網站，並告訴電子郵件服務器如何將電子郵件直接向您直接。在更改任何內容之前，請務必寫下任何現有的DNS記錄。

如果您將名稱服務器作為自定義域設置過程的一部分重點，並且已經將您的域將其用於電子郵件，則必須在重新點命名者之前添加與電子郵件有關的MX記錄和任何其他與電子郵件有關的記錄。如果您不這樣做，您的電子郵件可能會刪除。

更新和備份

如果您正在使用較舊版本的投資組合啟動器，並且想將其更新為較新版本，則建議您手動執行此操作，但除了/content文件夾外，請替換所有文件夾和文件。您應該在進行任何更新或重大更改之前備份網站。訪問您的存儲庫主頁，然後單擊綠色的“克隆或下載”按鈕以下載整個存儲庫的拉鍊文件，然後將其存儲在安全的地方。

內容參考

所有內容都生活在/content文件夾中。默認情況下，投資組合啟動器充滿了演示網站上使用的內容。

內容包括全局數據，每個頁面的降價文件以及媒體。重要的是要以特定的方式格式化和組織每個文件，以便您的網站在沒有錯誤的情況下部署並看起來按預期進行。

全局數據

某些元數據（例如網站標題和URL）在整個網站中使用。所有這些全局數據都包含在/content/_data/global.json文件中。

首先設置網站時，應設置此文件中的詳細信息，然後除非移動網站或域更改，否則可能不會再次觸摸。這是global.json文件的一個示例：

{
  "title" : " Tortor Parturient Ridiculus " ,
  "lang" : " en " ,
  "footer" : " (c) Jane Doe, 2020 " ,
  "url" : " https://tpr.com " ,
  "author" : {
    "name" : " Jane Doe " ,
    "email" : " [email protected] "
  }
}

這是唯一必須用JSON編寫的內容，JSON是用於構建數據的文本格式。 JSON語法非常嚴格。所有鍵（即title ）和所有字符串（即My website ）均以雙引號封閉，所有屬性（即"title": "My website" ）均由逗號隔開，除了最後一個屬性。所有JSON對像都包含在捲曲括號{}中。此文件中的錯誤語法將導致錯誤，這意味著您的更改將不會部署。

這些是更詳細的屬性。

鑰匙	格式	預設	描述
`author`	JSON對象	-	JSON對象，其中包括網站作者的名稱和電子郵件地址
`footer`	降價	簡短的信用	寫在降價上的頁腳文字
`lang` *	文字	`en`	聲明您的網站語言的IANA語言標籤
`title` *	文字	-	您網站的標題
`url` *	URL	-	您的網站URL

默認情況下，頁腳包含一個簡短的信用。隨意用最適合您的文本替換它。這可能包括版權通知，Colophon，聯繫方式或其他顯著信息。頁腳不支持線路斷裂。

降價文件和YAML FrontMatter

所有主要內容頁面，包括帖子，項目，頁面，主頁，404錯誤頁面，博客和RSS feed，均以Markdown寫入。 Markdown允許您使用易於閱讀的易於編寫的純文本格式編寫，該格式可以轉換為有效的HTML。訪問Markdown-IT網站，以獲取格式選項的完整列表，包括列表，鏈接，標題等。您還可以查看此讀數文件的來源；它也寫在Markdown中！

所有MARKDOWN文件以.md擴展為結束，此StarterKit使用文件名的其餘部分來生成頁面slug（頁面URL的最後一部分）。

在下劃線_之前的任何文件夾或文件都不會發布。因此，您可以使用下劃線來創建草稿，例如/content/posts/_testing-a-draft.md 。但是，至關重要的是要記住，如果您的存儲庫是公開的，則在Github中，您的草稿將可見。

每個標記文件始於YAML FrontMatter。 YAML是一種純文本語法，允許將人類可讀的文本格式化為結構化數據。 FrontMatter是文件頂部的文本，兩側都在兩邊圍起來，就像：

---
layout : page
title : Contact
description : Get in touch with me via email or phone.
image : cloud-01.jpeg
---

YAML前模包含一系列特性 - 鍵和值，由結腸隔開 - 定義了特定於頁面的元數據。鍵必須始終如本文檔所示。例如，編寫Layout而不是layout將導致錯誤。

基本屬性

這些是每個頁面前磨牙中應使用的基本YAML屬性。

鑰匙	格式	預設	描述
`description`	文字	-	頁面內容的簡短描述
`eleventyNavigation`	yaml	-	yaml對象，下面描述
`image`	文字	-	圖像的文件名應用於社交媒體卡
`layout` *	文字	-	頁面佈局
`permalink`	文字	各種各樣的	頁面永久鏈接
`title` *	文字	-	頁面標題

每個標記文件都需要頁面標題和佈局。頁面佈局確定內容的顯示方式。創建新頁面時，應使用project ， post或page佈局。

強烈建議所有頁面都使用該description屬性，因為它用於社交媒體卡並顯示在搜索引擎結果中。它應該在50至160個字符之間，絕對不能在不同頁面上重複。

如果使用社交媒體image ，請參閱社交媒體平台提供的文檔，以了解適當的圖像大小。根據經驗，在大多數平台上，景觀格式1200px寬的JPG應該是合適的。

permalink屬性允許您設置一個頁面的URL或將其完全關閉。永久鏈接總是自動生成的，因此您幾乎不需要使用此屬性。

eleventyNavigation屬性稍微複雜一些。它告訴高高的導航插件在菜單中放置什麼。這是在關於頁面/content/pages/about.md上使用的屬性的示例：

---
layout : default
title : About
eleventyNavigation :
  key : About
  order : 0
---

key子專業告訴Hipytions將此頁面添加到導航中，上面有“關於”文本。該order子專業告訴《高度》，它應該在導航中首先出現。

您還可以將外部鏈接添加到導航的外部鏈接，例如指向GITHUB的鏈接。有關以下frontMatter的示例，請參見/content/pages/github.md頁面：

如果要添加到導航的外部鏈接，則可以使用下面的前啞劇創建一個新的Markdown文件（例如， /content/external.md ）：

---
eleventyNavigation :
  key : GitHub &nearr;
  order : 3
  url : http://github.com/sb-ph/portfolio-starter
permalink : false
---

key子屬性告訴Elestions用文本“ github”（ &nearr;是東北箭頭的HTML代碼）將此頁面添加到導航中。 order子專制設置為3，以使其在菜單中最後放置，並且url屬性設置為所需的URL。 permalink屬性設置為false，以使其不會在我們的網站上發布相應的頁面。

頁面

頁面在/content/pages文件夾中找到。

必須將頁面的layout設置為前染色的page 。頁面僅支持上面列出的基本屬性。

帖子

帖子在/content/posts文件夾中找到。

必須設置帖子的layout以在前染料中post 。帖子支持基本屬性以及date屬性。這是帖子前磨牙的一個例子：

---
layout : post
title : Demo post
date : 2020-03-29 18:00:00
---

date屬性確定帖子的發布日期，從而確定博客和RSS中的訂單。

您可以在您的Markdown內容中使用HTML註釋為您的帖子生成摘錄：

Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

<!-- more -->

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis.

如果您使用more評論，則僅在博客上顯示註釋之前的文本，並且在摘錄後將顯示“更多讀取”鏈接。

專案

項目在/content/projects文件夾中找到。

必須將項目的layout設置為在FrontMatter中project 。項目支持基本屬性以及dateStart ， dateEnd和media屬性。這是項目頁面的前肌的一個示例。

---
layout : project
title : Your project title
dateStart : 1988-02-01
dateEnd : 2001-03-01
media :
  - type : image
    filename : cloud-01.jpeg
    size : md
    alt : A cloud
    caption : A collaboration with [Piper Haywood](https://piperhaywood.com)
  - type : video
    filename : ria-pacquee.mp4
    controls : false
    caption : A piece by [Ria Pacquée](http://riapacquee.com/)
---

這些是更詳細的項目特定屬性：

鑰匙	格式	預設	描述
`dateEnd` *	`YYYY-MM-DD`	-	項目的結束日期，用於排序目的
`dateStart`	`YYYY-MM-DD`	-	項目的開始日期
`media`	yaml	-	媒體塊的YAML列表，如下所述

媒體屬性是一個嚴格的YAML列表，可以包含圖像和視頻塊。下面概述了適用於圖像和視頻的屬性。

鑰匙	格式	預設	描述
`caption`	降價	-	描述您媒體的標題
`filename` *	文字	-	媒體的文件名
`height`	整數	-	您的媒體在像素中的高度
`width`	整數	-	您的媒體寬度在像素中
`size`	文字	`lg`	應顯示媒體的大小； `sm` ， `md`或`lg`
`type` *	文字	-	`image`或`video`

圖像塊支持以下其他屬性：

鑰匙	格式	預設	描述
`alt` *	文字	-	圖像的alt文字
`featured`	布爾	錯誤的	是否應使用圖像來表示該項目

featured屬性用於確定應使用哪個圖像在主頁上表示該項目。如果將多個圖像標記為特徵，則將使用第一個圖像。

視頻塊允許以下其他屬性。請注意，僅在某些瀏覽器和設備中支持視頻自動播放。

鑰匙	格式	預設	描述
`controls`	布爾	錯誤的	是否應顯示視頻控件
`loop`	布爾	錯誤的	視頻是否應循環
`autoplay`	布爾	錯誤的	視頻是否應自動播放
`muted`	布爾	錯誤的	視頻是否應該靜音

首頁

主頁是/content/index.md文件。

主頁的layout必須設置在前磨損中的home中。主頁支持大多數基本屬性，但是不得使用permalink屬性。

其他entries屬性允許您確切指定要在主頁上顯示的項目。如果未填寫entries屬性，則首頁將自動顯示所有項目，並以最新的第一個項目顯示。

這是所使用的entries屬性的一個示例：

---
layout : home
entries :
  - portfolio-starter
  - sample-project-muybridge
  - sample-project-optics
  - sample-project-eames
  - sample-project-letters
  - sample-project-traffic-signs
---

顯示了每個項目的第一個featured圖像。如果沒有featured ，則將顯示第一個圖像。