星星博客 »  > 

博客主题用腻了?来试试赛博朋克 2077 主题吧!

最近在整理个人博客,之前的博客是基于 Hexo 3.x 版本的,一晃两年多过去了,Hexo 已经升级到了 5.x 版本,新版本带来了一系列新特性,并且性能得到了极大的提升。而个人喜欢的 Icarus 主题也有了大版本的更新,更是带来了赛博朋克的主题,十分惊艳,话不多说,直接看效果。

iShot2021-03-13 03.16.00.png

现在让我们从零开始,快速搭建一个赛博朋克风格个人博客。

Step 1 使用 Hexo-CLI 初始化项目

初始化项目非常简单,按照官网文档操作即可,需要注意 Node 和 Git 是必备。为了避免全局安装,这里使用 npx 命令:

$ npx hexo init <folder>
$ cd <folder>
$ yarn

使用 generate 命令生成静态文件,可简写如下:

npx hexo g

使用 server 命令启动本地服务器查看页面效果,可简写如下:

npx hexo s

此时,打开 localhost:4000, 一个默认的 landscape 主题的博客页面就出现了,如下:

截屏2021-03-13 上午3.53.33.png

具体详见这个 Commit

Step 2 更换为 Icarus 主题

更换主题也非常简单,我们查看 Icarus 文档。更换主题主要有两种方式,一种是使用 npm 安装主题的方式,另一种是下载源码放到 theme 文件夹的方式。简单起见,我们先采用 npm 的方式:

$ yarn add hexo-theme-icarus

使用 hexo 命令修改主题为 Icarus:

$ npx hexo config theme icarus

启动服务器,很不幸,报错了:

截屏2021-03-13 上午3.57.09.png

提示很清楚,缺少依赖,我们添加依赖:

$ yarn add bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3

再次尝试构建并启动,成功出现 Icarus 主题了:

截屏2021-03-13 上午4.01.01.png

迫不及待尝试赛博朋克风格主题了,非常简单,在 _config.icarus.yml 文件中修改:

# Icarus theme variant, can be "default" or "cyberpunk"
variant: cyberpunk

再次尝试构建并启动,赛博朋克风格主题出现:

截屏2021-03-13 上午4.05.37.png

具体代码详见这个 Commit。

Step 3 自定义配置

下面我们修改配置文件 _config.yml_config.icarus.yml ,配置网站相关信息。

主要包括 logo、favicon、navbar 的 menu 和 links、footer、donates(赞助信息,注释掉没用的支付渠道)、widgets。

这里详细说一下 widgets,widgets 就是页面上的各个区域的挂件,可以通过配置灵活改变其位置和具体信息,根据喜好决定布局采用 3 栏还是 2 栏布局。

  • profile widgets: 这块是用户信息模块,把相关信息改成你自己的就好啦,下面有一个 social_links,也可以自定义配置,如果没有 Twitter 和 FaceBook,可以把相关信息注释掉,也可以添加其他链接,注意图标是基于 fontawesome 的。

  • subscribe_email、adsense 都用不上,可以删掉

具体修改细节可以参考这个 Commit。

修改完的效果如下:

截屏2021-03-13 上午1.02.28.png

Step 4 源码方式使用 Icarus 主题

刚才说到使用 Icarus 主题有两种方式, npm 包的方式虽然简便,但是如果想对 Icarus 主题有更深的配置就不太好弄了,尤其是过去 Icarus 一直都采用的是源码模式,很多 Issue 的解决方案都是修改源码的,而对应的 npm 包的方式则很少提及,所以我们也改为使用源码方式,方便后续配置。

首先删掉 hexo-theme-icarus 依赖,在 Icarus 仓库下载代码,解压后拷贝到 theme 文件夹中。

详见这个 Commit。

Step 5 配置样例文章

下面我们删掉默认的 Hello World 文章,创建一个自己的文章。

注意头部配置文件相关信息,在新版 Icarus 中头图需要额外配置 cover 选项,如下:

---

title: "【译】下一代前端构建工具 ViteJS 中英双语字幕"
date: 2021/03/08 11:12:25
categories:
- Front-End
- Tools
tags:
- Vite
- GitHub
- Translation
toc: true # 是否显示目录
thumbnail: '/images/vitet.png'  # 缩略图
cover: '/images/vitet.png' # 头图
---

详见这个 Commit。

Step 6 文章内容过长怎么办

首页应该展示更多的文章,如果文章过长,用户下滑就只会看到同一篇文章,我们如果只想让用户看一部分内容怎么办呢?非常简单,在 md 文件中添加 <!-- more --> 即可,添加完之后,就会出现“阅读更多”的按钮,首页就能看到多篇文章了。

代码详见这个 Commit。

Step 7 怎么样让文章两栏展示

目前文章页仍然和首页一样,是三栏布局,为了有效利用空间,希望文章页能够两栏布局。此时我们需要在 Icarus 源码文件夹添加 _config.post.yml 文件,并配置成两栏布局:

widgets:
    # Profile widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: right
        type: toc
        # Whether to show the index of each heading
        index: true
        # Whether to collapse sub-headings when they are out-of-view
        collapsed: false
        # Maximum level of headings to show (1-6)
        depth: 3

来看看效果:

截屏2021-03-13 上午3.05.31.png

代码详见这个 Commit。

Step 8 部署到 GitHub Pages 上

这块内容就不再赘述,操作方法官网有详细描述。

_config.yml 中配置你的 GitHub Pages 对应的仓库地址,如我的是:

deploy:
  type: git
  repo: https://github.com/Ivocin/ivocin.github.io.git

每次都构建完,执行 npm hexo d 就可以快速部署了。

Step 9 其他功能

当然还有包括评论、百度统计等功能,Hexo 官网和 Icarus 文档都有详细描述,这里就不再赘述了。

其他 CMS(Content Management System) 产品

市面上有非常多的 CMS 产品,侧重点各有不同,罗列如下: Hexo、VuePress、Nuxt、Docsify、Docute、GitBook、Gatsby、Hugo、Next.js、Jekyll 、WordPress、Drupal、Dumi。

Hexo 之前一直是 Vue 的文档托管方案,但是 Hexo 主题系统太过于静态以及过度地依赖纯字符串,所以有了后来的 VuePress。当然 Hexo 也有很多优点,比如强大的 Tag Plugins (但私有语法也带来了迁移的问题)、超多的主题(目前有 311 个,很丰富,但是质量参差不齐,没有评分功能,在官网选择主题对于选择困难症的人来说一定非常痛苦),最新的 5.x 版本速度也有了很大的提升,总的来说,一般博客就够用了。其他的适合写博客的有 Gatsby、Hugo、Jekyll ,没深入使用过,先不做评价。

文档类的选择就不用很困难了,Vue 类的用 VuePress,未来可能是 VitePress,React 类的文档用 Dumi 就好了。

后续计划有时间对其他 CMS 产品一一试用并比较,会从 Gatsby 开始。


交流

新号刚开张,还请各位同学多多支持。文章每周持续更新,可以微信搜索「 Frontend Radio 」。前端之声,Frontend Radio FM 99.6 MHz,在这里有 Web 前端最新资讯、干货教程、精选文章、最佳实践。帮助前端开发者迅速成长、升职加薪、摆脱996,早日成为 Frontend Master。让我陪你,一起成长,共同进步。

相关文章