专栏首页前端之旅折腾博客系列之发布自己的主题:PureBlue

折腾博客系列之发布自己的主题:PureBlue

这篇文章用来记录自己开发 PureBlue 主题过程中的感想。

先立一个 Flag

博客内容固然是最重要的,但是抛开内容不讲,博客本身也应该带有自己的Tag,而不是光会用别人的轮子。

最早接触的博客平台是 CSDN 和博客园,在上面学习到了很多网友的经验,于是萌发了想要创建自己博客的念头,在写了几篇文章后又觉得:为何不自己搭建一个博客平台呢?因此在今年一月份的寒假捣鼓了 hexo 和 github pages,包括下载各种漂亮的主题、添加各种有意思的插件,一时乐在其中。平静下来之后,我开始进行知识迁移的工作,把以前存放在印象笔记中的东西重新修改并整合,转移到个人博客里,于是内容慢慢充实起来。

直到十几天前,我用的还是 Next 主题,这的确是一个相当成熟和漂亮的主题,我特别喜欢它的简洁。直到某天看到一句话:

当你看到你用的主题出现在两个以上的博客时,那你就要考虑自己写一个了。

别说两个了,Next 主题的用户数应该是目前所有主题中最多的,而博客外观的雷同很显然是一件非常尴尬的事情。正好在那时我也陷入了一个纠结,就是我一直处于知识输入的状态却鲜有项目上的输出,简单地说就是学的多、做的少—-这是很要命的事,毕竟“纸上得来终觉浅”。也就是说我面临两个问题:

  • 缺少项目实践
  • 博客主题缺少个性化

这两个问题恰巧有共同的答案,那就是自己制作一个主题。当时想的是这学期能做出来都算好的了,于是立了一个 flag:

不过很欣慰的是,我赶在月底之前把它完成了,前后大约花了14天。(大概是这个 flag 给我的动力)

这是项目地址

体会和感想

虽然是一个小项目,而且代码也写得比较乱,但是收获颇丰——接触到了两个新的技术,一是模板引擎ejs,二个是css预处理器stylus,还有就是对hexo的原理有了更为深入的理解,至少知道了我写的markdown文件是怎么在网页上渲染出来的,而不是光会用却不知道原理。

万事开头难,前期准备工作的时候真的是一头雾水。首先是Hexo的官方文档,写得很不友好,所以读起来云里雾里;其次是不同主题使用的模板引擎和css预编译都不同,主题文件的结构也不同,这大大提高了阅读源码的难度和花在上面的时间成本。虽然经过“搜刮”,我找到了几篇教程,但是大部分还是讲的不够浅显易懂,越看越晕。这时候我意识到两个重要的问题:

  • 这些东西不是给纯新手准备的,我需要先了解基础的概念
  • 善用搜索引擎,不要将视野局限在国内平台

所以我开始去youtube上寻找相关的视频,幸运的是我的确找到了纯新手向的主题制作教程。每集只有几分钟,但是对于理解一些基础概念来说已经足够。不用担心听不懂,因为自带字幕,再配合up主的操作演示,还是很好理解的。

之后我又谷歌了相关的文章,成功找到了这个系列教程,这是目前找到的最详细的教程,真真正正的从零开始教你怎么做一个主题,所以说实话真的很感谢这位老外。为了加深对主题制作的理解以及方便其他有需求的人,我将这个系列翻译了过来,可以在我的博客里找到,当然也可以去Segment Fault。目前我只翻译了两篇,第三篇会另外找个时间搞定。

教程看下来,发现难点主要集中在两个地方:一是理清项目结构,进行合理的组织,二个是设计样式并具体实现。 准备工作差不多之后,就可以开始动工了,不需要太着急,每天完成一部分就行。 印象比较深的难点就是垂直时间轴的制作,也就是下面这个东西:

一个是要做出样式,主要涉及伪元素的使用,以及考虑怎么让垂直轴随着页面高度增加而延长;二个是逻辑,遍历所有文章并根据年份进行划分,这里需要使用ejs的语法,对Hexo的内置变量也要熟悉。

踩了哪些坑

当然,做这个主题的时候也踩了很多坑,这里做一下踩坑记录:

  • 路径问题。为了使代码更容易管理,通常制作主题都是采用模块化的方式,因此存在着大量的文件引用。而A文件引用B文件时,不一定是使用B相对于A的路径,而要看最终A文件被谁引用。
  • 某篇文章中出现了一行很长的代码,因为没有对它进行换行和溢出处理,导致图片尺寸无法正常设置,同时所有的文本内容都被挤出div。
  • 在本地测试的时候某些文章无法显示全文内容,并且底部div消失。这个问题比较奇葩,而且至今无解。猜想应该是渲染出错还是什么= =。
  • 写stylus文件时混用了空格和tab,git报错。(这个是真的坑,开了sublime的提示才看出来的)
  • 第三方插件失效。返回顶部按钮是用的第三方jq插件,坑的地方就在于,作者引用jq库时是用的http链接,被浏览器阻止了,导致插件失效。一开始以为是缓存问题导致的样式无法修改,在反复修改和刷新了一个半小时后才想到去控制台看报错信息:

