个人博客主页文章标签分类相册幻灯片
Hexo Theme Melody
|其它

主题配置问路径hexo-blog\themes\melody_config.yml

代码高亮主题

theme-melody 支持了Material Theme全部5种代码高亮样式：

  • default
  • darker
  • pale night
  • light
  • ocean (从v1.5.5开始支持)
1
highlight_theme: default # default/darker/pale night/light

代码换行

在默认情况下，hexo-highlight在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话，那么你可以考虑开启这个功能。

1
code_word_wrap: true

然后找到你站点的hexo配置文件_config.yml，你能看到类似如下highlight的配置：

1
2
3
4
5
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

请将line_number改成false:

1
2
3
4
5
highlight:
  enable: true
  line_number: false # <- 改这里
  auto_detect: false
  tab_replace:

导航菜单

在右上角的区域是导航菜单项。Hexo有默认的/和/archives的路径。如果你想拥有其他比如tags和categories的页面，请按照下面步骤来操作：

  1. 前往你的Hexo博客的根目录
  2. 输入hexo new page tags
  3. 你会找到source/tags/index.md这个文件
  4. 修改这个文件
    1
    2
    3
    4
    5
    ---
    title: 标签
    date: 2018-01-05 00:00:00
    type: "tags"
    ---

type必须是tags！如果你要增加categories页面的话也是一样的。

1
2
3
4
5
menu:
  Home: /
  Archives: /archives
  Tags: /tags
  Categories: /categories

你也可以修改菜单项名称

1
2
menu:
  主页: /

自动节选

现在，从版本1.5开始，如果你没有在melody.yml里设置auto_excerpt的选项，你的文章将会在首页上完整地展现出来。如果你在文章里加上了<!-- more -->标记，那么它将会被替换成阅读更多的一个按钮。如果你不想在每篇文章里都加上<!-- more -->这个标记，那么你可以通过设置auto_excerpt来自动帮你生成文章节选。（默认取前150个字）

1
2
3
auto_excerpt:
  enable: true
  length: 150

顶部图

顶部图是theme-melody最神奇的配置项. 它拥有true、false或者具体图片url三种值.

1
top_img: true # 默认图
1
top_img: false # 无图
1
top_img: https://xxxxx.jpg # 自定义图

为特定的文章页配置特定的顶部图

在你的文章md文件的头部，加入top_img项，然后输入你想要的顶部图的url即可

1
2
3
4
5
6
7
8
---
title: Hi, theme-melody!
tags:
  - hexo
  - hexo theme
top_img: https://xxxxxxx.jpg   # < top_img在这里插入
date: 2017-09-07
---

文章相关项

这个选项是用来显示文章的相关信息的。

1
2
3
4
post_meta:
  date_type: created # or updated 文章日期是创建日或者更新日
  categories: true # or false 是否显示分类
  tags: true # or false 是否显示标签

文章相关二维码

在你每篇文章的结尾，给读者展示你自己的二维码。二维码的图片url以及相关说明都取决于你。配置格式如下：

1
2
3
4
5
6
7
QR_code:
  - itemlist:
      img: https://xxxx1.jpg
      text: 支付宝打赏
  - itemlist:
      img: https://xxxx2.jpg
      text: 微信打赏

文章广告区

在你的文章页面里加上广告！你可以放置一个你自己想展示的广告或者也可以是个音乐播放器等等。这个区域你做主。
info中是想展示的内容

1
2
3
adv:
  enable: true
  info: <a href="https://www.vultr.com/?ref=7231808"><img src="https://www.vultr.com/media/banner_1.png" width="728" height="90"></a>

头像

1
avatar: https://xxxx.jpg

Follow Me 按钮

1
2
3
4
follow:
  enable: true
  url: 'https://github.com/USERNAME'
  text: 'Follow Me'

目录

你的文章能够拥有一个清晰的目录列表。目录位于侧边栏，并且会随着滚动条的滚动自动展开目录结构。

1
2
3
toc:
  enable: true # or false
  number: true # or false. 版本v1.5.6新增

为特定的文章配置特定的目录章节数字

