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上给它一颗星星。