NotionNext 使用说明

Appearance

网站公告 ​

迁移自：网站公告 发布日期：2023-5-25 最后编辑：2024-1-31 原栏目：🛠 站点配置 标签：NotionNext 摘要：NotionNext在3.10以后的版本中支持在网站中挂一个公告栏，此功能在3.14版本中完善，所有主题都已支持公告。

💡 NotionNext 3.10以后的版本开始支持网站公告，欢迎更新体验。 添加公告后，在网站显眼的位置会固定一个页面的内容。公告内容可以是文字视频、内嵌网页等等，有很大的自定义空间。

公告效果 ​

最新的3.14.0版本已经支持所有主题显示公告，效果如下。

Untitled

添加方式 ​

前提 ​

请升级至最新版本的NotionNext，参考升级操作指南：

NotionNext升级操作指南 | TANGLY’s BLOG

当NotionNext发布新版后，如何更新你的项目？

推荐版本号>3.14.0，在此版本后，所有的主题都支持了公告功能的展示。

配置 ​

添加一个Type（类型）为Notice的页面即可，此页面是唯一的，网站只能有一个公告。

Untitled

公告内容示例 ​

Untitled

特别说明 ​

公告的排版，在notion中的文字默认居左对齐，但是在公告中显示时会默认居中。

Untitled

如需调整，可以到主题下对应的 Announcement.js 中修改 公告的样式。

每个主题下都有一个公告组件

  • 相关代码
HTML
<div className={className}>
    <section id='announcement-wrapper' className="dark:text-gray-300 border dark:border-black rounded-xl lg:p-6 p-4 bg-white dark:bg-hexo-black-gray">
        <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div>
        {post && (<div id="announcement-content">
        <NotionPage post={post} className='text-center' />
    </div>)}
    </section>
</div>

原文链接 ​

https://docs.tangly1024.com/article/notionnext-notice