本站插件

本站插件

记录下本站使用的插件,方便以后查看。

本网站的风格很大程度上参考了酷壳,使用了同一款主题 Nisarg。主题自定义了几个地方的 CSS

.site-header {
  background: #1d2b2d;
    height: 200px;
}

.site-header .site-branding .site-title::after {
    width: 100%;
}

article .entry-header .entry-meta::after {
    width: unset;
}

设置博客的 Banner 背景为黑色,将 Banner 标题以及文章标题下的分割线拉长。

另外,主题的中文语言包我没找到,就自己翻译了下。使用软件 Poedit 以下面文件作为模版创建新的翻译

wp-content/themes/nisarg/languages/nisarg.pot

将结果文件 zh_CN.mozh_CN.po 放到模板同级目录就行。我也只翻译了部分,比如评论数等。下面说下插件

1、WP Githuber MD

用于支持使用 Markdown 编写文章。主要做了下面的一些修改

(1)自定义了一些样式,主要是标题字体大小、间距之类的

article .entry-header .entry-title {
    line-height: 1.7em;
}

article pre {
    margin-bottom: 2.5em !important;
}

article .entry-content h1, h2, h3 {
    line-height: 1.7em;
}

article .entry-summary h1, h2, h3 {
    line-height: 1.7em;
}

另外有些地方,我不喜欢主题默认的将单词的首字母进行大写

article .entry-header .entry-title {
    text-transform: none;
}

article .entry-header .entry-meta .author a {
    text-transform: none;
}

(2)关于代码的展示

这个插件自带有 prism.js 代码高亮功能,这个需要到插件的设置页面去开启。另外,需要你在编写 Markdown 时指定好语言,也就是在三个反单引号后要跟上语言,代码才能正常高亮。我写东西的时候,没区分这么细,并且有些只是单纯的文本,也就没有指定,但我还是希望能高亮。我的解决方法是,自定义 JS 代码,在 HTML 准备好后,给 code 标签加上对应的 class

<script>
document.addEventListener('DOMContentLoaded', function (event) {
    // 给文章中的 pre code 标签添加语言类别 class
    var addLanguageClassToArtilePreTag = function () {
        var classNameToSet = 'language-bash';
        document.querySelectorAll('article pre code').forEach(function (obj, index) {
            if (obj.className.indexOf(classNameToSet) !== -1) {
                return true; // continue
            }
            obj.className += ' ' + classNameToSet;
        });
    };
    addLanguageClassToArtilePreTag();
});
</script>

自定义 JS 我用到了
Insert Headers and Footers 插件,使用这个可以统一的在 HTML 的头部和尾部分别自定义 CSS 和 JS,可以将不同的修改统一管理起来。

到这后,还没 OK。因为 WP Githuber MD 插件比较智能,如果刚开始保存文章的时候,没有指定代码语言,那么前端展示时就不会加载对应的代码高亮库。因此,即使 code 标签上有对应的 class,也看不到高亮效果。我修改了插件的源码,让其不管有没有指定语言都能加载。将方法

wp-content/plugins/wp-githuber-md/src/Modules/ModuleAbstract.php::is_module_should_be_loaded

直接 return true;

(3)关于图片大小的控制

开启插件的扩充功能 Markdown Extra 后,可以用以下语法给图片指定 class 属性

![](url){.width60}

对应 HTML

<img src="url" alt="" class="width60">

然后使用 Insert Headers and Footers 插件添加 CSS 类

<style>
.width60 {
    width: 60% !important;
}
</style>

这样就可以将图片的宽度控制在 60% 了。

PS:具体 Markdown Extra 能够设置哪些属性、除这个外还支持哪些语法,可以参考 https://michelf.ca/projects/php-markdown/extra

2、Easy Table of Contents

用于自动生成文章摘要。

3、WP-UTF8-Excerpt

用于自定义摘要的展示。两个方面

(1)在文章摘要末尾加上 <!--more-->,插件会自动提取文章前面部分作为摘要

(2)摘要后面的「继续阅读」风格与主题不搭,对插件源码进行了一些修改。将

wp-content/plugins/wp-utf8-excerpt/wp-utf8-excerpt.php

is_module_should_be_loaded 方法 $more 变量所在行修改成

    $permalink = get_permalink();
    $article_id = url_to_postid($permalink);
    $more = '<p><a class="more-link" href="' . $permalink . '#more-' . $article_id .  '">…</a></p>'
        . '<p class="read-more"><a class="btn btn-default" href="' . $permalink . '">' . $more_token . '</a></p>';

也就是,在文章摘要后面会展示三个点号,点击它会跳到全文中 more 锚点处继续阅读。另外,在下面还有一个「继续阅读」链接,点击它会跳转到全文开头。你可以在后台把「继续阅读」链接上的文字改为「阅读全文」。

4、WP-PostViews

用于展示文章阅读数。这个插件的使用可以查看官方文档,光启用这个插件是没有效果的,它需要你在需要展示浏览数的地方,插入下面的代码

<?php if(function_exists('the_views')) { the_views(); } ?>

我在这几个地方加入了这段代码

(1)首页。在

wp-content/themes/nisarg/template-parts/content-excerpt.php

中的 <?php nisarg_posted_on(); ?> 后面

(2)文章页面。在

wp-content/themes/nisarg/template-parts/content.php

中的 <?php nisarg_posted_on(); ?> 后面

(3)搜索页面。在

wp-content/themes/nisarg/template-parts/content-search.php

中的 <?php nisarg_posted_on(); ?> 后面

其它页面看自己的需要再加。

为了让「浏览次数」展示样式和日期一致,我在后台设置页面将「浏览次数模版」修改为了 <i class="fa fa-users"></i><a href="void(0)"> %VIEW_COUNT% 人阅读</a>

5、WP Super Cache

缓存插件。这个我只是简单的把它启用了,没有做高级的配置。需要注意的是,开启这个插件后,需要将 WP-PostViews 插件的「使用 AJAX 更新浏览量」配置开启,不然的话会导致缓存页面浏览次数不统计。

6、其它插件

Google XML Sitemaps 和「多合一 SEO 包」,前者用于生成站点地图,后者做 SEO 方面的优化。这两个插件我也是简单的启用了,没有做更多的配置。

PS:文中关于 CSS 的设置都是在主题「自定义」中的「额外 CSS」中添加的,JS 是通过 Insert Headers and Footers 插件管理。

(完)