hexo基本操作

hexo

hexo的配置在三个地方

一个是hexo主目录下的_config.yml，这个用来对整个网站的设置

另外一个是hexo主目录下themes/next中的_config.yml，这个用来对网站主题的设置

这第三个就是为了更加个性化的设置的，前提是要有点html，以及网页调试的基础。themes/next/source/css/_custom/custom.styl

自定义主题

1
2
vim _config.yml		#修改hexo主目录下的配置
theme: next			#将主题设置为下载好了的next

自定义网站的标题、描述等

1
2
3
4
5
6
7
 6 title: NARCISSUS木
 7 subtitle: narcissus blog
 8 description: "for u in my love"
 9 keywords:
10 author: NARCISSUS木
11 language: zh-CN					#界面语言设置为中文
12 timezone: Asia/Shanghai

next设置

  • 主题风格选择

    1
    181 scheme: Mist	#选择mist这个风格

  • 页面底部设置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    65   copyright:				#留空显示author
    66 
    67   powered:					#不显示hexo授权图片
    68     # Hexo link (Powered by Hexo).
    69     enable: false
    70     # Version info of Hexo after Hexo link (vX.X.X).
    71     version: false
    72 
    73   theme:					#不显示hexo版本内容
    74     # Theme & scheme info link (Theme - NexT.scheme).
    75     enable: false                                                                                                  
    76     # Version info of NexT after scheme info (vX.X.X).
    77     version: false

  • 页面顶部菜单栏项目的添加

    默认的菜单栏有点少，可以将其他的都开启。也可以自定义菜单，不仅仅局限于给出的这些

    1
    2
    3
    4
    5
    6
    7
    8
    159 menu:
    160   home: / || home
    161   tags: /tags/ || tags
    162   categories: /categories/ || th
    163   archives: /archives/ || archive
    164   schedule: /schedule/ || calendar
    165   about: /about/ || user
    166   网站集锦: /website/ || link

    这样设置之后点击菜单时，会报错，因为没有关联网页，所以还需要将这些页面生成出来

    1
    2
    hexo n page about
    hexo n page website

文章的创建

先在_drafts下创建草稿，不会发布到网站上去，publish后才会转移到_posts下

创建草稿

1
hexo n draft 文章名

草稿发布前可以在本地预览

1
hexo s --drafts

发布草稿

1
hexo publish 文章名

直接创建文章，可直接发布到网站上

1
hexo n 文章名

然后使用编辑器来编辑文章

文章的发布

1
2
3
hexo clean		#清楚缓存
hexo g			#将md文件生成静态页面
hexo d			#同步到github上进行发布

本地查看

1
hexo s

修改文章的同时预览

不需要修改完后再hexo g &&　hexo s

1
hexo g -w	#一个终端开实时预览
1
hexo s		＃一个终端开本地服务

侧边头像设置

1
vim themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
227 avatar:                                                                                                            
228   # In theme directory (source/images): /images/avatar.gif
229   # In site directory (source/uploads): /uploads/avatar.gif
230   # You can also use other linking images.
231   #url: #/images/avatar.gif
232   url: https://hbimg.huabanimg.com/62479431e0811e471f0d94672049141a41d6c65413f9-hX0miG_fw658
233   # If true, the avatar would be dispalyed in circle.
234   rounded: true
235   # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
236   opacity: 0.8
237   # If true, the avatar would be rotated with the cursor.
238   rotated: false

添加背景等个性化配置

hexo主题提供了个性化配置网页的属性。需要通过网页调试，找到需要修改style的地方。

1
vim ~/Documents/hexo/themes/next/source/css/_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
23
24
25
26
27
28
29
30
31
32
33
// Custom styles.
body{
	background:url('https://s2.ax1x.com/2019/11/23/MH3BVJ.jpg');
	background-attachment: fixed;
}
.header{
	background:#7ab56ead;
}
.main-inner {
    background: rgba(234, 219, 192, 0.86);
	padding: 90px;
}

.footer{
	background: #7eaec1ad;
}
.menu-item-active a, .menu .menu-item a:hover, .menu .menu-item span.exturl:hover{
	background:#f87543;
}
.posts-expand .post-title-link {
    color: #687ede;
}
.posts-expand .post-meta {
    color: #f87171;
}
.sidebar {
    box-shadow: inset 0 2px 6px rgba(176, 174, 174, 0.34);
    background: rgba(234, 219, 192, 0.86);
}
a:hover, span.exturl:hover {
	 color: #000;
	 border-bottom-color: #fb6767;
}

上面就是对自己想要修改的部分进行了修改，比如加入背景图片，修改main背景色，以及sidebar，footbar等的颜色。唯一需要注意的就是背景图片是一个链接，所以首先就是要有这个图片的链接，那么从哪里来呢，方式有很多了，可以直接百度搜一张图片，找到链接就好；可以将图片存到云端，比如我的图片都是托管在了图床上了；当然还可以放到github上面；如果有自己的服务器，那也可以放到自己服务器上去。等等，只要可以通过网址访问的就行。

添加搜索功能

安装hexo-generator-searchdb 插件

1
npm install hexo-generator-searchdb --save

添加配置到hexo主目录下的_config.yml中，在Extensions下添加

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

修改主题配置文件themes/next/_config.yml

1
2
local_search:
  enable: true

给文章加密

编辑文件：

1
vim themes/next/layout/_partials/head/head.swig

在文章末尾script后添加

1
2
3
4
5
6
7
8
9
10
<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

在需要加密的文章的tags后面添加

1
password= 123456

例如：

1
2
3
4
5
6
7
8
1 ---                                                                                                                 
2 title: hexo基本操作
3 date: 2019-05-01 00:41:28
4 categories:
5     - hexo
6 tags:
7 password: 123456
8 ---

上面这个方法在本地运行可以加密，但是在github上面不能，也不知道原因，所以找到了另外一种方法：

1
npm install --save hexo-blog-encrypt

然后在hexo的配置文件末尾添加

1
2
encrypt:
	enable: true

同样是在需要加密的文章中添加

1
password: mypassword

添加分类

1
hexo new page categories

给模板添加分类，然后我们新建文章时就会自动添加分类属性
在 source/scarffolds/post.md 的 tags 上面添加 categories

1
2
3
4
title: {{ title }}
date: {{ date }}
categories:
tags:

然后新建文章后就可以在开头开到这个分类的属性了，就只需要填充就好了。