Vexo Hexo主题源码解析读懂EJS模板与Stylus模块化架构设计【免费下载链接】hexo-theme-vexo Vexo is a Hexo theme inspired by Vues official website.项目地址: https://gitcode.com/gh_mirrors/he/hexo-theme-vexoVexo 是一个受 Vue 官网启发的 Hexo 主题以标志性的绿色主色与卡片式布局著称。本文带你快速读懂 Vexo Hexo 主题的源码架构从 EJS 模板如何拼装出整个页面到 Stylus 样式如何实现模块化设计新手也能轻松看懂 Hexo 主题的内部构造。源码目录鸟瞰Hexo 主题的三大块一个 Hexo 主题其实只需要三样东西模板layout/ 静态资源source/ 配置_config.yml。Vexo 的目录结构把这一点体现得淋漓尽致hexo-theme-vexo/ ├── _config.yml # 主题配置菜单、评论、MathJax、本地搜索等开关 ├── layout/ # EJS 模板层决定 HTML 结构 │ ├── layout.ejs # 主骨架组装 head / header / body / footer │ ├── index.ejs # 首页文章列表 │ ├── page.ejs # 文章详情页 │ ├── _partial/ # 可复用局部模板头部、导航、页脚、目录、搜索… │ └── _third-party/ # 第三方集成MathJax、统计、本地搜索 ├── source/ # 静态资源 │ ├── css/ # Stylus 样式1 个入口 12 个模块化文件 │ │ └── _partial/ # 组件样式与 EJS partial 一一对应 │ ├── js/ # 前端交互脚本 │ └── fonts/ # 字体 └── lint.sh # 代码风格检查脚本核心思路layout/管长什么样结构source/css/管什么颜色样式_config.yml管开哪些功能开关。EJS 模板层layout.ejs 如何拼装主骨架layout/layout.ejs 是整个主题的主模板全文只有 10 行%- partial(_partial/head) % body %- partial(_partial/header) % %- body % %- partial(_partial/top) % %- partial(_partial/footer) % /body这就是典型的**骨架 插槽设计**partial()像搭积木一样插入子模板head、header、footer 各自独立维护%- body %一个内容插槽Hexo 会把当前页面首页/文章页/关于页渲染好的 HTML 塞进这里首页渲染index.ejs文章页渲染page.ejs最终都装进同一个骨架保证所有页面风格统一。EJS 语法速查表Vexo 全程使用 Hexo 内置的 EJS 模板引擎几个核心语法如下语法作用在 Vexo 中的典型用法% x %转义输出防 XSS输出页面标题%- x %不转义输出 HTML输出body、正文内容% if / for %条件与循环遍历菜单、判断评论系统partial(路径)引入子模板拼装 header、footertheme.xxx读取_config.yml配置控制功能开关url_for()/date()Hexo 助手函数生成文章链接、格式化日期首页 index.ejs一个标准的循环 截断layout/index.ejs 展示了列表页的经典写法% page.posts.each(function(post) { % article classarticle-card h2 classarticle-head a href%- url_for(post.path) %%- post.title %/a /h2 p classarticle-date%- date(post.date, LL) %/p值得留意的三个细节page.posts.each遍历当前页所有文章每张卡片包含标题、日期、摘要摘要降级策略L12-L16优先使用手动摘录post.excerpt没有就自动截断正文前 150 字分页按需加载L22-L24只有page.total 1时才引入分页器pager首页少渲染一个 DOM。文章页 page.ejs功能最密集的模板layout/page.ejs 是主题里最长也最全能的模板值得细看封面图有图用图无图生成L90-L96文章指定了 banner 就用 banner否则用 GeoPattern 根据 URL 自动生成一张几何图案保证每篇文章都有独特封面四套评论系统一键切换L51-L76Utterances / Gitment / UYAN / Disqus 通过theme.comment的值条件渲染互不干扰点击放大图片L108-L132纯前端实现的图片查看器带缩放与居中计算微信二维码分享L136-L143用 QRious 库把当前 URL 实时画成二维码。局部模板 _partial/把重复部分抽成积木layout/_partial/下的每个文件都是一块可复用积木文件职责header.ejs顶部导航菜单循环渲染 当前项高亮 移动端汉堡菜单nav.ejs上一篇 / 下一篇导航catalog.ejs用toc(page.content)生成文章目录footer.ejs版权信息、ICP 备案展示、代码高亮脚本search/localsearch_view.ejs本地搜索面板其中 header.ejs 的 L10 是菜单高亮的点睛之笔把theme.menu里的路径与当前页面path比对命中就加上active样式——菜单完全由配置驱动你在_config.yml加一项导航就自动多一项。第三方集成 _third-party/按需加载的开关_third-party/下的 mathjax.ejs、google_analytics.ejs、localsearch.ejs 每个文件自身都带条件判断例如 localsearch.ejs#L1-L3 只在theme.local_search.enable为 true 时才引入搜索脚本。设计要点不用的功能一个字节都不下发页面体积可控。Stylus 样式层模块化架构 设计变量入口文件 style.styl先定基调再拼组件source/css/style.styl 的组织方式非常清晰import _config font-face font-family: Source Sans Pro src: url(../fonts/SourceSansPro.ttf)文件开头引入全局变量与字体文件末尾L301-L312一次性import12 个组件样式文件import _partial/header import _partial/footer import _partial/pager import _partial/markdown import _partial/tags import _partial/catalog import _partial/nav import _partial/search中间则是全局基础样式body 字体、选中色、.flex-box等公共类。_config.styl主题的设计变量source/css/_config.styl 是全局样式的变量中心只有 21 行// colors color-primary #42b983 color-border #e5e5e5 color-dark #34495e // images logo-url images/logo.png arrow-url images/top.png m-mobile screen and (max-width: 480px) m-pad screen and (max-width: 960px)三个亮点color-primary #42b983——Vue 官网的标志性绿色全站主题色只在这里改一次图片路径全部变量化logo-url、alipay-url等换图不用满文件搜 url响应式断言集中定义m-mobile/m-pad两个断点被样式文件反复media引用改断点只改一处。组件样式与模板一一对应source/css/_partial/下的 12 个.styl文件header、footer、nav、pager、catalog、markdown、tags、categories、archive、about、project、search与layout/_partial/下的同名 EJS 模板一一对应。想改某个组件的样式直接找同名文件即可无需在几千行大文件里翻找。另外 Stylus 使用纯缩进语法无花括号、无分号嵌套非常自然比如 style.styl#L88-L95 中.article-head a的 hover 下划线效果仅用一层缩进就表达了嵌套选择器。_config.yml所有功能开关的中枢_config.yml 是使用者与主题交互的唯一入口模板层通过theme.xxx读取它menuL7-L13首页、Series、Tags、Archives、Projects、About 六项导航增删即生效commentL28-L48utterances/gitment/uyan/disqus四选一各自附带独立配置块功能开关catalog目录、donate打赏、qrcode二维码分享均为布尔值数学与搜索mathjax支持整站或按页启用local_search一键开启站内搜索合规展示icp/ga控制页脚备案号与公安备案的显示。✅ 正是这种配置驱动设计让同一套模板适配完全不同的博客配置而无需改任何 EJS 文件。工程化细节lint.sh 守护代码风格lint.sh 体现了项目的工程素养# Lint EJS files for f in $(find ./layout -name *.ejs); do node_modules/.bin/ejslint $f; done # Lint JS files for f in $(find ./source/js -name *.js); do node_modules/.bin/standard $f; doneEJS 模板用ejs-lint检查、JS 脚本用standard规范检查package.json 中通过npm run lint触发。前端脚本方面source/js/script.js 基于 jQuery 实现页面淡入动画、NProgress 顶部进度条、移动端菜单切换等交互与模板层职责分离。新手能从 Vexo 学到的 5 个架构经验骨架 插槽主模板只负责拼装页面差异交给body插槽结构永不混乱局部模板化重复出现的 header / footer / nav 抽成partial改一处全站生效配置驱动功能开关全部收敛到_config.yml模板只读theme.xxx样式设计变量颜色、图片、断点集中在_config.styl主题色一改全站换肤同名对称命名EJS partial 与 Stylus partial 一一对应维护时见名知文件。 Vexo 源码体量不大但麻雀虽小五脏俱全——把 EJS 的组件化拼装和 Stylus 的模块化分治这两招学走你就已经掌握了编写 Hexo 主题的核心架构方法。【免费下载链接】hexo-theme-vexo Vexo is a Hexo theme inspired by Vues official website.项目地址: https://gitcode.com/gh_mirrors/he/hexo-theme-vexo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考