blog配置文件备份兼搭建总结

发表于 | 阅读次数：

这个博客其实上周就已经建好了，只是上周有点忙，就忘了写了。

  这个博客其实上周就已经建好了，只是上周有点忙，就忘了写了。

  于是就趁着，这周四级考完，期末考试复习还没开始，还有时间写一份总结。还有就是为了以后移植博客方便，备份一下配置文件，防止哪天硬盘掉了，数据没了，blog就废了的尴尬눈_눈。

 hexo+github的搭建

  这个网上都有，感觉还是挺详细的，感觉多看几个文章就差不多了

 hexo的根目录的文件配置

  我这里用的是next的mist，因为用的人挺多的，美化也方便一些.

下面是代码

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

title: Frystal's blog
subtitle:
description:
author: frystal
language:  zh-CN
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:
  
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 
  order_by: -date
  
# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:frystal/frystal.github.io.git
  branch: master



# Live2D //左下角的看板娘配置（文件要手动拷贝到node_modules里，且要在这手动加入模型）

## https://github.com/EYHN/hexo-helper-live2d

live2d:

  enable: true

  scriptFrom: local # 默认

  pluginRootPath: live2dw/

  pluginJsPath: lib/

  pluginModelPath: assets/ # 模型文件相对与插件根目录路径

  tagMode: false

  debug: false

  model:

    # use: live2d-widget-model-koharu

    # use: live2d-widget-model-hibiki

    use: live2d-widget-model-z16
    
    # use: live2d-widget-model-shizuku

    scale: 1

    hHeadPos: 0.5

    vHeadPos: 0.618

  display:

    superSample: 2

    width: 100

    height: 175

    position: left

    # position: right

    hOffset: 0

    vOffset: 0

  mobile:

    show: true

    scale: 0.5

  react:

    opacityDefault: 0.7

    opacityOnHover: 0.2

# Security //文章密码（样例见test_long_blog)
##
encrypt:
    enable: true
    default_abstract: the content has been encrypted, enter the password to read.</br>
    default_message: Please enter the password to read.
    default_template:
                    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
                    <div id="hbe-security">
                        <div class="input-container">
                            <input type="password" class="form-control" id="pass" placeholder=" {{message}} " />
                            <label for="pass"> {{message}} </label>
                            <div class="bottom-line"></div>
                        </div>
                    </div>
                    <div id="encrypt-blog" style="display:none">
                        {{content}}
                    </div>

 Next的mist的主题配置的文件配置

  这个我感觉算是最麻烦的了 눈_눈，前前后后改了有四五天，一直是改了这个没了那个，调整字体的颜色与大小，文章的背景的透明度。

  好在，最后改完之后，虽说还是有在一些地方有一些毛病，但好在我的强迫症，已经被这个折磨一个星期后，没得差不多了，于是我也就忍下来了。等以后，在有空和有多余的肝的时候再更近一步优化§:з)))」∠)。

  （比如，在安卓机子上的Firefox上下翻页时，背景图片会忽大忽小，chrome上背景图片在最底下会有留白）

下面是_custom的代码

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
// Custom styles.
.headband {
    height: 1.5px;
    background-image: linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);
} 
.posts-expand {
    padding-top: 80px;
}
.posts-expand .post-meta {
    margin: 5px 0px 0px 0px;
}
.post-button {
    margin-top: 0px;
}

.brand{
    background-color: rgba(255, 255, 255, 0);
    margin-top: 15px;
    padding: 0px;
}
.posts-expand .post-title {
    font-size: 26px;
    font-weight: 700;
}
.posts-expand .post-meta .post-description {
    font-style: italic;
    font-size: 14px;
    margin-top: 30px;
    margin-bottom: 0px;
    color: #666;
}
.footer {
    line-height: 1.5;
    background-color: rgba(255, 255, 255, 0.5);
    color: #333;
   // border-top-width: 3px;
   // border-top-style: solid;
   // border-top-color: rgb(161, 102, 171);
   // box-shadow: 0px -10px 10px 0px rgba(0, 0, 0, 0.15);
}

   .posts-expand .post-tags a {
    border-bottom: none;
    margin-right: 0px;
    font-size: 13px;
    padding: 0px 5px;
    border-radius: 3px;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}
