将覆盖内容插入Jekyll主题的页眉中。

Question

我想要在页眉上添加覆盖内容，特别是覆盖在页眉图像之上。

详情

我已经编写了HTML/Liquid和SCSS，并在站点构建之外进行了测试，一切都正常工作。但我想知道如何将此覆盖内容添加到所有页面的页眉中，使用_masthead.html。目标是插入一种带有可变内容的小部件。这是网站当前的页眉外观网站页眉图片链接。这是它应该看起来的样子网站页眉图片链接

现在的外观

在实施了Christian告诉我的内容后，现在看起来是这样的

文件

可以在此处找到存储库，组件包括：

这是_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/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"

- PFL

Answer 1

页面内容看起来还不错，但浏览器开发工具没有显示任何样式，因为它们根本没有加载。这是一个Sass/CSS问题。

大部分样式来自styles_feeling_responsive.scss文件。你似乎漏掉了导入基础组件中的header-widget.scss文件，因此根本没有加载。

---

经过再次查看并使用您之前的修复（包括缺失的CSS文件），我找到了原因。

您的header-widget CSS类必须移动到widget-container内，因为您的HTML将“container”定义在“widget”内，就像这样。

<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;
        }
    }
}

这是结果：

- Christian