「项目」Hexo 主题 News 现已上线

如你所见,我给博客换上了一个新主题。

与别的主题不同的是,这个主题是我从 1 开始制作的。为什么是从 1 开始?因为这个主题我参考了 Apple 公司的 Newsroom 页面,也使用了部分 Apple 的 CSS 样式表(主要是文字相关部分),因此这个主题也被我命名为News「新闻中心」。这篇博文是制作News「新闻中心」主题的记录。

灵感

最开始的想法是在给班级网站写新闻中心页面。当时给网站主页使用的 Bootstrap 5 的 Jumbotron 模板,想着设计一个和他向契合的新闻页面,突然我想到了之前看到的 Apple Newsroom 我十分喜欢,于是便用 Bootstrap 的 Card 放置了一个差不多的页面出来,这可以称为是News「新闻中心」α1 测试版本。

此处因保护隐私原因不放出参考网址

之后这个站点便因为准备期考而暂停了更新,但我仍时不时的对他的样式表做一点细微的调整,直到期考结束。期考结束的这个寒假,我按照计划维护着博客,突发奇想要不把之前写的「新闻中心」改成主题吧!

说干就干

过程

我使用的是 YO(Yeoman generators) 生成器来创建的 Hexo 主题模板,使用的 EJS 模板语言和 CSS 样式表,具体的技术细节就不再文中赘述了。我感觉主题的开发就和使用 PHP 写程序一样,要注重代码的“复用”,即模块化编程,将不同的组件单独编写,按需调用,省去了重复造轮子的麻烦。

目前,News「新闻中心」已经实现了以下功能:

  • 基础文章的渲染
  • 友情链接页面

计划实现的功能:

  • 灯箱 Fancybox
  • 完善配置文件
  • 代码高亮

特性

News「新闻中心」具有以下特性:

  • 使用了最新的 Bootstrap 5 作为框架,「新闻中心」支持其全部组件和特性

鸣谢

以下项目在 Newsroom 开发时提供了无可取代的帮助,特在此表达诚挚的谢意(排名不分先后)

下载地址

ImJingLan/hexo-theme-news

「项目」Hexo 主题 News 现已上线
https://yurik.cafe/2024/hexo-theme-news/
作者
景蓝Yurik
发布于
2024年2月1日
许可协议