首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在pug模板中获取Hexo构建的站点变量?

在pug模板中获取Hexo构建的站点变量,可以通过以下步骤实现:

  1. 首先,在Hexo的配置文件 _config.yml 中定义你需要的站点变量,例如:
代码语言:txt
复制
site_title: My Hexo Site
site_description: A wonderful Hexo site
  1. 在Hexo的主题文件夹中找到使用pug模板的文件,通常是 _layout 文件夹下的 .pug 文件。
  2. 在需要获取站点变量的位置,使用pug的语法来引用变量,例如:
代码语言:txt
复制
h1= site_title
p= site_description
  1. 如果你需要在pug模板中使用更复杂的逻辑,可以使用pug的条件语句和循环语句来处理站点变量,例如:
代码语言:txt
复制
if site_title === 'My Hexo Site'
  p This is my site!
else
  p This is not my site.

需要注意的是,以上步骤假设你已经安装并配置了Hexo,并且使用了支持pug模板的主题。如果你还没有安装Hexo或者使用的主题不支持pug模板,你需要先进行相应的安装和配置。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供高性能、可扩展的云服务器实例,适用于各种应用场景。详情请参考:腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全可靠、低成本的对象存储服务,适用于存储和处理各种类型的数据。详情请参考:腾讯云对象存储
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

hexo-butterfly-首页改造

引入swiper_index参数(非负整数,值越大越靠前) ​ 针对可以选择性配置需要显示在首页内容 # 文章模板参考 --- title: 文章标题 date: 创建日期 updated:...clean & hexo g & hexo s 4.天气插件引入 构建步骤 注册免费天气预告组件:心知天气、和风天气开发平台 ​ 具体价格方案可参考官网说明,择优选择 心知天气 和风天气...v=2.0"> ​ 可结合窗口进行调试,主要注意是相对位置调节,对应选择固定在浏览器,随后大致控制其与导航栏站点标题相对距离即可(最好通过F12窗口进行适配调节,主要是修改...CONFIGleft、top配置即可) 修改主题文件内容 在 \themes\butterfly\layout\includes\headers 目录下 nav.pug 文件配置装载组件...代码段写入自定义hf_weather.js,随后在主题配置文件inject配置注入自定义hf_weather.js和官方提供he-simple-common.js inject: bottom

1.3K20

魔改笔记七:分类条及外链卡片

碎碎念 最近广泛交友,在和朋友klcdm聊天,了解到了他按照洪哥教程添加了一个分类条,于是我想要,在和星港聊天,了解到他又有改了加载动画,而我加载动画还是可怜原版动画,于是心动我又想要了...文件,所有的颜色我都尽量使用了butterfly主题自带变量进行了替代,确保大部分人可以正常显示。...: 这是这篇文章参考文章对应标签,由于直接添加文字会被错误识别,这里仅放图片,可以对照着查看,这里不再多做解释。...参考文章 引用站外地址,不保证站点可用性和安全性 Solitude:一款优雅 Hexo 主题,支持懒加载、PWA、Latex 以及多种评论系统 github@everfu 引用站外地址,不保证站点可用性和安全性...Butterfly魔改:动态分类条,可以根据页面变化而改变分类列表展示方式 张洪Heo · 分享设计与科技生活 引用站外地址,不保证站点可用性和安全性 HexoButterfly魔改教程:网址卡片外置标签

8810

Butterfly主题PWA实现方案