所以,为了保险一点还是在项目中放jq文件比较好,当然更好的做法应该是直接用原生js来写。

  • 改动不生效的问题。比较常见的状况,在本地预览一切正常,通过域名访问的时候改动却迟迟没有生效,而且通常的清除浏览器缓存或者hexo clean还不一定有效。只能说改动的同步还是需要时间的= =
  • page页面共用。这个严格来说不算坑,而是应该留意的一个地方。Hexo中并没有专门的展示所有标签或者所有类别的页面,拿我用的ejs来说,layout文件夹下的tag.ejs实际指的是单一标签下的所有文章,同理categories.ejs指的是单一类别下的所有文章。而我们需要的展示页面实际上是统一放在page.ejs中,再根据条件判断生成对应页面。不过我实际操作的时候发现分类页走的是归档页的布局。所以目前这个主题的分类页无法正常工作,也许之后会找到原因吧问题已解决,目前分类页可以正常工作。
  • 在 js 中引用 hexo 的内置变量。做导航栏时需要区分不同类型的页面。这个其实也很好解决,因为页面链接和导航栏条目是一一对应的(比如archive页面的链接是/archive,导航栏条目是archive),所以做一个判断就好。然而尴尬的是,首页压根就没有这种链接,首页就是一个/,尽管有 is_home() 函数可以用,不过 js 里是用不了的。所以这个时候我想到了直接通过配置文件拿到首页的 url,之后再做判断,但是又有一个问题 —— 这是hexo的内置变量,只能在ejs中使用,在js里是不识别的。考虑到ejs会生成dom元素,所以解决的思路是:将内置变量存放在dom元素里并生成,之后在js中获取它的值,并设置该元素不可见 直接作为dom元素的data-*属性即可。后面的 TOC 文本也是用的这个办法。

总结

主题基本的东西都做好了,剩下的就是上传到 github,并且向 Hexo 官方站点发起 PR—-这些对于我这个菜鸟来说还很陌生,所以不得不去b站找了 github 和 git 使用的相关教程。本来应该一切顺利了,但是本地这边一直报错,原来是没有先 pull 远程仓库进行同步。

当然,git 和 github 是每个技术人的必备技能,所以之后我会另外找个时间系统学习一下这两者的使用。

最后当然就是编写说明文档了,这很像以前做汉化时写的使用说明。

感触比较深的两点:一个是注意阅读源码。如果实在没有思路,可以先参考别人是怎么写的,一开始制作主题的时候很难理清项目结构,所以我选择了先看看别人是怎么写的;二个是英语的重要性——1/5的答案在百度,4/5的答案在谷歌,学会英语就意味着你找到了解决问题的另一条途径,而且无疑是更加宽广的途径。比如 Hexo 主题的制作,国内是没有人真的会去为这个而做系列视频的,但是国外有;同样地,提问题时也可以考虑选择国外平台,如果你注意了提问礼仪,很大几率问题会得到秒回。

到这里差不多就告一段落了,之后的时间我会慢慢完善和更新这个主题。目前来说用户只有我自己,所以也算是为我自己而去努力地塑造它吧。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Linux搭建Nexus3.X构建maven私服

    如果Linux硬件配置比较低的话,建议修改为合适的大小,否则会出现运行崩溃的现象

    掌上编程
  • zfaka 增加易支付接口

    Github:https://github.com/zlkbdotnet/zfaka

    Alone88
  • Windows使用ROS机器人操作系统教程说明

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    zhangrelay
  • AI_第一部分 数据结构与算法(12.排序算法实战下)

    第四阶段我们进行深度学习(AI),本部分(第一部分)主要是对底层的数据结构与算法部分进行详尽的讲解,通过本部分的学习主要达到以下两方面的效果:

    还是牛6504957
  • 初学者|手把手带你学TextBlob

    本文介绍了TextBlob的使用方法,这是一个用Python编写的开源的文本处理库。它可以用来执行很多自然语言处理的任务,比如,词性标注,名词性成分提取,情感分...

    用户1737318
  • github deepfake项目faceswap

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    sofu456
  • AI_第一部分 数据结构与算法(13.图解递归)

    第四阶段我们进行深度学习(AI),本部分(第一部分)主要是对底层的数据结构与算法部分进行详尽的讲解,通过本部分的学习主要达到以下两方面的效果:

    还是牛6504957
  • ROS2学习和使用SLAM算法(gmapping/cartographer/orb-slam等)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    zhangrelay
  • GIT 常用快捷命令

    git rm --cached /path/to/file,然后正常 add 和 commit 即可。

    Alone88
  • AI_第一部分 数据结构与算法(14.二分查找算法)

    第四阶段我们进行深度学习(AI),本部分(第一部分)主要是对底层的数据结构与算法部分进行详尽的讲解,通过本部分的学习主要达到以下两方面的效果:

    还是牛6504957

扫码关注云+社区

领取腾讯云代金券