主题功能说明

category
tags
type
status
slug
date
password
Last edited time
Feb 19, 2024 11:06 AM
summary
icon

主题功能介绍

NotionNext会扫描/themes目录下的文件夹,并根据文件夹的名字生成一个主题,只要在配置中将您的当前主题设置为对应文件夹名字即可,注意都是小写
notion image

主题预览

多达数十款主题风格任您挑选,其中有适合做技术文档的Gitbook主题(当前文档就是使用Gitbook主题),也有适合做导航站点的Nav主题,还有适合做产品落地页官网的Landing主题与Starter主题,以及适合做相册的Plog主题。
点击博客网页左下角的挂件可以在线切换主题。
notion image

主题目录构成

notion image
每个主题下都有四个部分组成,以example主题为例,目录下有四个元素:
  • components 组件文件夹,下面存放着主题用到的所有组件,项目采用react架构,所有的按钮模块都是单独的组件。
  • config.js 针对当前主题的配置
  • index.js 存放主题的基础布局和对应的路由关系
  • style.js 自定义的css样式
 

如何修改默认主题?

可以改变blog.config.js配置中THEME这一项的值;示例如下:
  • 方法1:改动github中的源代码:
    • 方法2 , 在vercel后台添加环境变量: NEXT_PUBLIC_THEME
      • 添加环境变量后记得在Deployment中重新部署
        添加环境变量后记得在Deployment中重新部署
    • 方法3: 使用Notion_config,在您的notion笔记中配置默认主题
     

    在线切换主题

    您可以像我的博客站一样,在页面上开启一个实时切换主题的按钮,以供预览;开启方式: 在blog.config.js中开启
    开启后效果如下:网页上会始终悬挂一个可以拖拽的面板,用于切换主题。
    notion image
     

    如何添加您的个性化主题

    您可以复制一个example文件夹到themes目录下,命名为您的主题名字,例如复制一个example文件夹,并且重命名为starter主题。
    notion image
    然后根据您的喜好调整 index.js 中的LayoutBase 基础布局;它是主题每个页面要用到的框架布局;其次您可以从各个其它主题中复制喜欢的components组件,把他放在当前主题的components目录下使用。
    从而搭配出您喜欢的主题。
     
    也欢迎您将自己开发设计的主题,通过PR的方式提交到NotionNext中央仓库中,提供给更多站友们使用。
    我为人人,人人为我。
    Ackee站点统计Hexo/Matery首页欢迎语配置
    • Twikoo
    • Giscus
    • Cusdis