About Me

手机 / 微信:185-7436-9172
邮箱:yuzh233@gmail.com

虽然现在并不强,但我会一直努力。希望能得到您的垂青。


博客框架/主题更新时间:2020-04-15 22:08

初始化

  1. 升级 nodejs

    brew upgrade node

  2. 升级 hexo

    npm install -g hexo-cli

  3. 初始化一个 hexo 项目

    cd ~/
    mkdir blog
    cd blog
    hexo init

  4. 下载主题

    cd themes/
    git clone https://github.com/ppoffice/hexo-theme-icarus.git

配置

主要修改的是根目录下的 _config.yml 和主题目录下的 _config.yml

  1. 修改 hexo 配置
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-icarus
  1. 安装依赖
1
npm install --save bulma-stylus@0.8.0 hexo-component-inferno@^0.2.4 hexo-renderer-inferno@^0.1.3 inferno@^7.3.3 inferno-create-element@^7.3.3
  1. 更多细节参考主题文档

旧项目迁移

博客文件结构:

harrys-blog-new
├── README.md
├── _config.yml
├── db.json
├── node_modules
├── package-lock.json
├── package.json
├── public 👈
├── scaffolds
├── source
├── themes
└── yarn.lock

5 directories, 6 files

其中,public 文件夹相当于是项目编译后服务器访问的文件夹:

public
├── 2018
├── 2019
├── 2020
├── about
├── archives
├── assets
├── atom.xml
├── categories
├── content.json
├── css
├── img
├── index.html
├── js
├── page
├── post_image 👈
└── tags

早期博客刚开始搭建,有一部分文章是在学校时写的,那会还没有使用云存储,文章图片 post_image 都直接放在了 public 文件夹,这会导致执行 hexo clean 后文章图片资源被删除。
故在此备注:可以将静态资源文件放在主题文件夹里面,hexo g 编译后会将主题静态资源加载到 public 目录中。

主题文件一览:

hexo-theme-icarus
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── _config.yml
├── include
├── languages
├── layout
├── package.json
├── scripts
└── source
    ├── css
    ├── img
    ├── js
    └── post_image # 放在这里

更新时间:2019-08-08 21:11

主题配置相关

Brand 标识

hexo 根目录 _config.yml 配置 title

生成 categories 和 tags 页面

将 themes/icarus/_source 下的 categories 和 tags 目录拷贝到 hexo/source 目录

Profile

主题的 _config.yml 配置

RECENT 略缩图设置

每一篇文章添加标签:thumbnail: /img/random/14.jpg, img 文件夹是属于 hexo 根目录的。

首页显示文章摘要

侵入性较强,在文章的指定部分添加标签:<!-- more -->,该标签之前的内容被作为摘要。

更改主题内容模块页面宽度

../hexo/themes/icarus/source/css/_variables.styl

1
2
3
4
5
6
7
8
9
// Layout
block-margin = 40px
article-padding = 20px
mobile-nav-width = 280px
# 自定义宽度,默认 7
main-column = 10
sidebar-column = 3
profile-column = 3
sidebar-column-tablet = 4

更改代码样式

样式存在于:/opt/hexo/themes/icarus/source/css/_highlight 文件夹,60余种。

修改主题 _config.yml 的 highlight:

Valine 评论

1
2
3
4
5
6
7
8
valine: # Valine Comment System https://github.com/xCss/Valine
on: true # enter true to enable
appId: IaNb4n1EqHakKzNDh6jR1qYJ-gzGzoHsz # enter the leancloud application appId here
appKey: Hg7CxatEfuCfhqOsl7XYtEOv # enter the leancloud application appKey here
notify: true # enter true to enable <Mail notifier> https://github.com/xCss/Valine/wiki/Valine-%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F%E4%B8%AD%E7%9A%84%E9%82%AE%E4%BB%B6%E6%8F%90%E9%86%92%E8%AE%BE%E7%BD%AE
# 需要设置true,否则插件不生效。
verify: true # enter true to enable <Validation code>
placeholder: Just Do It... # enter the comment box placeholder

TOC 支持

每篇文件添加标签:toc: true 即可。

Comments