digital garden

現代開發人員博客模板（數字花園起動器）

這裡有更多屏幕截圖

使用Next.js應用程序路由器，MDX，ContentLayer，Tailwind CSS， @ShadCN/UI，Lucide Icons等的開發人員，用於開發人員的開源博客（數字園藝）模板。

如果您喜歡此模板和/或使用它，請在Github上給它一顆星星。這將有助於更多的人發現它，從而有助於改進模板。

注意：這個項目總是在發展，而且遠非完美甚至完成。我總是對建議和貢獻。如果您有任何想法或建議，請隨時打開問題或公關。如果您想貢獻，您還可以查看計劃功能的路線圖。

目錄

• 動機
• 入門
  • 寫入內容
    • 前肌
  • 部署
• 定制
  • 字體
  • 顏色
  • 簽名
  • 圖像
    • 主頁頭像
  • 元數據
    • 導航
    • 社會聯繫
  • 分析
    • 動詞
    • 鮮味
    • 合理
    • Google Analytics（分析）
    • 其他分析提供商
  • 新聞通訊訂閱
    • mailerlite
    • 其他新聞通訊提供商
  • 英雄部分
  • 其他技巧和技巧
    • 圖像優化
• 例子
• 功能和路線圖
• 貢獻
  • 貢獻者
  • 如何？
• 靈感和提及
• 支持

動機

作為創建內容的開發人員，我想擁有一個博客和數字花園，可以在這裡與世界分享我的想法和想法。現在，目前沒有真正的“完美解決方案”。隨附包括分析，SEO，電子郵件訂閱，現代工具，簡單設計等。我們要么必須從頭開始構建一個，使用設計模板並編碼功能，要么使用CMS/NOTOPODE工具。

因此，我決定建立一個我自己使用的解決方案。這是結果。

入門

如果您想查看我如何為自己的數字花園設置此模板，則可以通過所有更改查看此提交。

1. 將存儲庫用作模板
2. 使用pnpm install
3. 使用您的信息和一般設置編輯utils/metadata.ts
4. 編輯用軟件和硬件您使用的utils/uses-data.ts
5. 與您的項目編輯utils/projects-data.ts
6. 用您在導航中想要的鏈接編輯utils/navigation-links.ts
7. 編輯content/pages/now可以使用您的可用性
8. 與您的生物編輯content/pages/about
9. 使用pnpm dev開發服務器運行開發服務器

打開http：// localhost：3000在您的瀏覽器中查看結果。

寫入內容

您可以在Markdown或MDX中編寫內容。內容位於content/中，並在文件夾中組織。 pages文件夾包含頁面。 posts文件夾包含博客文章。 projects文件夾包含項目。

編輯列表頁面在lib文件夾中完成。

• /uses lib/uses-data.ts
• /projects lib/projects-data.ts
• /social - lib/social-data.ts

前肌

FrontMatter用於定義頁面和帖子的元數據。它位於文件的頂部，用YAML編寫。您可以定義以下字段：

• title - 頁面/帖子的標題
• description - 頁面/帖子的描述
• publishedDate - 帖子的日期（未在頁面上使用）
• lastUpdatedDate頁面/帖子的日期
• tags - 帖子標籤列表。您可以通過將它們添加到tagOptions列表中來添加新標籤。 （未在頁面上使用）
• series - 帖子系列。一個系列有一個標題和訂單編號。 （未在頁面上使用）
• author - 帖子的作者。作者有名字和圖像。 （未在頁面上使用）
• status - 頁面/帖子已發布還是草案

部署

您可以使用Vercel或任何其他託管提供商部署該項目。如果要使用Vercel，則可以使用此讀數頂部的按鈕。

1. 更新package.json作者信息
2. 將您的存儲庫發佈到Github
3. 在Vercel上創建一個新項目並導入您的回購
4. 在Vercel上設置NEXT_PUBLIC_BASE_URL環境變量，以指向您網站的根網址
5. 如果您打算使用分析和/或新聞通訊提供商，請在Vercel上設置各個環境變量
6. 構建和部署？

定制

字體

