本站插件

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

本网站的风格很大程度上参考了酷壳，使用了同一款主题 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.mo 和 zh_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）在文章摘要末尾加上 ，插件会自动提取文章前面部分作为摘要

（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 插件管理。

（完）

kevinbai

Less is more

本站插件