当前位置: 首页 > 编程笔记 >

Bosun 嵌入式模板和CSS样式

商皓
2023-03-14
本文向大家介绍Bosun 嵌入式模板和CSS样式,包括了Bosun 嵌入式模板和CSS样式的使用技巧和注意事项,需要的朋友参考一下

示例

您可以将另一个模板主体嵌入到模板中,{{template "mysharedtemplate" .}}以重复使用共享的组件。这是一个创建标题模板的示例,该模板可以在所有其他模板主体的顶部重复使用。它还使用CSS来对输出进行样式化,以便于阅读。请注意,所有<style>...</style>块都将转换为每个元素上的内联CSS,以便Gmail等电子邮件客户端可以正确呈现输出。

template header {
    body = `
    <style>
    td, th {
        padding-right: 10px;
    }
   a.rightpad{
        padding-right: 10px;
    }
    </style>
    <p style="font-weight: bold; text-decoration: underline;">
        <a class="rightpad" href="{{.Ack}}">Acknowledge</a>
        <a class="rightpad" href="{{.Rule}}">View Alert in Bosun's Rule Editor</a>
        {{if .Group.host}}
            <a class="rightpad" href="https://opserver/dashboard/node?node={{.Group.host}}">View {{.Group.host}} in Opserver</a>
            <a href="http://kibana/app/kibana?#/discover?_g=(refreshInterval:(display:Off,pause:!f,value:0),time:(from:now-15m,mode:quick,to:now))&_a=(columns:!(_source),index:%5Blogstash-%5DYYYY.MM.DD,interval:auto,query:(query_string:(analyze_wildcard:!t,query:'logsource:{{.Group.host}}')),sort:!('@timestamp',desc))">View {{.Group.host}} in Kibana</a>
        {{end}}
    </p>
    <table>
        <tr>
            <td><strong>Key: </strong></td>
            <td>{{printf "%s%s" .Alert.Name  .Group }}</td>
        </tr>
        <tr>
            <td><strong>Incident: </strong></td>
            <td><a href="{{.Incident}}">#{{.Last.IncidentId}}</a></td>
        </tr>
    </table>
    <br/>
    {{if .Alert.Vars.notes}}
        <p><strong>Notes:</strong> {{html .Alert.Vars.notes}}</p>
    {{end}}

    <p><strong>Tags</strong>
    <table>
        {{range $k, $v := .Group}}
            {{if eq $k "host"}}
                <tr><td>{{$k}}</td><td><a href="{{$.HostView $v}}">{{$v}}</a></td></tr>
            {{else}}
                <tr><td>{{$k}}</td><td>{{$v}}</td></tr>
            {{end}}
        {{end}}
    </table></p>
    `
}

之后,您可以添加开始使用模板,body = `{{template "header" .}}以在顶部获得以下输出:

 类似资料:
  • 问题内容: 我正在使用html,css,flask和jinja2创建网站。 我有一个在Flask服务器上工作的页面,显示了按钮和标签等,但是我没有加载CSS样式表。 我如何将样式表链接到jinja2模板。我在互联网上四处张望,但找不到答案。 这是css样式表链接;我应该更改此代码还是python代码? 这是我的烧瓶代码: 这是文件的位置: 问题答案: 所有公共文件(未处理的文件,例如模板或py​​

  • 案例 Basic css 我们绑定 styled-jsx 来生成独立作用域的 CSS. 目标是支持 "shadow CSS",但是 不支持独立模块作用域的 JS. export default () => <div> Hello world <p>scoped!</p> <style jsx>{` p { color: blue;

  • 问题内容: 当我目视缩放图像时,Firefox 3会使图像模糊。Firefox 2和其他浏览器没有,这是我期望的行为。对于使用png或gif精灵创建基于网络的游戏而言,这尤其la脚。 例如,在Firefox 3中显示100x100的图像时,如下所示: 要么 在FF3中看起来很模糊,而不是在IE中。 关于如何防止这种情况的任何想法? 问题答案: 我发现了FireFox的这一新功能: 图像渲染 因此,

  • Epoch 图表使用 css 设置填充颜色、笔画等。默认情况下,图表使用 D3分类颜色。您可以轻松地覆盖这些默认颜色或创建您自己的自定义类别。 主题 Epoch 以主题的形式安排类似于图表的样式。主题可以通过特殊的类名添加到任何HTML容器中。目前,Epoch船有两个内置主题: epoch-theme-default-基于d3分类颜色的默认主题 epoch-theme-dark-黑色背景下使用的主

  • 问题内容: 任何样式都会影响每个输入元素。有没有一种方法可以指定仅应用于复选框的样式,而无需将类应用于每个复选框元素? 问题答案: 使用CSS 2,您可以执行以下操作: 到目前为止,这应该得到广泛的支持。

  • 我有时会在pom中看到以下声明。xml。。。 如您所见,sping-boo-starter-web被声明为tomcat-embed-jasper。 是不是sping-boo-starter-web已经有一个嵌入式tomcat了?为什么一些开发人员仍然声明tomcat-embed-jasper以及boot-starter-web?还是有什么原因?