該項目將Inter用作默認字體。您可以使用next/fonts軟件包在app/layout.tsx上更改它。

顏色

該項目使用尾風顏色和 @shadcn/ui配置。自定義globals.css上的顏色。

簽名

頁腳有一個簽名組件。您可以在components/signature.tsx上編輯簽名。我使用Figma用Caveat字體編寫簽名，並將其導出為SVG。您可以執行相同的操作並更新組件中的SVG。

圖像

圖像和其他媒體文件位於public/目錄中。您可以使用/<filename>.<ext>路徑在內容中使用它們。

主頁頭像

這是關於如何在不到2分鐘內在無花果上製作類似的化身的快速教程。 https://youtu.be/ny-vaeehjkm

元數據

您可以更改utils/metadata.ts中的元數據和作者詳細信息。這將在網站周圍用於標題，社交鏈接，社交手柄，SEO等。

導航

您可以在lib/navigation-links.ts中編輯導航鏈接。

社會聯繫

您可以在lib/social-data.ts中編輯社交鏈接。您還可以通過將它們添加到文件中並使用平台名稱作為密鑰和URL作為值來添加新的社交鏈接。如果Simple-Icons支持該平台，則SocialButton組件將自動添加該平台的圖標。

分析

動詞

要配置，您需要通過選擇項目來在Vercel Project儀表板上啟用它，然後單擊“分析”選項卡，然後單擊對話框啟用。

鮮味

Umami是一種簡單，易於使用的Web分析解決方案，具有自託管選項！您可以在Umami網站上閱讀有關它的更多信息。 （提示：在鐵路上，您可以自給自足，甚至可以自由） 。

配置： NEXT_PUBLIC_UMAMI_SCRIPT_URL ＆ NEXT_PUBLIC_UMAMI_WEBSITE_ID環境變量在您的.env.local文件和Vercel儀表板上。

合理

合理是Google Analytics（分析）的簡單，輕巧，開源替代品。您可以在合理的網站上閱讀有關它的更多信息。

configure：設置NEXT_PUBLIC_PLAUSIBLE_DOMAIN ＆ NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL環境變量.env.local文件和vercel儀表板上。如果您擔心廣告阻滯劑，則可以通過自己的域來代替合理的腳本。您可以在這裡閱讀更多有關它的信息。

Google Analytics（分析）

Google Analytics（分析）是Google提供的Web Analytics服務，該服務跟踪和報告網站流量，目前是Google Marketing Platform品牌中的平台。您可以在Google Analytics（分析）網站上閱讀有關它的更多信息。

配置：設置.env.local文件和Vercel儀表板上的NEXT_PUBLIC_GOOGLE_ANALYTICS_ID環境變量。

其他分析提供商

支持其他分析提供商正在進行中。如果您想自己實施任何建議或公關，請隨時打開問題。

新聞通訊訂閱

mailerlite

MailerLite是所有類型業務的簡單電子郵件營銷工具。您可以在Mailerlite網站上閱讀有關它的更多信息。

配置：設置EMAIL_API_BASE ， EMAIL_API_KEY和EMAIL_GROUP_ID環境變量在您的.env.local文件和vercel儀表板上。

其他新聞通訊提供商

支持其他新聞通訊提供商正在進行中。如果您想自己實施任何建議或公關，請隨時打開問題。

英雄部分

您可以通過更改導入的英雄組件在app/(site)/page.tsx中選擇3種不同的英雄變體。

1. HeroSimple一個簡單的中心英雄部分，帶有圖像，標題和字幕。
2. HeroVideo -2列英雄部分帶有視頻掩埋，一側嵌入了標題和字幕另一側。
3. HeroImage -2列英雄部分帶有圖像在一側和標題上，另一側為字幕。
4. HeroMinimal小英雄部分名稱和職位

其他技巧和技巧

圖像優化

我建議使用ImageOptim免費快速優化圖像。在Mac上安裝，然後打開Finder中的public文件夾。選擇右鍵單擊的所有圖像，然後選擇“使用> imageOptim打開”。這將優化文件夾中的所有圖像。

