Magzine主题

category
tags
type
status
slug
date
password
Last edited time
Sep 14, 2024 08:08 AM
summary
icon
💡
新主题,需要升级到V4.7.1之后的版本才能使用
桌面端
桌面端
移动端
移动端

首页说明

这个主题的风格更偏向简约、扁平、专业化。同时首页将文章按照分类栏目陈列,展示逻辑更加清晰。

首屏更加突出重点:

  1. Notion中的第一篇文章作为置顶,会放大展示在左上角最显眼处侧。
  1. 右侧上方是一个宣传位,可以配置标语和跳转的按钮,可以在config.js中找到对应的配置名,并借助NOTION_CONFIG在notion中配置。
  1. 右侧下方显示的是Notion中排第二和第三的文章
notion image

接下来是最新文章栏目:

Notion中排名靠前的文章,除了首屏展示的文章,剩下的依次排列在这里,最多展示4个,点击查看全部则跳转到归档页面,从而按照发布时间查看所有文章。

接下来是分类栏目:

将所有的文章按照分类分组,依次排列,一行就是一组分类的文章,点击全部则是查看这个分类下全部的文章。
notion image

接下来是推荐文章

这里默认显示标题为“推荐文章”,这里的文章默认获取标签包含“推荐”的文章,这里的标题和标签可以自行配置,在config.js中可以找到。
例如你可以设置为“热门文章”,并且读取Notion中标签包含“hot”的文章。
notion image

然后是公告

公告在Notion中用Notice编辑,这里公告的背景色是绿色,暂时无法通过配置修改,可以通过css样式的方式自行微调。
notion image

然后是页脚

黑色背景的页脚,左侧显示作者信息和网站标题,右侧是自定义的导航菜单,例如友情链接等可以放在这里,菜单是分组的,顶部显示分组名下方陈列菜单名称,点击可以跳转。这些链接需要在config.js中配置,后面会展开说明配置方法。
 

文章详情页面说明

文章详情页,首屏从上往下依次显示分类标签,标题,摘要,封面图。
notion image
文章页向下滚动,第二屏中间是文章内容,左侧是目录,右侧上方是发布事件,中间是最近更新的文章(根据修改时间排列在这里,而非创建时间)
notion image
 
文章页再往下滚动,会显示分类导航,以及交流卡片,交流卡片的文字和链接可以在config.js中配置。
 
notion image
再往下滚动,会显示一个宣传栏,左侧显示的是站点封面图,右侧显示的内容和主页右上角的广告内容一致。
notion image

配置部分

在/themes/magzine/config.js 中可以找到该主题支持的所有配置,主要内容和说明如下:
主题支持配置的相关代码,点击展开:

页脚菜单详细

页脚菜单结构是 [分组,分组,分组,…] 支持无数个分组。
分组对象内容是: { name:'标题',menus:[链接,链接,…]} ,name是组名,menus是这个分组下有几个链接。
链接对象内容是: { title:’链接显示标题’, href: ’https://tangly1024.com’} ,链接可以配置标题和跳转位置。
 

在Notion_Config中配置

这个菜单支持在Notion_Config中配置.(其实基本上所有配置都支持在Notion_Config中配置),不过因为这个参数是一个数组对象,因此要用JSON的形式配置:
配置示例如下,在Notion_Config中添加一个 MAGZINE_FOOTER_LINKS,即可
notion image
可以直接复制使用的模板配置 - 点击展开
直接复制这里的内容,粘贴到NOTION_CONFIG中的 MAGZINE_FOOTER_LINKS后面即可。
效果如下:
notion image

最后

这里赘述一下,如何将代码中config.js中的复杂对象配置转成json,可以借助AI,或者手动在代码中添加双引号:
notion image
用这种方式,基本上NotionNext中的所有配置都支持用NOTION_CONFIG来进行配置。
主题功能说明Simple主题
Loading...
Article List
✨ 更新日志
🚀 安装部署
✒ Notion教程
🛠 站点配置
⭐ 主题参数
📊 网站统计
📩 评论插件
🧷 外部扩展
⌨ 开发教程
🔊 运营教程
🤝 服务与合作
👨‍👦‍👦 联系我们