✨ 更新日志
🚀 安装部署
✒ 写作指引
🛠 站点配置
📊 网站统计
⭐ 主题配置
📩 评论插件
🧷 外部插件
🔊 站点订阅
⌨ 开发指引
👨👦👦 联系方式
🤝 购买服务
基础信息
category
tags
type
status
slug
date
password
Last edited time
Mar 3, 2024 06:33 AM
summary
icon
前言配置说明1. 站点信息分享功能自定义社交图标按钮站点多语言浏览器站点图标4. 自定义样式、自定义脚本5. 文章路径6. Notion字段名自定义7. 自定义菜单(二级菜单)8. 伪静态9. 其它样式Notion隐私安全
前言
本文将介绍如何配置一些基本的站点信息;例如作者名以及网站URL等。
阅读本文前,请先确保已经部署好您的NotionNext站点,若您还没有自己的站点,请访问教程部署自己的站点: https://docs.tangly1024.com/about
配置说明
1. 站点信息
网站的社交地址,站点域名,作者信息,以及默认主题在站点的配置文件 blog.config.js 中可以找到,您可以在配置文件中修改配置。
关于如何修改配置,请访问上一篇《配置入门》教程了解其他修改配置的方法。
在配置文件中,添加了社交链接的地址后,将在Hexo、Next主题下显示一排联系方式按钮。
在图中,我添加了github、telegram、邮件这三种联系方式,最后一个是rss的订阅图标 , 如果设置了 CONTACT_BILIBILI,则会在此处多出一个B站的图标链接
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8359476d-0f9d-41d0-af41-bc96eb28e22e%2FUntitled.png?table=block&id=56fdaef5-387a-4210-b20c-053dc4dc808d&t=56fdaef5-387a-4210-b20c-053dc4dc808d&width=192&cache=v2)
分享功能
文章底部的分享条,需要配置您的站点地址,否则分享的路径都是默认地址,除此之外,LINK这个配置还用于feed订阅、sitemap站点地图生成的功能。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2ad295d5-2651-40f5-bb74-4af7ed60f09e%2FUntitled.png?table=block&id=1bd55449-234b-4c21-8624-3ef837fc1da7&t=1bd55449-234b-4c21-8624-3ef837fc1da7&width=615&cache=v2)
自定义社交图标按钮
hexo主题的图标按钮在此处修改,
例如github的图标是:
fab fa-github
,可访问fontawesome获取其他图标站点多语言
修改blog.config.js 的 LANG 即可切换站点的默认语言,
目前已支持的语言有 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
文件即可。![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc96c1e75-d35c-4b00-aa16-a1e4654b20bd%2FUntitled.png?table=block&id=6a5435e0-105b-4ce6-b6f2-853599ba6121&t=6a5435e0-105b-4ce6-b6f2-853599ba6121&width=726&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F724ce53b-a036-49c8-b2dd-4504545a2984%2FUntitled.png?table=block&id=0509dd6d-b5d0-4c84-b889-3fa984b69957&t=0509dd6d-b5d0-4c84-b889-3fa984b69957&width=276&cache=v2)
❓如何制作您的icon(点击展开说明)
使用上方的在线工具,上传图片,即可生成 ICO文件,您可以自行选择满意的分辨率,我这里选的是48x48:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F488a10ed-c214-4b16-9e46-ed379a57f4ed%2FUntitled.png?table=block&id=b5d9d856-8cc4-4b92-896f-51d093fe8fd9&t=b5d9d856-8cc4-4b92-896f-51d093fe8fd9&width=432&cache=v2)
下载后,请将ico重命名为
favicon.ico
❓如何在Github中替换文件 (点击展开说明)
- 在项目中点击public目录
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F69a01e0d-2d01-4ae5-adda-a63b66f983eb%2FUntitled.png?table=block&id=f5aad9dd-cb9a-4afd-b7c7-fa072a281308&t=f5aad9dd-cb9a-4afd-b7c7-fa072a281308&width=908&cache=v2)
- 在public目录中点击右上角 Add file ,再在下拉框中选择 Upload files
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa522b610-80d2-470d-a7e0-53762d990567%2FUntitled.png?table=block&id=67d7d569-165d-4be9-acca-c45b82f22f32&t=67d7d569-165d-4be9-acca-c45b82f22f32&width=1278&cache=v2)
- 在上传页面中点击choose your files 上传您的图标
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0d3c45fc-f46f-42e5-b56e-65b18ba255ef%2FUntitled.png?table=block&id=20b7ce6f-8418-44d5-82a7-0cf769e89966&t=20b7ce6f-8418-44d5-82a7-0cf769e89966&width=1256&cache=v2)
请先将文件重命名为
favicon.ico
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8988ba18-3130-41f1-8a08-920893f49c1d%2FUntitled.png?table=block&id=9629a4fc-f46e-4f7b-8cbb-5a63c36c2dc3&t=9629a4fc-f46e-4f7b-8cbb-5a63c36c2dc3&width=480&cache=v2)
最后点击
Commit changes
提交这次上传。4. 自定义样式、自定义脚本
您可以自行决定站点的样式和执行的脚本,NotionNext支持两种方式引入您的css 和 js :
- 方法一:外部文件引入
- 方法二:内部自定义
- /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的值,
示例:
- 如果值为
空
,则文章路径为http://[域名]/[slug]
- 如果为
post
,则文章路径为http://[域名]/post/[slug]
6. Notion字段名自定义
可以让你的Notion模板变成中文的表头和中文的下拉框。
7. 自定义菜单(二级菜单)
在V3.13.0版本起,所有版本支持自定义菜单,效果如下:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F6fe42db8-3e4f-418c-a22a-efdcec7d051f%2FUntitled.png?table=block&id=eff8db5b-0cb1-4005-9214-9a90d9a538b5&t=eff8db5b-0cb1-4005-9214-9a90d9a538b5&width=576&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc072e154-9932-4a0c-8416-8d38d243685b%2FUntitled.png?table=block&id=cebd5c7d-d005-452c-b705-f78dfab8b84b&t=cebd5c7d-d005-452c-b705-f78dfab8b84b&width=1850&cache=v2)
请访问以下链接获取配置帮助:
8. 伪静态
网站使用NextJS开发,用户访问到的页面本身就是静态页面。
NotionNext会将页面缓存一定的
时间
,超过此时间后,NotionNext会从Notion同步最新的文章内容。缓存时间
通过修改NEXT_REVALIDATE_SECOND
配置。另外,将
PSEUDO_STATIC
的值修改为 true后,页面的地址最后会以.html结尾,看上去会更像一个静态页面。9. 其它样式
博客列表展现形式
您可以选择,使用按钮分页,还是滚动鼠标无限加载分页;
设置每页展示的文章数量。
设置在列表页是否展示文章内容,还是只是展示标题和摘要。
博客列表排序
代码渲染样式
修改 PRISM_THEME_PATH 参数 可以更换主题风格,可以访问prism-themes主页获取可选的主题。
修改 CODE_MAC_BAR 参数可以控制代码左上角是否显示 红黄绿三个图标,模仿mac的样式。
修改CODE_LINE_NUMBERS值为true,则代码最左侧将显示行号。(显示行号后代码将禁用横向滚动)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fbc77ba60-b82b-447b-959d-af67d72a9bae%2FUntitled.png?table=block&id=d381e6e5-a714-4595-974a-a6036cf79b19&t=d381e6e5-a714-4595-974a-a6036cf79b19&width=834&cache=v2)
左右布局颠倒
hexo主题下默认排版是:文章显示在左,站点信息显示在右,通过修改
LAYOUT_SIDEBAR_REVERSE
为true,将排版调整为 文章显示在右,站点信息显示在左鼠标点击特效
动态背景特效
Notion隐私安全
您共享的Notion页,他人只有查看权限,除非你手动开启编辑和评论的权限。
另外,若您不希望别人访问到你的源Notion页面,可选择关闭Noton页面共享,然后通过Notion的access_token进行数据访问。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fed9b0bbc-ecdc-4414-be40-650fc114caa4%2FUntitled.png?table=block&id=a98b3480-3eab-49d4-a1c4-f5deb2bd26e1&t=a98b3480-3eab-49d4-a1c4-f5deb2bd26e1&width=384&cache=v2)
Loading...
Last update: 2023-02-10