修改Directory Lister的字体为小夜美化版并将字体本地化

背景

前一段时间,在Rat’s Blog上看到了小夜大佬Directory Lister美化修改版,但是发现网上下载下来的美化版都和小夜大佬的字体不一样。

自己安装好后是这样的

image

但是VPSMM的是这样的:

image

明显小夜大佬的下载站好看多了。是经过优化的字体。

那要如何修改呢。之前试着直接导入小夜大佬下载站的样式表, 但是还是没变化。今天重新试了一下,原来是缺少了Source code pro字体库。

这样的话我们需要将这个字体库加到自己的样式表并调用它。

修改过程

对比样式表

小夜大佬的样式表和自己的样式表对比一下后发现。自己的样式表有多处用到不同的font-family

打开css样式表,搜索font-family,发现小夜的样式表里面只有两处font-family

一处是第5行开始的body样式:

1
2
3
4
5
body {
padding: 70px 0 0;
font-size: 16px;
font-family: 'Source Code Pro',Lato,Helvetica,Arial,sans-serif;
}

另一处是第105行的file-info .sha1-hash样式

1
2
3
#file-info .sha1-hash {
font-family: 'Cutive Mono', monospace, serif;
}

但是实际上控制全局的字体样式只有body那个。

另一方面搜索我从网上下载到的小夜优化版本的CSS样式表。一共找到四处。

分别是23行,43行,49行,107行的样式表。

1
2
3
4
5
6
7
8
9
#page-navbar .navbar-text {
display: block;
float: left;
font-family: 'Cutive Mono', monospace, serif;
max-width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
1
2
3
4
5
#directory-list-header {
font-family: 'Cutive Mono', monospace, serif;
font-weight: bold;
padding: 10px 15px;
}
1
2
3
#directory-listing {
font-family: 'Cutive Mono', monospace, serif;
}
1
2
3
#file-info .sha1-hash {
font-family: 'Cutive Mono', monospace, serif;
}

所以这个版本的样式表在每个地方都定义了字体唯独body没有,而小夜优化版的样式表在body直接定义了。

修改样式表

知道了样式表的区别后,就对样式表进行修改。

先在body样式里面插入Source Code Pro字体。

1
2
3
4
5
body {
padding: 70px 0 0;
font-size: 16px;
font-family: 'Source Code Pro',Lato,Helvetica,Arial,sans-serif;
}

接着将其他地方的font-family注释或者删除。比如:23行,43行,49行的样式里面的font-family那一行,这些地方影响到Source Code Pro字体的生效。
css的注释方法是前后添加

1
/* 要注释的代码 */

加入Source Code Pro字体

小夜的是直接调用网上的字体库

1
<link href="//fonts.loli.net/css?family=Source+Code+Pro" rel="stylesheet">

你也可以这样,直接将这个代码加入到主题下面的主页文件index.php,比如我用的版本是/resources/themes/vpsmm/index.php,但是如果怕以后字体库失效的话可以把这个字体本地化(下载到自己的服务器)。

字体本地化

打开Source Code Pro的样式表
可以看到样式表内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* latin-ext */
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(https://gstatic.loli.net/s/sourcecodepro/v7/HI_SiYsKILxRpg3hIP6sJ7fM7PqlM-vWjMY.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(https://gstatic.loli.net/s/sourcecodepro/v7/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

其中有两个字体,我们可以将其下载下来。

这样会得到这两个字体

  • HI_SiYsKILxRpg3hIP6sJ7fM7PqlM-vWjMY.woff2
  • HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2
    字体的名字如果觉得太长要改成自己喜欢的名字也可以。这次我选择不修改。

将这两个字体文件传到服务器上。位置可以自己定。这次我是传到了/resources/themes/vpsmm/Source_Code_Pro里面,Source_Code_Pro是自己新建的文件夹。

这样我们可以通过调用这两个本地的字体来实现字体的样式。

在/resources/themes/vpsmm/css下面新建一个样式表命名为
Source_Code_Pro.css

内容为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* latin-ext */
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(/resources/themes/vpsmm/Source_Code_Pro/HI_SiYsKILxRpg3hIP6sJ7fM7PqlM-vWjMY.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(/resources/themes/vpsmm/Source_Code_Pro/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

其中url部分是刚刚上传的字体的路径,如果不一样请修改。

最后在主题下面的主页文件index.php(我的版本是在/resources/themes/vpsmm/index.php)里面的<head>标签内调用我们刚刚新建的包含这两个字体文件的样式表Source_Code_Pro.css,其实就是将前面的 加入Source Code Pro字体那个步骤里面的路径改为自己的本地样式表,而不是调用loli字体库的样式表。
<head>标签内的<!-- STYLES -->的最后加入

1
<link href="/resources/themes/vpsmm/css/Source_Code_Pro.css" rel="stylesheet">

这样就完成了。

对比

最后对比一下刚开始的截图

和小夜字体优化版一样的字体对比

是不是好看了许多。

感谢

您的支持将鼓励我继续创作!