avatar

hojun

hello ,stranger

一个好奇的博客

weixinQrcode
  • 首页
  • 技术
  • 生活
  • 友链

都2020了,带你开发hexo主题(八)

继续完善文章详情页


现在的页面右边留空太多了,整体看上去不够居中。所以调下css:

1
2
3
4
5
6
article.wrapper.style1 > .inner {
padding: 2rem 2.5rem 3rem 2.5rem;
margin: 50px auto;
width: 960px;
box-shadow: 1px 0px 5px 1px #ccc;
}

接着图片和代码块超出了范围:

1
2
3
4
5
6
7
article.wrapper.style1 > .inner img {
width: 100%;
}

article.wrapper.style1 .highlight {
overflow: auto;
}

hexo-helper-tocbot添加文章目录t

如果觉得目录有需要的继续往下看,这里直接安利我之前开发的hexo插件hexo-helper-tocbot及教程hexo-helper-tocbot插件使用教程

安装

在cmd中使用npm或cnpm安装:

1
npm i hexo-helper-tocbot --save

配置

安装好后在主题下的config中添加教程中的配置:

1
2
3
4
5
6
tocbot:
contentSelector: .post-content
scrollSmooth: true
headingSelector: h1, h2, h3, h4, h5
headingsOffset: 45
scrollSmoothOffset: -45

其中headingsOffset和scrollSmoothOffset要和你主题的头部高度相对应。含义详见API

最后在article.ejs中添下如下代码(注意,这里要把content用

包起来才能识别)

添加返回首页按钮

网上找了个svg按钮,放上去,然后把a的href改为javascript:history.back(-1)就行,修改后代码如下:(可自由发挥,找更棒的)

1
2
3
4
5
6
7
8
9
10
<article class="wrapper style1 align-left">
<!-- 返回按扭 -->
<a href="javascript:history.back(-1)" class="cd-nav-trigger">
<span class="cd-nav-icon"></span>
<svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
<circle fill="transparent" stroke="#656e79" stroke-width="1" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle>
</svg>
</a>
......
......

css:

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
/* 返回按钮 */
.cd-nav-trigger {
transform: rotate(180deg);
}
.cd-nav-trigger {
position: fixed;
z-index: 3;
left: 5%;
top: 20px;
height: 54px;
width: 54px;
background-color: #233;
border-radius: 50%;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
transition: transform 0.5s;
}
#cd-nav {
color: #9cb3a8;
text-decoration: none;
}
.cd-nav-trigger .cd-nav-icon {
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
transform: translateX(-50%) translateY(-50%);
width: 22px;
height: 2px;
background-color: #ffffff;
}
.cd-nav-trigger circle {
stroke-dashoffset: 0;
transition: stroke-dashoffset 0.4s 0.3s;
}
.cd-nav-trigger circle {
transition: stroke-dashoffset 0.4s 0s;
}
.cd-nav-trigger .cd-nav-icon::before, .cd-nav-trigger .cd-nav-icon:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: inherit;
transform: translateZ(0);
backface-visibility: hidden;
transition: transform 0.5s, width 0.5s;
}
.cd-nav-trigger .cd-nav-icon::before {
transform-origin: right top;
transform: rotate(45deg);
}
.cd-nav-trigger .cd-nav-icon::after, .cd-nav-trigger .cd-nav-icon::before {
width: 50%;
transition: transform 0.5s, width 0.5s;
}
.cd-nav-trigger .cd-nav-icon::after {
transform-origin: right bottom;
transform: rotate(-45deg);
}

代码同步上传在github仓库和百度云上,关注回复story008获取。
未完待续 To be continued……

希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦

您的喜欢是作者写作最大的动力

打赏支持

QQ群和公众号

都2020了,带你开发hexo主题(九)
都2020了,带你开发hexo主题(七)