增加blog

2025-08-04 20:08:55 +08:00
parent 23b0e06e65
commit 9d3824006b
11 changed files with 406 additions and 9 deletions
--- a/dictionary/en.json
+++ b/dictionary/en.json
@@ -1,7 +1,8 @@
 {
  "Header": {
    "appName": "Fast3DText",
-    "editorName": "Editor"
+    "editorName": "Editor",
+    "blogName": "Blog"
  },
  "ErrorPage": {
    "title": "Some thing went wrong",
@@ -38,6 +39,11 @@
    "faqQuestion3": "Is this 3D text generator free?",
    "faqAnswer3": "Yes, create unlimited 3D text designs with no cost"
  },
+  "BlogPage": {
+    "title": "Blog List",
+    "seoTitle": "3D Text Design Blog - Tips & Tutorials",
+    "seoDescription": "Explore our collection of 3D text design tutorials, tips and inspiration. Learn how to create stunning 3D text effects for your projects."
+  },
  "BackgoundSetting": {
    "title": "Background Setting",
    "colorOption": "Color",
--- a/dictionary/zh.json
+++ b/dictionary/zh.json
@@ -1,7 +1,8 @@
 {
  "Header": {
    "appName": "Fast3DText",
-    "editorName": "编辑器"
+    "editorName": "编辑器",
+    "blogName": "博文记录"
  },
  "ErrorPage": {
    "title": " 错误页面",
@@ -38,6 +39,11 @@
    "faqQuestion3": "这个3D文字生成器是免费的吗？",
    "faqAnswer3": "是的，可以免费创建无限量的3D文字设计"
  },
+  "BlogPage": {
+    "title": "博客列表",
+    "seoTitle": "3D文字设计博客 - 教程与技巧",
+    "seoDescription": "探索我们的3D文字设计教程、技巧和灵感集合。学习如何为您的项目创建惊艳的3D文字效果。"
+  },
  "BackgoundSetting": {
    "title": "背景设置",
    "colorOption": "颜色背景",
--- a/src/app/[locale]/blogs/Create-3D-Text-with-the-Barbie-Font/en.tsx
+++ b/src/app/[locale]/blogs/Create-3D-Text-with-the-Barbie-Font/en.tsx
@@ -0,0 +1,67 @@
+import { Box, Heading, Text, Link, Flex } from '@radix-ui/themes';
+
+export default function Page() {
+  return (
+    <Flex p="4" direction={"column"} justify={"start"} className='text-left'>
+      <Heading as="h1" size="7" mb="4">How to Create 3D Text with the Barbie Font (Free & Online Method)</Heading>
+
+      <Text as="p" mb="4">
+        Want to create stylish 3D text using the iconic Barbie font? In this tutorial, you'll learn how to generate 3D Barbie-style text using free online tools — no design experience needed.
+        We'll show you how to download the Barbie font, convert it to a 3D-ready format, and render it with an intuitive online editor.
+      </Text>
+
+      <Heading as="h2" size="5" mt="6" mb="3">Step 1: Download the Barbie Font (Free)</Heading>
+      <Text as="p" mb="2">
+        The first step is to get the official Barbie font file. You can download the Barbie Regular TTF from the reliable font repository below:
+      </Text>
+      <Flex direction="column" gap="2" mb="4">
+        <Link href="https://fontbolt.com/barbie-font" target="_blank" rel="noopener noreferrer">🔗 Download Barbie Font from FontBolt</Link>
+        <Text as="p" size="2">File format: .ttf (TrueType Font)</Text>
+      </Flex>
+      <Text as="p" mb="4">
+        Make sure to save it to your local drive, as we'll use it in the next step.
+      </Text>
+
+      <Heading as="h2" size="5" mt="6" mb="3">Step 2: Convert the TTF to 3D-Ready JSON Format</Heading>
+      <Text as="p" mb="2">
+        To render 3D text on the web, we need to convert the .ttf file into a JSON format compatible with Three.js or web-based 3D editors.
+      </Text>
+      <Text as="p" mb="2">Use this online converter:</Text>
+      <Link href="https://gero3.github.io/facetype.js/" target="_blank" rel="noopener noreferrer" mb="4">🔗 TTF to JSON Font Converter – facetype.js</Link>
+
+      <Heading as="h3" size="4" mt="4" mb="2">Instructions:</Heading>
+      <ul style={{ listStyleType: 'decimal', paddingLeft: '20px' }}>
+        <li  >Open the facetype.js website.</li>
+        <li  >Upload the barbie.ttf file.</li>
+        <li >Click Download to get the converted .json file.</li>
+      </ul>
+
+      <Heading as="h2" size="5" mt="6" mb="3">Step 3: Render the 3D Barbie Text Online</Heading>
+      <Text as="p" mb="2">
+        Now that you have the .json font file, it's time to create your 3D Barbie text using this free online editor:
+      </Text>
+      <Link href="https://fast3dtext.com" target="_blank" rel="noopener noreferrer" mb="4">🔗 Open the 3D Text Editor – Fast3DText.com</Link>
+
+      <Heading as="h3" size="4" mt="4" mb="2">Steps:</Heading>
+      <ul style={{ listStyleType: 'decimal', paddingLeft: '20px' }}>
+        <li  >Go to the editor link above.</li>
+        <li  >Click "Upload Font" and select the JSON file you just downloaded.</li>
+        <li  >Your font will appear in the font list — just select it.</li>
+        <li >Enter your custom text (e.g., "Barbie Dreamhouse") and customize color, size, depth, and lighting.</li>
+      </ul>
+      <Text as="p" mb="4">
+        Boom! You've just created 3D text with the Barbie font — all within minutes, using only free tools.
+      </Text>
+
+      <Heading as="h2" size="5" mt="6" mb="3">Conclusion</Heading>
+      <Text as="p" mb="4">
+        Creating 3D Barbie-style text doesn't require fancy software or design skills. With a few simple steps — download, convert, and upload — you can generate stunning 3D typography for websites, posters, or social media.
+      </Text>
+      <Text as="p" mb="4">
+        Feel free to explore more fonts and styling options at Fast3DText.com, or learn more about converting fonts for 3D rendering.
+      </Text>
+
+
+    </Flex>
+  );
+}
--- a/src/app/[locale]/blogs/Create-3D-Text-with-the-Barbie-Font/page.tsx
+++ b/src/app/[locale]/blogs/Create-3D-Text-with-the-Barbie-Font/page.tsx
@@ -0,0 +1,96 @@
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import { Box, Flex, } from "@radix-ui/themes";
+import { useLocale } from "next-intl";
+import { blogs } from "../list";
+import En from "./en";
+import Zh from "./zh";
+import { Locales } from "@/i18n/config";
+import { Metadata } from "next";
+
+export default function Page() {
+
+  const locale = useLocale() as "en" | "zh";
+
+  const blog = blogs.find(e => e.id == "Create-3D-Text-with-the-Barbie-Font")!;
+
+
+  return (
+    <Flex direction={"column"} gap={"4"}>
+      <Header />
+      <Flex justify={"center"} >
+
+        <Box className="md:w-2/3 w-full">
+          {locale == "en" && (<En></En>)}
+          {locale == "zh" && (<Zh></Zh>)}
+        </Box>
+
+      </Flex>
+      <Footer />
+    </Flex>
+  )
+}
+
+
+
+const host = process.env.NEXT_PUBLIC_HOST;
+
+const locales = Locales;
+
+export function generateStaticParams() {
+  return locales.map((locale) => ({ locale }));
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}): Promise<Metadata> {
+  const { locale } = await params;
+
+  const name = "Create-3D-Text-with-the-Barbie-Font";
+
+  const title = "How to Create 3D Text with the Barbie Font (Free & Online Method)";
+  const description = " Want to create stylish 3D text using the iconic Barbie font? In this tutorial, you'll learn how to generate 3D Barbie-style text using free online tools — no design experience needed.We'll show you how to download the Barbie font, convert it to a 3D-ready format, and render it with an intuitive online editor."
+  return {
+    title,
+    description,
+    keywords: [
+      'barbie font 3d online',
+      'barbie 3d text maker',
+      'how to use barbie font',
+      'barbie text generator free',
+      'convert ttf to json font',
+      'three.js custom font 3d',
+      'fast3dtext tutorial'
+    ],
+    openGraph: {
+      title,
+      description,
+      url: `${host}/${locale}/blogs/${name}`,
+      images: [
+        {
+          url: `${process.env.NEXT_PUBLIC_HOST}/og-image.png`,
+          width: 1200,
+          height: 630,
+          alt: title,
+        },
+      ],
+      locale: locale,
+      type: "website",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      images: [`${process.env.NEXT_PUBLIC_HOST}/og-image.png`],
+    },
+    alternates: {
+      canonical: `${host}/blogs/${name}`,
+      languages: {
+        en: `${host}/en/blogs/${name}`,
+        zh: `${host}/zh/blogs/${name}`,
+      },
+    },
+  };
+}
--- a/src/app/[locale]/blogs/Create-3D-Text-with-the-Barbie-Font/zh.tsx
+++ b/src/app/[locale]/blogs/Create-3D-Text-with-the-Barbie-Font/zh.tsx
@@ -0,0 +1,67 @@
+import { Box, Heading, Text, Link, Flex } from '@radix-ui/themes';
+
+export default function Page() {
+  return (
+    <Flex p="4" direction={"column"} justify={"start"} className='text-left'>
+      <Heading as="h1" size="7" mb="4">如何使用芭比字体创建3D文字(免费在线方法)</Heading>
+
+      <Text as="p" mb="4">
+        想要使用标志性的芭比字体创建时尚的3D文字吗？本教程将教你如何使用免费在线工具生成3D芭比风格文字——无需设计经验。
+        我们将向你展示如何下载芭比字体，将其转换为3D格式，并使用直观的在线编辑器进行渲染。
+      </Text>
+
+      <Heading as="h2" size="5" mt="6" mb="3">第一步：下载芭比字体(免费)</Heading>
+      <Text as="p" mb="2">
+        第一步是获取官方芭比字体文件。你可以从以下可靠的字体库下载Barbie Regular TTF：
+      </Text>
+      <Flex direction="column" gap="2" mb="4">
+        <Link href="https://fontbolt.com/barbie-font" target="_blank" rel="noopener noreferrer">🔗 从FontBolt下载芭比字体</Link>
+        <Text as="p" size="2">文件格式: .ttf (TrueType字体)</Text>
+      </Flex>
+      <Text as="p" mb="4">
+        确保将其保存到本地驱动器，我们将在下一步使用它。
+      </Text>
+
+      <Heading as="h2" size="5" mt="6" mb="3">第二步：将TTF转换为3D兼容的JSON格式</Heading>
+      <Text as="p" mb="2">
+        要在网页上渲染3D文字，我们需要将.ttf文件转换为与Three.js或基于网页的3D编辑器兼容的JSON格式。
+      </Text>
+      <Text as="p" mb="2">使用这个在线转换器:</Text>
+      <Link href="https://gero3.github.io/facetype.js/" target="_blank" rel="noopener noreferrer" mb="4">🔗 TTF转JSON字体转换器 - facetype.js</Link>
+
+      <Heading as="h3" size="4" mt="4" mb="2">操作说明:</Heading>
+      <ul style={{ listStyleType: 'decimal', paddingLeft: '20px' }}>
+        <li  >打开facetype.js网站</li>
+        <li  >上传barbie.ttf文件</li>
+        <li >点击下载获取转换后的.json文件</li>
+      </ul>
+
+      <Heading as="h2" size="5" mt="6" mb="3">第三步：在线渲染3D芭比文字</Heading>
+      <Text as="p" mb="2">
+        现在你有了.json字体文件，是时候使用这个免费的在线编辑器创建你的3D芭比文字了：
+      </Text>
+      <Link href="https://fast3dtext.com" target="_blank" rel="noopener noreferrer" mb="4">🔗 打开3D文字编辑器 - Fast3DText.com</Link>
+
+      <Heading as="h3" size="4" mt="4" mb="2">步骤:</Heading>
+      <ul style={{ listStyleType: 'decimal', paddingLeft: '20px' }}>
+        <li  >访问上面的编辑器链接</li>
+        <li  >点击"上传字体"并选择你刚下载的JSON文件</li>
+        <li  >你的字体将出现在字体列表中——只需选择它</li>
+        <li >输入你的自定义文字(如"芭比梦幻屋")并自定义颜色、大小、深度和光照</li>
+      </ul>
+      <Text as="p" mb="4">
+        搞定！你刚刚用芭比字体创建了3D文字——整个过程只需几分钟，而且只使用免费工具。
+      </Text>
+
+      <Heading as="h2" size="5" mt="6" mb="3">总结</Heading>
+      <Text as="p" mb="4">
+        创建3D芭比风格文字不需要花哨的软件或设计技能。通过几个简单的步骤——下载、转换和上传——你就可以为网站、海报或社交媒体生成令人惊叹的3D排版。
+      </Text>
+      <Text as="p" mb="4">
+        你可以在Fast3DText.com上探索更多字体和样式选项，或了解更多关于为3D渲染转换字体的信息。
+      </Text>
+
+
+    </Flex>
+  );
+}
--- a/src/app/[locale]/blogs/list.ts
+++ b/src/app/[locale]/blogs/list.ts
@@ -0,0 +1,28 @@
+export interface BlogItem {
+  id: string;
+  date: string;
+  cover: string;
+  en: {
+    title: string;
+    summary: string;
+  };
+  zh: {
+    title: string;
+    summary: string;
+  };
+}
+export const blogs = [
+  {
+    id: "Create-3D-Text-with-the-Barbie-Font",
+    date: "2024-01-01",
+    cover: "/next.svg",
+    en: {
+      title: "How to Create 3D Text with the Barbie Font",
+      summary: "这是第一篇博客的内容摘要...",
+    },
+    zh: {
+      title: "如何使用Barbie字体创建3D文本",
+      summary: "这是第一篇博客的内容摘要...",
+    },
+  },
+] satisfies BlogItem[];
--- a/src/app/[locale]/blogs/page.tsx
+++ b/src/app/[locale]/blogs/page.tsx
@@ -0,0 +1,94 @@
+import Footer from '@/components/Footer'
+import Header from '@/components/Header'
+import { Card, Flex, Text, Heading, Box, Link } from '@radix-ui/themes'
+import { blogs } from './list'
+import { useLocale, useTranslations } from 'next-intl';
+import { Locales } from '@/i18n/config';
+import { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
+
+export default function BlogListPage() {
+  const locale = useLocale() as "zh" | "en";
+  const t = useTranslations("BlogPage");
+
+
+  return (
+    <Flex direction={"column"} gap={"4"}>
+      <Header />
+      <Box p="4" className="text-center">
+        <Heading as='h1' size="7" mb="4">{t("title")}</Heading>
+        <Flex justify={"center"} gap={"4"} wrap={"wrap"}>
+          {blogs.map(blog => (
+            <Card key={blog.id} size="2" style={{ maxWidth: 300, boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)' }} mx="4" my="4">
+              <Link href={`/${locale}/blogs/${blog.id}`} color='iris'>
+                <Flex direction="column" gap="4">
+                  <Box style={{ width: '100%', height: 200, overflow: 'hidden' }}>
+                    <img src={blog.cover} alt={blog[locale].title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                  </Box>
+                  <Flex direction={"column"} gap={"1"}>
+                    <Heading as='h2' size="5" weight="bold" className='text-black dark:text-white'>{blog[locale].title}</Heading>
+                    <Text color="gray" >{blog.date}</Text>
+                    <Text >{blog[locale].summary}</Text>
+                  </Flex>
+                </Flex>
+              </Link>
+            </Card>
+          ))}
+        </Flex>
+      </Box>
+      <Footer />
+    </Flex>
+  )
+}
+
+const host = process.env.NEXT_PUBLIC_HOST;
+
+const locales = Locales;
+
+export function generateStaticParams() {
+  return locales.map((locale) => ({ locale }));
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "BlogPage" });
+
+  const name = "blogs";
+
+  return {
+    title: t("seoTitle"),
+    description: t("seoDescription"),
+    openGraph: {
+      title: t("seoTitle"),
+      description: t("seoDescription"),
+      url: `${host}/${locale}/${name}`,
+      images: [
+        {
+          url: `${process.env.NEXT_PUBLIC_HOST}/og-image.png`,
+          width: 1200,
+          height: 630,
+          alt: t("seoTitle"),
+        },
+      ],
+      locale: locale,
+      type: "website",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: t("seoTitle"),
+      description: t("seoDescription"),
+      images: [`${process.env.NEXT_PUBLIC_HOST}/og-image.png`],
+    },
+    alternates: {
+      canonical: `${host}/${name}`,
+      languages: {
+        en: `${host}/en/${name}`,
+        zh: `${host}/zh/${name}`,
+      },
+    },
+  };
+}
--- a/src/app/[locale]/editor/page.tsx
+++ b/src/app/[locale]/editor/page.tsx
@@ -26,6 +26,7 @@ export function OnlyPage({ textProp, backgroundProp }: { textProp: TextProp | un
    <Footer />
  </Flex>;
 }
+
 const locales = Locales;

 export function generateStaticParams() {
@@ -43,7 +44,7 @@ export async function generateMetadata({
  const name = "editor";

  return {
-    title: t("seoTitle"),
+    title: t("How to Create 3D Text with the Barbie Font (Free & Online Method)"),
    description: t("seoDescription"),
    openGraph: {
      title: t("seoTitle"),
--- a/src/app/[locale]/features-form/page.tsx
+++ b/src/app/[locale]/features-form/page.tsx
@@ -0,0 +1,18 @@
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import { Box, Flex } from "@radix-ui/themes";
+
+export default function Page() {
+
+  return (
+
+    <Flex direction={"column"} gap={"4"}>
+      <Header />
+      <Box p="4" className="text-center">
+        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeFbI-Bu-RsuYg1SP3_-L7wo5OOIfp5XR7H4E7jYgullaCm7g/viewform?embedded=true" className="w-full h-full" >Loading…</iframe>
+      </Box>
+      <Footer />
+    </Flex>
+
+  )
+}
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -20,11 +20,15 @@ export default function Footer() {
            >
              {t("editorName")}
            </Link>
-
            <Link
-              href="https://forms.gle/MHCFY5DxND7VEjQ87"
+              href={`/${locale}/blogs`}
+              className="text-sm text-muted-foreground hover:text-primary"
+            >
+              {t("blogName")}
+            </Link>
+            <Link
+              href="/features-form"
              className="text-sm text-muted-foreground hover:text-primary"
-              target="_blank"
            >
              Features Wanted
            </Link>
@@ -33,6 +37,12 @@ export default function Footer() {

          <Flex gap={"2"} direction={"column"}>
            <Heading as="h2" size="4">Resources</Heading>
+            <Link
+              href="https://gero3.github.io/facetype.js/"
+              className="text-sm text-muted-foreground hover:text-primary"
+            >
+              Converter From .ttf to .json
+            </Link>
            <Link
              href="/do-not-write-on-this-page"
              className="text-sm text-muted-foreground hover:text-primary"
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -16,7 +16,6 @@ export default function Header() {
            <Text size="6" color="iris"><Strong>{t("appName")}</Strong></Text>
          </a>
        </Box >
-
        <Flex gap={"4"} justify={"center"} align={"center"} className="w-1/2">
          <Link
            href={`/${locale}/editor`}
@@ -26,9 +25,14 @@ export default function Header() {
          </Link>

          <Link
-            href="https://forms.gle/MHCFY5DxND7VEjQ87"
+            href={`/${locale}/blogs`}
+            className="text-sm text-muted-foreground hover:text-primary"
+          >
+            {t("blogName")}
+          </Link>
+          <Link
+            href="/features-form"
            className="text-sm text-muted-foreground hover:text-primary"
-            target="_blank"
          >
            Features Wanted
          </Link>