最近登上博客突然发现,文章标题竟然自己变成居中的了
好家伙突然看上去就变得相当奇怪了,忍不了,于是开始想办法解决这个问题
简单分析
想到最近一次博客的变动就是,新添加了一个叫CodePrettify
插件,这个插件的作用就是对Handsome主题自带的代码高亮做近一步的美化,就像下面的这样(一个简单的归并排序代码)。毕竟自带的代码高亮让我自己看起来都不易读,更别说让别人来看了
public class MergeSort {
public static void merge(int[] arr, int l, int m, int r) {
int[] leftArr = new int[m - l];
int[] rightArr = new int[r - m + 1];
for (int n = l; n - l < leftArr.length; n++) {
leftArr[n - l] = arr[n];
}
for (int n = m; n - m < rightArr.length; n++) {
rightArr[n - m] = arr[n];
}
int i = 0, j = 0, k = l;
while (i < leftArr.length && j < rightArr.length) {
if (leftArr[i] > rightArr[j]) {
arr[k] = rightArr[j];
k++;
j++;
} else {
arr[k] = leftArr[i];
i++;
k++;
}
}
for (int n = i; n < leftArr.length; n++) {
arr[k] = leftArr[n];
k++;
}
for (int n = j; n < rightArr.length; n++) {
arr[k] = rightArr[n];
k++;
}
}
public static void mergeSort(int[] arr, int l, int r) {
if (l == r) return;
int mid = (l + r) / 2;
mergeSort(arr, l, mid);
mergeSort(arr, mid + 1, r);
merge(arr, l, mid + 1, r);
}
}
既然怀疑到了是插件的原因,那就来看下为啥会这样吧
代码定位
首先去看一下使用CodePrettify
插件的步骤是哪些
1. 下载插件,解压到插件目录中
2. 更改插件目录名字为CodePrettify
3. 登录后台激活插件
4. 对插件进行一些设置
5. 替换handsome.min.css文件
6. 设置Pjax回调函数
首先怀疑到的是Pjax
回调函数,去看看写了什么
if (typeof Prism !== 'undefined') {
Prism.highlightAll(true,null);}
看了看好像也没什么问题
之后往回看,发现替换了主题的css文件
之后使用审查元素看了一下标题的css有哪些
搜索一下有没有值为center(居中常用)的属性
果然找到了这个字段
之后去替换后的css文件里面查找一下.index-post-title
这个类选择器相关的内容,果然找到了这一段内容
.index-post-title {
font-size: 22px;
padding-bottom: 1px;
text-align: center;
}
对比一下原来的css文件(原来的css文件没有排格式,眼睛都要看瞎了)发现并没有定义text-align
这个属性,我们只需要删除text-align
这一行或者把center改为left就可以了
操作之后,果然恢复正常了
拓展
CSS中的text-align
属性是常用的设置文本元素对齐方式的属性,如果我们在盒子模型中想要把标题变为居中的话,同理也只需要在handsome.min.css
加上这个
.index-post-title{
text-align: center;
}
就可以实现了