sunwengang blog

Hexo Next主题优化(二)

字数统计: 1.1k阅读时长: 5 min
2019/07/18 Share

样式

页脚foot优化

爱心跳动

在Next主题根目录的配置文件修改

1
2
3
4
5
6
7
8
9
10
11
12
13
footer:
# Specify the date when the site was setup. If not defined, current year will be used.
since: 2019

# Icon between year and copyright info.
icon:
# Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/
# `heart` is recommended with animation in red (#ff0000).
name: heartbeat
# If you want to animate the icon, set it to true.
animated: true
# Change the color of icon, using Hex Code.
color: "#ff0000"

代码框样式

代码框样式(复制按钮)

在Next主题根目录的配置文件修改

主题根目录_config.yml
1
2
3
4
5
6
7
8
9
10
codeblock:
# Manual define the border radius in codeblock, leave it blank for the default value: 1
border_radius: 10 //代码框边缘圆角
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result
show_result: true
# Style: only 'flat' is currently available, leave it blank if you prefer default theme
style: flat //复制按钮

代码高亮主题

主题根目录_config.yml
1
2
3
4
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

diff样式

1
2
-  printf("Hello World!");
+ printf("Hello_World!");

改变显示字体的颜色

主要是侧边栏和文章主题内容(不包含标题)

source/custom/custom.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//主页的阅读全文、主内容字体,不包含标题
.main-inner {
p,span,a {color: #ffb6c1;}

background-color: rgba(255,255,255,0.5);
}

//上侧边栏
.header-inner {
p,span,a {color: #ffb6c1;}
background-color: rgba(255,255,255,0.5);
}

// 下侧边栏字体颜色
#sidebar {
p,span,a {color: #ffb6c1;} //改变颜色
}*/

自动更换背景图片

source/custom/custom.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body {
//以下是自动更换背景图片
background:url(https://source.unsplash.com/random/1600x900);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
background-size: 100% 100%;
}

//更换侧边标题栏图片
.site-meta {
//background: #BABABA //#5CADAD; //颜色
background-image:url(/images/subtitle1.jpg); //背景图片
background-position:50% 50%;
background-size: 100% 100%;
opacity: 0.9; //虚化
//p,span,a {color: #3D3D3D;} //字体颜色
}

背景虚化(解决搜索框被虚化的问题)

修改左侧栏菜单带搜索框的UI的背景颜色RGB值
其余的使用透明度
如此搜索框的就不会被虚化

source/custom/custom.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//主页的阅读全文、主内容字体,不包含标题
.main-inner {
//background-color: rgba(255,255,255.0.8);
opacity: 0.8;
}

//上侧边栏
.header-inner {
background-color: rgba(255,255,255,0.8); //只修改此处的背景颜色,以便搜索框不会被覆盖
//opacity: 0.75; //透明度,会覆盖到搜索框
}

//上侧边栏的标题栏
.site-meta {
background: #5CADAD; //颜色
//background-image:url(/images/huojinsi.jpg); //背景图片
}

// 下侧边栏
#sidebar {
//opacity: 0.8; //透明度
}

note 便签

主题配置文件搜索 note, 可设置风格和图标是否显示。存在部分样式无效的问题。

主题根目录_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: simple //默认样式
icons: true //图标
border_radius: 10 //圆角
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0

示例:

1
{% note default %}default是类型还有以下几种{% endnote %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% note default %}default{% endnote %}

{% note primary %}primary{% endnote %}

{% note success %}success{% endnote %}

{% note info %}info{% endnote %}

{% note warning %}warning{% endnote %}

{% note danger %}danger{% endnote %}

{% note %}空样式{% endnote %}

{% note danger no-icon %}danger no-icon{% endnote %}

另一种写法:

1
<div class="note danger"><p>danger</p></div>

<div class="note danger"><p>danger</p></div>

文章编辑

选项卡

“tab” 为选项卡的名称,可以自定义,数字是几表示从第几个选项卡开始。非必须,若数值为 - 1 则隐藏选项卡内容。
下载插件: npm i hexo-ruby-marks

1
2
3
4
5
6
7
8
9
10
11
{% tabs tab,2 %}
<!-- tab -->
this is tab1
<!-- endtab -->
<!-- tab -->
this is tab2
<!-- endtab -->
<!-- tab -->
this is tab3
<!-- endtab -->
{% endtabs %}

结果:

1
2
3
4
5
6
7
8
9
10
11
{% tabs tab,2 %}
<!-- tab -->
this is tab1
<!-- endtab -->
<!-- tab -->
this is tab2
<!-- endtab -->
<!-- tab -->
this is tab3
<!-- endtab -->
{% endtabs %}

引用(文章居中)

1
2
3
{% cq %}
**there are test words**
{% endcq %}
1
2
3
{% cq %}
**there are test words in center**
{% endcq %}

在文章中插入 iframe

1
{% iframe url [width] [height] %}
CATALOG
  1. 1. 样式
    1. 1.1. 页脚foot优化
    2. 1.2. 爱心跳动
  2. 2. 代码框样式
    1. 2.1. 代码框样式(复制按钮)
    2. 2.2. 代码高亮主题
  3. 3. diff样式
  4. 4. 改变显示字体的颜色
  5. 5. 自动更换背景图片
  6. 6. 背景虚化(解决搜索框被虚化的问题)
  7. 7. note 便签
  • 文章编辑
    1. 1. 选项卡
    2. 2. 引用(文章居中)
    3. 3. 在文章中插入 iframe