（长舒一口气） 终于完成自己的个人博客建设了（欢呼*3）在这个过程中遇到了很多问题，也想过各式各样的方法，去找了各种各样的解决思路。网上的一些信息，有些是正确的，也有些是错误的。在博客搭建的过程中也遇到了很多坑，也走了一些弯路。但是最后看到自己的呈现效果时还是比较满意的，按照自己的想法，把所添加的元素都添加到了网站主页。接下来就从五个方面对自己的博客进行一个简单的介绍和总结。

1.主题介绍

1.1博客名字

关于主题，博客的名字是我最喜欢的一个小岛的名字——克里特岛。它位于地中海东部的中间，是希腊的第一大岛，那里诞生了许许多多的神话故事,带着憧憬和向往，我将网站的名字设置成creteisland。

1.2博客框架

博客搭建使用的框架是Hexo，它是一个快速、简洁且高效的博客框架，基于 Node.js 开发。Hexo 使用 Markdown 解析文章，并生成静态页面，非常便于静态部署和加载，无论从安装方式还是生成速度而言都有着很明显的优势。最重要的是简单啦~适合小白上手。

1.3主题框架

主题我使用的是Butterfly，和他的名字一样，这个主题的本体就非常的好看~而且魔改相对简单，在搭建博客时一直在纠结到底选用是next主题还是butterfly主题。但是最后。看了一些。优秀的博客主，他们用的主题大部分是butterfly且butterfly。在美化方面有着较多的教程和经验，所以从我本人而言，自己也喜欢花里胡哨的东西（?）。所以选用的主题，最后决定的是butterfly。

1.4内容介绍

其实，我觉得博客不应该被定义，它并不是只能用来存放技术相关的文档。我觉得像一些日记生活日志、游戏影评、电影测评、等等，任何你感兴趣的东西都可以放在博客上面。相对于日记，它有更好的记录方式；相对于一些其他的博客平台，受制于平台的约束会较多。搭建一个属于自己的博客可以从头去感受搭建的过程，并且自定义自己博客的一些元素和内容，对我们开发能力和技术能力会有一定的提升。最重要的是，有了一个属于自己的博客，它会激励着你去更新、完善、迭代，使它变得更好~

2页面布局

2.1布局介绍

页面布局方面，我使用的是butterfly主题自带的一个布局，并在布局上面增加了自己相应的元素和模块。布局整体呈现一个大板块小元素的特点。首先映入眼帘的是一个较大的图片背景，搜索栏和导航栏在右上角，文章的主页在下方，右侧是导航栏等一些其他的模块。将不同的目录内容进行划分，可以更直观清晰地定位到我们在观看时所看的内容。对于每个分页面而言，会根据它不同的页面特色定义相应的布局。在时间轴的页面，它主要是一个枢轴去记录我们发布文章的日期；标签页它记录的是我们文章的标签类型，标签的大小会随着你文章的数量自动的调整。关于我的页面是设计的一个自我介绍里面，记录了一些我想让大家了解的内容。还有一些特殊的页面包括音乐视频评论日志等页面，虽然有些部分的页面还没有去完善，但是大部分的页面都已实现相应的功能。

3功能实现

3.1博客页

博客业，它的主要功能是记录博客内容以及博客的封面和题目，整体呈一个流式布局。当文章的数量超过一定的限制时会自动生成翻页的小图标。

3.2音乐星球

音乐页面会分享一些我个人喜欢的歌单这个页面主要是。通过Aplayer插件实现的，安装插件之后设置相应的歌单单号，以及音乐插件的类型就可以实现对歌单的展示以及设置自动播放会在点进页面之后进行自动播放。

3.3电影放映厅

这个页面还在开发啦~目前还没有实现。届时我会调用一些相关的插件来实现电影放映的功能，比如说从B站或者豆瓣，去分享一些相关的电影和影评。

3.4静谧森林

这个页面的功能是留言和评论，之所以叫进缪森林，是因为我曾经给自己设想过，如果自己以后有能力开一家小书馆的话，的名字叫静谧森林。我希望这个留言页可以实现类似的功能，大家可以在这里分享一些平时的小故事，一些人生哲理，或者一些学习经验，在这里可以畅所欲言。

3.5心情日记

这个页面也在开发啦~到时候我会以说说的形式记录我每天的一天生活。这样以日记的形式去记录，和大家分享我生活中遇到的一些开心和感动的事情。

4美学考量

4.1背景选择

在背景选择方面，起初我选择的一张固定的克里特岛的风景照，但是在我浏览过程中，我发现有很多其他的照片也非常的美观，因此，于是我插入了一个javascript脚本通过随机生成索引来放置相应的索引图片，实现在不同刷新情况下会展示出不同的背景。背景照片是我精心去挑选的，他们在不同的情况下对文字不会有遮挡和高光，使人在白天或夜晚的情况下，都会处于一个较好的阅读状态。

4.2配色方案

对于配色而言，我最喜欢的一个配色是莫兰迪色系。这个色系它是一个非常轻柔，非常和谐的一个色系。它的颜色过渡比较平缓，不会有特别冲击的色彩对比，给人一种舒服的感觉。我借助这种类似的方式，使我页面中的主题颜色尽可能的淡雅，给人一种服清新的感觉。

4.3特殊样式

在夜间和日间的切换模式我加入了动画切换，当点击相应的按钮，会出现太阳和月亮的动画过渡。其次，借鉴一些网络博客的样式，我给自己的页面设置了毛玻璃的效果，但是我认为配色最主要的一个目的是使页面变得好看，但前提是不能在影响别人的阅读情况下来进行实施。因此我针对相应的毛玻璃进行调整调节它们透明度以及发光边缘，使得在不影响读者阅读的情况下达到最佳美观效果。

4.4live2d人物

这个其实就是我们通常所说的看板娘，但是试过之后，我发现无论这些元素放在左边还是右边都会影响读者在观看过程中的体验，因此我调整它的位置处于页面的最右端，设置像素大小只有30px*30px。虽然大家不会立马去看到他，但是当你去阅读完文章之后想要去看一看最近的文章，或者回到顶部时候，你会发现右下角有一个可爱的小猫，就像一个宠物一样在那里去守护着你，我觉得这就是它实现的最大的作用，任何设置都不应该喧宾夺主，博客要不忘初心，他的最主要的目的是阅读和记录，我们要尽量使我们的页面美观大放的同时，是游客能够更加关注我们的文章内容。

5问题汇总

这个要汇总的问题太多啦，在这里感谢我引用到的这些博客，他们为我最终网站的的建成提供了大力的帮助，这些博主的网页也是非常的美观哦~大家可以去观摩一下不同风格的博客设计。由于在博客的搭建和内容方面花费了较大的时间，因此。详细的问题我没有进行一个系统的梳理，我把我当时遇到的问题使用的解决方案都列在了这里。最后再次感谢这些优质的博客！