.posts-expand .post-tags a:hover {
    background: #eee;
}
// 文章底部留白更改
.post-widgets {
    padding-top: 0px;
}
.post-nav {
    margin-top: 30px;
}
// 去掉图片边框
.posts-expand .post-body img {
    border: none;
    padding: 0px;
}
// 文章``代码块的自定义样式
code {
    margin: 0px 4px;
}
// 文章```代码块顶部样式
.highlight figcaption {
    margin: 0em;
    padding: 0.5em;
    background: #eee;
    border-bottom: 1px solid #e9e9e9;
}
.highlight figcaption a {
    color: rgb(80, 115, 184);
}
// 文章```代码块diff样式
pre .addition {
    background: #e6ffed;
}
pre .deletion {
    background: #ffeef0;
}
// 时间轴年份
.posts-collapse .collection-title h1, .posts-collapse .collection-title h2 {
    color: rgb(10, 10, 10);
}
// 时间轴文章标题
.posts-collapse .post-title a {
    color: rgb(0, 0, 0);
}
.posts-collapse .post-title a:hover {
    color: rgb(161, 102, 171);
}
// 时间轴文章标题底部虚线
.posts-collapse .post-header:hover {
    border-bottom-color: rgb(161, 102, 171);
}
// archives页面顶部文字
.page-archive .archive-page-counter {
    color: rgb(0,0, 0);
}
// archives页面时间轴左边线条第一个圆点颜色
.page-archive .posts-collapse .archive-move-on {
    top: 10px;
    opacity: 1;
    background-color: rgb(187, 187, 187);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
// 分类页面
.post-block.page {
    margin-top: 40px;
    background: rgba(255,255,255,0.7);
  
}
.category-all-page {
   colour: rgb(0,0, 0);
   font-size: 24px;  //分类的字体
    padding: 86px 36px 36px 36px;
}
.category-list-item {
     colour: rgb(0,0, 0);
}


// 选中文字部分的样式
::selection {
    background-color: rgb(255, 241, 89);
    color: #555;
}

// 标签云页面超链接样式（为emoji特设）
.tag-cloud a {
    border-bottom: 1px solid rgb(80, 115, 184);
    text-decoration: none;
}
.tag-cloud a:hover {
    border-bottom: 1px solid rgb(161, 102, 171);
    text-decoration: none;
}

   
// 顶栏透明
.header {
   
    background-color: rgba(255, 255, 255, 0.8);
}
// 页面留白更改
.header-inner {
    padding-top: 0px;
    padding-bottom: 0px;
}
//侧栏透明
.sidebar {
    background-color: rgba(0,0,0,0.75) ;
}
// 主页文章添加阴影效果

 .post {

   margin-top: 60px;

   margin-bottom: 60px;

   padding: 25px;

   background: rgba(255,255,255,0.7);//背景文章透明度调节
   
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);

   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);

  }


    body {
    background-image:url(/images/background.jpg);//背景图片设置
    background-repeat: no-repeat;
    background-attachment:fixed;  //我感觉这个fixed
    background-position:50% 50%; 
    background-size:cover;

    }
 



.posts-collapse{
    background: rgba(255,255,255,0.7);//文章的背景透明度
}

ps：我这个虽然说是部分借鉴了https://reuixiy.github.io/technology/computer/computer-aided-art/2017/06/09/hexo-next-optimization.html 但是，我发现我写的与这个并不怎么兼容 눈_눈 ，尤其是在tag与categories的页面的透明度调节方面。

 Next的其余配置

  剩下的配置实在是太细了，front的那个字体我就改了不下5遍，现在是我也不知道我改了什么，还是等我什么时候整理好了，在传上来吧（咕咕咕~~）

  参考文章与博客

https://reuixiy.github.io/technology/computer/computer-aided-art/2017/06/09/hexo-next-optimization.html//文章美化
https://github.com/EYHN/hexo-helper-live2d//看板娘
https://github.com/MikeCoder/hexo-blog-encrypt/blob/master/ReadMe.zh.md文章密码设定