Hexo NexT从源码级别高度定制

最新推荐文章于 2024-02-28 16:02:02 发布

原创最新推荐文章于 2024-02-28 16:02:02 发布 · 置顶 · 4.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Hexo

Hexo 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何从源码级别优化Hexo NexT主题，包括CSS级别的优化，如改变博文标题对齐、显示副标题、调整菜单按钮和头部样式，以及Swig级别的优化，如修改底部Footer描述。

玩转了几天Hexo静态博客之后，发现可配置的东西基本上都已经配置过了，那还有什么地方可以优化呢？突然之间，灵机一动，发现了另一个可以高度定制与优化Hexo主题的方法：从源码级别优化。

Hexo NexT主题的文档结构

/languages   #用来配置国际化语言版本，里边包含各种个配置像的文本翻译。
/layout      #以swig文件来定义各种含有配置信息调用的布局
/scripts     #一些JS脚本
/source    
   /css      #用来修改自定义样式，需要掌握一定的css语法。
   /fonts    #定义字体文件，可以修改博客字体
   /images   #一些svg图片
   /js       #一些js脚本
   /vendors  
   /404.html #自定义的公益404页面
/test        #用于测试

CSS级别优化

通过修改主题中的CSS样式来进行优化，以下列出一些举例：

1.改变主页中博文标题的对齐方式

//themes/next/source/css/_variables/Mist.styl
//default is left,改变主页博文标题的对齐方式
$site-meta-text-align    = left

2.显示配置过的网站副标题（针对Mist模式）

//themes/next/source/css/_schemes/Mist/_logo.styl
.site-subtitle { display: none; }  //改变none为自己想要的值

3.改变菜单按钮的样式

//themes/next/source/css/_schemes/Mist/_menu.styl
  .menu-item a {
    //...
    &:hover {
        background: #003366;
        color: white;
        border-radius: 2px;
    }
  }

4.改变网站头部样式

//themes/next/source/css/_schemes/Mist/_header.styl

Swig级别优化

修改布局： themes/next/layout/_partials/footer.swig

如果你想问一些基本的配置，请访问Next 主题 Github 仓库。
如果你更牛逼，可以直接自定义新的或者修改原有的JS特效。

欢迎访问本人的优化结果：小卢同学