Hexo博客主题NexT使用自定义的CSS样式

最新推荐文章于 2025-06-16 17:35:03 发布

Captain_Magicer

最新推荐文章于 2025-06-16 17:35:03 发布

阅读量5.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Blog 文章标签： hexo NexT markdown

本文链接：https://blog.csdn.net/captain_magicer/article/details/49073873

Blog 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Hexo博客主题NexT中添加和使用自定义CSS样式。首先，通过在样式文件夹下新建子集样式文件来保持原有文件整洁。然后，创建新的样式文件并按照Stylus格式编写自定义样式。举例说明，文章展示了如何为文章添加自定义样式的按钮，并推荐了一个CSS按钮样式生成网站以帮助用户快速创建所需样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址 http://magicer.xyz/2015/10/hexo-custom-style/

今天，创建自己的about页面的时候，像使用自定义的css样式，就像这是不是NexT可以使用自定义的CSS样式，片尝试了一下，还是可以的，因为markdown支持html标签，使用自定义的CSS样式还是不错的。下面总结一下具体的使用过程：

添加样式支持

为了不吧原先的像是文件搞得太乱，这里，添加子集的样式文件。
首先，在样式文件的source文件夹下找到css文件夹，打开main.styl文件，在最后添加：

    //My Layer
    //--------------------------------------------------
    @import "_my/mycss";

新建自定义样式

找到样式文件夹css 新建_my文件夹，在其中新建mycss.styl文件，之后就可以按照stylus的格式自定义样式了。

例子

例如：我想在文章中添加个自定义样式的按钮，怎么做呢？？？

打开新建的mycss.styl文件，在其中添加样式：

.myButton {
    background-color:#0f94bd;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:11px 27px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
    background-color:#5cbf2a;
}
.myButton:active {
    position:relative;
    top:1px;
}

引用：在想要引用的时候添加

<a href="#" class="myButton">MyButton</a>

样式如下：
MyButton
由于这里不是Hexo环境所以效果显示不出来可以转到原文地址查看效果

效果已经出来了，怎么样？？是不是瞬间高大上。。有想要使用的样式，自行百度，找到后粘贴即可使用。