I never wrote things down to remember; I always wrote things down so I could forget. — Matthew McConaughey
WordPress, typecho, Ghost, drupal, dokuwiki, hugo, hexo, Jekyll 还有blogger,Tumblr等等,这些我都有用过,其中hugo目前也还在用。CMS是内容管理系统,而博客是根据更新时间倒序的文章列表。
使用Notion更像是一个CMS。或者用一个洋气的词,
Digital Garden
在花园里,事情发生的先后顺序是无关紧要的。在一个精心设计的花园里,“桥是在这些树之后建造的吗? ”这个问题是毫无意义的琐事。它们以一种相对没有时间限制的方式彼此关联呼应。
来源 ⇒ https://www.notion.so/Digital-Garden-effa3aa294af4d07ac279e74aec69602
当前使用模板是
不过我做了一些修改。
- 将右上角的Github repo链接删除了,右边的social icon都删除了
- 将首页的主要文章列表页面修改了类似Notion的Gallery模式,更喜欢这个样式
- 使用了Typekit的字体,思源黑体和思源宋体
- 将没有定义好链接的页面URL全部使用pageID,这样网页的URL不会发生改变。
![亮色主题](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd438f9ea-c9ef-4898-ab16-bc9242467f4e%2F44011975-fd8d-47b1-89d7-ef219c51b614%2FUntitled.png%3Fid%3Df4b80fcb-36b8-4689-8b4e-206db70ef6d2%26table%3Dblock%26spaceId%3Dd438f9ea-c9ef-4898-ab16-bc9242467f4e%26expirationTimestamp%3D1722060000000%26signature%3D0EaxsGa3blZoX0qYFfX8l-ds4-cqgFhpwW-Y19ZNx8E?table=block&id=f4b80fcb-36b8-4689-8b4e-206db70ef6d2&cache=v2)
使用Notion作为博客的好处
- 格式更自由,根据Notion的方式整理信息结构,更像一个CMS,更加自由,(不过现在这个模板没有标签功能)
- 记录更简单,不需要使用Git,创建Markdown文件,git add,commit,push,等待编译,打开Notion的客户端,就可以修改。不过也丢失了修改历史记录(Notion保存30天历史记录),书写更简单,所以可以写更多。
- 免费够用,作为一个个人网站基本需要的功能也能实现。
下面记录我对 nextjs-notion-starter-kit 的修改
现在博客的问题
Notion的feature image可以直接应用Splash的图片,添加起来非常方便,不过图片太大,导致页面载入太慢,尝试配置这个模板LQIP
(即低质量图片预览)时失败。
- 内容注入:也不知道用一个什么词形容这个好,因为现在这套程序会按需重新生成,外部浏览者只要访问并非你workspace下面的页面id,也会可以在你的域名下生成无关内容,所以一定要设置
rootNotionSpaceId
,这个参数。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd438f9ea-c9ef-4898-ab16-bc9242467f4e%2Fc3efb765-eced-420e-910f-566061bd2241%2FUntitled.png%3Fid%3Db0721743-3936-40b4-98bc-76503bde15f3%26table%3Dblock%26spaceId%3Dd438f9ea-c9ef-4898-ab16-bc9242467f4e%26expirationTimestamp%3D1722060000000%26signature%3DsmV6bXGbSNaX7-KkVLlk2SSiMNpDtwaiwTSRyo1X3NI?table=block&id=b0721743-3936-40b4-98bc-76503bde15f3&cache=v2)
设置
rootNotionSpaceId
参数浏览器打开notion,定位到博客首页(notion后台)的页面,打开chrome浏览器开发者工具(按浏览器页面F12),定位到网络,选择fetch标签。再访问另一个页面,随便找一个请求一般都能看到json中的
space_id
的信息。![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd438f9ea-c9ef-4898-ab16-bc9242467f4e%2Fdc1262d0-2bb5-4019-b7f5-271cc6f49ef1%2FUntitled.png%3Fid%3D3fd5cac4-b0f9-4e29-936c-e62eb4abb065%26table%3Dblock%26spaceId%3Dd438f9ea-c9ef-4898-ab16-bc9242467f4e%26expirationTimestamp%3D1722060000000%26signature%3Dqp129y9hWVFsOJSqHpzmacp380NaisdO8pylz575t1E?table=block&id=3fd5cac4-b0f9-4e29-936c-e62eb4abb065&cache=v2)
Notion的cover image使用的unsplash图片源可以很方便的添加处理参数。参见 https://docs.imgix.com/apis/rendering/size/w
我用Javascript在页面载入后马上执行添加图片参数的方式,减少图片下载体积。
export const resizeCover = () => { //针对表格中封面小图片,宽度设置成640px var imgs = document.querySelectorAll("div.notion-collection-card-cover>img[src*='https://images.unsplash.com']"); imgs.forEach(function(item) { item.src=item.src+"&fit=clip&w=640"; }); //针对网页头部的特色图片,图片宽度设置成1200px var imgs = document.querySelectorAll("img.notion-page-cover[src*='https://images.unsplash.com']"); imgs.forEach(function(item) { item.src=item.src +"&fit=clip&w=1200"; }); console.log("image resizing on route changes."); }