新增 ejs 模块,完成首页左侧样式编写

This commit is contained in:
XPoet 2020-03-14 22:21:16 +08:00
parent 3b42e5c4c8
commit 66a12eac81
10 changed files with 92 additions and 11 deletions

View File

@ -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>

View File

@ -1,6 +1,5 @@
<footer id="footer"> <footer class="footer">
<div class="footer-info"> <div class="copyright-info">
&copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %><br> &copy; <%= date(new Date(), 'YYYY') %> <%= config.author%>
<%= __('powered_by') %> <a href="http://hexo.io/" target="_blank">Hexo</a>
</div> </div>
</footer> </footer>

View File

@ -1,7 +1,7 @@
<!-- 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 %>

View File

@ -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>

View File

@ -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;
}
}

6
source/css/footer.styl Normal file
View File

@ -0,0 +1,6 @@
.footer {
.copyright-info {
font-size 12px
text-align center
}
}

View File

@ -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%
} }
} }

View File

@ -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
}
} }

View File

@ -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 {