Hexo_NexT主题配置

发表于 | 分类

Hexo NexT主题定制化修改

折腾几天，总算是有了自己的Blog，也算是一个新的开始。 NexT主题的装修也零零散散花了些时间，期间也参考了不少其他博主的配置，总算 是部署成自己比较钟意的样式了。 为了便于之后的维护，对NexT主题配置文件的修改记录如下：

1.修改languages-Hans.yml

1
2
3
4
5
修改
overview: 站点概览 -> 关于作者
in: 分类于 -> 分类
添加
commentcount: 评论数

2.修改layout_macro.swig 

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
在“评论数”的符号后添加中文描述
<span class="post-meta-item-text">{{__('post.commentcount')}}&#58;</span>

分享图标后面添加描述
<i class="fa fa-share-alt" aria-hidden="true">分享页面|Share</i>

在文章末尾添加“The End”标记
<div>
    {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
    {% endif %}
</div>

修改文件结尾标签前的“#”为标签图标
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>

添加置顶功能执行
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save
添加置顶功能标签，插入到<div class="post-meta">标签下
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color=000000>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}

3.修改layout_partials.swig 

1
2
3
修改页面底部用户名前面的图标
<i class="fa fa-address-card"></i>

4.修改layout_partials.swig 

1
2
3
4
5
6
7
8
9
添加如下段，配合DaoVoice的使能功能
{% if theme.daovoice %}
  <script>  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}

5.修改layout_layout.swig 

1
2
3
4
5
6
7
添加如下段，使能首页右上角github链接
<a href="https://github.com/jxbuaa" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

在swig末尾，</body>前添加
<!-- 代码块复制功能 -->
<script type="text/javascript" src="/js/src/clipboard.min.js"></script>  
<script type="text/javascript" src="/js/src/clipboard-use.js"></script>

6.在**source*下添加两个js实现代码copy功能 

1
2
clipboard.min.js
clipboard-use.js

7.修改source_common-author.styl 

1
2
3
4
5
6
添加如下段，势能圆形头像和动态旋转效果
border-radius: 50%;
transition: 1.5s all;  
.site-author-image:hover {
    transform: rotate(360deg);
}

8.修改source_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
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
// 修改网站头部颜色
/* .headband {
    height: 3px;
    background: #bbb;
} */
.site-meta {
    padding: 40px 0;
    color: #fff;
    background: $winered;
}

.site-subtitle {
    // margin-top: 10px;
    // font-size: 13px;
    color: #ffffff;
}

// 修改无序列表前的符号为'.'
.posts-expand .post-body {
  ul li { list-style: square; }
}

// 鼠标移动至文章标题时的效果
.posts-expand .post-title-link {
  &::before {
    height: 1px;
    background-color: $winered;
	  transition-duration: 0s;
  }
  
  &:hover {
    color: $winered;
  }  
}

//代码块复制按钮
.highlight{
  //方便copy代码按钮（btn-copy）的定位
  position: relative;
}
.btn-copy {
    display: inline-block;
    cursor: pointer;
    background-color: #eee;
    background-image: linear-gradient(#fcfcfc,#eee);
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: #333;
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    padding: 2px 6px;
    position: absolute;
    right: 5px;
    top: 5px;
    opacity: 0;
}
.btn-copy span {
    margin-left: 5px;
}
.highlight:hover .btn-copy{
  opacity: 1;
}

9.修改source_variables.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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$winered						= rgba(174,50,54,0.85)

// Layout sizes
// --------------------------------------------------
$main-desktop					= 80%


// Background color for <body>
$body-bg-color					= gainsboro


// Pagination
// --------------------------------------------------
$pagination-link-hover-border   = $winered
$pagination-active-bg           = $winered


// Buttons
// --------------------------------------------------
$btn-default-radius             = 0
$btn-default-bg                 = white
$btn-default-color              = $winered
$btn-default-border-width       = 1px
$btn-default-border-color       = $winered
$btn-default-hover-bg           = $winered
$btn-default-hover-color        = white
$btn-default-hover-border-color = $winered


// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

// 主页文章上下左右间距
.post {
// margin-top: 5px;
// margin-bottom: 3px;
  padding: 3px;
}

10.修改**_config.yml** 

1
涉及改动内容较多，在此不再赘述

Hexo常用命令

  1. 清空工程，便于重新生成站点文件，改动涉及hexo框架内文件时使用 hexo clean
  1. 生成站点文件 hexo g
  1. 启动本地server，不更改port一般为http://localhost:4000 hexo s
  1. 生成站点文件，并部署到github hexo g -d

Ubuntu18.04部署、迁移Hexo

第一步，安装 NodeJs sudo apt install -y nodejs

第二步，安装 npm sudo apt install -y npm 如果提示node版本过低，可以执行下面方法升级node node -v #先查看本机node.js版本： sudo npm install -g n #安装node管理器n sudo n stable # 升级最新稳定版本

第三步，安装hexo npm install -g hexo-cli

第三步，安装hexo npm install -g hexo-cli 另：本地测试时，火狐浏览器会遇到证书问题 preference -> security -> Block dangerous and deceptive content

第四步，迁移hexo，拷贝文件及文件夹 拷贝_config.yml，theme/，source/，scaffolds/，package.json，.gitignore 删除.git/，node_modules/，public/，.deploy_git/，db.json

第五步，hexo路径执行 npm install 迁移完成 迁移博客切勿执行hexo init，配置文件_config.yml里面内容会被清空使用默认值

等后续有空后研究下利用docker镜像管理hexo的部署迁移

解决微相册图床问题

next 主题，编辑主题目录下的 next/layout/_partials/head.swig 文件，在头部加入下面的 meta 标签 <meta name="referrer" content="no-referrer" />

解决"下一页"图标问题

修改代码的位置themes\next\layout\_partials\pagination.swig <i class="fa fa-angle-left"></i> 修改为< <i class="fa fa-angle-right"></i> 修改为>

解决公式符号和默认语法冲突的问题

第一步，卸载默认公式渲染引擎 npm uninstall hexo-renderer-marked --save

第二步，安装Pandoc渲染引擎 sudo apt-get install pandoc npm install hexo-renderer-pandoc --save

第三步，解决hexo s报错 修改代码的位置node_modules\hexo-renderer-pandoc\index.js var args = [ '-f', 'markdown-smart'+extensions, '-t', 'html-smart', math] 修改为 var args = [ '-f', 'markdown'+extensions, '-t', 'html', math]

-------------The End-------------
🙈坚持原创技术分享，感谢支持🙈
0%