css 在Jekyll主题的标题中插入覆盖内容

t1qtbnec  于 2023-05-30  发布在  其他
关注(0)|答案(1)|浏览(191)

我想添加覆盖内容的标题，特别是覆盖在顶部的标题图像。

详情

我已经写了HTML/Liquid和SCSS，当我在网站构建之外测试它时，它都能正常工作，但我想知道如何使用_masthead.html将此覆盖内容添加到所有页面的标题中。我们的目标是插入一个具有可变内容的 widget。这是标题当前在站点上的样子image of website header这是它应该看起来的样子image of website header

现在的样子

在我实现Christian告诉我的内容后，它现在看起来像这样x1c 0d1x

文件

该存储库可以找到here，其组件包括：
这就是_masthead.html

  1. {% 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 %}
  3.   <div id="masthead-no-image-header">
  4.     <div class="row">
  5.       <div class="small-12 columns"><!-- <a id="logo" href="{{ '/' | absolute_url }}" title="{{ site.title }} – {{ site.slogan }}">
  6.         <img src="{{ site.url }}{{ site.baseurl }}/assets/img/{{ site.logo }}" alt="{{ site.title }} – {{ site.slogan }}">
  7.         </a> -->
  8.       </div>
  9.       <!-- /.small-12.columns -->
  10.     </div>
  11.     <!-- /.row -->
  12.   </div>
  13.   <!-- /#masthead -->
  15.   {% if page.breadcrumb == true %}
  16.     {% include _breadcrumb.html %}
  17.   {% endif %}
  20. {% elsif page.header.title %}
  22.   <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 %}">
  24.     <div class="row">
  25.       <div class="small-12 columns">
  26.         <div class="masthead-title">{{ page.header.title }}</div>
  27.       </div>
  28.       <!-- /.small-12.columns -->
  29.     </div>
  30.     <!-- /.row -->
  31.   </div>
  32.   <!-- /#masthead -->
  33.   {% if page.breadcrumb == true %}
  34.     {% include _breadcrumb.html %}
  35.   {% endif %}
  37.   {% if page.header.caption_url && page.header.caption %}
  38.     <div class="masthead-caption">
  39.       <a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
  40.     </div>
  41.   {% elsif page.header.caption %}
  42.     <div class="masthead-caption">
  43.       {{ page.header.caption }}
  44.     </div>
  45.   {% endif %}
  48. {% elsif page.header.image_fullwidth %}
  50.   <div id="masthead">
  51.     <div class="row">
  52.         {%  if page.header_widget %}
  53.             {% include _header-widget.liquid %}
  54.         {% endif %}
  55.       <div class="small-12 columns"><!-- <a id="logo" href="{{ '/' | absolute_url }}" title="{{ site.title }} – {{ site.slogan }}">
  56.         <img src="{{ site.url }}{{ site.baseurl }}/assets/img/{{ site.logo }}" alt="{{ site.title }} – {{ site.slogan }}">
  57.         </a> -->
  58.       </div>
  59.       <!-- /.small-12.columns -->
  60.     </div>
  61.     <!-- /.row -->
  62.   </div>
  63.   <!-- /#masthead -->
  65.   {% if page.breadcrumb == true %}
  66.     {% include _breadcrumb.html %}
  67.   {% endif %}
  69.   {% if page.header.caption_url && page.header.caption %}
  70.     <div class="masthead-caption">
  71.       <a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
  72.     </div>
  73.   {% elsif page.header.caption %}
  74.     <div class="masthead-caption">
  75.       {{ page.header.caption }}
  76.     </div>
  77.   {% endif %}
  80. {% elsif page.header.pattern %}
  82.   <div id="masthead-with-pattern" style="background: url('{{ site.urlimg }}/{{ page.header.pattern }}')">
  83.     <div class="row">
  84.       <figure class="small-12 columns">
  85.         <img src="{{ site.urlimg }}/{{ page.header.image }}" alt="{{ site.title }}">
  86.       </figure>
  87.       <!-- /.small-12.columns -->
  88.     </div>
  89.     <!-- /.row -->
  90.   </div>
  91.   <!-- /#masthead -->
  93.   {% if page.breadcrumb == true %}
  94.     {% include _breadcrumb.html %}
  95.   {% endif %}
  97.   {% if page.header.caption_url && page.header.caption %}
  98.     <div class="masthead-caption">
  99.       <a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
  100.     </div>
  101.   {% elsif page.header.caption %}
  102.     <div class="masthead-caption">
  103.       {{ page.header.caption }}
  104.     </div>
  105.   {% endif %}
  108. {% elsif page.header.background-color %}
  110.   <div id="masthead-with-background-color" style="background: {{ page.header.background-color }};">
  111.     <div class="row">
  112.       <figure class="small-12 columns">
  113.         <img src="{{ site.urlimg }}/{{ page.header.image }}" alt="{{ site.title }}">
  114.       </figure>
  115.       <!-- /.small-12.columns -->
  116.     </div>
  117.     <!-- /.row -->
  118.   </div>
  119.   <!-- /#masthead -->
  121.   {% if page.breadcrumb == true %}
  122.     {% include _breadcrumb.html %}
  123.   {% endif %}
  125.   {% if page.header.caption_url && page.header.caption %}
  126.     <div class="masthead-caption">
  127.       <a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
  128.     </div>
  129.   {% elsif page.header.caption %}
  130.     <div class="masthead-caption">
  131.       {{ page.header.caption }}
  132.     </div>
  133.   {% endif %}
  136. {% elsif page.header == false %}
  138.   {% if page.breadcrumb == true %}
  139.     {% include _breadcrumb.html %}
  140.   {% endif %}
  142. {% endif %}

