Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
executable file 139 lines (110 sloc) 5.74 KB
title date discription
美化引用
2018-07-24
前端笔记 - 一只热爱😻️前端的软件狗

引言

一个简洁的桌面可以极大的提高写作效率。 ──鲁迅

作为一名软件狗,对前端的东西不是特别在行,前不久看见有许多软件的文档介绍采用的是Meteor主题,第一眼见到这主题就被她的简洁所吸引,在我看来用这个主题来写日记再适合不过了,毕竟博客上面也不是什么都写(博客上面采用的是Michael.Lu的一款功能强大、自定义极强的hexo主题--Mellow),不得不说Michael.Lu老哥的技术很是强大啊。从之前的解决Hexo引擎渲染***table*标记到而今的去掉引用标记的红竖线。感受颇深,把DIY的过程记录下来。

收获:

  • 利用google的开发者工具获取好看的CSS样式,进行修改时可以充分利用控制台。
  • Github/Gitlab的commit history很重要,不仅方便查看修改,更能从中获得重要的信息

之前重装10.13.5的时候由于降级不兼容,同时时光胶囊里面没有保持博客文章副本,最新的一个副本保存在宿舍的机械硬盘里面没有带回家,所以就暂时没有动服务器上面的HTML源码,于是就弄了一个小站来记录暑假学习的收获,或许就是现在这个站点--diary,嗯,从meteor那里拐走了主题,并进行二次魔改:

主要改动

  • 去掉主题带的广告插件
  • 侧边菜单进行自定义,页脚底部修改
  • 修复table标记,个性化代码显示,美化引用

首先,美化引用,这个引用的样式来自Alexander Marenin,他在Chrome上面的MarkDown Preview的一个插件里面自带的ClearnessDark样式,但是这个插件并没有提供这个CSS的下载。于是我们打开任意一个网络上面的md文件,此时插件进行渲染,显示出正常的阅读页面,打开Chrome的开发者工具查看调用了哪些样式,并将其保存到本地,查看样式后我提取了两个部分的代码。

` > `引用标记显示一个双引号
blockquote {
    margin: 0;
    padding: 0;
}
blockquote {
    padding: 13px 13px 21px 15px;
    margin-bottom: 18px;
    font-family:georgia,serif;
    font-style: italic;
}
blockquote:before {
    content:"\201C";
    font-size:40px;
    margin-left:-10px;
    font-family:georgia,serif;
    color:#eee;
}
blockquote p {
    font-size: 14px;
    font-weight: 300;
    line-height: 18px;
    margin-bottom: 0;
    font-style: italic;
}

代码块配色方案
code, pre {
    font-family: Monaco, Andale Mono, Courier New, monospace;
}
code {
	color: #ff4a14;
    padding: 1px 3px;
    font-size: 12px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
pre {
    display: block;
    padding: 14px;
    margin: 0 0 18px;
    line-height: 16px;
    font-size: 11px;
    border: 1px solid #bf370f;
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}
pre code {
    background-color: #282a36;
    color: #ff4a14;
    font-size: 11px;
    padding: 0;
}

提取这两个代码,把它加到了page.ejs里面,引号是显示了不过左侧的红竖线却没有去掉,

Bug

尝试改动相关参数,无果,遂群中询问,群主大大,很快就解决了。 原本没有美化之前,引用标记显示是这个样子的:

红竖线

这里再次使用Chrome的开发者工具:

新技能

可以看到这里的红色竖线是由brodr-left,将其去掉,或者使用broder: none;覆盖掉,就可以去掉这条红色的竖线。

类似这样的东西,你只需要把控制台打开,找到对应的样式以及class,然后再custom.less里覆盖掉就行了 -- Michael.Lu

按照这种方法,我很快就把代码块的配色弄好了。

接下来就是这个table标记了。

commit history

打开Michael.Lu的主题Repo,我找到了他之前解决table标记的提交记录,主要是这一个fixed table display in the index-card下面👇🏻的一条提交记录fixed #18#18),查看代码改动的部分,同样把它放进page.ejs里面:

修复table标记
<!--fix table 使用标签<table class="class">需要额外加代码,-->
          <%
                page.content = page.content.replace(/<table>(.+)<\/table>/, function(match, $1) {
                   $1 = $1.replace(/<br>/g, '');
                   return `<table>${$1}</table>`;
                });            %>
          <!--fix table 注意要放在page.content前面。-->
          <%- page.content %>

把它放进<div class="document-formatting"></div>里面。

可以收工了。