2024年8月26日

Sass @each 循环

如果您有Sass Map或Lists,则可以循环遍历它们,而不是单独处理每个键。在@each循环的开头,您分配一个要在循环内使用的变量: $shapes: triangle, square, circle; @each $shape in $shapes { .icon-#{$shape} { background-image: url('/images/#{$shape}.jpg'); } } $map: ( h1: 20px, h2: 16px, h3: 14px ); @each $element, $size in $map { #{$element} { font-size: $size; } } 如果将变量与字符串连接起来,或将其用作类/元素,则变量前面需要加上一个#{,并在前面加上一个,}以告诉编译器你实际上表示变量。 如果您的地图是多层深度,您还可以在循环内嵌套循环。…
2024年8月26日

与 Jekyll 相关的帖子

我想要一个可以显示最多 5 条同一类别的最近帖子的东西。Jekyll 有一个 related_posts 站点变量,但它按标签而不是类别进行过滤,这给我带来了各种奇怪的问题。我巧妙地使用了 liquid 语法1,想出了一个解决方案: {% unless page.category == null %} {% capture pageCategory %}{{ page.category }}{% endcapture %} {% unless site.categories[pageCategory].size == 1 %} <div class="row related-posts"> <h2 class="text-center">More {{ page.category }} Posts!</h2> <div class="mediu…
2024年8月26日

Bootstrap 中的图像类

使用 Bootstrap 的图像类将有用的样式应用到您的图片: <img src="..." alt="..." class="img-responsive"> 定心 使用 .center-block 和 .img-responsive 类将图像水平居中: <img src="..." alt="..." class="img-responsive center-block"> 还有更多! 使用这些类别来修饰你的图像的外观: .img-rounded:对图像边框应用轻微曲线。 .img-circle:将图像塑造成圆形。 .img-thumbnail:为您的图像提供轻微的填充和光滑的边框。…
2024年8月26日

click() jQuery 方法

当用户点击你网站上的内容时,你可以决定会发生什么: $('#my_picture').click(function() { // Do stuff }); 触发点击 你也可以使用同样的方法在选定元素上触发点击事件: $('#my_picture').click();…
2024年8月26日

Sass 中的 If/Else 语句

if 语句可以方便地检查变量是否存在或是否匹配某些内容: $var: true !default; // Can be overridden elsewhere @if $var == true { // Conditional code } $other: single; @if $other == single { // Code for if it’s single } @else if $other == double { // Double code } @else { // Default if it’s neither } 确保如果您的变量属性用’引号括起来存储,那么您的@if语句也会检查这一点。(例如$other ==‘single’)。 if语句对于检查变量的混合或在库中包含或排除代码很有用。…
2024年8月26日

添加 Logstash 过滤器以改进集中式日志记录(Logstash 转发器)

注意:本教程适用于使用 Logstash Forwarder 而非 Filebeat 的旧版 ELK 堆栈设置。本教程的最新版本可在添加 Logstash 过滤器以改进集中式日志记录中找到。 介绍 Logstash 是一款功能强大的日志集中和分析工具,它可以帮助您概览您的环境,并识别服务器的问题。提高 Logstash 设置效率的一种方法是收集重要的应用程序日志,并通过使用过滤器来构造日志数据,以便可以轻松分析和查询数据。我们将围绕“grok”模式构建过滤器,将日志中的数据解析为有用的信息。 本指南是如何在 Ubuntu 14.04 上安装 Elasticsearch 1.7、Logstash 1.5 和 Kibana 4.1(ELK Stack)教程的续集,主要侧重于为各种常见应用程序日志添加过滤器。 先决条件 要遵循本教程,您必须拥有一个正常运行的 Logsta…
2024年8月26日

如何将 Prometheus 仪表板添加到 Grafana

Grafana背后的公司raintank的 Matt Toback 撰写的一篇文章 介绍 Grafana 是领先的图形和仪表板构建器,用于可视化时间序列基础设施和应用程序指标,但许多人将其用于其他领域,包括工业传感器、家庭自动化、天气和过程控制。它提供了一种强大而优雅的方式来创建、探索和与您的团队和全世界共享仪表板和数据。 在本教程中,您将学习如何将 Prometheus 作为数据源添加到您的 Grafana 实例并安装预配置的 Prometheus 服务器统计信息仪表板。 先决条件 要遵循本教程,您需要: Ubuntu 14.04 Droplet 具有 sudo 访问权限的用户(有关详细信息,请参阅使用 Ubuntu 14.04 进行初始服务器设置教程) Prometheus 和 Grafana 2.5+ 按照如何在 Ubuntu 14.04 上使用 Docker 安装 Pro…
2024年8月26日

Sass 变量

使用 Sass 中的变量在整个代码中保存和重用值: $box-bgcolor: #FF8100; $box-border: 4px dashed yellow; .box { background-color: $box-bgcolor; border: $box-border; } 结果 上述代码片段将产生以下 CSS: .box { background-color: #FF8100; border: 4px dashed yellow; }…
2024年8月26日

立即调用函数表达式

使用立即调用函数表达式 (IIFE) 保护全局环境免受代码污染。IIFE 内的代码位于其自己的词法范围内: (function() { // your stuff here })(); 传递变量 您可以使用如下方式在 IIFE 范围内传递变量: (function($) { // $ == jQuery; })(jQuery);…
2024年8月26日

jQuery 中的文档准备就绪

jQuery 仅当 DOM 完全加载并准备就绪时才提供一种简单的方法来运行代码: $( document ).ready(function() { // do stuff }); 速记 您还可以使用以下简写: $(function() { // do stuff }); 等待整个页面 使用窗口而不是文档来等待整个页面准备就绪: $( window ).load(function() { // do stuff });…