在你的文章md文件的头部，加入toc_number项，并配置true或者false即可

1
2
3
4
5
6
7
title: Hi, theme-melody!
tags:
  - hexo
  - hexo theme
toc_number: false   # < add toc_number to here. 版本v1.5.6新增
date: 2017-09-07
---

页脚自定义文本

1
footer_custom_text: Hi, welcome to my <a href="https://molunerfinn.com">blog</a>!

幻灯片Slides页面

幻灯片Slides页面，可以做PPT展示

1
2
3
4
5
6
7
8
9
10
11
12
slide:
  separator: ---
  separator_vertical: --
  charset: utf-8
  theme: black
  mouseWheel: false
  transition: slide
  transitionSpeed: default
  parallaxBackgroundImage: ''
  parallaxBackgroundSize: ''
  parallaxBackgroundHorizontal: null
  parallaxBackgroundVertical: null

上述是 theme-melody 所提供的 reveal.js 的配置项, 可以参考官方文档的说明 https://github.com/hakimel/reveal.js#configuration

创建一个slide文章页面

像往常一样在文章文件夹里创建一个md文件. 在该文件的顶部配置区加上一个layout: slides配置项。

1
2
3
title: hexo-theme-melody v1.5 supports iframe & slides
date: 2018-03-06 19:57:52
layout: slides

除了在melody.yml里配置全局的slides页面属性，你也可以为你的某个页面配置单独的slide设置。

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
30
31
32
33
34
title: hexo-theme-melody v1.5 supports slides & iframe
date: 2018-03-06 19:57:52
tags: hexo
layout: slides
slide:
  theme: night
  separator: ===
  separator_vertical: ==
---

### hexo-theme-melody <small>v1.5</small>
<!-- .slide: data-background="#49B1F5" -->

Supports iframe & slides. You can use a layout called `slides` to enabled the slides layout.

Also you can add a `iframe` front-matter with the `slides` layout in your `md` file to enable the iframe page.

### Steps
<!-- .slide: data-transition="concave" data-background="#C7916B" -->

#### 1. Add a slides page

// ......

==

// ......

===

#### 2. Add the layout type
<!-- .slide: data-transition="fade" data-background="#00C4B6" -->

// ......

创建一个Iframe页面

如果你想创建一个只有Iframe的页面，可以在文章的顶部配置区加入iframe的选项。

1
2
3
4
title: hexo-theme-melody v1.5 supports iframe & slides
date: 2018-03-06 19:57:52
layout: slides
iframe: https://the-url-whatever-you-like

layout: slides必须指定，否则iframe的页面将不生效

创建Slides页面

  1. 前往你的Hexo博客的根目录
  2. 输入hexo new page slides
  3. 你会找到source/slides/index.md这个文件
  4. 修改这个文件

创建相册页

theme-melody 提供了一个叫做gallery的标签，让你能够在markdown文件里生成gallery-item。

修改你刚刚创建的source/gallery/index.md，并加上gallery 标签。

1
{% gallery img-url [title] %}
1
2
3
4
5
6
7
8
9
10
11
---
title: Gallery 
date: 2018-01-05 00:00:00
type: "gallery"
---
{% gallery https://ws1.sinaimg.cn/large/8700af19gy1fp5i6o2vghj20ea0eajse melody %}
{% gallery https://user-images.githubusercontent.com/12621342/37325500-23e8f77c-26c9-11e8-8e24-eb4346f1fff5.png background %}
{% gallery https://ws1.sinaimg.cn/large/8700af19gy1fp5i64zaxqj20b40b474b demo1 %}
{% gallery https://ws1.sinaimg.cn/large/8700af19ly1fn2h26q32uj21120kudqq demo2 %}
{% gallery https://ws1.sinaimg.cn/large/8700af19ly1fnhdaimi40j218g0p0dic demo3 %}
{% gallery https://ws1.sinaimg.cn/large/8700af19ly1fn2i5kjh2pj21120kuncd %}
文章作者: Fulin Zhang
文章链接: https://iuin.github.io/2019/hexo-melody/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 个人博客！
其他