色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

將覆蓋內容插入Jekyll主題的標題

CSS
李中冰1年前9瀏覽0評論

我想添加覆蓋內容到頁眉，特別是在頁眉圖像的頂部覆蓋。

細節 我已經編寫了HTML/Liquid和SCSS，當我在網站外部測試它時，它都工作正常，但我想知道如何使用_masthead.html將這個覆蓋內容添加到所有頁面的頁眉中。目標是插入一個具有可變內容的小部件。這是標題目前在網站圖像上的樣子，這是它應該看起來像網站標題的樣子

現在是什么樣子 在我實現了Christian告訴我的內容之后，現在看起來是這樣的What it looks like now

文件 可以在此處找到該存儲庫，其組件包括:

這是_masthead.html

{% if page.header == NULL and page.header.image_fullwidth == NULL and page.header.pattern == NULL and page.header.background-color == NULL and page.header.title == NULL %}

  <div id="masthead-no-image-header">
    <div class="row">
      <div class="small-12 columns"><!-- <a id="logo" href="{{ '/' | absolute_url }}" title="{{ site.title }} – {{ site.slogan }}">
        <img src="{{ site.url }}{{ site.baseurl }}/assets/img/{{ site.logo }}" alt="{{ site.title }} – {{ site.slogan }}">
        </a> -->
      </div>
      <!-- /.small-12.columns -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /#masthead -->

  {% if page.breadcrumb == true %}
    {% include _breadcrumb.html %}
  {% endif %}



{% elsif page.header.title %}

  <div id="masthead-with-text" style="{% if page.header.background-color %}background: {{ page.header.background-color }};{% endif %} {% if page.header.image_fullwidth %}{% elsif page.header.pattern %}background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)), url('{{ site.urlimg }}/{{ page.header.pattern }}'){% endif %}">

    <div class="row">
      <div class="small-12 columns">
        <div class="masthead-title">{{ page.header.title }}</div>
      </div>
      <!-- /.small-12.columns -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /#masthead -->
  {% if page.breadcrumb == true %}
    {% include _breadcrumb.html %}
  {% endif %}

  {% if page.header.caption_url && page.header.caption %}
    <div class="masthead-caption">
      <a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
    </div>
  {% elsif page.header.caption %}
    <div class="masthead-caption">
      {{ page.header.caption }}
    </div>
  {% endif %}



{% elsif page.header.image_fullwidth %}

  <div id="masthead">
    <div class="row">
        {%  if page.header_widget %}
            {% include _header-widget.liquid %}
        {% endif %}
      <div class="small-12 columns"><!-- <a id="logo" href="{{ '/' | absolute_url }}" title="{{ site.title }} – {{ site.slogan }}">
        <img src="{{ site.url }}{{ site.baseurl }}/assets/img/{{ site.logo }}" alt="{{ site.title }} – {{ site.slogan }}">
        </a> -->
      </div>
      <!-- /.small-12.columns -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /#masthead -->

  {% if page.breadcrumb == true %}
    {% include _breadcrumb.html %}
  {% endif %}

  {% if page.header.caption_url && page.header.caption %}
    <div class="masthead-caption">
      <a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
    </div>
  {% elsif page.header.caption %}
    <div class="masthead-caption">
      {{ page.header.caption }}
    </div>
  {% endif %}



{% elsif page.header.pattern %}

  <div id="masthead-with-pattern" style="background: url('{{ site.urlimg }}/{{ page.header.pattern }}')">
    <div class="row">
      <figure class="small-12 columns">
        <img src="{{ site.urlimg }}/{{ page.header.image }}" alt="{{ site.title }}">
      </figure>
      <!-- /.small-12.columns -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /#masthead -->

  {% if page.breadcrumb == true %}
    {% include _breadcrumb.html %}
  {% endif %}

  {% if page.header.caption_url && page.header.caption %}
    <div class="masthead-caption">
      <a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
    </div>
  {% elsif page.header.caption %}
    <div class="masthead-caption">
      {{ page.header.caption }}
    </div>
  {% endif %}



{% elsif page.header.background-color %}

  <div id="masthead-with-background-color" style="background: {{ page.header.background-color }};">
    <div class="row">
      <figure class="small-12 columns">
        <img src="{{ site.urlimg }}/{{ page.header.image }}" alt="{{ site.title }}">
      </figure>
      <!-- /.small-12.columns -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /#masthead -->

  {% if page.breadcrumb == true %}
    {% include _breadcrumb.html %}
  {% endif %}

  {% if page.header.caption_url && page.header.caption %}
    <div class="masthead-caption">
      <a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
    </div>
  {% elsif page.header.caption %}
    <div class="masthead-caption">
      {{ page.header.caption }}
    </div>
  {% endif %}



{% elsif page.header == false %}

  {% if page.breadcrumb == true %}
    {% include _breadcrumb.html %}
  {% endif %}

{% endif %}

這是header-widget.scss

@import "/assets/fonts/imports.css";
// @import url(https://raw.githubusercontent.com/NewSpectrum/Technovine-Site/main/_sass/foundation-components/_header-button.scss)

