首頁 > web前端 > css教學 > 用高架創建自己的野蠻人

用高架創建自己的野蠻人

Joseph Gordon-Levitt
發布: 2025-03-18 11:23:23
原創
134 人瀏覽過

用高架創建自己的野蠻人

作為開發商,我們的成就大小,為我們的專業成長做出了重大貢獻。但是,在其他任務中,這些成就通常沒有引起注意,失去了。瑞安·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.jsonscripts部分:

 {
  // ...
  “腳本”:{
    “ start”:“高度 - 服務”,
    “構建”:“高度”
  },,
  // ...
}
登入後複製
  1. 高架配置文件( .eleventy.js ):創建一個.eleventy.js文件以指定輸入和輸出目錄:
模塊。Exports= function(leventyConfig){
  返回 {
    dir:{
      輸入:“ SRC”,
      輸出:“公共”
    }
  }
}
登入後複製
  1. 內容創建:創建src目錄並添加index.md文件(您的首頁)。高度支持各種模板語言;此示例使用Markdown。

  2. 模板創建:創建src/_includes/layouts目錄並添加base.njk文件(使用nunjucks的基本模板)。

  3. 連接CSS和圖像:創建src/csssrc/images目錄。更新.eleventy.js

模塊。Exports= function(leventyConfig){
  everconfig.addwatchtarget(“ ./ src/css/”)
  enventyconfig.addwatchtarget(“ ./ src/images/”)
  enventyconfig.addpassthroughcopy(“ ./ src/css/”)
  enventyconfig.addpassthroughcopy(“ ./ src/images/”)
  // ...
}
登入後複製

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

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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板