自定义增强博客模板
#css #blog #enhance

过去的新年前夕，莫妮克·琼斯（Monique Jones）出版了an article on The Verge，这不可能更及时。在Twitter上不断增长的垃圾箱大火中，更普遍的感觉，社交媒体不再是曾经是有趣，个人和引人入胜的领域，琼斯呼吁带回个人博客很重要，而且很重要：

如果Twitter上发生的事情没有证明这一点，那么我们与这些社交媒体平台的关系充其量是微不足道的。我们今天用来建立我们的受欢迎程度的东西很可能会被明天被摧毁和消失，那是什么呢？ [�]拥有您的内容并控制平台是必不可少的，拥有个人博客是一个很好的方法。

我认为博客的未来是出于多种原因而光明的，尤其是这种能够维持内容所有权的能力。但是，回到博客的另一个重要理由是，可以选择以反映您作为作者的方式构建和展示该内容。我个人回想起中后期，作为博客的美好时光。我不仅获得了对网络开发世界的第一见解，而且我还接触到了广泛的特质设计感，从最受欢迎和功能最大的功能（任何人都记得iA的WordPress主题）到异想天开和华丽。

考虑到所有这些想法，我们最近首次亮相了第一个应用模板，以增强the Enhance blog template！该模板为您提供了开始编写和发布自己的博客所需的一切。它带有对内置的HTML转换，以及RSS feed，代码块语法突出显示，带有浅色和深色变体的基本设计以及github工作流程以自动出版的基本设计。而且，当然，您要维护内容的所有权 - 这意味着您也可以随心所欲。

。

我们的博客模板的设计有意最少，同时遵循一些最佳可读性实践，因此您可以在不需要的情况下出版而无需更改。但是，在本文中，如果我将这个模板作为起点设计一个新博客，我将为您浏览一些步骤。

我将从一些基本的更改开始，以使您对事情的工作方式有一种感觉，然后深入研究一些更实质性的更改，以证明您为自己的博客创造了自己的外观和感觉。我是brutalist graphic design的忠实拥护者，所以我会牢记这种风格，但请随时在跟进时做出自己的设计决策！ （或者，如果您更喜欢跳过结束，则可以从本文中找到in this example repo的所有代码。）

基础知识：颜色和排版

供参考，这里是我们的博客模板的设计，因为它出现在开箱即用的地方：

Image description

默认情况下，博客模板仅使用两种颜色：一盏灯和一个黑暗。在轻型主题中，浅色映射到博客的背景，而深色映射到版式；在黑暗的主题中，此映射颠倒了。您可以选择这两种颜色的任何价值观，作为使自己的博客成为自己的第一步。

为此，请在项目根部打开styleguide.json文件。您会看到这样的配置：

{
  "base": 16,
  "scale": {
    "ratio": "minorThird",
    "steps": 12
  },
  "properties": {
    "font-body": "Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;",
    "font-heading": "Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;",
    "color-dark": "hsl(204deg 30% 30%)",
    "color-light": "hsl(260deg 30% 94%)"
  },
  "queries": {
    "lg": "48em"
  }
}

我们在这里寻找的属性是color-light和color-dark。

为了开始为这个博客制作野蛮主义外观，我将为这两种颜色选择更多的严重色板，同时远离纯黑人和白色以增加深度。我还将确保我选择的颜色具有sufficient contrast between them，以确保我的博客对于尽可能多的用户仍然可以清晰。

对于我的黑色色板，我选择了一个非常黑暗的紫罗兰色。对于我的轻度色板，略微温暖而柔和的白色。当一起使用时，这两种颜色会产生10.8的WCAG contrast ratio，这将我们带入AAA或增强的评级，换句话说，对比度足以保持文本清晰。从美学上讲，两种柔和的色调（紫色和橙色）之间的微妙对比会为设计增加一定的深度和个性。在更改这些颜色之后的设计：

Image description

现在让我们更新版式。传统上，野蛮的图形设计使用Sans Serif版式 - 或更具体地说，即grotesque typefaces。在本文中，我们将研究实施Web字体，但是就目前而言，我们坚持使用system fonts。多亏了有用的网站Modern Font Stacks，我得到了一个N​​eo Grotesque主题系统字体堆栈，因此我将使用此堆栈更新我的font-body和font-heading设置：

{
  "properties": {
    "font-body": "Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;",
    "font-heading": "Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;"
  },
}

为了增加功利主义的外观，我还将更改网站标头和各个文章标题的一致性。为此，我首先将删除文件app/elements/site-header.mjs中的text-center类的实例。然后，要更改文章标题的对齐，我将从文件app/pages/posts/$$.mjs中删除同一类，特别是从<h1>和<p>元素中删除，分别呈现文章标题和出版日期。

