开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在Jekyll博客中点击按钮更改页面样式(使用js或liquid模板)

在Jekyll博客中点击按钮更改页面样式可以通过使用JavaScript或Liquid模板来实现。下面是一个基本的实现步骤：

首先，在Jekyll博客的页面中添加一个按钮元素，可以使用HTML的<button>标签。例如：

<button id="changeStyleButton">更改样式</button>

接下来，使用JavaScript为按钮添加点击事件的监听器。在点击按钮时，可以通过修改页面的CSS样式来改变页面样式。例如：

document.getElementById("changeStyleButton").addEventListener("click", function() {
  // 修改页面样式的代码
});

在点击事件的处理函数中，可以使用JavaScript来修改页面的CSS样式。例如，可以通过修改页面的<body>元素的class属性来切换不同的样式。例如：

document.getElementById("changeStyleButton").addEventListener("click", function() {
  var bodyElement = document.getElementsByTagName("body")[0];
  if (bodyElement.classList.contains("dark-mode")) {
    bodyElement.classList.remove("dark-mode");
  } else {
    bodyElement.classList.add("dark-mode");
  }
});

最后，可以在Jekyll的Liquid模板中根据页面的样式类来加载不同的CSS文件。例如，可以在<head>标签中使用条件语句来加载不同的CSS文件。例如：

<head>
  {% if page.style == "dark" %}
    <link rel="stylesheet" href="/css/dark-style.css">
  {% else %}
    <link rel="stylesheet" href="/css/light-style.css">
  {% endif %}
</head>

这样，当点击按钮时，页面的样式会根据当前的状态进行切换。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

腾讯云云服务器（CVM）：提供可扩展的云服务器，适用于各种规模的应用程序和工作负载。了解更多信息，请访问腾讯云云服务器。
腾讯云对象存储（COS）：提供安全可靠的对象存储服务，适用于存储和处理大规模的非结构化数据。了解更多信息，请访问腾讯云对象存储。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

如何搭建免费博客

