在文本和图像之间的SCSS和HTML上定制Jekyll主题

我正在自定义Justice模板。我想修改标题。原始标题如下:

在文本和图像之间的SCSS和HTML上定制Jekyll主题

我检查了以下代码:建筑物图片(即背景图片)位于左侧,文本(标题和导航栏)位于右侧。现在,我想像下面这样更改它们:

  1. 只让背景图像的高度固定,而不是在左侧。
  2. 将标题“司法”从文本更改为图像。
  3. 导航中的“建议”将其更改为“新闻”。

对于第一个,“ _ sass”文件夹中的_layout.scss如下:

header {
background-size: cover;
background-repeat: no-repeat;
/*background-position: calc(50% - 40px) 175px;*/
height: 420px;
box-sizing: border-box;

.container {
    text-align: center;
}

@media (min-width: $mobile-break) {
    background-size: contain;
    background-position: calc(50% - 300px) calc(100% + 20px);

    &.main-hero {
        height: 80vh;
        background-position: calc(50% - 350px) calc(100% + 20px);
    }

    .container {
        text-align: right;
    }
}

我暂时将背景位置设为评论状态,因为我认为不需要固定背景图像的位置,但是我需要添加任何内容吗?例如,如果主题在移动设备中显示(我猜是在@media上显示)?

要将标题“ JUSTICE”更改为图像,代码看起来像“ _layout”文件夹的default.html中的第28-40行:

<header style="background-image: url('{% include relative-src.html src=page.background_image_path %}');" {% if page.large_header %}class="main-hero"{% endif %}>
        <div class="container">
            <h1><a href="{{ site.baseurl }}/">{{ site.data.company.title }}</a></h1>
            <nav>
                <ul>
                    {% assign nav_pages = site.html_pages | where: 'show_in_navigation',true | sort: 'navigation_order' %}
                    {% for nav_page in nav_pages %}
                        <li><a {% if nav_page.url == page.url %}class="active"{% endif %} href="{{ site.baseurl }}{{ nav_page.url }}">{{ nav_page.title }}</a></li>
                    {% endfor %}
                </ul>
            </nav>
        </div>
    </header>

标题是这一部分:<h1><a href="{{ site.baseurl }}/">{{ site.data.company.title }}</a></h1>。如何修改这部分?我应该是<a href="{{ site.baseurl }}/"><img src="what is the link here?"></a>之类的人,但是在这种情况下Jekyll中的链接是什么?如何修改固定宽度的_layout.scss?

要在导航中将“ Advice”更改为“ News”,是否只需要将相对文件夹名称(例如“ Advice”)更改为我想要的任何名称(例如“ News”)?我找不到其他地方似乎包括在内。但是我想知道是否还有其他地方可以链接到导航,也可以链接到_post文件夹(否则“ Advice”无法获取降价文件文章)?

非常感谢!

MYLIFEA 回答:在文本和图像之间的SCSS和HTML上定制Jekyll主题

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/2588114.html

大家都在问