🔍 检索绿色通道
     1.JCR-IF查询      2.CiteScore-IF查询     3.SCI检索     4.中科院分区查询     5.SSCI检索     6.AHCI检索     7.ESCI检索(新增)     8.EI检索     9.EI检索备用     10.ISTP/CPCI检索备用(新增)      11.梅斯期刊智能查询     12.CSCD检索     13.CSSCI检索     14.北大核心检索      15.国自然官方查询     16.国自然梅斯查询     17.国自然科学网查询     18.论文被检索情况查询方法

Hexo更改banner和footer的宽度,不要平铺整个页面


有人喜欢将导航栏banner宽度铺满整个页面,有人喜欢设置导航栏banner宽度与正文和小插件宽度之和相等。

Hexo Landscape主题自带的banner即为上述第一种情况,不需要做修改。

本文目的在于要实现第二种情况的banner,网上大概搜索了相关关键词没有查到方案,就自己试了很久,功夫不负有心人,试出了现在的效果,见我的主页

包括以下操作:

  • 更改 themes\landscape\layout\layout.ejs 的内容
  • 微调 \themes\landscape\source\css_partial\header.styl 的内容

layout.ejs 的内容更改为:

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
<%- partial('_partial/head') %>
<body>
<div id="container">
<div id="wrap">
<div class="outer">
<%- partial('_partial/header', null, {cache: !config.relative_link}) %>
<!-- 修改section "main"-->
<section id="main"><%- body %>
</section>
<!-- 下面的内容需注意每个<div>和</div>的位置和内容-->
<% if (theme.sidebar && theme.sidebar !== 'bottom'){ %>
<%- partial('_partial/sidebar', null, {cache: !config.relative_link}) %>
<% } %>
</div>
<div class="outer">
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
</div>
</div>
<%- partial('_partial/mobile-nav', null, {cache: !config.relative_link}) %>
<%- partial('_partial/after-footer') %>
</div>
</body>
</html>



由于上述更改完成后,(banner的宽度) > (正文+小插件的宽度之和),因为多了正文左侧和小插件右侧的gutter-width的宽度,因此,为了达到完全等宽的效果,需将

header.styl 的内容微调了的代码展示如下:

(由于左右两侧gutter-width的默认宽度为 20 px,所以下列 left:的距离均由原本的 0 更改为 10px)

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
#header
height: banner-height
position: relative
border-bottom: none
&:before, &:after
content: ""
position: absolute
left: 0
right: 0
height: 0
&:before
top: 0
background: #fff
&:after
bottom: 0
background: #fff
#header-outer
height: 100%
position: relative
#header-inner
position: absolute
bottom: 0
left: 10 px
overflow: hidden
#banner
position: absolute
top: 0
left: 10 px
width: (column-width + gutter-width) * columns
height: 100%
background: url(banner-url) center #000
background-size: 100% 100%;
z-index: -1
#header-title
text-align: center
height: logo-size
position: absolute
top: 30%
left: 10 px
margin-top: logo-size * -0.5

以上!



<已有 次阅读>


由于本文作者水平有限,文中如有错误之处,欢迎大家批评指正!

① 本文仅代表作者个人观点,不代表任何其它立场,欢迎交流合作!

② 转载与分享请注明:本文源于为学为研网 http://meiweiping.cn

(>看完记得五星好评哦亲<)

分享到:
    友情链接
    e教学: 蓝墨云班课     传课网     慕课网     作业帮
    BBS: 小木虫     丁香园     科学网bbs     零点花园     数据狗论坛     ResearchGate
    预印本: 中国科技论文在线(教育部)     ChinaXiv(中科院)     bioRxiv(冷泉港)     arXiv(康奈尔大学)
    科研资讯: 科学网   科学之家     51science     Publons     J-STAGE     日本の研究
    信息查询: 中国研究生招生信息网     学信网(学历查询)     中国人事考试网     更多>>
    网站建设: Hexo     极简图床     sm.ms     html-unicode     UTF-8转码     颜色代码
    关于本站: 关于我们      Logo含义      广告合作      免责声明      联系我们      RSS订阅