WB
WB
文章目录
  1. 1. 参考
  2. 2. 插件扩展
    1. 2.1. 文章加密~~
  3. 3. 主题
    1. 3.1. 启用
    2. 3.2. 配置主题
      1. 3.2.1. 设置基本信息
      2. 3.2.2. 设置头像
      3. 3.2.3. 设置favicon
      4. 3.2.4. 设置关键词
      5. 3.2.5. 设置首页内容
      6. 3.2.6. 设置首页导航
      7. 3.2.7. 设置页面导航
      8. 3.2.8. 设置页面导航样式
      9. 3.2.9. 设置面包屑
      10. 3.2.10. 设置盒子
      11. 3.2.11. 搜索页面 Slogan
      12. 3.2.12. 友链页面 Slogan
      13. 3.2.13. 设置文章标题对齐方式
      14. 3.2.14. 启用页面
      15. 3.2.15. 启用分类页面
      16. 3.2.16. 启用标签页面
      17. 3.2.17. 启用友链页面
      18. 3.2.18. 启用关于页面
      19. 3.2.19. 启用项目页面
      20. 3.2.20. 启用搜索页面
      21. 3.2.21. 个性化设置
      22. 3.2.22. 自定义CSS
      23. 3.2.23. 自定义博客名的字体
      24. 3.2.24. 为首页设置背景
      25. 3.2.25. 第三方服务
      26. 3.2.26. 启用统计
      27. 3.2.27. 启用评论
      28. 3.2.28. 使用 Mathjax

hexo

2024.04.07 wlg ℃

参考

https://github.com/forsigner/fexo 20220713

插件扩展

文章加密~~

安装

1
npm install --save hexo-blog-encrypt

快速开始

  1. 首先在 站点配置文件 中启用该插件:
1
2
encrypt:
    enable: true
  1. 然后在你的文章的头部添加上对应的字段，如 password, abstract, message
1
2
3
4
5
6
7
8
9
10
11
12
---
title: 文章加密
date: 2019-01-04T22:20:13.000Z
category: 教程
tags:
  - 博客
  - Hexo
keywords: 博客文章密码
password: TloveY
abstract: 密码：TloveY
message:  输入密码，查看文章
---
  • password: 是该博客加密使用的密码
  • abstract: 是该博客的摘要，会显示在博客的列表页
  • message: 这个是博客查看时，密码输入框上面的描述性文字
  1. 如果你想对 TOC 也进行加密，则在 article.ejs 中将 TOC 的生成代码修改成如下：
1
2
3
4
5
6
7
8
9
10
11
<% if(post.toc == true){ %>
    <div id="toc-div" class="toc-article" <% if (post.encrypt == true) { %>style="display:none" <% } %>>
        <strong class="toc-title">Index</strong>
        <% if (post.encrypt == true) { %>
            <%- toc(post.origin) %>
        <% } else { %>
            <%- toc(post.content) %>
        <% } %>
    </div>
<% } %>
<%- post.content %>
  1. 然后使用 hexo clean && hexo g && hexo s，来查看效果。

自定义

  1. 如果你对默认的主题不满意，或者希望修改默认的提示和摘要内容，你可以添加如下配置在 站点配置文件 中。
1
2
3
4
encrypt:
  enable: true
  default_abstract: 这是一篇加密文章，内容可能是个人情感宣泄或者收费技术。如果你确实想看，请与我联系。
  default_message: 输入密码，查看文章。

这样，对于每一篇需要加密的文章就不必都在在头部添加 abstract 和 message 字段了，脚本会自动添加默认的内容填充。

  1. 如果你希望对某一篇特定的文章做特殊处理（如本文的 abstract ，可以在对应文章的头部添加
1
2
3
4
5
6
7
8
9
10
11
---
title: 文章加密
date: 2019-01-04T22:20:13.000Z
category: 教程
tags:
  - 博客
  - Hexo
keywords: 博客文章密码
password: TloveY
abstract: 密码：TloveY
---

此时，博客头部的 abstract 会覆盖 站点配置文件 的 default_abstract 实现自定义。

存在问题

  • 如果你开启了 字数统计功能 的话，那么本文的字数会显得比实际值大。
  • 加密文章内部分脚本会失效，已知 代码复制 失效。

主题

启用

打开博客根目录的 _config.yml 设为 theme: fexo

配置主题

主题配置全部在theme/blog里面完成，所里下面所有配置指的是配置theme/blog/_config.yml。

设置基本信息

1
2
blog_name: Forsigner
slogan: Find the bug of the world

设置头像

