- 01. 更改网站图标
- 02. 更改 GitHub 图标的链接
- 写在最后
- 欢迎关注
本文首发于「 效率工具指南」
文/彭宏豪，笔名/安哥拉
Hello 大家好，我是安哥。
之前写过一篇使用 Notion 搭建个人网站的文章，介绍了 0 支出 Get 一个个人网站的方法，感兴趣的朋友可以戳下方的链接：
Notion免费搭建个人网站，使用Notion又多了一个理由
但当时写得比较匆忙，搭出来的个人网站存在一些小问题，后来也有一些网友看了我写的文章，加了微信来询问这些小问题该如何解决。
说实话，最开始看到一些网友提出的问题，我也不知道如何解决，有些只能瞎猜或者靠「试」，因为搭建网站用到的代码不是我写的，而且我也不懂代码，整个搭建过程也只是对其中的一些代码进行修改，只见树木，不见森林。
回到正题上来，今天的这篇文章，想写一下用 Notion 搭建网站遇到的两个小问题及我找到的解决方法，方法有用，但可能不是最优。
01. 更改网站图标
搭建网站用到的代码，是来自 GitHub 上的一位开发者 transitive-bullshit，用了他的代码之后，我们创建出来的网站，使用的图标依然还是原作者的，如下图所示的浏览器标签页名称所带的图标。
那如何将这个图标更改为我们自己喜欢的图片呢？
要回到我们在 GitHub 上创建的仓库「nextjs-notion-starter-kit」，进入存放网站图标的文件夹 📁 public。
文件夹中存放的是网站图标和相关的配置文件，下图选中的图像文件 png 和 ico，就是我们最终看到的网站图标，这些图像文件长得都一样，区别在于图标的尺寸。
最直接的更换网站图标的方法，就是上传相同尺寸、相同格式和相同文件名的图片，替换掉现有的文件。
如果你觉得上传 8 张图片太麻烦，那么可以先打开下面的 mainfest.json 文件，修改配置文件的内容，减少需要上传的图片。
点击配置文件右上角的编辑按钮，进入编辑模式，下方的 icons 中的内容，就是用来配置网站图标的内容。你看到的内容应该和下图的内容是不一致的，因为我删掉了部分配置信息，只留下了 3 张图片，分别是 16x16、32x32、96x96 三种尺寸的 favicon 图片。
这里你可以根据自己的需要，删除部分不必要的配置信息，减少所需要上传的图片数量。
编辑好配置文件后，滑动到页面下方，点击绿色的 Commit changes 按钮，确认（提交）刚作出的修改。
回到 public 文件夹，根据前面对配置文件作出的修改，我们要先删除文件夹中已有的 3 张图片，再上传我们自己喜欢的图片，作为网站的图标。以其中一张图片 favicon-16x16.png 为例，进入图片文件的详情页，点击右侧的垃圾桶图标，就可以删除这张图片。
删除图片后，会回到 public 文件夹路径下，点击右上角的 Add file >> Upload files，从本地上传图片到 public 文件夹，此时上传的图片文件名应与前面删除的文件一致，同为 favicon-16x16.png。
前面演示了替换其中一个网站图标的过程，剩下的两个也是遵循类似的操作，这里就不赘述了。
3 个网站图标文件替换之后，在浏览器中打开 Notion 搭建的网站，就可以看到，标签页标题中的图标（网站图标）就变成了自己喜欢的图片。
02. 更改 GitHub 图标的链接
在搭建的网站右上角有一个 GitHub 图标，这个图标设置了超链接，点击图标，会跳转到网站代码原作者 transitive-bullshit 的 GitHub 仓库。
那如果我们想把这个图标的超链接更改为自己的 GitHub 仓库，应该怎么操作呢？
同样是回到网站的 GitHub 仓库，打开文件夹 📁 components，找到名为 GitHubShareButton.tsx 并打开。
进入文件详情页之后，点击右上角的编辑按钮，下方的 href 属性的值，就是点击 GitHub 图标之后打开的网站，将这个网址更改为自己的 GitHub 仓库，这样当你点击网站右上角的 GitHub 图标，就会跳转到自己的 GitHub 仓库。
写在最后
对我这种不懂代码的半吊子来说，在别人写好的代码的基础上修改代码，虽然可以比较快地搭建出网站，但由于自己并没有深入理解网站的逻辑或者代码背后的含义，导致后期在自定义网站信息，甚至是扩展网站的功能方面，总是显得束手束脚，要花费比较多的心思或时间。
没人和我一起来折腾，感觉遇到的很多问题都很难，不少难题还被我选择性地抛弃在了原地，直到我下一次再遇见它。
欢迎关注
效率工具指南：分享推荐效率工具，好的产品值得被更多人知道。
以上就是本次想和你分享的内容。
看完文章如果觉得对你有帮助的话，别忘了点击底部的「点赞/在看」鼓励一下我，谢谢。
若有收获，就点个赞吧
0 人点赞
