matery主题美化


修改页面配色

查找方法基本就是打开chrome浏览器的检查,选择想要查看的页面元素,然后看他的Style文件,找到关键词之后去hexo-theme-matery主题的css文件中查找后修改即可

打开 matery/source/css/matery.css 文件 搜索 .bg-color 大概在198行
修改background-image属性中linear-gradient内的值即可改成你自己想要的颜色。

添加文章显示作者名字

---------------------- layout/_partial/post-detail.ejs -----------------------

<div class="info-break-policy">
    <% if (page.author && page.author.length > 0) { %>
        <i class="fa fa-pencil"></i> 作者: <%- page.author %>
     <% } else { %>
    <i class="fa fa-pencil"></i> 作者: <%- config.author %>
    <% } %>
</div>

添加一言

如果需要出处的话可以使用以下代码,不过应该有更简便的写法,不过id的参数我调了好几次都没成功。

--------------------------- layout/_widget/dream.ejs ---------------------------

<div class="row">
   <div class="col l8 offset-l2 m10 offset-m1 s10 offset-s1 center-align text">
	<div id="hitokoto">:D 获取中...</div>
	<i id="hitofrom">:D 获取中...</i>
	<script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>
	<script>
	fetch('https://v1.hitokoto.cn')
		.then(function (res){
		return res.json();
		})
		.then(function (data) {
		var hitokoto = document.getElementById('hitokoto');
		hitokoto.innerText = '\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + data.hitokoto;
		var hitofrom = document.getElementById('hitofrom');
		hitofrom.innerText = "——" + "《" + data.from + "》" + '\xa0'; 
		})
		.catch(function (err) {
		console.error(err);
		})
	</script>
   </div>
 </div>

算了,大家直接从以下两个链接参考就行:

推荐,全都可以使用

部分过时,仅供参考

颜色选择可以从下面找:

颜色名称及色样表(HTML版)


文章作者: 远方客
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 远方客 !
评论
 上一篇
markdown使用流程图 markdown使用流程图
该插件基于flowchart.js,因此您可以按以下方式定义图表: ​```flow st=>start: Start|past:>http://www.google.com[blank] e=>end: End:>
2020-01-29 远方客
下一篇 
CSS笔记之图标 CSS笔记之图标
最近心血来潮想要修改一下网站的一些图标,原本以为它们实在source里面使用图片的方式保存的,但是在source找了一圈也没有,再看看主题配置文件,在进行百度,最后发现 icon都是用CSS实现的,真实神奇,果然在hexo-theme-ma
2020-01-29 远方客
  目录