这就是header-widget.scss

  1. @import "/assets/fonts/imports.css";
  2. // @import url(https://raw.githubusercontent.com/NewSpectrum/Technovine-Site/main/_sass/foundation-components/_header-button.scss)
  4. //▸ Widget Properties
  5. $header-color:      hsl(0deg, 0%, 100%);
  6. $txt-color:         hsl(0deg, 0%, 100%);
  7. $inner-shadow:      inset 2px 2px 5px hsla(0deg, 0%, 0%, 0.5);
  8. $txt-shadow:        0.5px 0.5px 5px hsla(0deg, 0%, 0%, 0.5);
  9. $widget-bg-color:   hsla(0deg, 0%, 0%, 0.5);
  10. $widget-padding:    1rem 2.5rem 2rem 2.5rem;
  12. //▸ Button Properties
  13. $sr-bg:             hsl(
  14.                           18deg,
  15.                           100%,
  16.                           62%
  17.                         );
  18. $button-text:       hsl(0deg, 0%, 100%);
  19. $button-gr1:        hsl(18deg,
  20.                           100%, 62%);
  21.                     // #ff773d
  22. $button-gr2:        hsl(18deg, 80%, 45%);
  23.                     // #cf4e17
  24. $box-shadow:        1px 1px 3px hsla(0, 0%, 0%, 50%);
  25. $text-shadow:       0.5px 0.5px 1.5px hsla(0, 0%, 0%, 50%);
  27. $button-gradient:   linear-gradient(
  28.                         135deg,
  29.                         $button-gr1 0%,
  30.                         $button-gr2 100%
  31.                     );
  33. .header-widget {
  34.     position: relative;
  35.     align-items: left;
  36.     max-width: 1000px;
  37.     margin-left: auto;
  38.     margin-right: auto;
  40.     .widget-container {
  41.         background-color: $widget-bg-color;
  42.         padding: $widget-padding;
  43.         border-radius: 20px;
  44.         backdrop-filter: blur(10px);
  45.         -webkit-backdrop-filter: blur(10px);
  46.         box-shadow: $inner-shadow;
  48.         h1,
  49.         h2,
  50.         h3,
  51.         h4,
  52.         h5,
  53.         h6 {
  54.             font-family: "Libre Baskerville", serif;
  55.             color: $header-color;
  56.         }
  58.         p {
  59.             font-family: "Lato", sans-serif;
  60.             font-size: 1rem;
  61.             color: $txt-color;
  62.         }
  63.     }
  65. }
  69. .button-container {
  70.     position: relative;
  71.     max-width: 200px;
  72.     font-family: "Lato", sans-serif;
  73.     text-shadow: $text-shadow;
  74.     background: $button-gradient;
  75.     color: $button-text;
  76.     border: 0;
  77.     box-shadow: $box-shadow;
  78.     border-color: hsla(0, 0%, 0%, 0%);
  79.     border-radius: 20px;
  80.     padding: 10px 20px;
  81.     a {
  82.         color: inherit;
  83.         text-decoration: none;
  84.     }
  85. }

