next主题中设置mist主题内容居中

记得之前用 next 主题选择 mist scheme 时，页面中的内容是默认居中的。最近换到 mist 主题的时候发现默认左对齐，看着很难受，网上搜的教程也不全，果然还是自己懒，其实稍微懂点 web 前端，自己在配置文件里改就行了。

next 的配置文件都在Hexo\themes\next\source\css\_schemes\Mist目录下，这里Hexo为安装时自定义的目录名。首先得让博客内容居中，找到此目录下_posts-expanded.styl文件用文本编辑器打开，建议 Sublime 。打开后找到这段代码

.post-title{
    ...
}

修改text-align属性为text-align: center;，没有这句话就手动添加，那么.post-title修改地哪儿呢，看下图

所以修改地就是每篇文章的标题了（顺带分享我的 Github 博客吧，小伙伴们可以进去看看哦，肯定有你想看的！你懂得~手动滑稽）

那么还想修改的地方多了去了，总不能一个个说吧，每个人需求不同。所以借助上图这种方法就可以找到要修改的地方，自己进配置文件里设置。如果不知道怎么找的话，看下面，懂的跳过

• 浏览器打开博客页面时，右键点击检查选项，或者直接按快捷键F12，点击如图所示左边圈出来的箭头，之后鼠标移动到页面的每一个地方都会出现阴影标记这一部分的源代码，比如下图标题下那一栏就是 class 为.post-meta的 div 标签，在_posts-expanded.styl就可以设置text-align: center;

掌握了这个方法之后，你可以简单地修改成自己想要的样子，无非是找到配置文件哪个目录下哪个文件里了；比如还想删掉 mist 主题底部那一坨 “由XXX提供支持” 之类的东西，找到Hexo\themes\next\layout目录下index.swig中这一坨代码删掉

{% if theme.footer.powered %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
{% endif %}

{% if theme.footer.powered and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{% endif %}

{% if theme.footer.theme.enable %}
  <div class="theme-info">{#
  #}{{ __('footer.theme') }} &mdash; {#
  #}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
    #}NexT.{{ theme.scheme }}{#
  #}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
{% endif %}

屏幕截图(15).png

直接删掉就像上图一样。当然，要是想完全掌控自己博客的样子还是去看源码和官方文档比较好，懒得话或者需求较小 Google 一下就行了。

(感觉水了一篇没啥技术含量的文章，不过如果这篇文章解决了你的一些问题的话，给我个评论吧，让我知道这类文章还有没有意义写吧~)

图：The Strange, Satirical Illustrations of Alex Gamsu Jenkins
by Andy SmithPosted on November 21, 2017