jekyll 模板 jekyll 是基于ruby来编写的一个博客模板生成工具,也就是说我们可以根据相关的规则来生成对应的html文件，当然这份工作github也能帮你去做。...在_layout下创建一个default.html,作为一个网站的模板,添加如下内容（此处代码中的所有的{ {中间都有一个空格,为了不让jekyll去解析,拷贝的时候请注意）：　　在浏览器中打开127.0.0.1:4000可以看到刚刚生成的网站： ? ?...到这里，我们使用jekyll根据我们写的模板生成了对应的静态页面,下面我们把数据传入到github的gh-pages下面。 git add ....自由转载-非商用-非衍生-保持署名,请遵循：创意共享3.0许可证交流请加群113249828：点击加群或发我邮件 laofu_online@163.com

1.1K4 0

如何快速给自己构建一个温馨的"家"——用Jekyll搭建静态博客

前言我相信，每个程序员都有一个愿望，都想有一个属于自己的"家"——属于自己的博客，专属的网站。在自己的“家”中，可以和志同道合的兄弟一起分享和讨论任何技术，谈天说地。...Markdown（或 Textile）、Liquid 和 HTML & CSS 构建可发布的静态网站。博客支持。支持自定义地址、博客分类、页面、文章以及自定义的布局设计。...它的概念其实就是：你用你最喜欢的标记语言来写文章，可以是 Markdown, 也可以是 Textile, 或者就是简单的 HTML, 然后 Jekyll 就会帮你套入一个或一系列的布局中。...在整个过程中你可以设置 URL 路径，你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现，最终生成的静态页面就是你的成品了。...如果要用自己的，点击ADD CUSTOM CERT按钮上传SSL证书。这里是一些插件。看自己需不需要。最后，SETTING里面加上这个IP地址。

3041 0

基于Jekyll与Github Pages搭建博客

Jekyll 也可以运行在 GitHub Pages 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。...那首先，根据教程，运行 Jekyll 所需的环境如下： Ruby Ruby Gems NodeJS或其他 JavaScript 运行环境 Python2.7(或2.7以上版本）由于网络上大部分教程都是在...我的博客选择的是在 Github 上找的博客主题，它对目录中各个文件的内容、功能都有很详细地说明，适合我这样的小白学习使用 Jekyll 。...\assets\css文件夹中，将.js文件覆盖到\assets\js文件夹中就完成了配置。...在本地博客文件的根目录里打开命令行，使用命令rougify style github > css/syntax.css生成一个 github 风格的样式到css/syntax.css文件中。

1.2K1 0

如何快速给自己构建一个温馨的家——用Jekyll搭建静态博客

Markdown（或 Textile）、Liquid 和 HTML & CSS 构建可发布的静态网站。博客支持。支持自定义地址、博客分类、页面、文章以及自定义的布局设计。...它的概念其实就是：你用你最喜欢的标记语言来写文章，可以是 Markdown, 也可以是 Textile, 或者就是简单的 HTML, 然后 Jekyll 就会帮你套入一个或一系列的布局中。...在整个过程中你可以设置 URL 路径，你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现，最终生成的静态页面就是你的成品了。...到了这个界面就随便选择一个模板，点击Publish Page即可 ?...如果要用自己的，点击ADD CUSTOM CERT按钮上传SSL证书。 ? 这里是一些插件。看自己需不需要。 ? 最后，SETTING里面加上这个IP地址。

1.3K2 0

可能是最全面的github pages搭建个人博客教程

你还需要更改以下配置：博客名称和描述 ? 分别是博客名称和描述，自己任意写点啥。博客社交链接 ? 这里配置社交链接按钮，没配的不显示，我现在配了知乎、邮箱、github账号三个。...搜索功能集成博客模板本来是没有搜索功能的，搜索功能依赖Simple-Jekyll-Search提供支持。...配置搜索框标签在你想展示搜索框的页面我的是index.html，这个页面和每个人的博客模板有关，可能需要一点前端知识，添加如下的html标签。...搜索框样式搜索框的样式是可以改变的，这里有修改HTML中CSS样式的方法，我搞后端的，前端现学现卖。...html插入标签样式方法社交链接模板提供的链接没有知乎链接，或者你想增加自定义的链接，都可以通过以下方法添加。

15K1 0

Jekyll 优化合集

实现代码高亮 Jekyll 代码高亮可以使用 Pygments、Rouge、Prism、Highlight JS等工具实现，据说大部分的高亮博客中基本上都是使用 Pygments。...Prism 工具的安装使用相较其他两种稍微复杂一点，需要下载插件 prism.rb 手动安装到 _plugins 文件夹中，然后在文章模板页添加 prism.css 和 prism.js 的引入。...mkdir blog mv index.html blog/index.html cp search.json blog/search.json 添加页面模板因为页面模板内容在页面上会被翻译导致无法正常显示...注意，这里的样式文件需要经过编译才能生效。编译需要在 NodeJS 环境下使用 npm install & gulp 命令。为了加快网页访问，学术首页中的图建议使用 webp 格式。...此处，为了原生支持 LaTex 语法中采用双$符号来声明公式，同时也相应调整了 MathJax 的配置。于是就可以在基于文章模板的页面中直接使用如下所示的 LaTex 声明即可正确显示数学公式了。

2.1K3 0

免费构建自己的博客-Jekyll进阶

Jekyll 是采用Ruby语言实现的将纯文本转换为静态博客网站的利器，也是本站点的关键技术。本文将对Jekyll中的进阶内容进行说明。...Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。...查看本站点_config.yml文件，便可以查看到本站所使用的插件。引入插件插件以 Ruby 代码或模块的方式存在，使用时通常引入相应的代码或模块即可。...若需要寻找更多的插件，可以通过搜索引擎或 Github 进行搜索。模板模板是指将一个网页分割为多个部分，存放在不同的文件中，以实现尽可能复用代码的目的。...代码高亮本站点模板默认开启了代码高亮，编写博客时只需要使用 markdown 的代码块方法编写即可。

9860 0

怎么通过码云(Gitee.com)创建自己的博客建立主页

大多数托管平台无非是开放一个FTP或类似服务，用户把制作好的网页或脚本上传了事，而在码云用户通过创建特殊名称的 Git 版本库或在 Git 库中建立特别的分支实现对主页的维护。...Jekyll 也可以运行在码云 Pages 上，也就是说，你可以使用码云的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。...Pages 进阶，使用 Jekyll 生成自己的静态网页 Jekyll 究竟是什么？ Jekyll 是一个简单的博客形态的静态站点生产机器。...Jekyll 也可以运行在码云Pages上，也就是说，你可以使用码云的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。...Jekyll 使用文档：http://jekyll.bootcss.com/docs/home/ 其他帮助: 如何自定义404？答：在项目根目录新建 404.html 文件即可。

7.2K2 0

使用Jekyll显示Jupyter笔记本

虽然Jekyll已经有了博客框架，还是需要创建一个assets文件夹来存储图像，CSS和JS文件。...由于每次对站点进行更改时它会重建，所以不要将文件存储在此文件夹中。...本节中的步骤可以从本地计算机或使用Jekyll博客的Linode完成。如果您使用Linode，则可以使用ngrok查看笔记本。...1.打开感兴趣的笔记本，或使用下面的代码创建示例笔记本。运行所有相关单元格，以便在页面上显示你想要在Jekyll博客上显示的内容。...使用Liquid模板，添加逻辑以检查帖子中的mathjax标题： \_includes / scripts.html1 2 3 4 5 {% if page.mathjax %} <script type

3.9K2 0

静态博客搭建工具汇总

Jekyll、Hugo、Hexo 也可以运行在码云（Gitee.com） Pages 上，也就是说，你可以使用码云的服务来搭建你的仓库页面、博客或者网站，而且是完全免费的。...用户在本地安装Hexo系统并进行写作，通过一条命令，Hexo可以自动生成静态页面，并发布到多个平台上。与传统的博客相比，Hexo可以说是一个本地运行远程发布的博客程序。...缺点： 1、每次在一台新电脑或者别人电脑首次使用时，都要重新安装和配置编译环境，不适合随时随地愉快的写博客。...Nuxt.js 的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。...用户可以在支持 PHP 和 MySQL数据库的服务器上使用自己的博客。 WordPress有许多第三方开发的免费模板，安装方式简单易用。不过要做一个自己的模板，则需要你有一定的专业知识。

1.4K2 0

开垦属于你的网络空间：简单易用的静态博客框架推荐

此外，这些项目在文档资料方面也做得很好，对于初学者来说上手较为轻松。总之，如果您需要一个简单易用、功能齐全且具备扩展性的强大静态网站生成器或博客框架，请考虑选择其中之一。...灵活多样化：由于其先进模板系统和强大分类系统，Hugo 可以用于创建各种类型的网站，包括企业、政府、非营利组织等官方机构；新闻媒体、事件展示及项目介绍等专题页面；文档库；图片集合与个人博客等。...简单易用：Jekyll 不会给用户带来不必要的复杂性和配置，它只做你告诉它去做的事情。高度可定制化：使用 Jekyll，您可以根据自己的需求轻松地创建个人、项目或组织网站，并对其进行完全控制。...Markdown 和 Liquid 模板支持：通过渲染 Markdown 和 Liquid 模板，Jekyll 可以将您提供的内容转换为完整且静态化的可以直接托管在 Apache、Nginx 或其他 Web...内置插件和变量功能：内置 Liquid 扩展，自定义 Permalinks 等特性使得在建立并管理页面时更加简便。

4954 0

H2O-ac theme for Jekyll

因此，在 H2O-ac 主题中，从原来 H2O 的主页中抽出框架做成了页面模板。根据实际页面的内容需求，增加了学术首页、归档页和系统日志页。...归档页归档页设置为由 Jekyll 按照模板自动生成，以年份、日期、文章标题分级列表展示，简洁清晰。系统日志页系统日志页其实也不是经常更新的，只有在博客整体作出设置或改进的才加以说明。...使用体验提升廖柯宇也在 H2O 主题的默认页面中写道，目前 H2O 主题还有一些可优化的内容，比如夜间模式、查看大图等。这里，根据个人的一些实际需求和了解，在 H2O-ac 主题中做了调整。...考虑到页面宽度有限，Mermaid 所画出的甘特图等其他比较大一点的图不太好看，也增加了放大重绘的功能。如下所示，点击图的右上角的按钮即可全屏查看大图。...如下图所示，访问 H2O-ac 可以看到如下的 Use this template 按钮，点击该按钮即可用 H2O-ac 主题创建自己的博客代码仓库。

1.2K3 0

技术人如何搭建自己的技术博客

提供流行的网页主题模板缺点也是有的：不支持动态内容，博客必须都是静态网页，一般会使用 Jekyll 来构建内容。...构建一个技术博客很简单，基本上步骤就是网上找一个自己喜欢的主题，直接 Fork 到自己的 Github ，然后在删掉原博客中的内容，在上传自己的文章即可，以我自己的博客为例。...3、设置 GitHub Pages 点击 Settings 按钮打开设置页面，页面往下拉到 GitHub Pages 相关设置，在 Source 下面的复选框中选择 master branch ，然后点击旁边的...4、重命名项目点击 Settings 按钮打开设置页面，重命名项目名称为：github_username.github.io。 ?...首先需要设置域名解析，将域名的地址指向自己的 github 博客地址。这里以万网的域名配置为例，选择需要设置的域名点击解析，在域名解析页面添加以下两条记录 ?

1.4K1 0

技术人如何搭建自己的技术博客

提供流行的网页主题模板缺点也是有的：不支持动态内容，博客必须都是静态网页，一般会使用 Jekyll 来构建内容。...但如果我们只是在 GitHub 上面使用的话，到不需要知道 Jekyll 的语法，一般 Github 会自动将我们写的 Markdown 文件转换成静态页面。...构建一个技术博客很简单，基本上步骤就是网上找一个自己喜欢的主题，直接 Fork 到自己的 Github ，然后在删掉原博客中的内容，在上传自己的文章即可，以我自己的博客为例。...3、设置 GitHub Pages 点击 Settings 按钮打开设置页面，页面往下拉到 GitHub Pages 相关设置，在 Source 下面的复选框中选择 master branch ，然后点击旁边的...4、重命名项目点击 Settings 按钮打开设置页面，重命名项目名称为：github_username.github.io。

9533 0

开发工具总结（14）之Jekyll制作文档并发布到GitHub

第二步:把下载好的模板上传到自己的Github仓库中。第三步:在_posts文件夹中放入自己写好的博客,文件名必须是日期-标题名,例如:2019-01-01-我的第一篇博客。...第四步:上传博客到Github中即可访问自己的博客。 ---- 二、Jekyll目录和文件结构介绍文件 / 目录描述 _config.yml 保存配置数据。...学习如何使用 drafts. _includes 你可以加载这些包含部分到你的布局或者文章中以方便重用。..._layouts layouts 是包裹在文章外部的模板。布局可以在 YAML 头信息中根据不同文章进行选择。这将在下一个部分进行介绍。...---- 三、相关语法官网 Liquid语法: https://help.shopify.com/themes/liquid Jekyll中文网: http://jekyll.com.cn/ 在本地预览博客效果

1.1K3 0

使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源（二）

第 1 点在页面仍然托管在 GitHub Pages 的前提下，似乎没有什么好办法能产生质的飞跃；本篇主要改善了第 2 点和第 3 点。...Jekyll 的 layout 可以理解为页面模板，它是可以继承的，比如我的博客的所有页面模板有一个共同的祖先模板 _layouts/default.html，模板里可以使用 Liquid 语法对内容进行处理...0x02 站内搜索引用的 JSON 资源加速我是使用 Simple-Jekyll-Search 这个 JavaScript 库来实现站内搜索的，它的搜索数据是来自一个动态生成的 JSON 文件。...0x03 结语经过以上改造，博客页面的加载速度又得到了小小的提升，所有相关源码可以在 https://github.com/mzlogin/mzlogin.github.io 找到，有相关心得或建议的朋友欢迎交流指正...相关文章：使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源

1.1K0 0

码云正式支持 Pages 功能

码云 Pages 是一个免费的静态网页托管服务，您可以使用码云 Pages 托管博客、项目官网等静态网页。如果您使用过 Github Pages 那么您会很快上手使用码云的Pages服务。...使用前须知 1、Pages 默认的根文件是 index.html 2、静态网页的样式可以自己写，也可以拿一些静态模版来修改，Pages服务本身不提供任何形式的模版，但我们后续会陆续增加例子，供大家参考使用...发挥自己的想象力，做个自己的博客，做个项目的官网，做个介绍自己的页面吧，觉得不好看可以自己添加一些样式，或者找一些静态网页的模版，快去试试吧！...Pages进阶，使用Jekyll生成自己的静态网页 Jekyll 究竟是什么？ Jekyll 是一个简单的博客形态的静态站点生产机器。...Jekyll 也可以运行在码云Pages上，也就是说，你可以使用码云的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。

1.7K12 0

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

对于博客网站，可以使用 Next.js 静态生成功能来构建博客页面。...通过使用Markdown或其他格式编写博客文章，并在Next.js中使用静态生成来生成预渲染的静态页面，可以使博客页面更快地加载，并提高SEO排名。...Eleventy 基于 JavaScript 实现，是一个简单、灵活、快速的静态站点生成器，可以将各种模板语言（如 Markdown、Pug、Liquid、Handlebars 等）转换为 HTML、CSS...这些工具中的大多数都支持 Markdown 等轻量级格式，并提供了许多主题和插件，可以方便地创建漂亮的博客。此外，这些工具也有很好的文档和社区支持，使得学习和使用它们变得更加容易。...不同的工具都有各自的优缺点，适用于不同的需求和技能水平，因此在选择时需要根据自己的情况进行考虑。例如，如果您想要一个快速而简单的解决方案，那么 Jekyll 或 Hexo 可能是不错的选择。

3.9K2 1

Jekyll搭建博客并部署到GitHub

尝试过很多Windows搭建静态网页博客的方法，都是失败告终。试了几次Jekyll，这一次终于成功了。想把一些坑路分享一下。 1....时间设置因为我们是直接参考复制别人的主题，所以这个步骤在Windows会稍微不一样。我们需要先安装tzinfo-data到Windows中才可以。...修改open-source文件这个文件位于pages\open-source.md 这个是因为如果不修改的话，会提示语法错误 Liquid Warning: Liquid syntax error...问题 / To Do List sidebar-categories-nav.html的分类不可以通过点击筛选文章。修改为Tag样式 9....2021年更新 (1) 在2021年尝试使用本地预览的时候发现如下问题： D:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/jekyll-3.9.0/lib/jekyll/commands

1.1K2 0

用 Eleventy 建立一个静态网站

它是用 JavaScript 编写的，它将一个（不同类型的）模板目录转化为 HTML。它也是开源的，在 MIT 许可下发布。...在 Linux 上，你可以使用你的包管理器安装 Node.js： $ sudo dnf install nodejs 如果你的包管理器没有 Node.js，或者你不在 Linux 上，你可以从 Node.js...titleHello worldEOF$ echo '# Page header' > index.md 这就把当前目录或子目录中的任何内容模板编译到输出文件夹中...然后把 _site 中的文件上传到你的 Web 服务器，发布你的网站给世界看。尝试 Eleventy Eleventy 是一个静态网站生成器，它易于使用，有模板和主题。...如果你已经在你的开发流程中使用 Node.js，Eleventy 可能比 Jekyll 或 Hugo 更自然。它能快速提供很好的结果，并使你免于复杂的网站设计和维护。

2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