人间修炼手册

外观

next 小博客2 ​

项目 https://github.com/devnyxie/nigiri
原站 https://nigiri.vercel.app/

预览 ​

next小博客2-micro-blog

修改 ​

configuration.yaml 基本上设置都在这里了 注意“关于”信息开头需要空两格 否则报错

components/footer/Footer.js 修改页脚链接 奇怪又不显示 怎么还有链接

components/buyMeCoffee/BuyMeCoffeeButton.js 修改请我喝咖啡

components/Header/Header.js 首页 博客 关于

MD文章抬头 ​

bash
---
title: '一级标题'
excerpt: "节选、摘要、描述."
coverImage: '头图'
date: '2023-11-05T05:35:07.322Z'
---

其它 ​

博客的配置是通过configuration.yaml位于主目录中名为的 YAML 文件进行管理的。本文档提供了有关可用配置选项及其用法的详细信息。

配置选项（类型，默认） ​

站点信息 ​

  • site_title：（字符串）网站标题。如果未指定，则默认为用户名。
  • site_description：（字符串）网站元描述。

简介 ​

  • name：（字符串）你的名字。
  • surname：（字符串）您的姓氏或用户名。
  • professional_identity：（字符串）您的职业身份或职位，将显示在您的姓名下。
  • profile_picture：（字符串）您的个人资料图片的路径。如果您提供个人资料图片，头像将使用您名字的第一个字母生成。如果未提供名称，头像中心将显示“用户”图标。

关于 ​

您可以在此处添加任意数量的段落。例如：

  • about_me_paragraph：（字符串）关于您自己的段落。
  • work_paragraph：（字符串）关于您的工作的段落。

键将用作标题，例如about_me_paragraph将变为About Me。

社交媒体 ​

提供您在各种社交媒体平台上的用户名。以下所有平台的图标均已预先下载。

  • github_username：（字符串）GitHub 用户名。 github_icon：/platforms/github.svg

  • linkedin_username：（字符串）LinkedIn 用户名。 linkedin_icon：/platforms/linkedin.svg

  • instagram_username：（字符串）Instagram 用户名。 instagram_icon：/平台/instagram.svg

  • tumblr_username：（字符串）Tumblr 用户名。 tumblr_icon：/platforms/tumblr.svg

  • steam_username：（字符串）Steam 用户名。 steam_icon：/平台/steam.svg

  • twitter_username：（字符串）Twitter 用户名。 twitter_icon：/platforms/twitter.svg

您可以添加更多平台，只需：

  1. 将所需的图标放入public/platforms文件夹中。
  2. 添加您的平台和用户名，如下所示configuration.yaml：
bash
  "platformName_username": "john_doe",
  "platformName_icon": "platformIcon.svg"

如果您没有特定的图标，无需担心；在这种情况下将使用通用的。

电子邮件地址 ​

email_address：（字符串）您在此处提供的电子邮件地址将在您的社交信息之后显示为图标。

请我喝杯咖啡 ​

添加一个将显示在标题中的“请我喝杯咖啡”按钮。

  • buyMeACoffee_username：（字符串）您的“请我喝杯咖啡”用户名。这将显示为主题切换器前面的图标。

网站地图 ​

要为您的网站生成站点地图，请按照下列步骤操作：

  • 创建一个名为 SITE_URL 的环境变量，并将值设置为您网站的 URL。
  • 运行 npm 构建。
  • sitemap.xml 将作为构建过程的一部分自动生成。

详细了解 https://github.com/iamvishnusankar/next-sitemap

其他（用户界面） ​

配置博客的视觉外观等

  • profile_picture_border：（布尔值，true）个人资料图片和头像的浅色/深色边框。
  • max_posts_per_page: (int, 8) 限制“博客”页面上的帖子。
  • disable_about_me_page: (boolean, false) 禁用“关于”页面。因此，标题中不会生成任何链接。
  • disable_animated_underline: (boolean, false) 禁用动画下划线并将其替换为悬停时的静态下划线。
  • blog_preview_date_format：（字符串，ISO_8601）博客列表项日期格式。选项：ISO_8601（2023-12-15）和full_date（2023年12月15日）。
  • blog_preview_date_separators:（字符串，“-”）博客列表项日期分隔符。仅适用于 ISO_8601 日期格式。默认为“-”(2023-12-15)。代码块：
  • code_bg_color：（字符串，github浅色/深色）代码块的背景。
  • code_text_color：（字符串，github浅色/深色）代码块的文本颜色。

配置示例 ​

bash
# configuration.yml
site_title: 'Nigiri'
site_description: 'Demo version of Nigiri Next.js Template'
name: 'John'
surname: 'Doe'
professional_identity: 'Proffessional Magician'
profile_picture: '/profile_picture/john_doe.jpg'
about_me_paragraph: |

  In eget imperdiet orci, convallis feugiat diam. Nam nec turpis tincidunt, diam ac, efficitur velit. In congue velit a nisi finibus, eget pulvinar lectus cursus. Duis risus ligula, eleifend rutrum velit ut, varius varius mauris.

twitter_username: 'john_doe'
email_address: '[email protected]'
buyMeACoffee_username: 'john_doe'
blog_preview_date_separators: '-'
max_posts_per_page: '15'

本地开发 ​

bash
pnpm i
pnpm dev
或
npm i
npm run dev