✨ 更新日志
🚀 安装部署
✒ 写作指引
🛠 站点配置
📊 网站统计
⭐ 主题配置
📩 评论插件
🧷 外部插件
🔊 站点订阅
⌨ 开发指引
👨👦👦 联系方式
🤝 购买服务
网站公告
category
tags
type
status
slug
date
password
Last edited time
Jan 31, 2024 08:15 AM
summary
icon
NotionNext 3.10以后的版本开始支持网站公告,欢迎更新体验。
添加公告后,在网站显眼的位置会固定一个页面的内容。公告内容可以是文字视频、内嵌网页等等,有很大的自定义空间。
公告效果
最新的3.14.0版本已经支持所有主题显示公告,效果如下。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd671337a-bfeb-4c03-83ce-e2a2ee704c8d%2FUntitled.png?table=block&id=773d85da-0aa6-4776-a905-17017444b1e6&t=773d85da-0aa6-4776-a905-17017444b1e6&width=912&cache=v2)
添加方式
前提
请升级至最新版本的NotionNext,参考升级操作指南:
推荐版本号>3.14.0,在此版本后,所有的主题都支持了公告功能的展示。
配置
添加一个Type(类型)为Notice的页面即可,此页面是唯一的,网站只能有一个公告。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9ee397f0-dd93-4dae-8163-58bb9a66a381%2FUntitled.png?table=block&id=882cd7be-ae12-4f54-b10a-23b5986ffa20&t=882cd7be-ae12-4f54-b10a-23b5986ffa20&width=1537&cache=v2)
公告内容示例
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F873670f6-0c92-4473-a105-5c9fa395aff4%2FUntitled.png?table=block&id=73bdb963-7b9f-4910-a9cb-3556d4db3166&t=73bdb963-7b9f-4910-a9cb-3556d4db3166&width=528&cache=v2)
特别说明
公告的排版,在notion中的文字默认居左对齐,但是在公告中显示时会默认居中。![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F3918ebf1-8914-44bf-9601-d4666ef7d8ea%2FUntitled.png?table=block&id=b778b8bd-b57f-4804-a9cd-b6477eea6e12&t=b778b8bd-b57f-4804-a9cd-b6477eea6e12&width=960&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F3918ebf1-8914-44bf-9601-d4666ef7d8ea%2FUntitled.png?table=block&id=b778b8bd-b57f-4804-a9cd-b6477eea6e12&t=b778b8bd-b57f-4804-a9cd-b6477eea6e12&width=960&cache=v2)
如需调整,可以到主题下对应的 Announcement.js 中修改 公告的样式。
![每个主题下都有一个公告组件](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F879f1443-7291-4a05-85b1-d3ce9ae119a9%2FUntitled.png?table=block&id=4a1cecaa-98f4-49c9-bbc7-6d131747dae1&t=4a1cecaa-98f4-49c9-bbc7-6d131747dae1&width=333&cache=v2)
- 相关代码
Loading...
Last update: 2023-05-25