。

因为我们使用了系统字体，因此此更改的结果可能会因您的操作系统而异，但是在这里，模板（特别是帖子页面）现在在我的计算机上的外观：

Image description

最后，我要将代码语法主题更改为鲜明的一点，因此它将更好地匹配博客的整体外观。我将抓住与HighlightJS’s themes collection on Unpkg的不同主题，然后将RAW CSS放入项目中的public/css目录中，以保存外部网络请求。最后，我将在app/head.mjs文件中更新指向此样式表的链接。那给了我们：

Image description

在下一部分中，我们将开始做出更多实质性的更改。如果您想查看我在第一部分中所做的所有代码更改，则可以在this single commit in the example repo on GitHub中查看所有代码。

使用Web字体

是时候为此设计增加更多个性了。正如奥利弗·赖兴斯坦（Oliver Reichenstein）所写的那样，阿比亚奇（web design is 95% typography）

我要做的第一件事是选择一种类型，该字体可以补充我要使用的设计语言。这里的一个好处是，SANS可以作为variable web font提供，因此我只需要两个Web字体文件（一个常规，一个斜体）即可使用所有可用的工作方式。

从Google Fonts下载字体文件后，我将两个变量的Web字体文件放入我的public目录：

public/
├── css/
└── fonts/
         ├── WorkSans.woff2
         └── WorkSansItalic.woff2

然后，要使这些字体可用于浏览器，我将在public/css/global.css样式表中添加一些CSS：

@font-face {
  font-family: 'Work Sans';
  src: url('/_public/fonts/WorkSans.woff2') format('woff2-variations');
  font-weight: 100 900;
}

