美化我的Hexo

发表于 | 更新于 | 分类于 | 发言的小伙伴： | 阅读次数：

美化我的Hexo

  • 推荐用HexoEditor文件编辑器来编辑，随时显示文件在Hexo设置下的显示效果

  • 修改hexo配置文件

    在站点根目录输入 （下载主题）

  • 原博客的主题版本是旧的，新的下载方式如下：
    1
    2
    $ cd hexo
    $git clone https://github.com/theme-next/hexo-theme-next themes/next
    执行完命令之后会发现在hexo/theme目录下多了个next的文件夹（我站点在hexo文件夹内）

完成后，打开 站点配置文件， 找到 theme 字段，并将其值更改为 next，效果如下：

1
2
## Themes: https://hexo.io/themes/
theme: next # 使用的主题
  • 注意，：后面要留一个空格

在终端输入

1
2
3
hexo clean   #清除缓存,这样会把/hexo/public 文件夹删除
hexo g  #重新生成代码
hexo s  -p 5000   #指定5000端口

指定端口部署到本地，因为我的4000端口用不了，所以我就改了下。执行完之后就可以在浏览器输入地址 localhost:5000 看到效果图了

1
hexo d #将本地配置好的hexo博客推到github

如果没报错什么的话，就可以在 yourname.github.io 看到博客效果了

  • 注意：看不到效果变化就使用强制刷新 ctrl+F5

配置next

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme，他们是：

  • Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
  • Mist - Muse 的紧凑版本，整洁有序的单栏外观
  • Pisces - 双栏 Scheme，小家碧玉似的清新

在 站点根目录/themes/next/_congig.yml 文件中修改，搜索关键词schemes：

1
2
3
#scheme: Muse
#scheme: Mist
scheme: Pisces  #去掉注释表示选用该主题

改成这样的效果，然后执行

1
2
hexo g #部署页面
hexo s -p 5000 #启动服务

进行预览，在浏览器输入地址 localhost:5000进行预览，没问题的话就可以执行
1
hexo d 推到github了。

拓展博客页面设置

  • 编辑配置文件，在站点根目录文件夹/_config.yml，添加以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
# Extensions # 以下为第三方插件设置
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next # 使用的主题，主题配置后面讲
search: # 本地搜索插件
  path: search.xml
  field: post
  format: html
  limit: 10000
feed: # RSS订阅插件
  type: atom
  path: atom.xml
  limit: 0
  • 插件安装：命令
    1
    2
    $ npm install --save hexo-generator-search
    $ npm install --save hexo-blogroll

next主题配置

  • 修改了next的主题设置直接执行$hexo g 就可以生效了

如何设置「阅读全文」？

在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。 也就是说，在首页显示文章的摘录并显示 阅读全文 按钮，可以通过以下方法：

1.在文章中使用 <!-- more --> 手动进行截断，Hexo 提供的方式 推荐
2.在文章的 front-matter 中添加 description，并提供文章摘录
3.自动形成摘要，在 主题配置文件 中添加：

1
2
3
auto_excerpt:
  enable: true
  length: 150

默认截取的长度为 150 字符，可以根据需要自行设定

建议使用 （即第一种方式），除了可以精确控制需要显示的摘录内容以外， 这种方式也可以让 Hexo 中的插件更好的识别。

设置头像

编辑 主题配置文件,修改字段 avatar,值设置成头像的链接地址。其中，头像的链接地址可以是：
地址值:
完整的互联网 URI http://example.com/avatar.png
站点内的地址:
将头像放置主题目录下的 source/uploads/ （新建 uploads 目录若不存在）
配置为：avatar: /uploads/avatar.png
或者
放置在 source/images/ 目录下
配置为：avatar: /images/avatar.png

友情链接 由 iamwent 贡献

编辑 主题配置文件 添加：
友情链接配置示例

1
2
3
4
5
# title
links_title: Links
links:
  MacTalk: http://macshuo.com/
  Title: http://example.com/

开启打赏功能 由 habren 贡献

越来越多的平台（微信公众平台，新浪微博，简书，百度打赏等）支持打赏功能，付费阅读时代越来越近，特此增加了打赏功能，支持微信打赏和支付宝打赏。 只需要 主题配置文件 中填入 微信 和 支付宝 收款二维码图片地址 即可开启该功能。

打赏功能配置示例

1
2
3
4
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /images/wechat-reward-image.jpg
alipay: /images/alipay-reward-image.jpg
#图片放在博客站根目录/image/录路径下
如果我的文章对你有帮助的话欢迎打赏，嘻嘻嘻！