基于SCSS和HTML在文本和图像之间定制Jekyll主题

我正在定制模板。我想修改标题。原标题如下： 我检查代码，确定建筑图片（即背景图像）位于左侧，文本（标题和导航）位于右侧。现在我想对它们进行如下更改：

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

只需让背景图像具有固定的高度，而不是位置在左侧

将标题“JUSTICE”从文本更改为图像

nav中的“建议”将其更改为“新闻”

对于第一个，在“_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”更改为image，代码类似于“_layout”文件夹的default.html中的第28-40行：

{%assign nav_pages=site.html_pages |其中：'show_in_navigation'，true | sort:'navigation_order%}
{导航页面%中导航页面的%}

{%endfor%}

标题是这部分：

。如何修改此部分？我应该是

，但在这种情况下，Jekyll中的链接是什么？如何使用固定宽度修改_layout.scs

要将nav中的“Advice”更改为“News”，我只需要将相对文件夹名称（例如，here is Advice）更改为我想要的任何内容（例如，here is“News”）？我找不到其他地方，好像包括。但我想知道应该有其他地方链接到nav，也链接到_post文件夹（或者“建议”无法获得降价文件文章）

非常感谢