注意：不要過度使用。您可以通過有損的壓縮算法輕鬆使圖像看起來很差。

例子

• https://davidlevai.com/-我自己的數字花園
• 龍和代碼數字花園 - 簡單修改來源
• Shafie Mukhre的博客 - 資料來源
• Praveen Kumars的博客 - 來源
• 史蒂文·塞洛洛（Steven Selolo）的博客 - 來源
• Marton的博客 - 來源

如果您使用的模板，請創建PR並將您的博客添加到此列表中！

功能和路線圖

• 閱讀頁面和帖子的基本功能
• 基本設計黑暗/光模式
• MDX代碼突出顯示
• readme.md
• robots.txt ＆ sitemap.xml
• RSS提要
• 閱讀時間估計
• 執照
• 貢獻
• MDX組件（TOC和腳註）
• 一般配置和元數據（作者，URL，社交等）
• 使用頁面
• BIO頁面中的鏈接
• OG圖像生成
• 項目頁面
• 關於主頁
• 搜索和命令欄
• 分析：Vercel，Umami，合理，Google Analytics（分析）
• 帖子系列
• 找不到頁面
• 貢獻文檔
• 文檔刷新
• 返回頂部按鈕
• 社會圖標組成部分
• 社交分享按鈕
• 標籤
• 新聞通訊集成（表格，API路線，鑰匙，謝謝/歡迎頁面，Mailerlite提供商）
• 更多的MDX組件（Katex，數學）
• 作者內容定義
• SEO的改進
• 其他新聞通訊提供商（convertkit，替代，鈕扣，郵件等）
• 其他分析提供商（FATHOM，Simplytics等）
• RTL支持
• 帖子系列頁面
• 上一個/下一個帖子鏈接
• 相關/類似的帖子
• 捐贈組件和頁面
• CLI和/或食譜
• 時事通訊上一個問題頁面
• 佈局/模板系統
• 概念數據源
• 理智數據源
• 設計改進（空格，佈局等）
• 圖像的Lightbox
• 實施內容安全策略
• 代碼預覽組件
• 代碼突出顯示改進（複製代碼，主題）
• 豐富的項目卡
• 著陸頁/優惠頁面/免費贈品頁面
• 簡歷模板
• 身份驗證的頁面和/或隱藏的內容（在電子郵件地址背後）
• 100燈塔得分
• 命令欄在內容中的模糊搜索
• 可訪問性審核
• 更多的MDX組件（OEMBED）
• 錯誤和加載頁
• 打字稿修復
• 重新設計社交頁面（BIO中的鏈接）
• 重新設計使用頁面
• 重新設計項目頁面
• 一般重構
• 一般清理
• 為英雄部分實施類似視頻的解決方案
• RSS提要改進（圖像，描述等）
• 自定義管理CMS（？）
• 英雄標題和字幕文本html支持（？）
• 分頁（？）
• 多作者支持（？）
• 張貼像櫃檯（？）
• 訪客計數器（？）
• 代碼操場而不是代碼突出顯示（？）
• 評論系統（？）
• 基於鍵盤的Hotkeys導航（？）
• Multilang支持（？）

貢獻

貢獻者

• @thedevdavid
• @br4adam

該項目來自開發人員的開發人員。歡迎所有貢獻！請隨時進行：

• 報告一個錯誤
• 討論當前狀態和改進的想法
• 提交解決方案
• 提出新功能

如何？

1. 分叉存儲庫，並從develop中創建您的分支。
2. 添加您的代碼。
3. 更新文檔。
4. 確保您的代碼絨毛和應用程序構建。
5. 打開拉動請求以develop分支。

您所做的任何貢獻都將在MIT軟件許可下。簡而言之，當您提交代碼更改時，您的提交內容被認為是涵蓋該項目的相同的MIT許可證。行為守則可以在這裡找到。

靈感和提及

• Delba Oliveira個人博客 - 使用和構造目錄與ContentLayer
• timlrx/tailwind-nextjs-starter-blog-想法

支持

如果您喜歡此模板和/或使用它，請在Github上給它一顆星星。