【database渲染效果】页面内database渲染效果优化建议

[siuze]

为什么提出这个新的特性改动

1. 页面内database的title处icon显示异常

2. 选择隐藏database的title后，在博客页面渲染时仍会显示

3. database内页面数超过load limit时不会自动折叠，影响阅读。

notion下：

博客内：

4. database在gallery视图下，无插图的page没有对应的文字预览效果

notion下：

博客内：

4. database内的page无法作为内部引用的链接进行跳转
就是database视图下的page都不能点开，无法作为子页面跳转，gallery和table视图都不行。似乎在网页没有完全渲染好的时候是可以点开的。作者大大可能是期望其作为单纯的照片集展示或表格展示所以不支持转跳，未来是否考虑可选地支持转跳，实现类似内部引用的功能？

描述一下你推荐的解决方案
参照notion处的渲染效果，实现：

• database的icon渲染；
• database title的可隐藏；
• database内page数量超过load limit时的“load more”下拉条
• database在gallery视图下，page无插图时的文字预览效果
• database的page可选支持点击转跳

描述一下你考虑过的其它替代解决方案
无

补充说明
无

[tangly1024]

嗨，感谢你的反馈，database的渲染支持目前不是很完善，将在后续的版本中改进。

[siuze]

对于第一个问题，我简单检查了一下，发现是数据库icon图片链接中的参数不被notion接受，所以获取不到图片。

错误定位

• components\NotionPage.js文件内，post.blockMap.block数据中，数据库icon的block虽然有自身id，并被添加到图片链接的参数中，但实际上这个icon图片链接的id参数需要填写对应的数据库ID（collection_id） 才行，而不是自身的。
• 同时数据库icon图片链接的block参数需要写为collection而不是table

临时解决方案

目前我自己通过遍历检查和替换的方式暂时修复了这个问题，虽然做法有点傻。

在components\NotionPage.js 的NotionPage组件函数return前添加以下代码：

  if (post.blockMap.block) {
    const keys = Object.keys(post.blockMap.block).reverse()
    let collectionId = null
    for (let index = 0; index < keys.length; index++) {
      console.log(post.blockMap.block[keys[index]])
      if (post.blockMap.block[keys[index]].value && post.blockMap.block[keys[index]].value.collection_id) {
        collectionId = post.blockMap.block[keys[index]].value.collection_id
      }
      if (post.blockMap.block[keys[index]].value && post.blockMap.block[keys[index]].value.type && !(post.blockMap.block[keys[index]].value.collection_id)) {
        if (post.blockMap.block[keys[index]].value.type === 'collection_view' && collectionId) {
          console.log(post.blockMap.block[keys[index]])
          post.blockMap.block[keys[index]].value.id = collectionId
          collectionId = null
          console.log('修改一处collection icon')
          console.log(post.blockMap.block[keys[index]])
        }
      }
    }
  }

在lib\notion\mapImage.js内mapImgUrl组件函数内开头处添加如下代码：

  if (block && block.type === 'collection_view') {
    type = 'collection'
  }

修复原理

因为数据库icon的block内有以下特征：

• block内 value.type === 'collection_view'
• block.value下没有collection_id字段

而这个icon对应的数据库信息collection_id不在自身的block数据里面，必须去之后的block里面找。
我就倒序遍历一下，先记录collection_id然后把icon的id替换成collection_id就好了。

至于更加深层次的原因暂时还没研究。

修复前渲染效果：

修复后渲染效果：