嘿!让我与你分享一个小秘密——我热衷于写诗，但有一个小变化。你瞧，我的诗不是用英语或任何广为人知的语言创作的；相反，我用印度的一种语言坎纳达语倾诉我的心声，这个语言与我产生了深刻的共鸣。

2025-03-25T14:42:53+08:00 | 7分钟阅读 | 更新于 2025-03-25T14:42:53+08:00

Macro Zhao

嘿!让我与你分享一个小秘密——我热衷于写诗，但有一个小变化。你瞧，我的诗不是用英语或任何广为人知的语言创作的；相反，我用印度的一种语言坎纳达语倾诉我的心声，这个语言与我产生了深刻的共鸣。

现在，有一点：每当我想和其他人分享我的诗歌创作时，我总是遇到一些困难。当然，我可以将它们以书面形式呈现出来，但说实话，这就像看油漆干燥一样乏味。另外，我一直困扰于类似Your Quote的其他诗歌平台的问题。别误会，它们是很棒的平台，但问题在于——它们的大多数功能都是收费的。更气人的是，它们还在所有东西上贴上自己的标志，把我的美丽作品变成了广告招贴。这可不是我想要的效果，你知道的吧？

因此，我想，为什么不创建一个免费平台，在这里任何人，无论他们的语言或财务状况如何，都可以释放他们的创造力呢？于是，Poetique的想法就诞生了——这是一个为像你和我这样的诗人提供展示工作的天堂，而不附带任何条件。是时候了，我们需要一个地方，使我们的文字真正发光，没有水印或付费墙的阻碍。

所以，让我们一起踏上这个诗意的旅程，以生动的视觉形式展现我们的文字，并与世界分享我们的故事，逐节递进。让诗歌不仅是值得阅读的东西，更要以所有丰富多彩的光辉来体验。准备好了吗？让我们创造一些魔法吧！🌟 。

进入 Poetique - 一个革新诗歌认知和互动方式的巧妙在线平台。

网站预览

拥抱创新

在本质上，Poetique为用户提供了无缝体验，轻松将文字转化为视觉上引人入胜的诗歌。无论您是资深的文人还是刚刚涉足诗歌世界，Poetique提供了一系列工具和资源，帮助您从自己的诗歌或现有文学作品中创作迷人的艺术品。

过去的那些静态文本页面已经过时了；Poetique通过集成令人惊叹的视觉元素，为诗歌注入了生机。用户可以从拥有超过80,000张图片的广阔库中挑选完美的视觉元素来衬托他们的诗歌作品，为其创作增添层次和意义。

入门指南

那么，如何开始在Poetique上展开诗意探索之旅呢？不必担心，艺术辉煌之路充满了简单：

  1. 访问Poetique网站：转到 Poetique网站 开始您的诗意探险之旅。
  2. 输入您的杰作：输入您的诗歌或引用，以及其标题和作者（如果适用）。
  3. 探索定制：深入到编辑页，在那里等待着一系列定制选项。
  4. 完美打造：定制您的视觉诗歌，反映出您独特的风格和愿景。
  5. 分享您的杰作：一旦满意，释放您的创作，让它征服心灵和思想。

功能众多

Poetique不仅仅是另一个普通的诗歌平台；它是一个为渴望赋予文字生命的创意灵魂提供庇护的场所。以下是几个使Poetique脱颖而出的功能：

  • 创建视觉诗歌：将文本无缝转化为视觉上令人惊叹的杰作。
  • 无限定制：从背景图像到文本样式，定制您创作的每个方面至臻完美。
  • Pexels整合：通过Pexels图像API访问丰富的高质量图片库。
  • 下载和分享：与世界分享您的诗歌珍宝，或将其作为图像下载，贴近您的心。

个性化与易访问性

Poetique的核心是个性化和易访问性的承诺。与一些价格昂贵的创意平台不同，Poetique完全免费提供其全部功能。这种艺术的民主化确保了任何人，无论他们的财务状况如何，都可以释放他们的创造力，与世界分享他们独特的声音。

探索魔法背后的技术

在Poetique迷人的面纱之后，是一个强大的技术堆栈，旨在赋予用户力量，促进无缝的互动。让我们深入了解推动这个诗意平台的技术奇迹：

Next.js 14: 推动下一代Web应用

Next.js作为Poetique的支柱，提供了服务器端渲染，静态站点生成和路由功能。在14版本中，Next.js带来了大量增强和优化，确保用户体验流畅愉悦。

Shadcn & Aceternity UI: 提升视觉体验

