大蒜面包配奶酪：科学告诉我们什么
++ 多年来，父母一直向他们的孩子宣扬吃大蒜面包配奶酪的健康益处，这种食物在我们的文化中获得了如此标志性的地位，以至于孩子们经常在万圣节装扮成温暖、奶酪味的面包。 +
++ 但最近的一项研究表明，这种受欢迎的开胃菜可能与全国各地出现的一系列狂犬病病例有关。 +
++ 多年来，父母一直向他们的孩子宣扬吃大蒜面包配奶酪的健康益处，这种食物在我们的文化中获得了如此标志性的地位，以至于孩子们经常在万圣节装扮成温暖、奶酪味的面包。 +
++ 但最近的一项研究表明，这种受欢迎的开胃菜可能与全国各地出现的一系列狂犬病病例有关。 +
+` 标签。这意味着我也必须担心设置那种烦人情况的样式。 + +- **例如，这里是另一个嵌套列表。** + + 但这次有第二段。 + + - 这些列表项不会有 `
` 标签 + - 因为它们每个只有一行 + +- **但在这第二个顶级列表项中，它们会有。** + + 这特别烦人，因为这段话的间距。 + + - 正如你在这里看到的，因为我添加了第二行，这个列表项现在有一个 `
` 标签。
+
+ 顺便说一下，这是我说的第二行。
+
+ - 最后这里有另一个列表项，所以它更像一个列表。
+
+- 一个结束列表项，但没有嵌套列表，为什么不呢？
+
+最后一句话结束这一节。
+
+## 还有其他我们需要设置样式的元素
+
+我几乎忘了提到链接，比如[这个链接到 Tailwind CSS 网站](https://tailwindcss.com)。我们几乎把它们变成蓝色，但那是昨天的事了，所以我们选择了深灰色，感觉更前卫。
+
+我们甚至包括了表格样式，看看：
+
+| 摔跤手 | 出生地 | 终结技 |
+| ----------------------- | ------------- | ------------------- |
+| Bret "The Hitman" Hart | Calgary, AB | Sharpshooter |
+| Stone Cold Steve Austin | Austin, TX | Stone Cold Stunner |
+| Randy Savage | Sarasota, FL | Elbow Drop |
+| Vader | Boulder, CO | Vader Bomb |
+| Razor Ramon | Chuluota, FL | Razor's Edge |
+
+我们还需要确保内联代码看起来不错，比如如果我想谈论 `` 元素或者告诉你关于 `@tailwindcss/typography` 的好消息。
+
+### 有时我甚至在标题中使用 `code`
+
+尽管这可能是一个坏主意，而且历史上我一直很难让它看起来不错。不过这个_"将代码块包裹在反引号中"_的技巧效果相当不错。
+
+我过去做过的另一件事是在链接中放置一个 `code` 标签，比如如果我想告诉你关于 [`tailwindcss/docs`](https://github.com/tailwindcss/docs) 仓库的事情。我不喜欢反引号下面有下划线，但为了避免它而导致的疯狂绝对不值得。
+
+#### 我们还没有使用 `h4`
+
+但现在我们有了。请不要在你的内容中使用 `h5` 或 `h6`，Medium 只支持两个标题级别是有原因的，你们这些动物。我老实说考虑过使用 `before` 伪元素，如果你使用 `h5` 或 `h6` 就对你大喊大叫。
+
+我们根本不会为它们设置样式，因为 `h4` 元素已经很小，与正文大小相同。我们应该怎么处理 `h5`，让它比正文更_小_？不，谢谢。
+
+### 不过我们仍然需要考虑堆叠的标题。
+
+#### 让我们确保我们也不会用 `h4` 元素搞砸这个。
+
+呼，运气好的话，我们已经设置了上面这段文字的标题样式，它们看起来相当不错。
+
+让我们在这里添加一个结束段落，这样事情就会以一个相当大小的文本块结束。我无法解释为什么我希望事情以这种方式结束，但我必须假设这是因为我认为如果文档末尾太靠近标题，事情会看起来奇怪或不平衡。
+
+我在这里写的可能已经足够长了，但添加这最后一句话不会有害。
+
+## GitHub 风格的 Markdown
+
+我还添加了对使用 `remark-gfm` 的 GitHub 风格 Markdown 的支持。
+
+使用 `remark-gfm`，我们在 markdown 中获得了一些额外的功能。例如：自动链接文字。
+
+像 www.example.com 或 https://example.com 这样的链接会自动转换为 `a` 标签。
+
+这对电子邮件链接也有效：contact@example.com。
\ No newline at end of file
diff --git a/content/zh/blog/what-is-mkdirs.mdx b/content/zh/blog/what-is-mkdirs.mdx
new file mode 100644
index 0000000..83237cd
--- /dev/null
+++ b/content/zh/blog/what-is-mkdirs.mdx
@@ -0,0 +1,211 @@
+---
+title: Mkdirs 是什么？
+description: Mkdirs 是构建导航站的最佳代码模板。
+image: /images/blog/mkdirs-og.png
+date: 2024-11-25T12:00:00.000Z
+published: true
+categories: [news, guide]
+author: mkdirs
+locale: zh
+---
+
+到目前为止，尝试使用 Tailwind 来设计文章、文档或博客文章的样式一直是一项繁琐的任务，需要对排版有敏锐的眼光，并且需要大量复杂的自定义 CSS。
+
+默认情况下，Tailwind 会删除段落、标题、列表等所有默认的浏览器样式。这对于构建应用程序 UI 非常有用，因为您花更少的时间撤销用户代理样式，但是当您真的只是尝试设置来自 CMS 中富文本编辑器或 markdown 文件的内容的样式时，这可能会令人惊讶和不直观。
+
+我们实际上收到了很多关于它的投诉，人们经常问我们这样的问题：
+
+> 为什么 Tailwind 删除了我的 `h1` 元素上的默认样式？我如何禁用这个？你说我也会失去所有其他基本样式是什么意思？
+> 我们听到了您的声音，但我们并不确信简单地禁用我们的基本样式就是您真正想要的。您不希望每次在仪表板 UI 的一部分中使用 `p` 元素时都必须删除烦人的边距。而且我怀疑您真的希望您的博客文章使用用户代理样式——您希望它们看起来很棒，而不是糟糕。
+
+`@tailwindcss/typography` 插件是我们尝试给您真正想要的东西，而不会有做一些愚蠢的事情（比如禁用我们的基本样式）的任何缺点。
+
+它添加了一个新的 `prose` 类，您可以将其应用于任何普通 HTML 内容块，并将其转变为一个美丽、格式良好的文档：
+
+```html
+
+ 多年来，父母一直向他们的孩子宣扬吃大蒜面包配奶酪的健康益处，这种食物在我们的文化中获得了如此标志性的地位，以至于孩子们经常在万圣节装扮成温暖、奶酪味的面包。
+
+ 但最近的一项研究表明，这种受欢迎的开胃菜可能与全国各地出现的一系列狂犬病病例有关。
+ ` 标签。这意味着我也必须担心设置那种烦人情况的样式。
+
+- **例如，这里是另一个嵌套列表。**
+
+ 但这次有第二段。
+
+ - 这些列表项不会有 ` ` 标签
+ - 因为它们每个只有一行
+
+- **但在这第二个顶级列表项中，它们会有。**
+
+ 这特别烦人，因为这段话的间距。
+
+ - 正如你在这里看到的，因为我添加了第二行，这个列表项现在有一个 ` ` 标签。
+
+ 顺便说一下，这是我说的第二行。
+
+ - 最后这里有另一个列表项，所以它更像一个列表。
+
+- 一个结束列表项，但没有嵌套列表，为什么不呢？
+
+最后一句话结束这一节。
+
+## 还有其他我们需要设置样式的元素
+
+我几乎忘了提到链接，比如[这个链接到 Tailwind CSS 网站](https://tailwindcss.com)。我们几乎把它们变成蓝色，但那是昨天的事了，所以我们选择了深灰色，感觉更前卫。
+
+我们甚至包括了表格样式，看看：
+
+| 摔跤手 | 出生地 | 终结技 |
+| ----------------------- | ------------- | ------------------- |
+| Bret "The Hitman" Hart | Calgary, AB | Sharpshooter |
+| Stone Cold Steve Austin | Austin, TX | Stone Cold Stunner |
+| Randy Savage | Sarasota, FL | Elbow Drop |
+| Vader | Boulder, CO | Vader Bomb |
+| Razor Ramon | Chuluota, FL | Razor's Edge |
+
+我们还需要确保内联代码看起来不错，比如如果我想谈论 `` 元素或者告诉你关于 `@tailwindcss/typography` 的好消息。
+
+### 有时我甚至在标题中使用 `code`
+
+尽管这可能是一个坏主意，而且历史上我一直很难让它看起来不错。不过这个_"将代码块包裹在反引号中"_的技巧效果相当不错。
+
+我过去做过的另一件事是在链接中放置一个 `code` 标签，比如如果我想告诉你关于 [`tailwindcss/docs`](https://github.com/tailwindcss/docs) 仓库的事情。我不喜欢反引号下面有下划线，但为了避免它而导致的疯狂绝对不值得。
+
+#### 我们还没有使用 `h4`
+
+但现在我们有了。请不要在你的内容中使用 `h5` 或 `h6`，Medium 只支持两个标题级别是有原因的，你们这些动物。我老实说考虑过使用 `before` 伪元素，如果你使用 `h5` 或 `h6` 就对你大喊大叫。
+
+我们根本不会为它们设置样式，因为 `h4` 元素已经很小，与正文大小相同。我们应该怎么处理 `h5`，让它比正文更_小_？不，谢谢。
+
+### 不过我们仍然需要考虑堆叠的标题。
+
+#### 让我们确保我们也不会用 `h4` 元素搞砸这个。
+
+呼，运气好的话，我们已经设置了上面这段文字的标题样式，它们看起来相当不错。
+
+让我们在这里添加一个结束段落，这样事情就会以一个相当大小的文本块结束。我无法解释为什么我希望事情以这种方式结束，但我必须假设这是因为我认为如果文档末尾太靠近标题，事情会看起来奇怪或不平衡。
+
+我在这里写的可能已经足够长了，但添加这最后一句话不会有害。
+
+## GitHub 风格的 Markdown
+
+我还添加了对使用 `remark-gfm` 的 GitHub 风格 Markdown 的支持。
+
+使用 `remark-gfm`，我们在 markdown 中获得了一些额外的功能。例如：自动链接文字。
+
+像 www.example.com 或 https://example.com 这样的链接会自动转换为 `a` 标签。
+
+这对电子邮件链接也有效：contact@example.com。
\ No newline at end of file
diff --git a/content/zh/blog/what-is-mksaas.mdx b/content/zh/blog/what-is-mksaas.mdx
index 82ae335..bb5d011 100644
--- a/content/zh/blog/what-is-mksaas.mdx
+++ b/content/zh/blog/what-is-mksaas.mdx
@@ -1,6 +1,6 @@
---
title: MkSaaS 是什么？
-description: MkSaaS 是构建 AI SaaS 网站的最佳样板。
+description: MkSaaS 是构建 AI SaaS 网站的最佳代码模板。
image: /images/blog/mksaas-og.png
date: 2024-11-26T12:00:00.000Z
published: true
diff --git a/content/zh/category/company.mdx b/content/zh/category/company.mdx
new file mode 100644
index 0000000..c2fd020
--- /dev/null
+++ b/content/zh/category/company.mdx
@@ -0,0 +1,6 @@
+---
+slug: company
+name: 公司
+description: 公司新闻
+locale: zh
+---
diff --git a/content/zh/category/guide.mdx b/content/zh/category/guide.mdx
new file mode 100644
index 0000000..41d370b
--- /dev/null
+++ b/content/zh/category/guide.mdx
@@ -0,0 +1,6 @@
+---
+slug: guide
+name: 指南
+description: 使用指南
+locale: zh
+---
diff --git a/content/zh/category/news.mdx b/content/zh/category/news.mdx
new file mode 100644
index 0000000..d9ff69b
--- /dev/null
+++ b/content/zh/category/news.mdx
@@ -0,0 +1,6 @@
+---
+slug: news
+name: 新闻
+description: 最新新闻
+locale: zh
+---
diff --git a/messages/en.json b/messages/en.json
index 61146f8..1d10fa6 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -57,5 +57,14 @@
"backToLogin": "Back to login",
"checkEmail": "Please check your email inbox"
}
+ },
+ "BlogPage": {
+ "title": "Blog",
+ "categories": {
+ "all": "All",
+ "news": "News",
+ "guide": "Guide",
+ "company": "Company"
+ }
}
-}
+}
\ No newline at end of file
diff --git a/messages/zh.json b/messages/zh.json
index d9ce456..5206f47 100644
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -57,5 +57,14 @@
"backToLogin": "返回登录",
"checkEmail": "请检查您的邮箱"
}
- }
-}
+ },
+ "BlogPage": {
+ "title": "博客",
+ "categories": {
+ "all": "全部",
+ "news": "新闻",
+ "guide": "指南",
+ "company": "公司"
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/[locale]/(marketing)/blog/(blog)/category/[slug]/page.tsx b/src/app/[locale]/(marketing)/blog/(blog)/category/[slug]/page.tsx
new file mode 100644
index 0000000..faa1b6d
--- /dev/null
+++ b/src/app/[locale]/(marketing)/blog/(blog)/category/[slug]/page.tsx
@@ -0,0 +1,96 @@
+import BlogGrid from "@/components/blog/blog-grid";
+import EmptyGrid from "@/components/shared/empty-grid";
+import CustomPagination from "@/components/shared/pagination";
+import { siteConfig } from "@/config/site";
+import { POSTS_PER_PAGE } from "@/lib/constants";
+import { constructMetadata } from "@/lib/metadata";
+import type { Metadata } from "next";
+import { allCategories, allPosts } from "content-collections";
+
+export async function generateMetadata({
+ params,
+}: {
+ params: { slug: string };
+}): Promise
- {post.description}
+ {post.description}
大蒜面包配奶酪：科学告诉我们什么
+
+ {/* when no posts are found */}
+ {paginatedPosts.length === 0 &&
+ );
+}
diff --git a/src/app/[locale]/(marketing)/blog/(blog)/layout.tsx b/src/app/[locale]/(marketing)/blog/(blog)/layout.tsx
index c07c4ba..8b9f68d 100644
--- a/src/app/[locale]/(marketing)/blog/(blog)/layout.tsx
+++ b/src/app/[locale]/(marketing)/blog/(blog)/layout.tsx
@@ -1,10 +1,26 @@
+import { BlogCategoryFilter } from '@/components/blog/blog-category-filter';
import Container from '@/components/container';
import { HeaderSection } from '@/components/shared/header-section';
import { PropsWithChildren } from 'react';
+import { allCategories } from 'content-collections';
-export default async function BlogListLayout({
+interface BlogListLayoutProps extends PropsWithChildren {
+ params: {
+ locale: string;
+ };
+}
+
+export default async function BlogListLayout({
children,
-}: { children: React.ReactNode }) {
+ params
+}: BlogListLayoutProps) {
+ const { locale } = params;
+
+ // Filter categories by locale
+ const categoryList = allCategories.filter(
+ category => category.locale === locale
+ );
+
return (
+
+ )}
+
+
+
@@ -14,7 +30,7 @@ export default async function BlogListLayout({
subtitle="Read our latest blog posts about MkSaaS"
/>
- {/*
+ {/* when no posts are found */}
+ {paginatedPosts.length === 0 &&
);
}
\ No newline at end of file
diff --git a/src/app/[locale]/loading.tsx b/src/app/[locale]/loading.tsx
new file mode 100644
index 0000000..d730bb7
--- /dev/null
+++ b/src/app/[locale]/loading.tsx
@@ -0,0 +1,5 @@
+import { Loader2Icon } from "lucide-react";
+
+export default function Loading() {
+ return
+
+ )}
+
+
+
{/* Image container - fixed aspect ratio */}
-
+
{post.image && (
diff --git a/src/components/blog/blog-category-filter.tsx b/src/components/blog/blog-category-filter.tsx
new file mode 100644
index 0000000..5229eaf
--- /dev/null
+++ b/src/components/blog/blog-category-filter.tsx
@@ -0,0 +1,24 @@
+import Container from "@/components/container";
+import { Category } from "content-collections";
+import { BlogCategoryListDesktop } from "./blog-category-list-desktop";
+import { BlogCategoryListMobile } from "./blog-category-list-mobile";
+
+interface BlogCategoryFilterProps {
+ categoryList: Category[];
+}
+
+export function BlogCategoryFilter({ categoryList }: BlogCategoryFilterProps) {
+ return (
+
-
+
{post.description && (
+
+
+ {/* Desktop View */}
+
+ );
+}
diff --git a/src/components/blog/blog-category-list-mobile.tsx b/src/components/blog/blog-category-list-mobile.tsx
new file mode 100644
index 0000000..39a2c8e
--- /dev/null
+++ b/src/components/blog/blog-category-list-mobile.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { Category } from "content-collections";
+import { LayoutListIcon } from "lucide-react";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { Drawer } from "vaul";
+import FilterItemMobile from "@/components/shared/filter-item-mobile";
+
+export type BlogCategoryListMobileProps = {
+ categoryList: Category[];
+};
+
+export function BlogCategoryListMobile({
+ categoryList,
+}: BlogCategoryListMobileProps) {
+ const [open, setOpen] = useState(false);
+ const { slug } = useParams() as { slug?: string };
+ const selectedCategory = categoryList.find(
+ (category) => category.slug === slug,
+ );
+
+ const closeDrawer = () => {
+ setOpen(false);
+ };
+
+ return (
+
+
+ {t("BlogPage.categories.all")}
+
+ {category.name}
+
+
+
+
+
+
+ {selectedCategory?.name ? `${selectedCategory?.name}` : "All"}
+
+
+
+
+
+
+
+