1
2
3
4
# relative url
avatar: /images/avatar.jpg
# or absolute url
avatar: https://avatars0.githubusercontent.com/u/2668081?v=3&s=460

设置favicon

1
favicon: /favicon.ico

设置关键词

关键词主要作用是优化SEO

1
keywords: forsigner,前端,设计,Hexo主题,前端开发,用户体验,设计,frontend,design,nodejs,JavaScript

设置首页内容

你可以设置是否在首页直接显示文章

1
init_page_content: HOME_NAV  # HOME_NAV | POST

设置首页导航

1
2
3
4
5
6
7
8
9
10
11
12
13
home_nav:
  - name: Blog
    url: /archives
  - name: Github
    url: https://github.com/forsigner
    target: _blank
  - name: Douban
    url: https://www.douban.com/people/forsigner/
    target: _blank
  - name: Twitter
    url: https://twitter.com/forsigner
    target: _blank

设置页面导航

1
2
3
4
5
6
7
page_nav:
  - 博客: /archives/
  - 分类: /category/
  - 标签: /tag/
  - 友链: /link/
  - 关于: /about/
  - RSS: /atom.xml

设置页面导航样式

1
page_nav_style: CIRCLE  # CIRCLE|ROUND_RECT

设置面包屑

1
2
breadcrumb:
  isShow: true # true|fase

设置盒子

你可设置盒子是否显示和其显示的文字

1
2
3
toolbox:
  isShow: true # true|fase
  text: 盒子

搜索页面 Slogan

1
2
3
search_slogan:
  isShow: true # true|fase
  text: Can you find the bug of world ~

友链页面 Slogan

1
2
3
link_slogan:
  isShow: true # true|fase
  text: 交换友链可以邮件 forsigner@gmail.com

设置文章标题对齐方式

1
2
post:
  header_align: center # left|center

启用页面

你可以启用你想要的页面，在开启关于、友链、项目的页面后，你可以对这些设置这些页面的内容

启用分类页面

  1. 在博客根目录执行 hexo new page category
  2. 修改my-blog/source/category/index.md里面的内容:
1
2
3
4
5
---
title: category
layout: category
comments: false
---

启用标签页面

  1. 在博客根目录执行 hexo new page tag
  2. 修改my-blog/source/tag/index.md里面的内容:
1
2
3
4
5
---
title: tag
layout: tag
comments: false
---

启用友链页面

  1. 在博客根目录执行 hexo new page link
  2. 修改my-blog/source/link/index.md里面的内容:
1
2
3
4
5
---
title: link
layout: link
comments: false
---

启用友链页面后，可以设置类似以下格式的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
link:
  - name: 织网
    info: 身体和灵魂，总有一个在路上
    url: https://zheng-ji.info/
    avatar: https://avatars3.githubusercontent.com/u/1414745?v=3&s=460
  - name: Dongyado
    info: 生命不止，折腾不息
    url:https:///dongyado.com/
    avatar: https://avatars0.githubusercontent.com/u/6274940?v=3&s=460
  - name: OrangeCoder
    info: android ffmpeg nodejs gradle
    urlhttps:////orangecoder.com/
    avatar: https://avatars0.githubusercontent.com/u/2263785?v=3&s=460
  - name: EverET
    info: 好记性不如烂笔头
    urhttps://://everet.org/about-me/
    avatar: https://avatars1.githubusercontent.com/u/1559563?v=3&s=460

启用关于页面

  1. 在博客根目录执行 hexo new page about
  2. 修改my-blog/source/about/index.md里面的内容:
1
2
3
4
5
---
title: about
layout: about
comments: false
---

启用关于页面后，可以设置类似以下格式的内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
about:
  - type: me
    icon: icon-user
    text_value:
    - "Scut，1991，Spring."
    - "喜欢设计，擅长编程，喜欢睡懒觉."
    - "前端开发工程师，常用 HTML / CSS / JavaScript."
  - type: Github
    icon: icon-github
    text_key: Github
    text_value: "@forsigner"
    text_value_url: https://github.com/forsigner
  - type: weibo
    icon: icon-weibo
    text_key: 微博
    text_value: "@forsigner"
    text_value_url: https://weibo.com/u/1847075964
  - type: mail
    icon: icon-mail
    text_key: Gmail
    text_value: "forsigner@gmail.com"
  - type: location
    icon: icon-location
    text_value: 珠海

启用项目页面

  1. 在博客根目录执行 hexo new page project
  2. 修改my-blog/source/project/index.md里面的内容:
1
2
3
4
5
---
title: project
layout: project
comments: false
---

