Notion搭建个人网站,我踩过的坑,你就别再碰雷了!

之前写过一篇使用 Notion 搭建个人网站的文章,介绍了用Get 一个个人网站的方法,感兴趣的朋友可以戳下方的链接:https://www.issjw.com/ziyuan/2148.html

但当时写得比较匆忙,搭出来的个人网站存在一些小问题。

说实话,最开始看到一些网友提出的问题,我也不知道如何解决,有些只能瞎猜或者靠「试」,因为搭建网站用到的代码不是我写的,而且我也不懂代码,整个搭建过程也只是对其中的一些代码进行修改,只见树木,不见森林。

回到正题上来,今天的这篇文章,想写一下用 Notion 搭建网站遇到的两个小问题及我找到的解决方法,方法有用,但可能不是最优。

01. 更改网站图标

搭建网站用到的代码,是来自 GitHub 上的一位开发者 transitive-bullshit,用了他的代码之后,我们创建出来的网站,使用的图标依然还是原作者的,如下图所示的浏览器标签页名称所带的图标。

Notion搭建个人网站,我踩过的坑,你就别再碰雷了!插图

那如何将这个图标更改为我们自己喜欢的图片呢?

要回到我们在 GitHub 上创建的仓库「nextjs-notion-starter-kit」,进入存放网站图标的文件夹public。

Notion搭建个人网站,我踩过的坑,你就别再碰雷了!插图1

文件夹中存放的是网站图标和相关的配置文件,下图选中的图像文件 png 和 ico,就是我们最终看到的网站图标,这些图像文件长得都一样,区别在于图标的尺寸。

最直接的更换网站图标的方法,就是上传相同尺寸、相同格式和相同文件名的图片,替换掉现有的文件。

Notion搭建个人网站,我踩过的坑,你就别再碰雷了!插图2

如果你觉得上传 8 张图片太麻烦,那么可以先打开下面的 mainfest.json 文件,修改配置文件的内容,减少需要上传的图片。

Notion搭建个人网站,我踩过的坑,你就别再碰雷了!插图3

点击配置文件右上角的编辑按钮,进入编辑模式,下方的 icons 中的内容,就是用来配置网站图标的内容。

你看到的内容应该和下图的内容是不一致的,因为我删掉了部分配置信息,只留下了 3 张图片,分别是 16x16、32x32、96x96 三种尺寸的 favicon 图片。

这里你可以根据自己的需要,删除部分不必要的配置信息,减少所需要上传的图片数量。

Notion搭建个人网站,我踩过的坑,你就别再碰雷了!插图4

编辑好配置文件后,滑动到页面下方,点击绿色的 Commit changes 按钮,确认(提交)刚作出的修改。

Notion搭建个人网站,我踩过的坑,你就别再碰雷了!插图5

回到 public 文件夹,根据前面对配置文件作出的修改,我们要先删除文件夹中已有的 3 张图片,再上传我们自己喜欢的图片,作为网站的图标。

以其中一张图片 favicon-16x16.png 为例,进入图片文件的详情页,点击右侧的垃圾桶图标,就可以删除这张图片。

Notion搭建个人网站,我踩过的坑,你就别再碰雷了!插图6

删除图片后,会回到 public 文件夹路径下,点击右上角的 Add file >> Upload files,从本地上传图片到 public 文件夹,此时上传的图片文件名应与前面删除的文件一致,同为 favicon-16x16.png。

Notion搭建个人网站,我踩过的坑,你就别再碰雷了!插图7

前面演示了替换其中一个网站图标的过程,剩下的两个也是遵循类似的操作,这里就不赘述了。

3 个网站图标文件替换之后,在浏览器中打开 Notion 搭建的网站,就可以看到,标签页标题中的图标(网站图标)就变成了自己喜欢的图片。

Notion搭建个人网站,我踩过的坑,你就别再碰雷了!插图8

02. 更改 GitHub 图标的链接

在搭建的网站右上角有一个 GitHub 图标,这个图标设置了超链接,点击图标,会跳转到网站代码原作者 transitive-bullshit 的 GitHub 仓库。

Notion搭建个人网站,我踩过的坑,你就别再碰雷了!插图9

那如果我们想把这个图标的超链接更改为自己的 GitHub 仓库,应该怎么操作呢?

同样是回到网站的 GitHub 仓库,打开文件夹components,找到名为 GitHubShareButton.tsx 并打开。

Notion搭建个人网站,我踩过的坑,你就别再碰雷了!插图10

进入文件详情页之后,点击右上角的编辑按钮,下方的 href 属性的值,就是点击 GitHub 图标之后打开的网站,将这个网址更改为自己的 GitHub 仓库,这样当你点击网站右上角的 GitHub 图标,就会跳转到自己的 GitHub 仓库。

Notion搭建个人网站,我踩过的坑,你就别再碰雷了!插图11

写在最后

对我这种不懂代码的半吊子来说,在别人写好的代码的基础上修改代码,虽然可以比较快地搭建出网站,但由于自己并没有深入理解网站的逻辑或者代码背后的含义,导致后期在自定义网站信息,甚至是扩展网站的功能方面,总是显得束手束脚,要花费比较多的心思或时间。

没人和我一起来折腾,感觉遇到的很多问题都很难,不少难题还被我选择性地抛弃在了原地,直到我下一次再遇见它。

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:1411156739@qq.com
THE END
分享
二维码
打赏
< <上一篇
下一篇>>