虽然Shadcn可能看起来神秘莫测，但它成为了Poetique内部优化视觉美学的基石。搭配Aceternity UI，这些框架提供了丰富的样式选择和UI组件，将整体用户体验提升到新的高度。

Pexels图像API: 灵感宝库

Pexels图像API的整合使用户可以访问广泛的高质量图像库，为他们的创意努力提供能量，丰富他们的诗意作品。

React Hooks & Axios: 推动互动与数据获取

Poetique利用诸如 useState 和 useEffect 这样的React Hooks，促进了无缝的状态管理和互动。另外，Axios处理HTTP请求，确保从Pexels API高效地获取数据。

HTML转图像 & Web分享API: 实现下载和分享

html-to-image 的应用方便了将视觉诗歌转化为可下载图像，使用户可以轻松地保存和分享他们的创作。此外，与Web分享API的整合使用户可以在各种平台上无缝分享他们的诗意宝石。

导航创意过程

在Poetique内打造视觉诗意的旅程是艺术与技术的和谐融合。让我们探讨一些关键功能，使用户能够赋予他们的诗意愿景生命：

图像搜索与选择:

这一功能赋予用户权力，为他们的诗歌选择完美的背景，无缝集成Pexels API，允许用户搜索和选择与他们艺术愿景共鸣的图像。

const [images, setImages] = useState([]);
const [selectedImage, setSelectedImage] = useState(null);
const [searchQuery, setSearchQuery] = useState("nature");

const fetchImages = async (page) => {
  try {
    const response = await axios.get(
      `https://api.pexels.com/v1/search?query=${searchQuery}&page=${page}`,
      {
        headers: {
          Authorization: process.env.NEXT_PUBLIC_PEXELS_API_KEY,
        },
      }
    );
    setImages(response.data.photos);
    setTotalPages(response.data.total_pages);
  } catch (error) {
    console.error("Error fetching images:", error);
  }
};

const handleImageClick = (image) => {
  setSelectedImage(image);
};

文本样式:

从字体颜色到大小，用户完全控制他们文本的视觉呈现，使他们的诗歌充满个性风格和风度。

const [textStyles, setTextStyles] = useState(new Set());
const [fontColor, setFontColor] = useState("#000000");
const [fontSize, setFontSize] = useState(16);
const [bold, setBold] = useState(false);
const [selectedFont, setSelectedFont] = useState(null);

const handleFontColorChange = (e) => {
  const color = e.target.value;
  setFontColor(color);
  handleTextStyleToggle(`text-color-${color}`);
};

const handleFontSizeChange = (value) => {
  const size = parseInt(value, 10);
  setFontSize(size);
  handleTextStyleToggle(`font-size-${size}`);
};

const handleBoldText = () => {
  setBold(!bold);
  handleTextStyleToggle("bold");
};

图像渲染和样式:

该功能使用户可以自定义图像属性，如背景色、透明度和模糊，为他们的视觉作品增加深度和维度，将它们提升至艺术表现的新高度。

const [backgroundColor, setBackgroundColor] = useState("#b3e0ff");
const [imageOpacity, setImageOpacity] = useState(1);
const [imageBlur, setImageBlur] = useState(0);

const handleColorChange = (event) => {
  setBackgroundColor(event.target.value);
  setSelectedImage(null
);
};

const handleImageOpacityChange = (event) => {
  setImageOpacity(parseFloat(event.target.value));
};

const handleImageBlurChange = (event) => {
  setImageBlur(parseFloat(event.target.value));
};

下载和分享:

这一功能促进传播诗意创作，使用户可以将其视觉诗歌作为图像下载，或通过支持的平台与世界分享，营造共同体感和联系。

const handleDownloadClick = async () => {
  setisDownloading(true);
  if (canvasContainerRef.current) {
    try {
      const dataUrl = await toPng(canvasContainerRef.current, {
        quality: 1.0,
      });
      const link = document.createElement("a");
      link.href = dataUrl || "";
      link.download = "downloaded-image.png";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      setisDownloading(false);
    } catch (error) {
      setisDownloading(false);
      console.error("Error downloading image:", error);
    }
  }
  setisDownloading(false);
};

const handleShareClick = async () => {
  try {
    if (canvasContainerRef.current) {
      const blob = await toBlob(canvasContainerRef.current, {
        quality: 1.0,
      });
      if (blob && navigator.share) {
        await navigator.share({
          title: "Poetique Image",
          text: "Check out this beautiful image poem!",
          files: [
            new File([blob], "poetique-image.png", { type: "image/png" }),
          ],
        });
      } else {
        alert("Sharing is not supported on this browser.");
      }
    }
  } catch (error) {
    console.error("Error sharing:", error);
  }
};

