Hexo静态博客使用笔记

发表于 | 分类于 |

Hexo 是一个基于 Node.js 的静态博客程序，可以方便的生成静态网页托管在 GitHub 和 Heroku 上。作者是来自台湾的 tommy351。
关于hexo静态网页搭建过程本文不再赘述，网上教程很多，本篇末尾也有相应的网络链接供参考。本文只是简单记录下使用hexo中的一些问题和需求更改。

关联Github仓库:

在hexo根目录下的 _config.yml 文件配置，末尾添加如下信息

deploy:
  type: git
  repository: # 你的 GitHub 仓库地址，别忘了加上 .git （我的是https://github.com/snail-z/snail-z.github.io.git）
  branch: master

注意，配置文件的冒号后必须有一个空格。deploy 下面的每个字段前必须空两个空格，严格要求。

然后执行命令：

hexo generate # 生成静态页面，可以简化为 hexo g
hexo deploy   # 部署到 GitHub，可以简化为 hexo d

浏览器访问 snail-z.github.io 就能看到自己的 Blog 了，如果看到 404 页面不要惊慌，一般延迟半分钟左右才能看到效果。耐心等待。

添加网页背景图

具体做法是在hexo/themes/next/source/css/_custom/里的custom.styl修改如下：

#header {
    background: url("../images/background-header.jpg");
    background-size: cover;
}
body {
    background: url("../images/background-body.jpg");
    background-size: cover;
}
#footer {
    background: url("../images/background-footer.jpg");
    background-size: cover;
}

将上述中的图片放到hexo/themes/next/source/images中即可。

创建标签云页面和分类页面

  • 添加标签云页面，并在menu中显示。

  1. 新建一个页面，命名为 tags 。命令如下

    hexo new page "tags"

  2. 编辑刚新建的页面，在hexo/source/tags下的index.md文件中，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云。

    #title: All tags # 一般省略标题
    date: 2017-3-17 9:21:20
    type: "tags"
    comments: false # 如果有启用多说评论，默认页面也会带有评论。需要关闭的话，添加字段comments设为false

  3. 设置menu。编辑主题的_config.yml，添加tags到menu中，如下:

    menu:
      home: /
      archives: /archives
      tags: /tags

  4. 写文章时添加对应标签，例如本篇：

    title: Hexo静态博客使用笔记
    date: 2017-03-15 22:59:29
    categories:               # 文章分类目录，可省略
        - 技术
    tags: Hexo
    ---

    以上云标签就创建成功了，可以运行查看效果了。

  • 添加分类页面

  1. 步骤与添加tags类似，首先新建一个页面，命名为 categories，如下：

    hexo new page "categories"

  2. 同样编辑刚新建的页面，将页面的类型设置为 categories ，主题将自动为这个页面显示所有分类。

    date: 2017-03-17 09:25:20
    type: "categories"
    comments: false

  3. 在菜单中添加链接。编辑主题的 _config.yml ，将 menu 中的 categories: /categories 注释去掉，如下:

    menu:
      home: /
      categories: /categories
      archives: /archives
      tags: /tags

    以上分类页面就创建成功了，打开博客查看效果吧。

其它设置

  • 单独修改文章字体颜色，在hexo/themes/next/source/css/_variables/下的base.styl文件中，定位到$text-color = red处，这样就将字体修改成了红色。默认#555
  • 修改subtitle颜色，在hexo/themes/next/source/css/_variables/下的base.styl中定位到$subtitle-color = red，这改成了红色。默认#555
  • 在主题配置 - NexT使用文档中提及了如何设置字体样式，这里就不再赘述了。如果想自定义字体大小以及颜色，可以直接在Markdown 文档编辑中使用html语法
    <font size=4 > 这里输入文字，自定义大小 </font>
    <font color="#FF0000"> 这里输入文字，自定义颜色的字体 </font>

相关资料

热评文章