//? Widget Properties
$header-color:      hsl(0deg, 0%, 100%);
$txt-color:         hsl(0deg, 0%, 100%);
$inner-shadow:      inset 2px 2px 5px hsla(0deg, 0%, 0%, 0.5);
$txt-shadow:        0.5px 0.5px 5px hsla(0deg, 0%, 0%, 0.5);
$widget-bg-color:   hsla(0deg, 0%, 0%, 0.5);
$widget-padding:    1rem 2.5rem 2rem 2.5rem;


//? Button Properties
$sr-bg:             hsl(
                          18deg,
                          100%,
                          62%
                        );
$button-text:       hsl(0deg, 0%, 100%);
$button-gr1:        hsl(18deg,
                          100%, 62%);
                    // #ff773d
$button-gr2:        hsl(18deg, 80%, 45%);
                    // #cf4e17
$box-shadow:        1px 1px 3px hsla(0, 0%, 0%, 50%);
$text-shadow:       0.5px 0.5px 1.5px hsla(0, 0%, 0%, 50%);

$button-gradient:   linear-gradient(
                        135deg,
                        $button-gr1 0%,
                        $button-gr2 100%
                    );


.header-widget {
    position: relative;
    align-items: left;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;

    .widget-container {
        background-color: $widget-bg-color;
        padding: $widget-padding;
        border-radius: 20px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: $inner-shadow;

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: "Libre Baskerville", serif;
            color: $header-color;
        }


        p {
            font-family: "Lato", sans-serif;
            font-size: 1rem;
            color: $txt-color;
        }
    }

}




.button-container {
    position: relative;
    max-width: 200px;
    font-family: "Lato", sans-serif;
    text-shadow: $text-shadow;
    background: $button-gradient;
    color: $button-text;
    border: 0;
    box-shadow: $box-shadow;
    border-color: hsla(0, 0%, 0%, 0%);
    border-radius: 20px;
    padding: 10px 20px;
    a {
        color: inherit;
        text-decoration: none;
    }
}

這是header-widget-button.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Test</title>

    <link rel="stylesheet" href="../css/_header-button.css">
    <script id="service-request_script"
     src="../js/service-request_button.js"></script>
    <script id="slideshow">
        // JavaScript
        // Change 'background-image' in 'body' (css)
        // Change <section> content
    </script>
</head>
<body>
    <section id="header-widget" class="header-widget">
        <div id="sales-widget" class="widget-container">
            <h1>
                Worry-Free Professional IT Services
            </h1>
            <p>
                No need to worry about amateur service. Get the IT professionals your business needs.
            </p>
            <!--BUTTON-->
            <br /><br />
            <div id="button-container" class="sales-request button">
                <button id="sales_button" onclick="requestService()">
                    Get&nbsp;Quote
                </button>
            </div>
        </div>

<br><br>

        <div id="service-request_widget" class="widget-container">
            <h1>
                Worry-Free Professional IT Services
            </h1>
            <p>
                No need to worry about amateur service. Get the IT professionals your business needs.
            </p>
            <!--BUTTON-->
            <br /><br />
            <div id="button-container" class="sales-request button">
                <button id="sales_button" onclick="requestService()">
                    Submit&nbsp;Ticket
                </button>
            </div>
        </div>
    </section>
</body>
</html>

這是header-widget.liquid

<section id="header-widget" class="widget-container">
    <div id="sales-widget" class="header-widget">
        {%  if page.header_widget:widget_title %}
            <h1>
                {{ page.header_widget:widget_title }}
            </h1>
        {% else %}
            <code>widget_title is not set</code>
        {% endif %}
        <p>
            {{ page.header_widget:widget_text }}
        </p>
        <!--BUTTON-->
        <br /><br />
        <div id="button-container" class="button-container">
            <button id="sales_button" onclick="requestService()">
                <a href="{{ page.header_widget:button_url }}">
                    {{ page.header_widget:button_text }}
                </a>
            </button>
        </div>
    </div>
</section>

這是index.md

header:
  image_fullwidth: networking-connections-004.jpeg
header_widget:
  widget_title: "Worry-Free Professional IT Services"
  widget_text: |
    No need to worry about amateur service. Get the IT professionals your business needs.
  button_text: "Request a Quote"
  button_url: "/contact"

頁面上的內容看起來不錯，但瀏覽器開發工具沒有顯示任何樣式，因為它們根本沒有加載。所以這是一個Sass/CSS問題。

大多數樣式來自styles_feeling_responsive.scss文件。似乎您錯過了導入header-widget.scss文件，該文件是您的foundation組件的一部分，因此它根本沒有被加載。

在又看了一遍和你之前的修復(包括丟失的CSS文件)后，我找到了原因。

您的header-widget CSS類必須移動到widget-container中，因為您的HTML定義了& quot容器& quot在& quotwidget & quot像這樣。

<section id="header-widget" class="widget-container">
    <div id="sales-widget" class="header-widget">
    ...

解決方法如下。注意，我還將按鈕容器移到了小部件容器中。

.widget-container {
    background-color: $widget-bg-color;
    padding: $widget-padding;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: $inner-shadow;
    margin-top: 20px;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Libre Baskerville", serif;
        color: $header-color;
    }


    p {
        font-family: "Lato", sans-serif;
        font-size: 1rem;
        color: $txt-color;
    }

    .header-widget {
        position: relative;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    .button-container {
        position: relative;

        button {
            border-radius: $global-radius;
        }

        a {
            color: inherit;
            text-decoration: none;
        }
    }
}

結果如下:

enter image description here