現場演示 |部署|關於 |特點|貢獻
一個可部署的 Web 應用程序,用於展示您的編碼組合。
Codefolio 是一款程式設計師的 Jamstack 組合 Web 應用程式。它是使用 Nuxt.js 建構的,並利用 @nuxt/content 模組來使用放置在/content
目錄中的使用者資料並產生生產就緒的靜態資產。
整個程式碼的編寫都考慮到了模組和可重用性。
該應用程式的主要特點是支援靜態部署。編碼組合不需要太多更改,因此靜態網站是比普通 SPA 或全端應用程式更好的選擇。
Codefolio 的使用者介面在設計時考慮到了使用者友善性。它是完全響應式的,並使用行動優先的方法。
該設計基於 7-1 Sass 模式,並利用部分已載入的 Bootstrap 5 進行佈局和實用程式。
asset/aprite/svg目錄包含單獨的 svg 圖示檔。您可以使用這些圖示(或將您自己的 svg 圖示放置在此目錄中)來引用<icon>
vue 元件中的圖示名稱。
Codefolio 支援自訂用戶資料。除了個人詳細資訊之外,用戶還可以自訂其他很酷的內容,例如外部連結和頂部導覽列中的恢復按鈕 URL。
靜態網站產生器採用原始使用者資料(通常為 Markdown 或 JSON 格式)來產生可用於生產的 HTML,因此在將內容新增至 Codefolio 時,您需要本指南作為參考。
內容資料夾的結構如下所示。
content
| navbar.json
| about.md
| social-icons.json
| user.json
|
└───projects
project1.json
project2.json
project3.json
/* so on... */
讓我們看看每個文件或資料夾的用途。
該文件用於與頂部導覽列相關的可選資料。
財產 | 類型 | 描述 |
---|---|---|
履歷網址 | string | 導覽列恢復按鈕的恢復文件 URL。 |
外部連結 | array | 包含用於在頂部導覽列中產生外部連結的物件的陣列。每個外部連結物件都需要具有text 和url 字串屬性才能正常運作。 |
該 Markdown 文件用於關於頁面。
該文件用於在關於頁面中產生社交圖示。
財產 | 類型 | 描述 |
---|---|---|
圖示 | array | 包含用於在聯絡頁面中產生社交圖示的物件的陣列。每個物件都需要有name 和url 屬性(字串)。 name 屬性應該在/assets/sprite/svg/目錄中有一個符合的 svg 檔案。大多數社交圖示已經可用,但請隨意添加您的自訂 svg 圖示。在開發模式下,您可以存取/_icons 路徑來列出所有可用的圖示。 |
該文件用於主頁所需的用戶詳細資訊。
財產 | 類型 | 描述 |
---|---|---|
全名 | string | 使用者名稱. |
關於 | string | 關於用戶的一些資訊。 |
影像 | string | 以http開頭的有效映像URL或放置在assets/images 目錄中的映像的名稱(包括副檔名)。請將影像裁切為500x500 以獲得更好的效果。 |
標題 | string | 使用者位置或角色。 |
此文件用於產生聯絡頁面。
財產 | 類型 | 描述 |
---|---|---|
表單動作 | string | 聯絡表單的自訂表單操作。檢查 formspree.io。 |
地點 | string | 使用者位置字串。 |
電子郵件 | string | 使用者電子郵件地址。 |
電話 | string | 用戶電話號碼。 |
此資料夾包含所有項目作為json格式的單獨檔案。該資料夾中的每個檔案都代表一個不同的項目。
下表包含項目資料夾中每個文件的格式。
財產 | 類型 | 描述 |
---|---|---|
ID | integer | 訂單的唯一識別碼。 |
標題 | string | 項目名稱。 |
描述 | string | 有關該項目的詳細資訊。 |
影像 | string | 以http開頭的有效映像URL或放置在assets/images 目錄中的映像的名稱(包括副檔名)。 |
連結 | object | 包含項目外部連結的物件。它可以具有可選的liveDemo 、 videoDemo 和 URL 的sourceCode 屬性。 |
科技 | array | 包含專案中使用的所有技術(字串)的陣列。 |
注意:建立新檔案以新增更多項目並將其命名為專案名稱。
請參閱內容資料夾中現有的虛擬檔案以供參考。
Nuxt.js 提供了針對搜尋引擎優化網站的有效方法。請參閱 Nuxt.js SEO 指南以了解更多詳細資訊。
此專案使用@nuxtjs/sitemap自動產生sitemap.xml檔。如果您需要更多信息,請參閱他們的配置指南。
在根據您的需求自訂內容後,您需要將應用程式部署到生產環境。
讓我們看看如何產生建置檔案。
首先使用 git 將儲存庫克隆到本機電腦上(或手動下載)
git clone https://github.com/0xaliraza/codefolio
然後,導航到儲存庫的根目錄並安裝依賴項
npm install
產生建置文件
npm run generate
此時,您將擁有一個./build
資料夾,其中包含所有可供部署的生產就緒檔案。您可以將這些檔案部署到某些託管伺服器或 CDN。
如果您想查看本地運行的應用程式
npm run dev
您需要具備 github/編碼經驗才能使用 github actions 或其他 CI/CD 平台進行部署。
這是一個模板存儲庫,因此您只需單擊右上角的“使用此模板”按鈕即可克隆此存儲庫。根據您的需求自訂內容文件,然後前往操作標籤以新增所需的工作流程。您可以重複使用現有的 ci.yml 和 cd.yml 檔案。
請參閱 github 操作以了解更多資訊。
如果您需要更改或修復任何內容,請隨意建立拉請求或問題。或者您可以使用以下連結直接與我聯繫。
如需任何幫助或信息,請隨時與我聯繫。讓我們聯絡吧! :)
網站
吉圖布
嘰嘰喳喳
中等的
領英
有關許可權利和限制 (MIT),請參閱 LICENSE 文件。