这是header-widget-button.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Button Test</title>
  8.     <link rel="stylesheet" href="../css/_header-button.css">
  9.     <script id="service-request_script"
  10.      src="../js/service-request_button.js"></script>
  11.     <script id="slideshow">
  12.         // JavaScript
  13.         // Change 'background-image' in 'body' (css)
  14.         // Change <section> content
  15.     </script>
  16. </head>
  17. <body>
  18.     <section id="header-widget" class="header-widget">
  19.         <div id="sales-widget" class="widget-container">
  20.             <h1>
  21.                 Worry-Free Professional IT Services
  22.             </h1>
  23.             <p>
  24.                 No need to worry about amateur service. Get the IT professionals your business needs.
  25.             </p>
  26.             <!--BUTTON-->
  27.             <br /><br />
  28.             <div id="button-container" class="sales-request button">
  29.                 <button id="sales_button" onclick="requestService()">
  30.                     Get&nbsp;Quote
  31.                 </button>
  32.             </div>
  33.         </div>
  35. <br><br>
  37.         <div id="service-request_widget" class="widget-container">
  38.             <h1>
  39.                 Worry-Free Professional IT Services
  40.             </h1>
  41.             <p>
  42.                 No need to worry about amateur service. Get the IT professionals your business needs.
  43.             </p>
  44.             <!--BUTTON-->
  45.             <br /><br />
  46.             <div id="button-container" class="sales-request button">
  47.                 <button id="sales_button" onclick="requestService()">
  48.                     Submit&nbsp;Ticket
  49.                 </button>
  50.             </div>
  51.         </div>
  52.     </section>
  53. </body>
  54. </html>

这是header-widget.liquid

  1. <section id="header-widget" class="widget-container">
  2.     <div id="sales-widget" class="header-widget">
  3.         {%  if page.header_widget:widget_title %}
  4.             <h1>
  5.                 {{ page.header_widget:widget_title }}
  6.             </h1>
  7.         {% else %}
  8.             <code>widget_title is not set</code>
  9.         {% endif %}
  10.         <p>
  11.             {{ page.header_widget:widget_text }}
  12.         </p>
  13.         <!--BUTTON-->
  14.         <br /><br />
  15.         <div id="button-container" class="button-container">
  16.             <button id="sales_button" onclick="requestService()">
  17.                 <a href="{{ page.header_widget:button_url }}">
  18.                     {{ page.header_widget:button_text }}
  19.                 </a>
  20.             </button>
  21.         </div>
  22.     </div>
  23. </section>

这是index.md

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

1条答案

按热度按时间
56lgkhnf

56lgkhnf1#

页面上的内容看起来不错，但浏览器开发工具不显示任何样式，因为它们根本没有加载。所以这是一个Sass/CSS问题。
大多数样式来自styles_feeling_responsive.scss文件。似乎您错过了导入基础组件中的header-widget.scss文件，因此根本没有加载它。
在再次查看并使用之前的修复（包括丢失的CSS文件）后，我找到了原因。
您的header-widget CSS类必须移动到widget-container内部，因为您的HTML在“小部件”内部定义了“容器”。

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

这是解决办法。请注意，我还将按钮容器移到了小部件容器中。

  1. .widget-container {
  2.     background-color: $widget-bg-color;
  3.     padding: $widget-padding;
  4.     border-radius: 20px;
  5.     backdrop-filter: blur(10px);
  6.     -webkit-backdrop-filter: blur(10px);
  7.     box-shadow: $inner-shadow;
  8.     margin-top: 20px;
  10.     h1,
  11.     h2,
  12.     h3,
  13.     h4,
  14.     h5,
  15.     h6 {
  16.         font-family: "Libre Baskerville", serif;
  17.         color: $header-color;
  18.     }
  20.     p {
  21.         font-family: "Lato", sans-serif;
  22.         font-size: 1rem;
  23.         color: $txt-color;
  24.     }
  26.     .header-widget {
  27.         position: relative;
  28.         max-width: 1000px;
  29.         margin-left: auto;
  30.         margin-right: auto;
  31.     }
  33.     .button-container {
  34.         position: relative;
  36.         button {
  37.             border-radius: $global-radius;
  38.         }
  40.         a {
  41.             color: inherit;
  42.             text-decoration: none;
  43.         }
  44.     }
  45. }

结果如下：

展开查看全部
赞(0）分享  回复(0）举报  2023-05-30
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com