新增 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">
|
||||
<div class="footer-info">
|
||||
© <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %><br>
|
||||
<%= __('powered_by') %> <a href="http://hexo.io/" target="_blank">Hexo</a>
|
||||
<footer class="footer">
|
||||
<div class="copyright-info">
|
||||
© <%= date(new Date(), 'YYYY') %> <%= config.author%>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<!-- hexo 启动时，默认从 layout（入口）找 index 页面 -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="<%= config.language %>">
|
||||
<%- partial('head') %>
|
||||
<%- partial('common/head') %>
|
||||
<body>
|
||||
<!-- body 表示可以显示其他页面内容（归档页面等等） -->
|
||||
<!-- body 表示可以显示其他页面内容（归档页面等等）-->
|
||||
<%- body %>
|
||||
<%- partial('scripts') %>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
<div class="left-side-container">
|
||||
|
||||
<div class="site-info-container">
|
||||
<%- partial('common/site-info') %>
|
||||
</div>
|
||||
<div class="footer-container">
|
||||
<%- partial('footer') %>
|
||||
</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 {
|
||||
float: left
|
||||
width left-side-width
|
||||
height 100%
|
||||
width: left-side-width
|
||||
height: 100%
|
||||
position: fixed
|
||||
}
|
||||
|
||||
.page-right {
|
||||
float: right
|
||||
width right-side-width
|
||||
height 100%
|
||||
width: right-side-width
|
||||
height: 100%
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,6 +1,21 @@
|
|||
.left-side-container {
|
||||
width 100%
|
||||
height 100%
|
||||
position relative
|
||||
box-sizing border-box
|
||||
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 "left-side.styl"
|
||||
@import "right-side.styl"
|
||||
@import "footer.styl"
|
||||
@import "common/nav.styl"
|
||||
@import "common/article-post.styl"
|
||||
@import "common/site-info.styl"
|
||||
|
||||
.header {
|
||||
.site-title {
|
||||
|
|
|
|||
Loading…
Reference in New Issue