处理样式更改:

提供用户灵活切换文本样式和对齐方式的便利功能，确保诗歌的每个方面都能表达出用户独特的声音和艺术理念。

const handleTextStyleToggle = (style) => {
  const updatedStyles = new Set(textStyles);

  if (style.includes("align-")) {
    updatedStyles.forEach((existingStyle) => {
      if (existingStyle.startsWith("align-")) {
        updatedStyles.delete(existingStyle);
      }
    });
  }

  if (style.startsWith("text-color-")) {
    updatedStyles.forEach((existingStyle) => {
      if (existingStyle.startsWith("text-color")) {
        updatedStyles.delete(existingStyle);
      }
    }
  }

  if (updatedStyles.has(style)) {
    updatedStyles.delete(style);
  } else {
    updatedStyles.add(style);
  }

  if (style.startsWith("font-size-")) {
    updatedStyles.forEach((existingStyle) => {
      if (existingStyle.startsWith("font-size-")) {
        updatedStyles.delete(existingStyle);
      }
    });
    setFontSize(parseInt(style.replace("font-size-", ""), 10));
  }
  setTextStyles(new Set(Array.from(updatedStyles)));
};

加入诗意革命

在一个充斥着数字噪音的世界中，Poetique是创造力和表达的灯塔。无论您是经验丰富的诗人还是志在追求的文人，Poetique邀请您踏上诗意发现之旅，释放您的创造潜能。加入我们，重新定义诗歌的边界，将文字转化为能与灵魂共鸣的艺术品。

安装和贡献

渴望探索Poetique世界并为其发展做出贡献吗？按照以下简单步骤执行：

  1. 克隆仓库：将Poetique仓库复刻和克隆到你的本地机器。
  2. 安装依赖：进入项目目录，使用npm安装依赖。
  3. 设置环境变量：创建一个.env.local文件，并添加您的Pexels API密钥。
  4. 运行项目：本地启动项目，开始您的诗意探险。
git clone https://github.com/Varshithvhegde/Poetique.git
cd poetique
npm install
npm run dev

欢迎贡献！无论您是经验丰富的开发人员还是新手诗人，您的见解和贡献都是塑造Poetique未来的宝贵财富。让我们一起编织一幅启发、吸引并超越想象力边界的文字和图像画卷。

总结

当我们在诗歌和技术的领域中旅行时，Poetique成为了人类创造力无限潜力的证明。凭借其创新功能、直观界面和对易访问性的承诺，Poetique赋予了来自各行各业的个人力量， embrace内心的诗人，与世界分享他们独特的声音。加入我们，踏上诗意革命之旅，让您的文字绘制无尽可能的画布。

链接

  1. 在Github上Star🌟
  2. Poetique应用
  3. Varshith V Hegde - Github
上一页 关于JS你该知道的（错误）和不知道的（技巧）
下一页 【Java】深入了解下Java Bitset

© 2011 - 2025 Macro Zhao的分享站

关于我

如遇到加载502错误，请尝试刷新😄

Hi，欢迎访问 Macro Zhao 的博客。Macro Zhao（或 Macro）是我在互联网上经常使用的名字。

我是一个热衷于技术探索和分享的IT工程师，在这里我会记录分享一些关于技术、工作和生活上的事情。

我的CSDN博客：
https://macro-zhao.blog.csdn.net/

欢迎你通过评论或者邮件与我交流。
Mail Me

推荐好玩（You'll Like）
  • AI 动·画
    • 这是一款有趣·免费的能让您画的画中的角色动起来的AI工具。
    • 支持几十种动作生成。
我的项目（My Projects）

  • 爱学习网

  • 小乙日语App

    • 这是一个帮助日语学习者学习日语的App。
      （当然初衷也是为了自用😄）
    • 界面干净，简洁，漂亮！
    • 其中包含 N1 + N2 的全部单词和语法。
    • 不需注册，更不需要订阅！完全免费！

  • 小乙日文阅读器

    • 词汇不够？照样能读日语名著！
    • 越读积累越多，积跬步致千里！
    • 哪里不会点哪里！妈妈再也不担心我读不了原版读物了！
赞助我（Sponsor Me）

如果你喜欢我的作品或者发现它们对你有所帮助，可以考虑给我买一杯咖啡 ☕️。这将激励我在未来创作和分享更多的项目和技术。🦾

👉 请我喝一杯咖啡

If you like my works or find them helpful, please consider buying me a cup of coffee ☕️. It inspires me to create and share more projects in the future. 🦾

👉 Buy me a coffee