最近在收拾个人博客,之前的博客是基于 Hexo 3.x 版别的,一晃两年多过去了,Hexo 现已晋级到了 5.x 版别,新版别带来了一系列新特性,而且功用得到了极大的提高。而个人喜爱的 Icarus 主题也有了大版别的更新,更是带来了赛博朋克的主题,十分冷艳,话不多说,直接看作用。
现在让咱们从零开始,快速搭建一个赛博朋克风格个人博客。
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 主题的博客页面就呈现了,如下:
详细详见这个 Commit
Step 2 替换为 Icarus 主题
替换主题也十分简略,咱们查看 Icarus 文档。替换主题主要有两种方法,一种是运用 npm 装置主题的方法,另一种是下载源码放到 theme 文件夹的方法。简略起见,咱们先采用 npm 的方法:
$ yarn add hexo-theme-icarus
运用 hexo
命令修正主题为 Icarus:
$ npx hexo config theme icarus
发动服务器,很不幸,报错了:
提示很清楚,缺少依靠,咱们增加依靠:
$ yarn add bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3
再次测验构建并发动,成功呈现 Icarus 主题了:
刻不容缓测验赛博朋克风格主题了,十分简略,在 _config.icarus.yml
文件中修正:
# Icarus theme variant, can be "default" or "cyberpunk"
variant: cyberpunk
再次测验构建并发动,赛博朋克风格主题呈现:
详细代码详见这个 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。
修正完的作用如下:
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
来看看作用:
代码详见这个 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 开始。
—- End —-
本文正在参加「 2021 春招闯关活动」, 点击查看 活动详情