Hexo 导航栏居中 + 搜索图标右置，布局更顺眼

更新于2026-08-21|website

|总字数:66|阅读时长:1分钟|浏览量:

blogroot\themes\butterfly\source\css
新建nav_middle.css

/* 导航栏做居中处理 */
#nav-right{
    flex:1 1 auto;
    justify-content: flex-end;
    margin-left: auto;
    display: flex;
    flex-wrap:nowrap;
}

主题配置文件_config.butterfly.yml插入CSS文件

1
2
3

inject:
  head:
    - <link rel="stylesheet" href="/css/nav_middle.css?1">

文章作者: Geek

文章链接: https://macin.top/posts/d045332/

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源极客的赛博空间 | 专注 AI 与技术分享！

web hexo CSS navigation search

相关推荐

Hexo 博客头图透明背景设置，页面更高级

Hexo 博客一张图背景设置：themes/butterfly/source/css 新建 CSS 文件，主题配置文件 _config.butterfly.yml 插入，实现全站单图背景。

Hexo 夜间模式遮罩 + 阅读模式优化，熬夜刷文不刺眼

Hexo 博客底色透明、夜间模式遮罩与阅读模式优化：新建 night.css 并在主题配置文件插入，打造更舒适的阅读体验。

Hexo 接入百度 API 提交，新文章秒收录（hexo-baidu-url-submit）

Hexo 百度 API 提交教程：安装 hexo-baidu-url-submit 插件，配置站点后每次 hexo d 部署自动向百度提交 URL，加快博客收录提升 SEO。

Hexo Butterfly 换 CDN 替代 jsDelivr，国内访问速度起飞

Hexo Butterfly 主题自定义 CDN 代替 jsDelivr：jsDelivr 无法使用后，新版可切本地模式，旧版可配置第三方 CDN，修改 _config.yml 提升博客访问速度。

Hexo 本地安装部署教程 + 常见报错排查，新手一次跑通

HEXO 本地安装部署教程：Node+Git 环境准备、初始化工程、安装 Butterfly 主题与常见报错解决（缺 pug/stylus 渲染器等），新手也能快速搭建博客。

Hexo 常用命令 + Markdown 语法速查，更新博文就靠这几条

Hexo 常用命令与 Markdown 语法速查：记录发布博文最常用的 hexo 命令（本地预览、部署等）与常用 Markdown 语法，看一遍就会用。

Gulp 压缩 Hexo 静态资源，CSS/JS/HTML 体积砍半，访问更快

gulp 压缩 Hexo 博客静态资源教程：配合 gulp-html-minifier-terser 等插件压缩 css、js、html，附插件安装与配置方法，博客加载速度明显提升。

阿里巴巴普惠字体：免费商用字体，网站排版直接套

阿里巴巴普惠字体：免费商用字体，放入主题自定义 CSS 即可更换网站字体为阿里巴巴普惠体，版权无忧。

Hexo Butterfly 接入 PWA：把博客装成 App，离线也能看

Hexo Butterfly 主题加入 PWA（渐进式 Web 应用）：让博客可安装到桌面以原生应用方式浏览，配合缓存机制加速访问，附图标制作与 manifest 生成教程。

评论

数据加载中