呓语 | 杨英明的个人博客

专注于c++、Python,欢迎交流

By

hexo-theme-freemind.386 主题设置图片居中

前言

Hexo 是一款轻量级的博客框架,可以很轻松的生成静态网站,常用于搭配 gitpage 搭建博客。

而 hexo-theme-freemind.386 是 Hexo 的一款主题,github 主页见:blackshow/hexo-theme-freemind.386

本博客便采用了 Hexo 的 hexo-theme-freemind.386 主题搭建。

问题描述

hexo-theme-freemind.386 主题默认不支持图片居中,所有图片都是左对齐显示的,不太美观。

解决思路

其实图片没有居中也不怪 hexo-theme-freemind.386 主题,因为 hexo 中的文章都是用 markdown 编写的,还要渲染成 html 才能拿给主题用,所以主题拿到的 html 已经是固定的图片不居中的格式。

我们看一下 markdown 渲染之后的图片部分的 html:

<p>
  <a href="http://yangyingming.com/uploads/markdownx/2017/7/937706b6-8fb8-4c2e-8451-1133ef3d23d6.png" class="fancybox" rel="gallery0">
    <img src="http://yangyingming.com/uploads/markdownx/2017/7/937706b6-8fb8-4c2e-8451-1133ef3d23d6.png" alt="">
  </a>
</p>

这里我的解决办法是在外层的 p 标签上加一个 align="center" 属性,即:

<p align="center">
  <a href="http://yangyingming.com/uploads/markdownx/2017/7/937706b6-8fb8-4c2e-8451-1133ef3d23d6.png" class="fancybox" rel="gallery0">
    <img src="http://yangyingming.com/uploads/markdownx/2017/7/937706b6-8fb8-4c2e-8451-1133ef3d23d6.png" alt="">
  </a>
</p>

做到这一步需要在页面尾部添加一段 javascript 代码。

解决方案

修改 hexo-theme-freemind.386\layout_partial\after_footer.ejs 文件,在文件最后添加代码:

<script type="text/javascript">
  // img align center
  var imgs = document.getElementsByTagName("img");
  for(var i=0;i < imgs.length;i++){
    // current img element
    var img = imgs[i];
    // current img parent node
    var imgp = img.parentNode;
    // current img parent parent node
    var imgpp = img.parentNode.parentNode;
    // set p element center
    if(imgp.nodeName=='A' && imgpp.nodeName=='P'){
      imgpp.setAttribute("align","center");
    }
  }
</script>

原创声明

转载请注明:呓语 » hexo-theme-freemind.386 主题设置图片居中