首页
学习
活动
专区
工具
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与flarum)

我有两个站点,一个是hexo做编译器的静态站,另外一个是php环境用nginx代理的flarum模板站点,这里记录下给两个站点换上百度统计的过程。如果你也有类似站点需求可以参考本文。...新加的功能多又多,给百度点个赞: 获取百度统计的脚本代码 在这里我们主要讲下如何配置这两种类型站点的百度统计。 如果你还不知道如何获取统计代码,可以在百度统计注册账号后添加网站进行统计代码获取。...后面跟的就是你的站点身份识别码,注意多个网站的情况下不要搞错。...Hexo静态站是如何配置百度统计 hexo的静态站是这样配置百度统计的,找到你的主题模板中head.pug,在里面添加一下百度统计,注意pug的脚本语法是script.开头: script....设置添加到nginx配置中:

11610

hexo-butterfly-首页改造

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

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

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

    13510

    Butterfly主题的PWA实现方案

    其实还有个离线博客,但是视方案不同会有很多BUG,而且离线博客意义何在啊! 图标设计 在使用PWA之前,我们最好先行设计一个符合网站主题的图标。...获取图标文件和 manifest 配置PWA 实现PWA的方式有许多种,本帖基于Butterfly主题文档进行详细拓展,所以只讨论两种方案。...修改站点配置文件[Blogroot]/_config.yml,在站点配置文件_config.yml中增加以下内容: 将之前生成的图标包移入相应的目录,例如我是/img/siteicon/,所以放到[Blogroot...在Chrome浏览器中打开站点,按F12打开控制台,在右上角找到Lighthouse,可能没显示出来,在>>里找找。...这里的theme_color建议改成你图标的主色调,包括manifest.json中的theme_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 中,你可以设置网站的关键词、描述等信息,这将有助于搜索引擎更好地理解你的网站内容,从而提升搜索结果的排名。

    33531

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

    (当然输出分享的途径很多,本文以介绍博客为目的,如果选择其他途径可以忽略下文) 如何选择博客 现在网络上有各式各样的博客,有基于第三方的平台(如博客园、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模板),并自动重新生成,这个过程也很快,大概一口茶不到的功夫。

    58220

    博客生成静态站点工具 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.9K21

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

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

    2.3K30

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

    在 _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.4K20

    【玩转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图片完成后重新编译并部署图片网站副标题可设置主页中展示的网站副标题或者自己喜欢的座右铭修改主题配置文件

    938181

    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.3K00

    博客装修(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 订阅模板

    35320

    基于 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。

    62640

    友联样式美化

    友链页 创建 前往 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 图床来引用图片。

    51530

    搭建 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 官网 如果没有账号就点击免费注册 注册完成进入你的企业 选择创建项目 项目模板使用

    49930

    Hexo+github搭建个人博客

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

    64330
    领券