• 首页
  • >
  • Notes
  • >
  • 朝花夕拾博客主题,28天的蜕变历程
  • 朝花夕拾博客主题,28天的蜕变历程

    Time:2020-03-02 / View:248

    朝花夕拾博客(https://aoaoao.info),由贼冷的冰雨创立于2020年2月11日,从域名备案到主题设计一共经历了28天时间。

    起初,本计划购买一个博客主题来使用,但并不是所有的主题都适合自己的风格,最后决定自己动手做一个主题出来。

    上图就是本站博客主题经历28天之后的样子,基本上包含了常规博客的所有功能及正常使用。

    第一周:基本框架布局,及首页文章列表的设计

    • 基本框架布局我借助https://underscores.me/来实现的,这个网站可一键帮我们创建一个基础的Wordpress主题模板,其中包含了主题所必须的所有文件:style.css、function.php、index.php等等。但这并不意味着我们已经拥有了一个成品的主题,它只是给我们提供了一个大致的模板,还需要我们进一步设计。
    • 首页我采用了非常常规的双栏布局,左边文章列表,右边小工具边栏,再加上一个页脚小工具。
    • 首页文章列表的显示,综合考虑之后我采用了标题+文章简短描述的方式(主题默认的文章描述是全文描述,采用这种方式的好处可能会更加有利于SEO,但是弊端就是不利于阅读,给人的感觉很混乱、没有条理)。

    总结:主题设计的第一步就是布局设计,只有确定好布局风格之后才能进行下一步操作,否则你将会推翻自己以前所有的努力去重做很多东西,这直接影响到你是否还要继续创作下去的信心。(过程中我也想过要放弃,随便找一个主题改改算了,但是阅读别人代码的困难程度不亚于你所遇到的挫折,最后还是坚持了下来)

    第二周:侧边栏小工具及文章模板页的设计

    • 侧边栏小工具的设计,我采用了微博的方式,文章缩略图+标题+发布时间及阅读量。(系统默认的是以标题为列表的方式显示的,这样看起很呆板)
    • 文章模板页加入了面包屑导航、文章作者、发布时间、浏览量、目录、标签等一些细节上的优化,细小到包括文章内的超链接的显示方式等等。

    第三周:评论模板的设计

    • 系统默认的评论方式是,一条评论下面有多条回复的时候,子评论会一层一层缩进,我个人觉得这样很不美观,看起来丑爆了;所以我采用了只缩进一次的方式,为了区分是对那一条评论的回复,我特意在评论内容前加上了@回复对象名称的方式来显示。
    • 显示效果方面采用了,头像+名称+发布时间。

    第四周:导航栏及底部小工具的设计

    • 导航栏我采用了极简的设计风格,只添加了图标。
    • 底部小工具,分为三个栏目,左中右。
    • 优化了网站编码规范。
    • 优化了网站访问速度,几乎秒开。
    • 优化了其他若干细节问题。

    到目前为止,这个主题还是没达到我预期的效果,我会在业余时间继续升级优化,并即时与大家分享。

    本站在一系列的优化之后的效果还是蛮不错的,请看PageSpeed Insights的检测结果:

    如果你也是一个主题的设计者,或者已经拥有了属于自己的主题,希望这篇文章能给予你帮助,也希望读过这篇文章的朋友给予一些指导与建议,帮助我进一步完善主题。

    下一步升级方向:以“主体”为方向进行升级改造。

    发布留言