新增 ejs 模块，完成首页左侧样式编写
This commit is contained in:
XPoet
parent
3b42e5c4c8
commit
66a12eac81
|
|
@ -0,0 +1,24 @@
|
||||||
|
<div class="site-info">
|
||||||
|
<img class="avatar" src="<%= theme.avatar %>" style="width:127px;">
|
||||||
|
<div class="title">
|
||||||
|
<a href="/"><%= config.title %></a>
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
<%= config.description %>
|
||||||
|
</div>
|
||||||
|
<!--<ul class="social-links">
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/xxxlee"><i class="fa fa-github"></i></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="mailto:x@jixian.io"><i class="fa fa-envelope"></i></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="http://sighttp.qq.com/authd?IDKEY=f0a87f9636f56db1e486c1c88daaf91c6074a2bb87f21ab8"><i
|
||||||
|
class="fa fa-qq"></i></a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://zhihu.com/people/windxlee"><i class="fa fa-mortar-board"></i></a>
|
||||||
|
</li>
|
||||||
|
</ul>-->
|
||||||
|
</div>
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
<footer id="footer">
|
<footer class="footer">
|
||||||
<div class="footer-info">
|
<div class="copyright-info">
|
||||||
© <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %><br>
|
© <%= date(new Date(), 'YYYY') %> <%= config.author%>
|
||||||
<%= __('powered_by') %> <a href="http://hexo.io/" target="_blank">Hexo</a>
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<!-- hexo 启动时，默认从 layout（入口）找 index 页面 -->
|
<!-- hexo 启动时，默认从 layout（入口）找 index 页面 -->
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="<%= config.language %>">
|
<html lang="<%= config.language %>">
|
||||||
<%- partial('head') %>
|
<%- partial('common/head') %>
|
||||||
<body>
|
<body>
|
||||||
<!-- body 表示可以显示其他页面内容（归档页面等等） -->
|
<!-- body 表示可以显示其他页面内容（归档页面等等）-->
|
||||||
<%- body %>
|
<%- body %>
|
||||||
<%- partial('scripts') %>
|
<%- partial('scripts') %>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,8 @@
|
||||||
<div class="left-side-container">
|
<div class="left-side-container">
|
||||||
|
<div class="site-info-container">
|
||||||
|
<%- partial('common/site-info') %>
|
||||||
|
</div>
|
||||||
|
<div class="footer-container">
|
||||||
|
<%- partial('footer') %>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
.site-info {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
padding 2px
|
||||||
|
border-radius 50%
|
||||||
|
border 1px solid #ddd
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #464646;
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.description {
|
||||||
|
padding 5px
|
||||||
|
font-size: 16px;
|
||||||
|
color: #565654;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
.footer {
|
||||||
|
.copyright-info {
|
||||||
|
font-size 12px
|
||||||
|
text-align center
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -11,14 +11,15 @@ right-side-width = 70%
|
||||||
|
|
||||||
.page-left {
|
.page-left {
|
||||||
float: left
|
float: left
|
||||||
width left-side-width
|
width: left-side-width
|
||||||
height 100%
|
height: 100%
|
||||||
|
position: fixed
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-right {
|
.page-right {
|
||||||
float: right
|
float: right
|
||||||
width right-side-width
|
width: right-side-width
|
||||||
height 100%
|
height: 100%
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,6 +1,21 @@
|
||||||
.left-side-container {
|
.left-side-container {
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
|
position relative
|
||||||
box-sizing border-box
|
box-sizing border-box
|
||||||
border-right 1px solid #f3f3f3
|
border-right 1px solid #f3f3f3
|
||||||
|
|
||||||
|
|
||||||
|
.site-info-container {
|
||||||
|
position absolute
|
||||||
|
width 100%
|
||||||
|
top 40%
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-container {
|
||||||
|
position absolute
|
||||||
|
width 100%
|
||||||
|
bottom 0
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -4,8 +4,10 @@
|
||||||
@import "index.styl"
|
@import "index.styl"
|
||||||
@import "left-side.styl"
|
@import "left-side.styl"
|
||||||
@import "right-side.styl"
|
@import "right-side.styl"
|
||||||
|
@import "footer.styl"
|
||||||
@import "common/nav.styl"
|
@import "common/nav.styl"
|
||||||
@import "common/article-post.styl"
|
@import "common/article-post.styl"
|
||||||
|
@import "common/site-info.styl"
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
.site-title {
|
.site-title {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue