🔍 检索绿色通道
     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 landscape中如何将导航栏设置为banner的底部


Hexo-Landscape主题中默认的导航栏内容(包括“主页”,“归档”等)被设置于Banner的顶部,但是,为了让访客在浏览网页是能更快地找到 导航栏 , 个人认为将其设置在 Banner底部 更加方便!

谷歌度娘都搜了一遍,并未发现有相关教程,因此,自己琢磨了一下,捣鼓出来了现在的效果,感觉还算可以,过程分享如下。

打开主题目录下的 hexo/theme/landscape/source/css/_partial/header.styl 文件,

找到如下默认设置:

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
#header-inner
position: relative
overflow: hidden
#header-title
text-align: center
height: logo-size
position: absolute
top: 50%
left: 0
margin-top: logo-size * -0.5
#main-nav
float: left
margin-left: -15px
.nav-icon
@extend $nav-link
font-family: font-icon
text-align: center
font-size: font-size
width: font-size
height: font-size
padding: 20px 3px
position: relative
cursor: pointer


将上述内容依次更改为:

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
#header-inner
position: absolute #此处有更改
top: 80% #此处有添加,80% 即 导航栏位置的设定
left: 0 #此处有添加
overflow: hidden
#header-title
text-align: center
height: logo-size
position: absolute
top: 40% #此处有更改
left: 0
margin-top: logo-size * -0.5
#main-nav
float: left
font-size: 18px #此处有添加,更改导航栏字体的大小,默认font-size=14px
margin-left: 30px
.nav-icon
@extend $nav-link
font-family: font-icon
text-align: center
font-size: 18px #此处有更改,更改导航栏图标的大小,默认font-size=14px
width: 18px #此处有更改
height: 18px #此处有更改
padding: 20px 15px
position: relative
cursor: pointer

以上更改结束,在Hexo根目录下运行 hexo g - d 即可查看效果。

当然,如果自己所使用的banner图片和导航栏文字不能很好吻合的话,请自行更改banner图片。


另外注意,
主题目录下的 hexo/theme/landscape/source/css/_variables.styl 文件中,将 “banner-height” 由默认的 300 px 改为 400 px 效果更佳。

1
2
3
4
5
// Header
logo-size = 40px
subtitle-size = 16px
banner-height = 300px # 更改此处为 400 px
banner-url = "images/banner.jpg"

其他设置请勿轻易更改!

以上。



<已有 次阅读>


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

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

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

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

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