轻松拥有一个漂亮的个人网站

各位好，我是YIKE，来介绍一个由我个人独立设计及开发的公开产品——每个人的个人网站。

在前段时间我公布了我的网站2.0版本，发布在b站上得到一些人的喜爱。我便产生了一个想法：“我能不能把我的网站做成一个公用的个人网站呢？这样每个人只要有帐号，就可以拥有一个跟我一样的个人网站了，而且每个帐号的个人网站是完全独立的。”这个想法我设想了一下，我找到了一个实现的方法，于是，有了现在的这个产品。接下来就跟着我一起去看一下这个产品吧，希望你会喜欢～

首先，我们知道一个完整的项目分管理端和用户端，你们访问我的网站：https://huohuo90.com，这个就是用户端，用于信息的展示。而管理端，便是这个客户端内容的发布、更新、删除等管理和维护的地方。是控制你的个人网站的操控室。我们就从管理平台开始吧。

进入管理平台：逸刻博客后台

我们需要一个帐号登录管理平台，这里的帐号没有接入第三方应用，比如微信或支付宝登录。这个帐号是由我自己独立开发的一套用户系统，如果你曾注册过可以直接进行登录这一步。（提醒一下，我的用户系统注册是没有验证邮箱的真实性的，你可以随意写一个邮箱，但是如果你需要用我的个人网站系统，必须是一个真实的邮箱，因为后面步骤需要你的邮箱验证。）

如果没有帐号，点击“注册帐号”

输入“用户名”、“邮箱”、“密码”完成注册。注册成功后将跳转进入个人信息页面

你可以继续丰富你的帐号信息，比如设置头像、简介、性别、生日。当然你可以随时来到这个页面将自己的帐号注销掉。

如果忘记帐号密码，点击“忘记密码？”

这里就需要你的邮箱验证了。需要你输入注册帐号的邮箱，点击“发送验证码”，你的邮箱将会接收到来自YIKE发送的四位数验证码，验证码输入正确才可以重新设置你的密码。

好了回到管理平台完成登录。

如果你是第一次使用逸刻博客管理平台，我们需要设置一个独一无二的特征码，这个特征码是客户端识别是否是你的个人网站唯一的标识，所以要好好考虑下这个特征码哦～，当然在这一步也不需要太在意这个特征码，在登录后，在“用户设置”页面，可以随时修改特征码。这里上方第一个输入框是输入邮箱验证码，最上方文字提示了这个验证码发送到了哪个邮箱中，所以你需要用你自己真实的邮箱注册，不然就收不到这个验证码了。

特征码设置成功后“生成并进入”。在之后的登录将不会再有这一步骤。

好了终于进入管理平台了！

管理平台端采用侧菜单栏设计，顶部仅包含“logo标题”、“私信”、“用户头像”、“深浅皮肤切换按钮”、以及“退出”系统按钮，当然顶部左侧的logo标题是可以点击定位到“总览”页面的。左侧菜单栏包含发布到客户端的所有内容功能，右侧则是当前所处菜单栏的具体内容。

“总揽”页面

在最上面的数据统计模块，第一个卡片显示的是在管理端任何位置上传的图片或其他文件占用的总空间大小，剩余五个卡片是对应模块发布的文章的统计。这里的数据不仅仅是一个统计，同时涉及到你的帐号剩余空间问题（由于本人服务器空间有限，该产品用于学习交流，我将每个帐号的空间大小进行了一定的限制）。

新建文章也在“总揽”页面进入，在总览顶部卡片中，点击卡片右边的“+”按钮，就进入相应模块新增页面，编辑新增相应模块的文章。

那关于这些文章的修改或删除在哪里呢？我们需要进入到这些对应的模块当中去做这些操作。

比如我们进入“博客文章”菜单

我们在这里可操作已创建文章的“发布/撤回”、“修改”和删除。关于博客文章，我单独分了一个“项目产品”，在我的个人网站中，我用于发表一些我自己开发或设计的完整项目的介绍文章，这里可以根据你的需求是否使用这个分类（后面我可以继续优化这个模块，让这个模块更有特色）。

在对应不同菜单模块中都有对模块的分组。我们可以在对应菜单内对“分组”进行管理，可以进行新建、及“分组管理”中的重命名以及删除分组等操作。这里还有标签的管理。

分组和标签的新建还可以在新建文章内随时新建分组和标签。

接下来梳理一些比较特色的功能：

1.本地文件

本地文件：是你在该平台任何位置上传的图片或其他文件统一管理的地方。在这里可以对这些文件进行“删除”、“批量删除”、“移动”、“批量移动”等管理操作，同时在这里也可以进行文件上传。

平台中的文件是可以反复使用的，在新建文章中我们可以调出这些文件，插入到当前文章中使用。

2.banner

banner是对应客户端轮播图的模块

由于我在设计中考虑轮播图是适配深浅色模式的，比较特殊。如果你们使用该模块，又没有合适的图片可以找我设计～

3.友情链接

我将友情链接放在这个模块统一管理，方便后续的维护，以后咱们相互加友链啊。它在客户端将展现在页面的底部。

4.用户设置

这是一个非常重要的页面。

用户设置页面分为三个部份“我的资料”、“网站logo及手屏设置”、“关于页设置”。

1、我的资料

左边模块是帐号信息，这里可以修改个人资料、可以进入网站就是你独立的客户端，在这个地方你可以修改之前设置的“特征码”。

右边是你当前帐号使用的空间情况，我将每个帐号初始空间设置为24。其中“文件空间”和“发布文章空间”两个数值是并且关系，任何一个超出将不可以再新建文章，在这里建议上传的图片先压缩后再上传。一般的使用是足够的，如果不够，需要扩大空间，可以点击右边按钮，进行扩容。

2、网站logo及首屏设置

这里可以设置你的客户端的logo及首屏内容。左边编辑，右边将及时呈现编辑的结果。（目前由于客户端依然使用我原本的设计框架，为了视觉的统一性，首屏没有更换图片和修改样式的功能，这是一个新的需求点，后续可以继续优化…)

3、关于页设置

这是客户端展示你的关于页面，你可以在这里展示你自己，将自己推荐给每一位想了解你的人。比如：用一句话介绍自己，你有哪些觉得可以打的标签，你的一些可公开的联系方式，让别人能联系到你等等。

这个页面会展示在客户端“关于”导航菜单内，同样在这里左边编辑，右边及时显示最终的结果。

好了。经过了上面的流程，你应该拥有一个比较丰富的个人网站了。那么现在用户端它要怎么访问呢？它又长成什么样呢？我们回到“用户设置”页面上方“我的资料”模块。 

在左边右上角点击“进入博客”，就会打开一个新窗口到达你的客户端了（下面的图片顶部导航了只有“首页”、“文章”、“关于”，是我做了内容判断，如果你没有发表过图库或随记，该板块将隐藏不可见）。

你会看到这个地址是：https://huohuo90.com:3002/yike/XXX。这个“yike”，就是你的特征码了。你记住了着特征码，就可以随时访问你的客户端。如果这个特征码不对客户端将返回特征码错误的提示，如下图。

我将自己的个人网站功能全部保留在这里，包括适配移动端，如果想看客户端长什么样，可以直接访问我的网站查看效果：https://huohuo90.com，欢迎访问。更多功能欢迎注册探索。