本博客是基于notion-nex搭建,主题使用hexo改造的。
memos是说说插件,也可以理解为类似朋友圈插件
建议仔细阅读
这里使用notionNext版本是4.7.11
Node版本:20.7.0
📝 导航
改动文件:添加和修改的文件
1.增加新的页面路由
1. 在项目根目录 /pages文件夹中新建一个名为memos的文件夹,并在文件夹中创建一个名为Index.js的文件夹
2. 在pages目录下memos/index.js添加以下代码
在4.7.11版本中,使用的是DynamicLayout动态布局
2.主题配置增加新页面的主题索引
在 blog.config.js 文件的 LAYOUT_MAPPINGS中增加路径 /memos 的组件映射
NotionNext 4.3版本才支持LAYOUT_MAPPINGS配置,如果不是这个版本,修改更复杂些,需要自己到themes/theme.js中修改对应的映射,建议升级到4.7.11版本。
即添加以下代码到指定位置:
然后在blog.config.js指定位置,添加以下环境变量配置:
在blog.config.js文件中增加:
3.主题的代码修改,增加Memos模块
hexo-change
这是hexo主题,我这里只是复制了一份进行修改的
建议将你选定的主题复制一份出来,重命名为自己的名字(比如我复制了hexo主题文件夹并命名为chenge),然后将主题切换为自己的主题,后续的主题修改就都在自己创建的主题中,不会和NotionNext官方的更新冲突。
创建:CatHeader.js
创建 MemosBlog.js 文件
新增一个MemosBlog组件,专门用于呈现Memos内容。我的路径是 themes/chenge/components/MemosBlog.js,你按照自己的主题找对应位置即可。
然后在hexo-change主题目录下index文件中,引入对应的组件
然后在themes\hexo-change\index.js文件中的文章详情或者其他位置增加代码:
在themes\hexo-change\index.js文件底部暴露LayoutMemos
3.1引入静态资源
由于MemosBlog组件中引入了外部资源,如一些外部的css和js样式来实现说说页的样式和动态加载,需要将对应的这些文件分别放入public文件夹下。
- CSS文件,放在public/css文件夹下:
- highlight.github.min.css、img-shadow.css、memos.css
- public\js
- highlight.min.js、lazyload.min.js、marked.min.js、moment.min.js、moment.twitter.js、view-image.min.js
头像:
1. 在项目根目录 /pages中新建一个名为Memos的文件夹,并在文件夹中创建一个名为Index.js的文件夹
memos.js
这里需要注意:我在MemosGallery中的图片爬取就是在memos服务中发布的,这里需要增加过滤条件,来排除大量图片,在memos中大量图片我使用的标签是#images,看个人需求了。
4.在Notion Blog Database新建Memos菜单
在notion模板中修改:
增加memos路径和对应参数
效果:
📎 参考文章
- 参考memos引入教程:https://chenge.ink/article/post20240302-1
- memos.top:https://github.com/eallion/memos.top
本地调试 env配置:
.env、.env.local、.env.prod,优先级不同,本地调试可以自行选择,这些文件可以不提交到仓库
导航页是否需要背景图:
修改:themes\hexo-change\index.js
之前是注释的那部分: