hexo的美化——拓展篇

基础知识

css样式

  • hexo/themes/next/source/css/: 是next主题的样式文件,决定主题的外观。
  • hexo/themes/next/source/css/main.styl:汇总css文件夹中所有的样式。
  • hexo/themes/next/source/css/ _custom/custom.styl:是空的,专门让开发者扩展。

修改css

进入网页,F12进入调试模式(本次以谷歌浏览器为例,注意点击箭头指向的小箭头)。

通过观察可以发现整个头部是包裹在一个header里而且大家把鼠标放上去也可以很清楚的看到标签包裹的是哪些部分,那么通过开发工具可以看到右边对应的是生成在这个标签上class里的一些样式设置。

点击需要自己DIY的模块,我们可以暂时直接在更改对应数值进行更改样式,直到得到自己满意的效果,最后才去next里的一些文件进行部分的添加和修改来达到我们的目的。

注意箭头的几个点即可,改好之后记得copy下代码。

 

修改代码:找到你主题文件夹里的对应位置D:\hexo\blog\themes\next\source\css里面有5个文件夹和一个styl文件,
main.styl主要用于打包CSS代码输出成CSS样式的main.css文件。

注意:本人不提倡去修改除了_custom下的其他4个文件里的源代码,可能后面出问题不好还原。

           注释使用 // 而不是 # 。

 

给文章首页摘要添加阴影效果

打开blog\themes\next\source\css\_custom\custom.styl,添加

// Custom styles.
//首页文章阴影样式
.post {
    margin-top: 60px;
    margin-bottom: 60px;
    padding: 25px;
    -webkit-box-shadow: 0 0 14px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 14px rgba(202, 203, 204, .5);
}

添加在线聊天

在主题配置文件,搜索下图关键字。在注释对应网址注册账号,左侧Set up & customize获取ChatraID以及进行样式定制

### 关于Hexo博客页脚美化的最佳实践 对于希望提升Hexo博客视觉效果的用户来说,优化页脚是一个重要的方面。在进行这一工作时,可以借鉴已有的经验来实现更优的结果。 #### 使用官方推荐的方法调整样式 当考虑对基于Material主题的Hexo博客进行自定义时,建议优先采用官方文档中的指导原则[^1]。这不仅有助于保持系统的稳定性和兼容性,而且能确保随着版本迭代而获得最新的特性支持。 #### 配置文件内的CSS覆盖 如果目标是改变特定区域如页脚的设计,则可以在`_config.yml`或者相应子目录下的配置文件里引入额外的CSS规则。例如,在NexT主题环境下,可以通过编辑`scheme/Muse/layout/_partial/footer.swig`这样的模板文件路径来进行局部定制化处理[^2]。不过需要注意的是,直接修改源代码可能带来维护上的困难;因此提倡创建独立的静态资源文件夹用于存放私有样式的`.css`文件,并通过链接方式加载到页面中去。 #### 利用插件增强功能 除了直接编写HTML/CSS外,还可以探索Hexo社区提供的众多插件选项。某些专门针对外观改进设计的小工具或许正好满足需求——比如添加社交图标、版权说明或是返回顶部按钮等功能模块都能极大地丰富底部栏的内容构成[^3]。 ```html <!-- 在站点根目录下新建 source/css/custom.css 文件 --> <style> footer { background-color: #f8f9fa; padding: 2rem; } </style> <link rel="stylesheet" href="/css/custom.css"> ``` 上述方法提供了几种不同的途径来达到美化Hexo博客页脚的目的。每种策略都有各自的优点和适用场景,可以根据实际情况和个人偏好做出选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值