004.搭建一个基于notion的个人网站2.0
👨🏻‍💻

004.搭建一个基于notion的个人网站2.0

创建时间
May 12, 2022 05:20 AM
标签
导航栏
留言板
点击统计
简介:
基于001文章的2.0版本更新。
状态
已归档
是否完成
是否完成
Property

说在前面

 
听闻原作者有了更新(作者地址:https://github.com/transitive-bullshit/nextjs-notion-starter-kit)预览网页:https://transitivebullsh.it/,去看了下github的分叉,用的是一个韩国老哥的库,(地址在这里:https://github.com/hanmilLee/nextjs-notion-starter-kit)预览网页:https://hmdev.vercel.app/
 

几个变化

可以说是重磅效果:

终于有了导航栏

PC
notion image
安卓:
notion image
导航栏此次在site.config.ts文件内
这几行
notion image
注意中间有个逗号相隔
实测手机端体验良好导航栏标题不要超过三个。

文章内的留言板

留言板复制完库后,登录github要求安装,自动跳转到https://utteranc.es/?installation_id=25639318&setup_action=install 点击安装就可以了

底部左下的点击统计

点击统计使用的是https://hits.seeyoufarm.com/
具体代码在components/Footer.tsx 内
在hit网页输入你的域名链接,注意要带https://
notion image
里面的内容copy到上面文件内的
notion image
需要注意的是,尾段的=false需要改为ture
如下:
notion image
 

需修正处

在components/PageHead.tsx内
此处暴露了原作者的GA ID
notion image

我们可以修正为自己的GA ID

(什么是GA ID?Google Analytics 中文名称“谷歌分析”,是谷歌官方发布的一款网站流量统计分析工具,也是同类型SEO工具中功能最强大的那一个,没有之一,具体可以看这篇文章
有谷歌账号即可
地址:https://analytics.google.com/
注册添加
在数据流添加一个网页数据流
notion image
添加网页地址与名称可以生成如下ID
notion image
将G-**********的字段与下图位置替换。
notion image

如不需要GA ID

可将G-*******字段用${config.GAId}替换
notion image
先写到这。其他内容可参考这一篇
👨🏻‍💻
001.搭建一个基于notion的个人网站