Lazy loaded image
如何使用Notion【无代码】搭建自己的主页
00 分钟
2023-5-31
2024-12-17
ID
type
category
date
pre-til-slug
slug
summary
tags
status
Created time
May 30, 2023 03:49 PM
Last edited time
Dec 17, 2024 01:58 PM
icon
password
URL

 
在两天前突然有了想搭建自己个人博客的念头,于是在耗费两天时间整理设计,初步搭成了自己的个人主页。
notion image
一开始只是希望能够把自己的电子书库分享给朋友们,进而想到何不干脆建立一个自己的主页呢?刚好在自己的地方分享自己喜欢的文章、书籍、电影、软件等等。
Notion 有分享到互联网的功能,而且模块可以自由组合,我自己的书库和写作也都在这里,可以很方便地进行引用,除了分享出去网页链接很长,基本上没有什么问题。
上网搜了一些关于个人博客的搭建,买域名、html 代码、css 样式,对我来说必要性都不是很强,太麻烦了,使用 Notion 搭建个人博客简单很多很多,而且免费,非常推荐。
下面我来说一下自己的主页搭建过程。

我的主页设计

先给大家看一下我的主页整体样式:
notion image
在思考建立主页的的过程中,因为不清楚博客样式,去网上搜索了很多别人的博客,但其他人主要是使用前端代码了,所以样式都很漂亮。看了一些之后,发现其实主要是要确定自己主页要展示的内容。
我很确定【书库】是必须要在其中的,然后或许可以加上自己写的【文章】,看大家都有一个【联系方式】,那这个也加上,【目录导航】非常必要,是很好区分内容的方式,剩下就是一些【装饰零碎】的片段。空闲时搜索 Notion,在知乎上看到嵌入的小组件,所以连装饰问题也解决了。
总结下来我需要的模块:
  • 书库
  • 文章
  • 导航目录
  • 联系方式
  • 装饰自由发挥
  • 其他模块
所以就按照以上内容调整区域和建立数据库视图就OK了。

我的主页搭建

在看了十几个他人的博客主页,决定增加几项小组件。
  • 开头的欢迎
  • 想要知道主页的浏览量
  • 末尾的点赞功能
  • 音乐
  • 一些装饰图片

装饰模块

小组件使用 Notionpet,直接复制链接 embed 进来。是在过于简单,我把网址放在下面就不教了。
🌰 拿音乐模块举个例子:
  1. 进入网页选择一个小组件,修改配置后,复制链接。
notion image
  1. 粘贴到 Notion 中,选择 Create embed
notion image
  1. 等待小组件加载完成。

目录模块

使用 Callout 块建立目录,新建不同 Page 拖动到目录中,修改目录块颜色,over。
notion image
notion image

联系我模块

使用 Callout 块添加联系方式和超链接,最后整合到一个块中。
notion image

书库&文章模块

我自己有一个电子书库,此时只需要链接过来,然后调整视图,使用 Filter 筛选,使用 Sort 排序,使用 Properties 选择显示的属性。
notion image
 

我的主页使用指南

页面搜索

点击这里的Search 可以在页面内全局搜索
notion image

主页切换

导航栏的Home 可以选择主页的视图。
notion image
 

目录使用

点击目录内的页面跳转到相应页面。
notion image

书库视图切换

可以选择不同的视图查看不同类型的书籍。
notion image

书库下载指南

进入书库页面后,点击最下方的资源,然后点击··· 选择Download
notion image

文章页面说明

此页面共有 5 种视图。
notion image

留言评论

进入「留言板」在红框部分点击就可以评论,评论需要登陆 Notion。
notion image
还可以划线评论,选中部分文字后会出现状态栏,点击comment,或者使用快捷键shift+command+m
notion image

最后

最后也没有什么想说的了,下面是我的主页,感兴趣可以点进去看看。
JoeyToday
JoeyToday
 
上一篇
推荐一部台剧《人选之人造浪者》(含资源分享)
下一篇
当我们开始相遇:20万博文整理全记录