我想要在页眉上添加覆盖内容,特别是覆盖在页眉图像之上。
详情
我已经编写了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 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 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"