Oort.

0%

Hexo 博客美化

发表于 更新于 分类于
本文字数： 8.2k 阅读时长 ≈ 7 分钟

1、修改博客中的个人信息

修改博客跟目下的_config.yml配置文件

1
2
3
4
5
6
7
8
9
# Site
title: Your title
subtitle: 'Your subtitle'
description: 'Your description'
keywords: 
author: Your name
email: Your email
language: zh-CN
timezone: Asia/Shanghai

2、安装 NexT 主题

Next官网

在博客根目录下从GitHub上克隆NexT主题。(网上的仓库地址是旧版本的)

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

3、配置 NexT主题

1、启用主题

编辑站点配置文件_config.yml，

1
theme: next

2、选择 Scheme

编辑主题配置文件 theme/next/_config.yml

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
  • Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
  • Mist - Muse 的紧凑版本，整洁有序的单栏外观
  • Pisces - 双栏 Scheme，小家碧玉似的清新
  • Gemini - 在 Pisces 的基础上加上了边框，使得有层次感

3、设置语言

编辑主题配置文件 theme/next/_config.yml

1
language: zh-Hans

常用语言对应代码

语言 代码 设定示例
English en language: en
简体中文 zh-Hans language: zh-Hans
繁體中文 zh-hk 或者 zh-tw language: zh-hk

4、设置菜单

编辑主题配置文件 theme/next/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  # commonweal: /404/ || heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: true
键值 设定值 显示文本（简体中文）
home home: / 主页
archives archives: /archives 归档页
categories categories: /categories 分类页
tags tags: /tags 标签页
about about: /about 关于页面
commonweal commonweal: /404.html 公益 404

除了home和archives其他项都需要手动创建页面，创建Tags页面示例：

1
hexo new page "tags"

编辑source/tags/index.md文件

1
2
3
4
5
---
title: tags
date: 2020-02-20 19:32:45
type: "tags"
---

如果想要修改菜单项显示的文本，则修改next中相对应的翻译即可。比如中文则修改theme/next/languages/zh-Hans.yml文件中的翻译。

5、设置侧栏

1、设置侧栏的位置

1
2
3
# Sidebar Position.
  position: left
  # position: right

2、设置侧栏显示的时机

1
2
3
4
5
6
# Sidebar Display (only for Muse | Mist), available values:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
  display: post
  • post - 默认行为，在文章页面（拥有目录列表）时显示
  • always - 在所有页面中都显示
  • hide - 在所有页面中都隐藏（可以手动展开）
  • remove - 完全移除

3、设置头像

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.jpg
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: true
地址 值
完整的互联网 URI http://example.com/avatar.png
站点内的地址 将头像放置==主题目录下==的 source/uploads/ （新建 uploads 目录若不存在） 配置为：avatar: /uploads/avatar.png或者 放置在 source/images/ 目录下 配置为：avatar: /images/avatar.png

4、设置社交链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  GitHub: https://github.com/504703038 || github
  E-Mail: mailto:ysf504703038@163.com || envelope
  # Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

5、禁用目录自动标记章节数字

1
2
3
4
5
6
7
8
9
10
11
12
# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
  enable: true
  # Automatically add list number to toc.
  number: false
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: false
  # Maximum heading depth of generated toc.
  max_depth: 6

6、设置代码样式和高亮

修改插入代码的样式

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: mac
1
highlight_theme: night eighties

NexT 使用 Tomorrow Theme 作为代码高亮，共有5款主题供你选择。 NexT 默认使用的是 白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties：

tomorrowtomorrow-nighttomorrow-night-bluetomorrow-night-brighttomorrow-night-eighties

7、站点建立时间

1
since: 2017

8、设置背景动画

1、安装canvas-nest

1
2
cd theme/next
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

2、修改主题配置文件sheme/next/_config.yml

1
2
3
4
5
6
7
8
9
10
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# For more information: https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: true
  onmobile: true # Display on mobile or not
  color: "160,160,160" # RGB values, use `,` to separate
  opacity: 0.7 # The opacity of line: 0~1
  zIndex: 1 # z-index property of the background
  count: 200 # The number of lines

9、首页文章预览

在Markdown文件中添加<!--more-->即可。

10、站内文章链接

Markdown内使用如下语句

1
{% post_link 文章的文件名 点我进行跳转 %}

注意：文件名没有后缀且不能有空格

11、站内搜索

1、安装插件

1
2
npm install hexo-generator-search
npm install hexo-generator-searchdb

2、配置./_config.yml文件

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

3、配置./themes/_config.yml文件

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: -1
  # Unescape html strings to the readable one.
  unescape: true
  # Preload the search data when the page loads.
  preload: true

12、文章中公式渲染

1、下载hexo-renderer-kramed插件

1
npm install hexo-renderer-kramed --save

2、修改node_modules\kramed\lib\rules\inline.js文件

原文第11行：

1
2
//escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\]()#$+\-.!_>])/,

原文第20行：

1
2
//em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

3、在themes/next/_config.yml中进行设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Math Formulas Render Support
math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: true

  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
  katex:
    enable: true
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: true

13、选项卡

Next内置了tabs标签

官方教程：Tabs | NexT

first

second

1
2
3
4
5
6
7
8
{% tabs %}
<!-- tab first tab -->
 first
<!-- endtab -->
<!-- tab  second tab -->
 second
<!-- endtab -->
{% endtabs %}

14、统计字数

1、安装插件

1
npm install hexo-symbols-count-time

2、修改站点配置文件./_config.yml

1
2
3
# Post wordcount display settings
symbols_count_time:
  symbols: true

15、隐藏文章

1、安装插件

1
npm install hexo-hide-posts

2、在要隐藏文章的Front-matter中添加

1
hidden: true

16、隐藏显示某一元素

直接在文章中插入 HTML 和 Script 就可以。

1
2
<!-- 上方按钮在md中的代码 -->
<button name="hide-button" type="button" onclick="hide()">点击隐藏</button>

</span>

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
<button name="hide-button" type="button" onclick="hide()">点击隐藏下方代码</button>

<span id="btn-code">

``` html
<!-- 上方按钮在md中的代码 -->
<button name="hide-button" type="button" onclick="hide()">点击隐藏</button>
```

</span>

<script>
function hide() {
    var code = document.getElementById('btn-code');
    var btn = document.getElementById('btn')
    if (code.style.display=="none") {
        code.style.display="";
        btn.textContent="点击隐藏下方代码";
    }
    else{
        code.style.display="none";
        btn.textContent="点击显示代码";
    }
}
</script>

17、放大图片

下载图片浏览放大插件

1
2
cd next/source/lib
git clone https://github.com/theme-next/theme-next-fancybox3 fancybox

修改配置文件

1
fancybox: true

效果

大图浏览

-1、集成常用的第三方服务

留坑

0、参考

Theme NexT