继续完善文章详情页
现在的页面右边留空太多了，整体看上去不够居中。所以调下css:1
2
3
4
5
6article.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
7article.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 | tocbot: |
其中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群和公众号