其实还有个离线博客,但是视方案不同会有很多BUG,而且离线博客意义何在啊! 图标设计 在使用PWA之前,我们最好先行设计一个符合网站主题图标。...获取图标文件和 manifest 配置PWA 实现PWA方式有许多种,本帖基于Butterfly主题文档进行详细拓展,所以只讨论两种方案。...修改站点配置文件[Blogroot]/_config.yml,在站点配置文件_config.yml增加以下内容: 将之前生成图标包移入相应目录,例如我是/img/siteicon/,所以放到[Blogroot...在Chrome浏览器打开站点,按F12打开控制台,在右上角找到Lighthouse,可能没显示出来,在>>里找找。...这里theme_color建议改成你图标的主色调,包括manifest.jsontheme_color也是如此。 运行以下指令 运行hexo g之后必须运行gulp指令,不然PWA不会生效!

1.6K20

【腾讯云 Cloud Studio 实战训练营】Hexo 框架 Butterfly 主题搭建个人博客

前言 随着信息技术快速发展,互联网已经成为了获取知识、分享见解以及展示个人能力重要平台之一。在这个数字化时代,越来越多开发者和技术爱好者选择通过建立自己技术博客来展示他们专业知识和独特观点。...然后我们进入模板页面 图片 往下拉点击Hexo后进入,系统会自动部署所需要所有环境 图片 部署主题 选择主题,可以选择自己喜欢主题。...: butterfly ​ 图片 安装插件 如果你没有 pug 以及 stylus 渲染器,需要下载安装: BASH npm install hexo-renderer-pug hexo-renderer-stylus...在 Cloud Studio ,通常需要进入域名注册网站或者托管服务商设置,将你购买域名指向你博客站点。这样,当人们访问你自定义域名时,就会直接访问你博客。...在 Hexo 配置文件 _config.yml ,你可以设置网站关键词、描述等信息,这将有助于搜索引擎更好地理解你网站内容,从而提升搜索结果排名。

30831

【技术向】高可定 低维护の博客搭建指南

(当然输出分享途径很多,本文以介绍博客为目的,如果选择其他途径可以忽略下文) 如何选择博客 现在网络上有各式各样博客,有基于第三方平台(博客园、csdn等) 也有可供个人搭建工具(Hexo、...例如添加/Demo分页,可以在配置文件中新增一项tab配置,在source文件夹下添加/demo/index.md即可,可以在post.pug模板更改tab分页渲染index.md方式。...post.pug模板代码: ? 实现效果: ? 其他各种折腾,其实原理都类似,找到对应pug模板代码进行增删改即可,包括样式、脚本、内容。...(注:pug,即前jade,前端一种模板引擎,api参见https://pugjs.org/api/getting-started.html) 调试过程也很方便,使用hexo server命令可以启动本地环境...,并且会自动watch你更改(包括配置+scss+pug模板),并自动重新生成,这个过程也很快,大概一口茶不到功夫。

57220

博客生成静态站点工具 Top 20

提供更好阅读体验,可以自由跳转,添加评论等。 此外,将生成电子书形式静态站点,可以托管到其他平台,达到了备份效果。...Hexo 是一个基于 Node.js 静态站点生成器,它可以将博客生成为电子书形式静态站点Hexo 支持多种主题和插件,同时也提供了友好命令行工具和文档。Hexo 速度快,使用也非常方便。...Eleventy 基于 JavaScript 实现,是一个简单、灵活、快速静态站点生成器,可以将各种模板语言( Markdown、Pug、Liquid、Handlebars 等)转换为 HTML、CSS...Gridsome 是一个基于 Vue.js 静态网站生成器,它使用 GraphQL 来获取数据并生成静态页面。...Middleman 是一个用 Ruby 编写静态站点生成器,它可以将 Markdown、ERB 模板和 YAML 配置文件转换为静态 HTML 文件。

3.4K21

Hexo主题(EJS模板)自定义页面扩展

自从初次接触 Hexo 到现在已经有两年多时间了,时间过得飞快啊,关于 Hexo 优点不再赘述,关于个人站点优点,有必要在强调一下,那就是极高自由度,这也是这篇文章基础。...(ejs/swg/pug),调用特定 Hexo 帮助函数来完成。...如果涉及主题CSS样式,则一般需要找到对应 less 文件,如果里面用变量代替,则还需要到存储变量文件里去修改变量值,这样才完成样式修改,但偷懒方法是,直接在对应生成页面的模板文件添加...总之,或许你主题文件包含很多模板文件,但实际他们是有机整体,都会在某个模板文件中被引用,从而组合成一个完整整体,修改时要耐心去找到最细粒度(对应html语句)那部分。...主要是通过借助 Hexo 程序接口,获取像 文章数量、分类数量、各种标签下分别有多少文章等等数据,通过这些数据,可以完成一些功能,比如: 主要基于对象:分类(Category)、标签(Tags)、文章

2.2K30

【玩转Cloud Studio】Hexo 框架 Butterfly 主题搭建个人博客

图片图片准备工作首先打开Cloud Studio平台:https://cloudstudio.net/,需要注册登录,实名认证,然后我们进入模板页面图片往下拉点击Hexo后进入,系统会自动部署所需要所有环境图片部署主题选择主题...图片安装插件如果你没有 pug 以及 stylus 渲染器,请下载安装:BASHnpm install hexo-renderer-pug hexo-renderer-stylus --save图片cd...基础修改修改网站关键信息Hexo 初始化后,博客网站有一些关键信息是默认,需要修改为我们自己信息。...网站资料修改网站各种资料,例如标题、副标题和邮箱等个人资料,请修改博客根目录站点配置文件 _config.yml:# Sitetitle: 海拥subtitle: '一枚乐于分享技术与快乐博主'description...config.yml:fireworks: enable: true zIndex: 9999 # -1 or 9999 mobile: false图片完成后重新编译并部署图片网站副标题可设置主页展示网站副标题或者自己喜欢座右铭修改主题配置文件

853181

教你如何从零开始搭建一个属于自己网站

在 _config.yml 中找到 theme 这个字段,将其后 landscape 修改为 yun。 theme: yun pug 是一种模板引擎,可以渲染为 HTML 字符串。...由于我主题使用了 pug 和 stylus,而 Hexo 自带一般是 ejs 与 stylus,所以你可能还需要输入以下命令安装渲染器。...npm install hexo-render-pug hexo-renderer-stylus 这时再像此前那般使用 hexo server 重新启动服务器,你就可以看到一个不一样主题风格页面了。...在 yun.yml 填写。 你可以在 source 文件夹下新建 images 文件夹,用来存储你图片。 也可以使用 SM.MS 上传你图片文件,获取在线链接。...对软件进行自动化构建,以此来发现错误。 Travis CI 就是一个线上持续集成服务提供商。它可以拉取你每次推送到 GitHub 上代码,然后根据你要求对其进行构建

3.2K20

hexo-butterfly-闲聊侧

hexo-butterfly-闲聊侧 ​ 留言板信封构建,参考akilar大佬方案进行构建:信笺样式留言板 1.留言板信封 构建说明 组件方式引入 引入组件 npm install hexo-butterfly-envelope...构建步骤 引入hexo-butterfly-artitalk插件 npm install hexo-butterfly-artitalk 在主配置文件或者butterfly配置文件引入配置...themes/butterfly/layout/page.pug引入判断(添加type类型判断),引入定义bber.pug模板 block content #page case page.type...设定type从而指定要应用模板,因此可以通过创建一个网页存放bb内容(可以通过指令或手动创建,随后在菜单引用即可) 结果显示效果 5.扩展:引用到首页滚动,思路和上述配置类似,可参考Heo.../index.pug装载bbTimeList.pug 3.构建JS&CSS文件,并在引用修改(注意json文件和相关css、js引入路径、跳转路径配置) 测试说明 1.尝试发送一条哔哔内容,

1.2K00

博客装修(2023年3月)

不知不觉又一年过去了,每年 3 月都是博客装修季节,这次也不例外,这次装修内容如下: 主题升级 支持隐藏文章 添加每日打卡 评论系统迁移 自定义 RSS 订阅模板 支持 algolia 搜索 hexo...和 butterfly 主题升级 hexo 升级 之前使用还是老版本 hexo 由于这次想要升级主题,而主题需要 hexo 5.0 以上版本,所以就顺便升级了 hexo # 确认当前版本 hexo...有时一些文章还在撰写过程,或者一些文章并非重点,无需占用首页版面资源,故想要隐藏 修改首页 pug 修改文件 themes/butterfly/layout/includes/mixins/post-ui.pug...== true 这一行,并且进行代码缩进 文章添加属性 对想要隐藏文章 front-matter 添加 hide: true --- title: 博客装修(2023年3月) date: 2023...,但一直没有找到合适方案,没有轮子就造轮子呗 在首页上方添加了 每日打卡 链接 开源在了:https://github.com/LinkinStars/daily-cards 自定义 RSS 订阅模板

33520

基于 Hexo 从零开始搭建个人博客(三)

遇到问题可以优先在文章评论区留言,注意留言时请填写正确邮箱以确保能收到站长回复。 实在解决不了问题可添加站长 Wechat ,添加好友时请备注自己姓名+专业, 张三 计算机科学与技术。...】文件夹文件。...,运行git pull 应用主题 修改站点配置文件_config.yml,把主题改为butterfly theme: butterfly 安装插件 如果你没有pug以及stylus渲染器,请下载安装:...npm install hexo-renderer-pug hexo-renderer-stylus --save 升级建议 为了减少升级主题后带来不便,请使用以下方法(建议,可以不做)。..._config.butterfly.yml butterfly.yml 把主题文件夹 _config.yml 复制到 Hexo 根目录里,同时重新命名为 _config.butterfly.yml。

60140

友联样式美化

友链页 创建 前往 Hexo 博客根目录,执行以下命令 hexo new page link 然后找到 source/link/index.md 这个文件,修改内容如下: --- title: 友情链接...important 调整参数 因为 Volantis site-card 比 Butterfly flink-card 多出了一个站点缩略图,所以需要再额外添加一条配置项 修改 博客根目录\source...对应配置项为 博客根目录\_config.butterfly.yml : # Replace Broken Images (替換無法顯示圖片) error_img: flink: # 头像失效替换图...post_page: # 站点缩略图 最后 本次魔改使用是@ChenYFan大佬项目,通过调用thum.io提供接口,配合 github action ,自动下载站点截图到 github...,再配合 jsdelivr+github 图床来引用图片。

49130

搭建 Hexo

本期教大家如何搭建 Hexo 首先需要准备东西如下: 1.电脑 2.手 3.脑袋 好了没了 安装 Node.js 由于 Hexo 这款博客程序是基于 Node.js 所构建,所以我们需要下载 Node.js...package-lock.json 其中 node_modules 是你安装插件存放位置,删掉了必须重新 npm i scaffolds 是你博客模板存储位置,page.md 就是创建 page...时使用什么模板以此类推就行 source 是用来存放博客资源,一般都是随手扔文件进去就行 .gitignore 目前用不到(除了使用 GitHub actions 等持续集成部署博客) _config.yml...提示还需要安装 pug&stylus 渲染器 指令如下: npm install hexo-renderer-pug hexo-renderer-stylus 安装依赖完成后我们打开_config.yml...更改为你自己名字 部署到服务器 一切准备完成后就可以部署了 这边演示 Coding 部署 双部署也一样 首先打开Coding 官网 如果没有账号就点击免费注册 注册完成进入你企业 选择创建项目 项目模板使用

47830

Hexo+github搭建个人博客

.html(参考文档看需求加不加) 我们打开自己博客根目录,跟着我一个个了解里面的这些文件(夹)都是干什么: 图片 _config.yml:俗称站点配置文件,很多与博客网站格式、内容相关设置都需要在里面改...scaffolds:模板文件夹,里面的post.md文件可以设置每一篇博客模板。具体用起来就知道能干嘛了。 source:非常重要。所有的个人文件都在里面!...新建博客,source文件夹下默认只有一个子文件夹——_posts。我们写博客都放在这个子文件夹里面。...例如:在更换主题后,如果发现站点更改不生效,可以运行该命令。...install hexo-renderer-pug hexo-renderer-stylus --save 图片 Butterfly 主题美化 生成文章唯一链接 Hexo默认文章链接格式是年,月,

60830

Hexo页脚养鱼效果

Ln’s Blog ——《如何在页脚养鱼》:https://weilining.github.io/204.html 最终效果在本站页脚,向下滑动即可看到。...第二种方法是通用方法(其他也主题可参考) 方法一 打开站点主题配置文件_config.butterfly.yml,找到inject,在bottom处直接引入以下链接: - <script src="https...and (max-width: 767px){ #sidebar_search_box input[type=text]{width:calc(100% - 24px)} } 打开<em>站点</em><em>的</em>主题配置文件...,如果还有页脚文字被遮挡<em>的</em>情况,可以修改页脚<em>的</em>透明度,在\themes\butterfly\source\css路径下创建一个xxx.css文件,在文件<em>中</em>添加如下代码: 页脚半透明 /* 页脚半透明 *...补充 还有一个更为简单<em>的</em>方法,引入带有颜色<em>的</em>页脚养鱼,效果如下: 只需要在_config.butterfly.yml文件<em>中</em>,找到inject,在bottom处直接引入:https://uuuuu.cf

1.5K10
领券