最近登上博客突然发现,文章标题竟然自己变成居中的了

好家伙突然看上去就变得相当奇怪了,忍不了,于是开始想办法解决这个问题


简单分析

想到最近一次博客的变动就是,新添加了一个叫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;
}

就可以实现了

Last modification:April 11th, 2021 at 07:34 pm