这里写文章的前言:
一个简单的开头,简述这篇文章讨论的问题、目标、人物、背景是什么?并简述你给出的答案。
可以说说你的故事:阻碍、努力、结果成果,意外与转折。
准备工作
notion-next:4.7.11
memos:v0.23.0
📝 导航
改动的文件:
增加新的页面路由
1. 在项目根目录 /pages文件夹中新建一个名为memos的文件夹,并在文件夹中创建一个名为Index.js的文件夹
2. 在pages目录下memos/index.js添加以下代码
主题配置增加新页面的主题索引
在 blog.config.js 文件的 LAYOUT_MAPPINGS中增加路径 /memos 的组件映射
NotionNext 4.3版本才支持LAYOUT_MAPPINGS配置,如果不是这个版本,修改更复杂些,需要自己到themes/theme.js中修改对应的映射,建议升级到4.7.11版本。
添加以下代码到指定位置:
然后在blog.config.js指定位置,添加以下环境变量配置:
在blog.config.js文件中增加:
主题的代码修改,增加Gallery模块
hexo-change
这是hexo主题,我这里只是复制了一份进行修改的
建议将你选定的主题复制一份出来,重命名为自己的名字(比如我复制了hexo主题文件夹并命名为chenge),然后将主题切换为自己的主题,后续的主题修改就都在自己创建的主题中,不会和NotionNext官方的更新冲突。
创建 MemosGallery.js 文件
新增一个MemosGallery组件,专门用于呈现Memos标签为images中图片url内容。我的路径是 themes/chenge/components/MemosGallery.js,你按照自己的主题找对应位置即可。
然后在hexo-change主题目录下index文件中,引入对应的组件
然后在themes\hexo-change\index.js文件中的文章详情或者其他位置增加代码:
在themes\hexo-change\index.js文件底部暴露LayoutMemosGallery
引入静态资源文件
由于MemosGallery组件中引入了外部资源,如一些外部的css和js样式来实现说说页的样式和动态加载,需要将对应的这些文件分别放入public文件夹下。
public\js\gallery\data.js
public\js\gallery\imgStatus.min.js
public\js\gallery\lately.min.js
public\js\gallery\gallery.js
public\css\MemosGallery.css
在Notion Blog Database新建Gallery菜单
在notion模板中修改:
增加gallery路径和对应参数
图标:
效果图:
📎 参考文章
memosv0.23.0 api接口有改动,旧版本的接口有所不同
其中过滤条件很其他,跟通常传参有区别
欢迎您在底部评论区留言,一起交流~