@font-face {
  font-family: 'Work Sans';
  src: url('/_public/fonts/WorkSansItalic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
}

（注意我们使用URL中的/_public路线来利用文件的automatic fingerprinting。）

接下来，我将字体添加到StyleGuide中的字体堆栈中：

{
  "properties": {
    "font-body": "'Work Sans', Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;",
    "font-heading": "'Work Sans', Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;"
  }
}

就是这样！我的博客现在是工作中的排版：

Image description

有关这些更改的摘要，check out this commit。

更新站点标题

接下来，我将更新站点标题，以使每个页面的顶部更加多一点字符。我认为我喜欢网站标题具有自己的全宽背景颜色。

为了开始，我将打开位于/app/elements/site-layout.mjs的文件，该文件是通用页面布局模板所在的地方。默认情况下，站点标头嵌套在site-container元素中，以使所有页面保持水平对齐，但是要使站点标头具有自己的全宽度背景，我需要将标题从该容器中拉出，并且将标题S 内容返回其自己的站点容器。

随着这些更改，site-layout.mjs文件现在看起来像这样（Note site-header现在与site-container相邻，而它以前是嵌套在其中的）：

export default function SiteLayout ({ html }) {
  return html`
    <site-header></site-header>
    <site-container class='pl0 pr0 pl4-lg pr4-lg'>
        <slot></slot>
      <site-footer></site-footer>
    </site-container>
  `
}

在/app/elements/site-header.mjs文件中，我现在添加一个site-container元素，确保将相同的水平填充类从site-layout.mjs中的实例保留相同的水平填充类：

export default function SiteHeader ({ html }) {
  return html`
    <header>
      <site-container class='pl0 pr0 pl4-lg pr4-lg'>
        <h1 class='text2 text4-lg font-heading font-bold tracking-1 pt4 pt6-lg pb0 pb2-lg'>
          <a href='/' class='no-underline'>
            Enhance Blog Template
          </a>
        </h1>
        <p class='font-body pb4 pb6-lg'>
          A subtitle for this blog
        </p>
      </site-container>
    </header>
  `
}

现在，我将在此组件中添加一些scoped element styles，以更改其背景颜色。范围元素样式意味着我在此组件中编写的任何样式只能应用于此组件（及其后代），这意味着例如，我可以使用裸元素选择器，而不必担心其他选择器会更改其他元素在此组件之外。

要证明，我将使用header元素选择器并更改其背景颜色：

export default function SiteHeader ({ html }) {
  return html`
    <style>
      header {
        background-color: hsla(0deg 0% 0% / 10%);
      }
    </style>
    <header>
      …
    </header>
  `
}

网站标头现在具有自己的背景颜色 - 主背景颜色的阴影略深。如果您检查开发工具中的header元素，您会注意到元素选择器已使用其声明的组件的名称进行了预先准备，从而使完整的Selector site-header header。这样可以防止这些标题样式在该组件之外泄漏（尽管在给定页面上有一个以上的header并不是很常见，但点是）。

Image description

这对于轻型主题看起来很棒，但是我还需要为博客的黑暗主题编写一些样式。为此，我将使用the koude27 media query，然后将背景从透明的黑色切换到透明的白色：

export default function SiteHeader ({ html }) {
  return html`
    <style>
      header {
        background-color: hsla(0deg 0% 0% / 10%);
      }

      @media (prefers-color-scheme: dark) {
        header {
            background-color: hsla(0deg 0% 100% / 10%);
        }
      }
    </style>
    <header>
      …
    </header>
  `
}

现在，我也将标题覆盖为黑暗主题：

Image description

有关这些更改的摘要，see the associated commit。

更新表样式

我要做的最后一件事是使用Enhance’s built in utility class system更新表格的方式。

包含在我们的博客模板中，您会找到一个名为“元素样式参考”的帖子。这篇文章包含一些用于博客文章的最常用的HTML元素，以概述您可能要考虑编写自己的样式的元素。您将在该帖子底部附近找到一个桌子的示例：

Image description

这张桌子有点狭窄，所以我将从其细胞中添加一些填充。

在这种情况下，由于博客的帖子是用宣传写的，而markdown功能special syntax for tables，我可以利用随附的Arcdown plugin的优势，将我的课程选择附加到从Markdown转换为HTML的转换期间，将我的类选择附加到各种HTML元素上。

为此，我将打开文件/app/lib/markdown-class-mappings.mjs。该文件导出一个JavaScript对象，其中每个键代表HTML元素的名称；每个键的值是一个字符串数组，每个字符串包含我们实用程序系统中的有效类名称。您会发现，默认情况下，许多常见元素已经附上了类：

export default {
  h2: ['text2', 'text4-lg', 'font-heading', 'tracking-1', 'font-bold', 'mb0', 'mt4', 'leading1'],
  h3: ['text1', 'text2-lg', 'font-heading', 'tracking-1', 'font-bold', 'mb0', 'mt4', 'leading1'],
  h4: ['text0', 'text1-lg', 'font-heading', 'tracking-1', 'font-bold', 'mb0', 'mt4', 'leading1'],
  p: ['mt-1', 'mb0'],
  …
}

要在我的表单元格中添加一些额外的填充物，我将同时使用th（表标头单元格）和td（表数据单元格）标签，附上p-2 class（短填充，-2scale indexâ ）。

export default {
  …
  th: ['p-2'],
  td: ['p-2],
  …
}

现在，我的桌子的细胞将被很好地填充，在每个条目之间给出一些呼吸空间：

Image description

我为此表所做的最后一件事是将背景颜色应用于整个元素，以视觉上将其与周围内容分开。我认为我想使用网站标头上使用的相同的半透明背景颜色，所以我要做的第一件事就是将这些颜色重新定义为CSS自定义属性。这将使我可以轻松地重复使用这些颜色，而不必担心制作错字（并且，如果我想在路上更改这些颜色，我只需要更新自定义属性定义）。

我将在我们之前使用的global.css文件中定义此自定义属性。一个好的惯例是在您的样式表的顶部写下您的自定义属性，这就是我现在要做的：

:root {
    --white-a10: hsla(0deg 0% 100% / 10%);
    --black-a10: hsla(0deg 0% 0% / 10%);
}

我将返回并在site-header.mjs中更新我的样式以使用这些自定义属性：

export default function SiteHeader ({ html }) {
  return html`
    <style>
      header {
        background-color: var(--black-a10);
      }

      @media (prefers-color-scheme: dark) {
        header {
          background-color: var(--white-a10);
        }
      }
    </style>
    …

最后，在同一global.css文件中，我将其添加为table元素的背景颜色（因为我们没有使用此颜色定义任何类）：

table {
    background-color: var(--black-a10);
}

@media (prefers-color-scheme: dark) {
    background-color: var(--white-a10);
}

现在我的桌子看起来更加不同：

Image description

不过，一件事仍然困扰着我：那些被对齐的表单元格（最多是浏览器的默认样式）使得很难扫描文本行。我通过在我的global.css文件中添加一个规则块来解决此问题：

th,
td {
    vertical-align: top;
}

这确保了我的桌子头和数据单元格中的所有内容都将对齐到单元的顶部，从而使多行文本更易于阅读：

Image description

要查看这些更改，check out the commit。

那是一个包裹！

，你有！在只有四个简单的提交中，我们从中消失了：

Image description

———

Image description

当然，这只是一旦开始自定义博客样式，您就可以做的事情的开始。我们真的很期待看到您的想法，因此请务必share your work on the Enhance Discord!

在此之前，这里很高兴回到博客。由cloning the Enhance blog template或dive into the full source code from this article开始。

在博客圈上见！