启用项目页面后，可以设置类似以下格式的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
project:
  - type: personal
    name: fexo
    url: https://github.com/forsigner/fexo
    intro: A minimalist design theme for hexo
  # - type: company
  #   name: Fexo
  #   url: https://github.com/forsigner/fexo
  #   intro: A minimalist design theme for hexo
  - type: personal
    name: beside
    url: https://github.com/forsigner/beside
    intro: I need you beside me
  - type: personal
    name: web-fontmin
    url: https://github.com/forsigner/web-fontmin
    intro: 字体子集化，在线提取你需要的字体
  - type: personal
    name: magic-check
    url: https://github.com/forsigner/magic-check
    intro: Beautify Radio and Checkbox with pure CSS
  - type: personal
    name: nice-bar
    url: https://github.com/forsigner/nice-bar
    intro: A nice and lightweight scrollbar
  - type: personal
    name: angular-nice-bar
    url: https://github.com/forsigner/angular-nice-bar
    intro: A nice and lightweight scrollbar in Angular

启用搜索页面

  • 在博客根目录执行 hexo new page search
  • 修改my-blog/source/search/index.md里面的内容:
1
2
3
4
5
---
title: search
layout: search
comments: false
---
  • 然后安装 Hexo 插件 hexo-search (重要)

先进入 blog 的根目录

1
2
$ cd my-blog
$ npm install hexo-search --save

个性化设置

自定义CSS

也许 Fexo 默认的样式满足不了你个性化的需求，使用此配置你可以在不修改 Fexo 源码的情况下，任意的自定义 Fexo 的样式，方法如下：

  1. 在 blog 根目录新建文件夹 my-blog/source/css
  2. 然后在此目录新建一个 CSS，名字随意，如 personal-style.css
  3. 修改fexo/_config.yml下面配置，然后你就可以写你想要的样式了
1
2
personal_style: /css/personal-style.css
# 如果不想启用自定义样式，注释这行就可以了

比如我的个人自定义样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@font-face {
  font-family: "Meiryo";
  src: url("/fonts/Meiryo.eot");
  /* IE9 */
  src: url("/fonts/Meiryo.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("/fonts/Meiryo.woff") format("woff"), /* chrome, firefox */
  url("/fonts/Meiryo.ttf") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url("/fonts/Meiryo.svg#Meiryo") format("svg");
  /* iOS 4.1- */
  font-style: normal;
  font-weight: normal;
}
html.page-home {
  /*background-image: url('/images/bg.jpg')*/

  /*background: linear-gradient( #1abc9c, transparent), linear-gradient( 90deg, skyblue, transparent), linear-gradient( -90deg, coral, transparent);*/
  /*background-blend-mode: screen;*/

  /*background: linear-gradient(to left, #5f2c82, #49a09d);*/
}

自定义博客名的字体

由于中文字体文件太大，有的快10M，所以 Fexo 没有引入中文字体，导致博客名有点难看。
但是可以通过提取字体来减小字体文件大小，让字体只有几KB。
一下步骤可以让你实现自定义博客名字体，包括英文和中文：

  1. 下载免费可用的ttf格式字体
  2. 利用 Web-Fontmin 提取字体，然后下载 Web 字体和样式
  3. 在博客根目录的source文件夹新建目录 fonts
  4. 把下载的 web-fontmin 里的 CSS 内容 copy 到你的 personal-style.css 里去
  5. 修改fexo/_config.yml下面配置，设置字体名称：
1
2
3
blog_name_font_familiy: myFontName

# 注意: 这是css文件里的font-familiy的值 ,例如里面是 font-familiy: "myfontName"

PS：自定义博客名字体前请先自定义CSS

为首页设置背景

如果你不喜欢首页简洁的白色，想个性化一点，你可以自定义首页的背景颜色或者图片

修改personal-style.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
html.page-home {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/images/bg.jpg');
  background-color: transparent;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  /*background: linear-gradient( #1abc9c, transparent), linear-gradient( 90deg, skyblue, transparent), linear-gradient( -90deg, coral, transparent);*/
  /*background-blend-mode: screen;*/

  /*background: linear-gradient(to left, #5f2c82, #49a09d);*/
}

第三方服务

启用统计

1
2
google_analytics:
baidu_analytics: 57e94d016sfsf1fba3xxxx8a2b0263af0

启用评论

1
2
disqus_shortname: forsigner
# duoshuo_shortname: forsigner

使用 Mathjax

要使用 Mathjax，可以通过 Hexo 插件 hexo-renderer-mathjax支持

查看 hexo-renderer-mathjax 文档

支持一下
扫一扫，支持一下
  • 微信扫一扫
  • 支付宝扫一扫