最新博客CMS的选择 - Notion
📝

最新博客CMS的选择 - Notion

Tags
Date
Jul 3, 2021
Created
May 16, 2021 07:09 AM
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
当前使用模板是
 
不过我做了一些修改。
  1. 将右上角的Github repo链接删除了,右边的social icon都删除了
  1. 将首页的主要文章列表页面修改了类似Notion的Gallery模式,更喜欢这个样式
  1. 使用了Typekit的字体,思源黑体和思源宋体
  1. 将没有定义好链接的页面URL全部使用pageID,这样网页的URL不会发生改变。
亮色主题
亮色主题
 

使用Notion作为博客的好处

  1. 格式更自由,根据Notion的方式整理信息结构,更像一个CMS,更加自由,(不过现在这个模板没有标签功能)
  1. 记录更简单,不需要使用Git,创建Markdown文件,git add,commit,push,等待编译,打开Notion的客户端,就可以修改。不过也丢失了修改历史记录(Notion保存30天历史记录),书写更简单,所以可以写更多。
  1. 免费够用,作为一个个人网站基本需要的功能也能实现。
 
下面记录我对 nextjs-notion-starter-kit 的修改

 

现在博客的问题

  1. Notion的feature image可以直接应用Splash的图片,添加起来非常方便,不过图片太大,导致页面载入太慢,尝试配置这个模板LQIP(即低质量图片预览)时失败。
  1. 内容注入:也不知道用一个什么词形容这个好,因为现在这套程序会按需重新生成,外部浏览者只要访问并非你workspace下面的页面id,也会可以在你的域名下生成无关内容,所以一定要设置rootNotionSpaceId,这个参数。
 
notion image
设置rootNotionSpaceId参数
浏览器打开notion,定位到博客首页(notion后台)的页面,打开chrome浏览器开发者工具(按浏览器页面F12),定位到网络,选择fetch标签。再访问另一个页面,随便找一个请求一般都能看到json中的space_id的信息。
notion image
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.");
}
用JavaScript添加unsplash图片源的处理参数
 

Loading Comments...