用高架創建自己的野蠻人

作為開發商，我們的成就大小，為我們的專業成長做出了重大貢獻。但是，在其他任務中，這些成就通常沒有引起注意，失去了。瑞安·T·哈特（Ryan T. Harter）在他的演講中描述的那樣，這項“看不見的工作”很容易被遺忘，尤其是在表演評論中。

朱莉婭·埃文斯（Julia Evans）關於維護“吹牛文件”的文章提供了解決方案。吹牛文件只是您寶貴貢獻的記錄，包括項目參與，對同事的幫助，過程改進，演示，講習班，學習經驗，課外活動（博客，個人項目），獎項和職業發展。

儘管存在用於創建吹牛文檔的各種工具，例如Br​​agdocs.com，但構建自己的構建提供了更大的自定義。該教程演示瞭如何使用靜態站點發電機高度重新創建類似bragdocs.com的位點。使用最小的JavaScript和CSS，您可以構建自己的個性化吹牛文檔。

構建您的吹牛文件

該教程的結果反映了Bragdocs.com，為您自己獨特的吹牛文檔提供了基礎。現場演示可以在這裡使用。

先決條件

• Node.js（版本10或更高版本）和NPM。
• 熟悉HTML和CSS。
• 了解Markdown，Nunjucks模板和JavaScript（有用但並不是嚴格要求）。
• 基本的編程概念（如果語句，循環，訪問JSON變量）。

高度介紹

高度是靜​​態站點發生器。與全棧開發不同，它允許使用各種模板語言（HTML，Markdown，Liquid，Nunjucks等）創建靈活的內容。高架流程此內容，生成靜態HTML頁面，以方便託管。

設置您的高度項目

本教程使用了高度的存儲庫。

1. 項目創建：使用README.md創建一個GitHub存儲庫（例如， eleventy-bragdoc ）和一個.gitignore文件。

2. 初始化：導航到您的終端中的eleventy-bragdoc目錄並運行： npm init -y這將創建一個package.json文件。

3. 高度安裝：安裝高度： npm install @11ty/eleventy

4. 配置（ package.json ）：更新package.json的scripts部分：

 {
  // ...
  “腳本”：{
    “ start”：“高度 - 服務”，
    “構建”：“高度”
  }，，
  // ...
}

5. 高架配置文件（ .eleventy.js ）：創建一個.eleventy.js文件以指定輸入和輸出目錄：

模塊。Exports= function（leventyConfig）{
  返回 {
    dir：{
      輸入：“ SRC”，
      輸出：“公共”
    }
  }
}

6. 內容創建：創建src目錄並添加index.md文件（您的首頁）。高度支持各種模板語言；此示例使用Markdown。

7. 模板創建：創建src/_includes/layouts目錄並添加base.njk文件（使用nunjucks的基本模板）。

8. 連接CSS和圖像：創建src/css和src/images目錄。更新.eleventy.js ：

模塊。Exports= function（leventyConfig）{
  everconfig.addwatchtarget（“ ./ src/css/”）
  enventyconfig.addwatchtarget（“ ./ src/images/”）
  enventyconfig.addpassthroughcopy（“ ./ src/css/”）
  enventyconfig.addpassthroughcopy（“ ./ src/images/”）
  // ...
}

其餘步驟詳細介紹了Bragdoc功能的構建，包括收集，數據處理，樣式和部署。每個步驟的完整代碼和詳細說明都可以在原始文本中獲得。

以上是用高架創建自己的野蠻人的詳細內容。更多資訊請關注PHP中文網其他相關文章！