转自:掘金(juejin.cn)
作者:清秋
大家好呀,我是Beyonce,我觉得拥有一个漂亮的博客是每个人都想做的一件事情吧。
今天给大家分享一个赛博朋克式的个人博客。
废话不多说啦,朝下看吧!????
轻松搭建赛博朋克风格个人博客 — Hexo 篇|技术点评
现在让我们从零开始,快速搭建一个赛博朋克风格个人博客。
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 主题的博客页面就出现了,如下:
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
复制代码
再次尝试构建并启动,赛博朋克风格主题出现:
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 都用不上,可以删掉
修改完的效果如下:
Step 4 源码方式使用 Icarus 主题
刚才说到使用 Icarus 主题有两种方式, npm 包的方式虽然简便,但是如果想对 Icarus 主题有更深的配置就不太好弄了,尤其是过去 Icarus 一直都采用的是源码模式,很多 Issue 的解决方案都是修改源码的,而对应的 npm 包的方式则很少提及,所以我们也改为使用源码方式,方便后续配置。
首先删掉 hexo-theme-icarus
依赖,在 Icarus 仓库下载代码,解压后拷贝到 theme 文件夹中。
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' # 头图
---
Step 6 文章内容过长怎么办
首页应该展示更多的文章,如果文章过长,用户下滑就只会看到同一篇文章,我们如果只想让用户看一部分内容怎么办呢?非常简单,在 md 文件中添加 <!-- more -->
即可,添加完之后,就会出现“阅读更多”的按钮,首页就能看到多篇文章了。
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
来看看效果:
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 文档都有详细描述,这里就不再赘述了。
Step 10 更多
看完了吗?看完了快快动手搭建一个属于自己的博客吧,这个事情也是我马上要去to do的,到时候可以来互相晒一下自己的博客。嘻嘻嘻~
想要和我炫耀博客的小伙伴们可以扫下面的二维码加我微信哦,等我搞好了我的,来一决高下!
不要吝啬了,快快分享、点赞、在看三连再走吧~~~