Melody主题配置

编程喜欢的样子

记录一些对主题的修改。

Melody的原生主题已经很漂亮了,作者给出的顶部图配置修改有三个选项。但是还不是我想要的效果。

首先,底部栏的背景图片一直会在,而我更喜欢纯色。
再,期望顶部图不出现在文章页。
修改layout/includs/layout.pug 文件
定义底部图片的代码如下:

1
2
3
4
5
6
- var top_img = page.top_img || theme.post_meta.top_img || theme.top_img || config.top_img || true
- var bg_img = top_img !== true ? `background-image: url(${top_img})` : ''
- var footer_bg_class= bg_img ? 'footer-bg' : ''
- var no_footer_bg=''
footer(style=no_footer_bg class=footer_bg_class)
include ./footer.pug

我比较懒,直接新建了一个变量值为空no_footer_bg='',footer( )中引用即可。

文章页中关闭顶部图,修改文件layout/post.pug,将 top_img 的值修改为 false。

1
2
3
4
5
block top_img
- var top_img = false //- page.top_img || theme.post_meta.top_img || theme.top_img || config.top_img
if (top_img && page.top_img !== false)
- var bg_img = top_img !== true ? `background-image: url(${top_img})` : ''
- var flag = top_img === true ? 'no-bg' : ''

评论框优化

新建一个文件melody\source\css\_layout\vlaine.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.v .vrow .vcol.vcol-30{display:none;}
.v .vrow .vcol.vcol-70{width: 100% !important;height: 1rem;}
.v .vsys{display: none !important;}
.v .vrow .vcol.vcol-40 {display: none !important;}
.v .vcopy {display: none;}
.v .vicon {display: none;}
.v .vwrap{padding: 0 0 44px;}
.v .veditor{min-height:7rem;resize:none;}
.v .vwrap .vedit{ padding-top:0}
.v .vwrap .vheader{width: 50%;bottom:0;position: absolute;background: rgba(0, 0, 0, 0);right: 115px;}
.v .vwrap .vheader.item2 .vinput {width: 50%;height: 1rem;}
.v .vinput{padding: 10px 15px;}
.v .vwrap .vedit .vctrl{margin-top:-44px;right:0;position:absolute;margin-right:-3px;}
.v .vwrap .vcontrol{ position:absolute;right:0;bottom:0;width:20%;padding-top:0px;}
.v .vbtn.vsubmit{border-radius: 0;padding: 0 0 0 0;color: #fff;line-height: 33px;width:10%;border: double ;background:#1abc9c;}

感觉是负优化,不过我喜欢
vcomment

关闭图片标题

melody\source\css\_layout\post.styl文件中,新增下面样式

1
2
3
4
5
//关闭图片标题
#content-inner .img-alt {
text-decoration: none;
display: none;
}

再有时间弄

还在尝试,不太懂前端的东西。唉 눈_눈
除了F12 定位参数,配置文件小改一下,其他东西还真不太会……

发现了一个基于Melody 的优化主题butterfly,可以个性化设置更多,有点好看哈。赶快去下载源码学习下。^-^