NotionNext 操作手册 | TANGLY’s BLOG

前言

💡

文章目前还在加紧施工中，尽情期待更多内容。

本文将做为NotionNext的功能使用说明，以及各类问题的汇总。

此文是提供给已经部署好NotionNext站点的用户阅读，如果您还没有自己的站点，请访问下文部署自己的站点:

NotionNext-轻松搭建Notion博客 | TANGLY’s BLOG

无需服务器、只需几分钟即可拥有自己的独立博客站～如果你在使用Notion这款神级笔记本的话，不妨来试试顺手建个网站🤣🤣🤣，这是一款基于NotionAPI的博客系统。

https://tangly1024.com/article/notion-next#866036b6be8c414889da886ce60d6dfd

如何开始写作？

将鼠标指向数据库表中的title这一栏，会浮现一个OPEN的按钮，点击即可查看编写文章；点击右上角的蓝色NEW按钮创建新文章。

Notion模板字段说明 (展开查看)

数据库字段说明

Notion数据库中，每条数据都将有以下属性🤔：

属性	必填	说明	备注
`title`	是	文章标题	ㅤ
`status`	是	发布状态	（仅当状态为`Published` 时会被展示）
`type`	是	页面类型 (博文`Post` / 单页(`Page`)	单页不会在博文列表显示。
`summary`	否	内容摘要	搜索和简略显示会用到
`date`	否	发布日期	在V3.3.9之前的版本此项为必填。
`category`	否	文章分类	可以自定义
`tags`	否	文章标签	可多个，建议不要太多
`slug`	否	文章短路径	(每篇文章唯一，请勿重复）
`icon`	否	菜单栏图标(仅当`Page`类型有效)	可以参考：图标库地址
`password`	否	文章加锁	需要输入密码才允许访问

💡

Notion有着非常灵活的编辑能力，我十分建议您先阅读《Notion快捷键》这篇文章

一、如何配置站点

💡

首次部署成功后，不需要每次都重新导入Vercel。您可以在笔记或Github代码中快速更新您的站点，诸如切换主题、开启音乐组件、开启评论插件、开启动画特效、修改网站字体等等。

1. 在Notion中修改

在Notion页面中，以下四个元素将会直接同步到网页作为站点信息：

Notion元素	站点信息
图标①	作者头像
标题②	站点标题
描述③	站点描述
封面图④	封面大图

图标①、标题②、描述③及封面图④ 分别对应站点的作者头像、站点标题、站点描述和封面大图。 — 图标①、标题②、描述③及封面图④ 分别对应站点的**作者头像**、**站点标题**、**站点描述**和**封面大图**。

关于网站图片

如何修改网站的头像

如何修改每篇文章的封面图

💡

注意！网站图片的大小直接影响整个站点的访问性能。建议在保证图片清晰可见的前提下，尽可能压缩文件大小。建议调整图片尺寸并进行压缩，最好能转换成webp格式后上传。

2. 在Github中修改

💡

重要：站点的大部分配置都可以在blog.config.js文件中找到；您只需修改对应的配置，Vercel将自动部署您Github仓库中的最新代码。

配置方法：在您的github中找到此文件，点击右上角的编辑按钮，可以任意修改参数。

💡

每次修改代码后，Vercel自动创建一个部署任务以打包部署您的最新代码，且每次部署任务都有唯一的网址提供预览。

可以在Vercel的后台看到您的每次部署记录(点击展开)

如果遇到问题，请截图部署的错误日志，向群友寻求帮助

若编译成功：您的线上域名会更新为此次部署的最新版本。

若部署失败：例如代码格式错误、拼写错误，则这次部署则会作废，线上原先运行中的旧版网站不受任何影响。您可以查看后台部署日志找到错误原因。

3. 在环境变量中配置(推荐)

除了直接修改blog.config.js ，可以在vercel后台添加环境变量；这样做的好处是减少对代码的改动，也避免了后续升级时代码发生冲突的概率。

在blog.config.js 文件中可以看到类似 process.env.NEXT_PUBLIC_THEME 的格式，这意味着此类参数支持在Vercel中使用环境变量来配置。


NOTION_PAGE_ID: process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5',
THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 默认主题

网站优先读取环境变量配置、其次是文件中的配置。

💡

用后台环境变量配置的好处：有些敏感信息不适合直接在代码中修改，例如一些第三方插件的key，这时候推荐通过环境变量来配置。

Vercel环境变量如何操作（点击展开)

项目主页点击Settings，并选择Environment Variables配置环境变量

找到Setting → Environment Variables

在Key中填写配置名称，Value中填写配置的值，如下图:

修改完环境变量，回到项目的Deployments下，将最新的部署记录Redeploy

VPS本地部署如何操作环境变量？

直接在项目更目录的 .env.local 文件中添加环境变量即可：


# 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
NEXT_PUBLIC_VERSION=3.12.2

二、配置说明

1. 站点信息

可以添加网站的社交地址，站点域名，作者信息，以及默认主题。

添加联系方式后，将在Hexo、Next主题下显示一排联系方式按钮。


AUTHOR: 'tangly1024', // 作者
BIO: '一个普通的干饭人🍚', // 作者简介
LINK: 'https://tangly1024.com', // 网站地址
KEYWORDS: 'Notion, 博客', // 网站关键词 英文逗号隔开
THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题  ['next','hexo',"fukasawa','medium','nobelium','simple']

// 社交链接，不需要可留空白，例如 CONTACT_WEIBO:''
CONTACT_EMAIL: '', // 邮箱 例如 [email protected]
CONTACT_WEIBO: '', // 你的微博个人主页
CONTACT_TWITTER: '', // 你的twitter个人主页
CONTACT_GITHUB: '', // 你的github个人主页 例如 https://github.com/tangly1024
CONTACT_TELEGRAM: '', // 你的telegram 地址 例如 https://t.me/tangly_1024
CONTACT_LINKEDIN: '', // 你的LinkedIn 首页

在图中，我添加了github、telegram、邮件这三种联系方式，最后一个是rss的订阅图标

如何修改默认主题？

可以改变上述配置中THEME这一项的值；示例如下：

方法1：改动github中的源代码：


THEME: process.env.NEXT_PUBLIC_THEME || 'hexo', // 锁定默认主题为hexo

方法2: 在vercel后台添加环境变量: NEXT_PUBLIC_THEME

站点多语言

修改blog.config.js 的 LANG 即可切换站点的默认语言，


LANG: 'zh-CN', // e.g 'zh-CN','en-US'  see /lib/lang.js for more.

💡

目前已支持的语言有 en-US、zh-CN、zh-HK、zh-TW、fr-FR、tr-TR、ja-JP；您也可以随时向项目发起PR、提交或完善更多的语言翻译。您也可以直接在站点链接后拼接语言参数，在线体验多语言：例如： https://preview.tangly1024.com/?lang=en-US

浏览器站点图标

要修改站点在浏览器中的图标，替换 /public 文件夹里的 favicon.ico 文件即可。

❓如何制作您的icon（点击展开说明）

favicon制作

favicon在线制作,icon制作,网站图标,网站图标制作,ico图标制作

https://tool.lu/favicon/

使用上方的在线工具，上传图片，即可生成 ICO文件，您可以自行选择满意的分辨率，我这里选的是48x48：

下载后，请将ico重命名为favicon.ico

❓如何在Github中替换文件 (点击展开说明)

在public目录中点击右上角 Add file ,再在下拉框中选择 Upload files

在上传页面中点击choose your files 上传您的图标

⚠️

请先将文件重命名为favicon.ico

✅

最后点击 Commit changes 提交这次上传。

2. 网页字体

系统预设Google的Noto Sans字体，您也可以在blog.config.js 中自定义字体，以下我用霞鹜文楷作为替换字体的示例。


// 网站字体
  FONT_STYLE: process.env.NEXT_PUBLIC_FONT_STYLE || 'font-serif', // ['font-serif','font-sans'] 两种可选，分别是衬线和无衬线: 参考 https://www.jianshu.com/p/55e410bd2115
  FONT_URL: [// 字体CSS
    'https://fonts.googleapis.com/css?family=Bitter&display=swap', // Bitter 用作英文数字的字体
    'https://npm.elemecdn.com/[email protected]/style.css'
  ],
  FONT_SANS: [// 无衬线字体
    'Bitter', '"LXGW WenKai"','"PingFang SC"', '-apple-system', 'BlinkMacSystemFont', '"Hiragino Sans GB"',
    '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Segoe UI"', '"Noto Sans SC"', 'HarmonyOS_Regular',
    '"Microsoft YaHei"', '"Helvetica Neue"', 'Helvetica', '"Source Han Sans SC"',
    'Arial', 'sans-serif', '"Apple Color Emoji"'],
  FONT_SERIF: [// 衬线字体 
    'Bitter', '"LXGW WenKai"','"Noto Serif SC"', 'SimSun', '"Times New Roman"', 'Times', 'serif',
    '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Apple Color Emoji"'],

💡

注意，如果字体名称中间有空格，则要用双引号包装，对比如下：无空格的字体：’Bitter’ 有空格的字体: '"LXGW WenKai"'

3. 代码风格

默认代码主题风格是 prism-a11y-dark，如下图

您可以自行修改blog.config.js->62行 -> PRISM_THEME_PATH


PRISM_THEME_PATH: 'https://npm.elemecdn.com/prism-themes/themes/prism-a11y-dark.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes

支持的配置列表： https://npm.elemecdn.com/prism-themes/themes/ 预览代码主题： https://github.com/PrismJS/prism-themes

4. 自定义样式、自定义脚本

您可以自行决定站点的样式和执行的脚本，NotionNext支持两种方式引入您的css 和 js ：

方法一：外部文件引入

blog.config.js 中配置:CUSTOM_EXTERNAL_JS 和CUSTOM_EXTERNAL_CSS 即可


// 自定义外部脚本，外部样式
CUSTOM_EXTERNAL_JS: [''], // e.g. ['http://xx.com/script.js','http://xx.com/script.js']
CUSTOM_EXTERNAL_CSS: [''], // e.g. ['http://xx.com/style.css','http://xx.com/style.css']

方法二：内部自定义

/public/css/custom.css 文件可以直接自定义样式。
/public/js/custom.js 文件中编写脚本将被自动引入页面。
每个主题的自定义css文件，例如 /public/css/theme-hexo.css

❓

若引入js和css不能满足您的需求？试试参考《NotionNext二次开发手册》进行自定义开发。

5. 文章路径

Notion中支持添加 Post和 Page两种类型文章，其中 Post 类型的文章将被显示在博客列表中。

文章的访问地址默认是 http://[域名]/article/[slug] ， slug值默认为页面的ID，可以在notion中手动指定。

如果您不希望文章中间有 article ，可以再配置文件中修改POST_URL_PREFIX的值，


POST_URL_PREFIX: process.env.NEXT_PUBLIC_POST_URL_PREFIX || 'article', // POST类型文章的默认路径前缀，例如默认POST类型的路径是  /article/[slug]

💡

示例：

如果值为空，则文章路径为 http://[域名]/[slug]


POST_URL_PREFIX: '',

如果为post，则文章路径为 http://[域名]/post/[slug]


POST_URL_PREFIX: 'post',

6. Notion字段名自定义

可以让你的Notion模板变成中文的表头和中文的下拉框。


// 自定义配置notion数据库字段名
NOTION_PROPERTY_NAME: {
  password: process.env.NEXT_PUBLIC_NOTION_PROPERTY_PASSWORD || 'password',
  type: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE || 'type', // 文章类型，
  type_post: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_POST || 'Post', // 当type文章类型与此值相同时，为博文。
  type_page: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_PAGE || 'Page', // 当type文章类型与此值相同时，为单页。
  type_notice: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TYPE_NOTICE || 'Notice', // 当type文章类型与此值相同时，为公告。
  title: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TITLE || 'title', // 文章标题
  status: process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS || 'status',
  status_publish: process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS_PUBLISH || 'Published', // 当status状态值与此相同时为发布，可以为中文
  status_invisible: process.env.NEXT_PUBLIC_NOTION_PROPERTY_STATUS_INVISIBLE || 'Invisible', // 当status状态值与此相同时为隐藏发布，可以为中文 ， 除此之外其他页面状态不会显示在博客上
  summary: process.env.NEXT_PUBLIC_NOTION_PROPERTY_SUMMARY || 'summary',
  slug: process.env.NEXT_PUBLIC_NOTION_PROPERTY_SLUG || 'slug',
  category: process.env.NEXT_PUBLIC_NOTION_PROPERTY_CATEGORY || 'category',
  date: process.env.NEXT_PUBLIC_NOTION_PROPERTY_DATE || 'date',
  tags: process.env.NEXT_PUBLIC_NOTION_PROPERTY_TAGS || 'tags',
  icon: process.env.NEXT_PUBLIC_NOTION_PROPERTY_ICON || 'icon'
},

7. 自定义菜单（二级菜单）

在V3.13.0版本起，所有版本支持自定义菜单，效果如下：

请访问以下链接获取配置帮助：

NotionNext二级菜单使用说明 | TANGLY’s BLOG

NotionNext 3.13.0上线，支持更灵活的菜单配置

https://tangly1024.com/article/notion-next-secondary-menu

8. 伪静态

💡

网站使用NextJS开发，用户访问到的页面本身就是静态页面。

NotionNext会将页面缓存一定的时间，超过此时间后，NotionNext会从Notion同步最新的文章内容。缓存时间通过修改NEXT_REVALIDATE_SECOND 配置。

另外，将 PSEUDO_STATIC 的值修改为 true后，页面的地址最后会以.html结尾，看上去会更像一个静态页面。


PSEUDO_STATIC: false, // 伪静态路径，开启后所有文章URL都以 .html 结尾。
NEXT_REVALIDATE_SECOND: process.env.NEXT_PUBLIC_REVALIDATE_SECOND || 5, // 更新内容缓存间隔 单位(秒)；即每个页面有5秒的纯静态期、此期间无论多少次访问都不会抓取notion数据；调大该值有助于节省Vercel资源、同时提升访问速率，但也会使文章更新有延迟。

9. 其它样式

博客列表展现形式

您可以选择，使用按钮分页，还是滚动鼠标无限加载分页；

设置每页展示的文章数量。

设置在列表页是否展示文章内容，还是只是展示标题和摘要。


POST_LIST_STYLE: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
POST_LIST_PREVIEW: process.env.NEXT_PUBLIC_POST_PREVIEW || 'false', //  是否在列表加载文章预览
POSTS_PER_PAGE: 12, // post counts per page

博客列表排序


POSTS_SORT_BY: 'notion', // 排序方式 'date'按时间,'notion'由notion控制

代码渲染样式


// PrismJs 代码相关
PRISM_JS_AUTO_LOADER: 'https://npm.elemecdn.com/[email protected]/plugins/autoloader/prism-autoloader.min.js',
PRISM_JS_PATH: 'https://npm.elemecdn.com/[email protected]/components/',
PRISM_THEME_PATH: 'https://npm.elemecdn.com/prism-themes/themes/prism-a11y-dark.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes
CODE_MAC_BAR: true, // 代码左上角显示mac的红黄绿图标
CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || 'false', // 是否显示行号

修改 PRISM_THEME_PATH 参数可以更换主题风格，可以访问prism-themes主页获取可选的主题。

修改 CODE_MAC_BAR 参数可以控制代码左上角是否显示红黄绿三个图标，模仿mac的样式。

修改CODE_LINE_NUMBERS值为true，则代码最左侧将显示行号。（显示行号后代码将禁用横向滚动）

左右布局颠倒

hexo主题下默认排版是：文章显示在左，站点信息显示在右，通过修改 LAYOUT_SIDEBAR_REVERSE 为true，将排版调整为文章显示在右，站点信息显示在左


// 侧栏布局 是否反转(左变右,右变左) 已支持主题: hexo next medium fukasawa example
LAYOUT_SIDEBAR_REVERSE: false,

鼠标点击特效


// 鼠标点击烟花特效
FIREWORKS: process.env.NEXT_PUBLIC_FIREWORKS || false, // 开关
// 烟花色彩，感谢 https://github.com/Vixcity 提交的色彩
FIREWORKS_COLOR: ['255, 20, 97', '24, 255, 146', '90, 135, 255', '251, 243, 140'],

动态背景特效


// 樱花飘落特效
SAKURA: process.env.NEXT_PUBLIC_SAKURA || false, // 开关

// 漂浮线段特效
NEST: process.env.NEXT_PUBLIC_NEST || false, // 开关

// 动态彩带特效
FLUTTERINGRIBBON: process.env.NEXT_PUBLIC_FLUTTERINGRIBBON || false, // 开关
// 静态彩带特效
RIBBON: process.env.NEXT_PUBLIC_RIBBON || false, // 开关

// 星空雨特效 黑夜模式才会生效
STARRY_SKY: process.env.NEXT_PUBLIC_STARRY_SKY || false, // 开关

三、外部插件

1. 评论插件

站点支持多种评论插件，阅读以下文章获取帮助。

NotionNext如何添加评论插件 | TANGLY's BLOG

NotionNext添加Cusdis/Giscus/Gitalk/Utterance的步骤教程

https://tangly1024.com/article/notion-next-comment-plugin

NotionNext配置评论插件-Valine/Waline | TANGLY's BLOG

Valine和Waline都是基于LeanCloud 的快速、简洁的评论系统，理论上支持但不限于静态博客。 Waline 是从 Valine 衍生的带后端评论系统，可以看作是Valine的升级版，具备更多Valine不支持的功能，两者的数据结构是可以兼容的，你甚至可以同时安装Valine和Waline，两者的评论互通。两个插件均要借助LeanCloud提供的云函数，云数据存储等功能，对于普通开发者来说免费版已经足够使用。 1.请先登录或注册 LeanCloud, 进入控制台后点击左下角创建应用： 2.进入刚刚创建的应用，选择左下角的设置>应用Key，查看你的APP ID和APP Key。获取上述的 appId、 appKey等参数后，就可以直接在NotionNext（版本≥3.3.9）中激活valine了，如果不想使用Valine可以直接跳到文章下一节《Waline部署》部分。在NotionNext的Vercel环境变量中配置以下内容： NEXT_PUBLIC_VALINE_SERVER_URLS NEXT_PUBLIC_VALINE_PLACEHOLDER 环境变量配置示例： NEXT_PUBLIC_VALINE_SERVER_URLS 说明此参数选填，在应用内部会尝试自动获取，如果发现获取失败，请手动提供配置，配置方法：在LeanCloud刚创建的应用中，选择左下角的设置> 应用Key，找到 Request 域名第一行：注意，需要手动在域名前加上 https:// 否则会无法访问valine评论。安全域名（可选）点击展开 leanCloud支持设置自己的安全域名，设置后，仅列表中配置的域名才可以访问你的服务。例如我只在博客中用到valine服务，那么我的安全域名只需要配置为 https://tangly1024.com。部署valine后台（可选）点击展开 valine没有自带后台，可以借助 Valine-Admin 几分钟就可以部署一个管理后台，支持行评论的查看、删除，以及邮件通知，垃圾评论过滤等功能。部署方式不在此文赘述，可以请参阅官方文档中的"云引擎一键部署 "部分.

https://tangly1024.com/article/notionnext-valine

NotionNext配置评论插件-Valine/Waline | TANGLY's BLOG

NotionNext配置评论插件Twikoo | TANGLY's BLOG

https://tangly1024.com/article/notionnext-twikoo

2.宠物挂件

待完善


// 悬浮挂件
WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件
WIDGET_PET_LINK: 'https://cdn.jsdelivr.net/npm/[email protected]/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题

3. 音乐播放插件

待完善


// 音乐播放插件
  MUSIC_PLAYER: process.env.NEXT_PUBLIC_MUSIC_PLAYER || false, // 是否使用音乐播放插件
  MUSIC_PLAYER_VISIBLE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_VISIBLE || true, // 是否在左下角显示播放和切换，如果使用播放器，打开自动播放再隐藏，就会以类似背景音乐的方式播放，无法取消和暂停
  MUSIC_PLAYER_AUTO_PLAY: process.env.NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY || true, // 是否自动播放，不过自动播放时常不生效（移动设备不支持自动播放）
  MUSIC_PLAYER_SHOW_LRC: process.env.NEXT_PUBLIC_MUSIC_PLAYER_SHOW_LRC || false, // 是否展示歌词（前提是有配置歌词路径，对 meting 无效）
  MUSIC_PLAYER_CDN_URL: process.env.NEXT_PUBLIC_MUSIC_PLAYER_CDN_URL || 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js',
  MUSIC_PLAYER_ORDER: 'list', // 默认播放方式，顺序 list，随机 random
  MUSIC_PLAYER_AUDIO_LIST: [ // 示例音乐列表。除了以下配置外，还可配置歌词，具体配置项看此文档 https://aplayer.js.org/#/zh-Hans/
    {
      name: '风を共に舞う気持ち',
      artist: 'Falcom Sound Team jdk',
      url: 'https://music.163.com/song/media/outer/url?id=731419.mp3',
      cover: 'https://p2.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'
    },
    {
      name: '王都グランセル',
      artist: 'Falcom Sound Team jdk',
      url: 'https://music.163.com/song/media/outer/url?id=731355.mp3',
      cover: 'https://p1.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg'
    }
  ],
  MUSIC_PLAYER_METING: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING || false, // 是否要开启 MetingJS，从平台获取歌单。会覆盖自定义的 MUSIC_PLAYER_AUDIO_LIST，更多配置信息：https://github.com/metowolf/MetingJS
  MUSIC_PLAYER_METING_SERVER: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_SERVER || 'netease', // 音乐平台，[netease, tencent, kugou, xiami, baidu]
  MUSIC_PLAYER_METING_ID: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_ID || '60198', // 对应歌单的 id
  MUSIC_PLAYER_METING_LRC_TYPE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_LRC_TYPE || '1', // 可选值： 3 | 1 | 0（0：禁用 lrc 歌词，1：lrc 格式的字符串，3：lrc 文件 url）

4. 站点统计

待完善


// ----> 站点统计
ANALYTICS_BUSUANZI_ENABLE: true, // 展示网站阅读量、访问数 see http://busuanzi.ibruce.info/
ANALYTICS_BAIDU_ID: process.env.NEXT_PUBLIC_ANALYTICS_BAIDU_ID || '', // e.g 只需要填写百度统计的id，[baidu_id] -> https://hm.baidu.com/hm.js?[baidu_id]
ANALYTICS_CNZZ_ID: process.env.NEXT_PUBLIC_ANALYTICS_CNZZ_ID || '', // 只需要填写站长统计的id, [cnzz_id] -> https://s9.cnzz.com/z_stat.php?id=[cnzz_id]&web_id=[cnzz_id]
ANALYTICS_GOOGLE_ID: process.env.NEXT_PUBLIC_ANALYTICS_GOOGLE_ID || '', // 谷歌Analytics的id e.g: G-XXXXXXXXXX

ANALYTICS_ACKEE_TRACKER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_TRACKER || '', // e.g 'https://ackee.tangly1024.net/tracker.js'
ANALYTICS_ACKEE_DATA_SERVER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DATA_SERVER || '', // e.g https://ackee.tangly1024.net , don't end with a slash
ANALYTICS_ACKEE_DOMAIN_ID: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DOMAIN_ID || '', // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b'

SEO_GOOGLE_SITE_VERIFICATION: process.env.NEXT_PUBLIC_SEO_GOOGLE_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code

5. 谷歌广告嵌入

待完善


ADSENSE_GOOGLE_ID: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_ID || '', // 谷歌广告ID e.g ca-pub-xxxxxxxxxxxxxxxx

四、主题配置

💡

blog.config.js 是整个站点信息的配置。除此之外，每个主题还有各自的配置文件，便于您更细致地定制自己的风格。

主题配置文件位置

主题	配置文件位置
Hexo	/themes/hexo/config_hexo.js
Next	/themes/next/config_next.js
Fukasawa	/themes/fukasawa/config_fuka.js
Matery	/themes/matery/config_matery.js
Medium	/themes/medium/config_medium.js
Nobelium	/themes/nobelium/config_nobelium.js
Example	/themes/example/config_examplejs
Simple	/themes/simple/config_simple.js

Hexo主题

❓

hexo主题首页下的“Hi，我是一个程序员”等字样如何修改


HOME_BANNER_ENABLE: true,
HOME_BANNER_GREETINGS: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字

HOME_NAV_BUTTONS: true, // 首页是否显示分类大图标按钮

// 菜单配置
MENU_CATEGORY: true, // 显示分类
MENU_TAG: true, // 显示标签
MENU_ARCHIVE: true, // 显示归档
MENU_SEARCH: true, // 显示搜索

POST_LIST_COVER: true, // 列表显示文章封面
POST_LIST_COVER_DEFAULT: true, // 封面为空时用站点背景做默认封面
POST_LIST_SUMMARY: true, // 文章摘要
POST_LIST_PREVIEW: true, // 读取文章预览
POST_LIST_IMG_CROSSOVER: true, // 博客列表图片左右交错

ARTICLE_ADJACENT: true, // 显示上一篇下一篇文章推荐
ARTICLE_COPYRIGHT: true, // 显示文章版权声明
ARTICLE_RECOMMEND: true, // 文章关联推荐

WIDGET_LATEST_POSTS: true, // 显示最新文章卡
WIDGET_ANALYTICS: false, // 显示统计卡
WIDGET_TO_TOP: true,
WIDGET_TO_COMMENT: true, // 跳到评论区
WIDGET_DARK_MODE: true, // 夜间模式
WIDGET_TOC: true // 移动端悬浮目录

Next主题


const CONFIG_NEXT = {

  HOME_BANNER: false, // 首页是否显示大图及标语 [true,false]
  HOME_BANNER_Strings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页大图标语文字

  NAV_TYPE: 'normal', // ['fixed','autoCollapse','normal'] 分别是固定屏幕顶部并始终显示、固定屏幕顶部且滚动时隐藏，不固定屏幕顶部

  POST_LIST_COVER: false, // 文章列表显示封面图
  POST_LIST_PREVIEW: true, // 显示文章预览
  POST_LIST_SUMMARY: false, // 显示用户自定义摘要，有预览时优先只展示预览

  POST_HEADER_IMAGE_VISIBLE: false, // 文章详情页是否显示封面图

  // 右侧组件
  RIGHT_BAR: true, // 是否显示右侧栏
  RIGHT_LATEST_POSTS: true, // 右侧栏最新文章
  RIGHT_CATEGORY_LIST: true, // 右侧边栏文章分类列表
  RIGHT_TAG_LIST: true, // 右侧边栏标签分类列表
  RIGHT_AD: false, // 右侧广告

  // 菜单
  MENU_HOME: true, // 显示首页
  MENU_CATEGORY: true, // 显示分类
  MENU_TAG: true, // 显示标签
  MENU_ARCHIVE: true, // 显示归档
  MENU_SEARCH: true, // 显示搜索

  WIDGET_TO_TOP: true, // 是否显示回顶
  WIDGET_TO_BOTTOM: false, // 显示回底
  WIDGET_DARK_MODE: false, // 显示日间/夜间模式切换
  WIDGET_TOC: true, // 移动端显示悬浮目录

  ARTICLE_SHARE: false, // 文章分享功能
  ARTICLE_RELATE_POSTS: true, // 相关文章推荐
  ARTICLE_COPYRIGHT: true // 文章版权声明

}

Simple主题


const CONFIG_SIMPLE = {

  LOGO_IMG: '/Logo.webp',
  TOP_BAR: true, // 显示顶栏
  TOP_BAR_CONTENT: process.env.NEXT_PUBLIC_THEME_SIMPLE_TOP_TIPS || '',
  LOGO_DESCRIPTION: process.env.NEXT_PUBLIC_THEME_SIMPLE_LOGO_DESCRIPTION || '<div>编程爱好者<br/>/互联网从业者<br/>/知识分享博主</div>',

  AUTHOR_LINK: process.env.NEXT_PUBLIC_AUTHOR_LINK || '#',

  // 菜单配置
  MENU_CATEGORY: true, // 显示分类
  MENU_TAG: true, // 显示标签
  MENU_ARCHIVE: true, // 显示归档
  MENU_SEARCH: true // 显示搜索
}

Medium主题


const CONFIG_MEDIUM = {

  // Style
  RIGHT_PANEL_DARK: process.env.NEXT_PUBLIC_MEDIUM_RIGHT_DARK || false, // 右侧面板深色模式

  POST_LIST_COVER: true, // 文章列表显示图片封面
  POST_LIST_PREVIEW: true, // 列表显示文章预览
  POST_LIST_CATEGORY: true, // 列表显示文章分类
  POST_LIST_TAG: true, // 列表显示文章标签

  POST_DETAIL_CATEGORY: true, // 文章显示分类
  POST_DETAIL_TAG: true, // 文章显示标签

  // 菜单
  MENU_CATEGORY: true, // 显示分类
  MENU_TAG: true, // 显示标签
  MENU_ARCHIVE: true, // 显示归档
  MENU_SEARCH: true, // 显示搜索

  // Widget
  WIDGET_REVOLVER_MAPS: process.env.NEXT_PUBLIC_WIDGET_REVOLVER_MAPS || 'false', // 地图插件
  WIDGET_TO_TOP: true // 跳回顶部
}