在上一篇文章中,我们一切正常!所以最后一步是一些 UI 更新。与这篇文章匹配的提交是这里

Vuetify 样式

默认的 vuetify 设置目前都是默认的,在文件src/plugins/vuetify.ts中是这样的:

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);

export default new Vuetify({});

进入全屏模式 退出全屏模式

它看起来像这样:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--6xVVokpr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev -to-uploads.s3.amazonaws.com/i/ebxjl3qqygg1nr0afp8d.png)

现在,如果我们要将事物置于黑暗模式,只需简单的一行更改(实际上还有其他地方也可以这样做,但这是在默认主题设置中):

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {dark: true}
});

进入全屏模式 退出全屏模式

现在我们的网站看起来像这样:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ITtTKIwL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/uf35rgnns9xfwib3s9m8.png)

最后,我决定在白卡上采用黄/黑配色方案,但背景为黑色。

由于大多数组件被配置为直接使用此处定义的primary颜色,并且由于我一直使用 Vuetify 组件构建站点,因此更改整个站点的主颜色就像设置primary颜色一样简单。我还为一些按钮使用了warning、error和success颜色,我希望这些颜色适合调色板,所以我也在这里设置它们:

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import colors from 'vuetify/lib/util/colors'

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.amber.darken2,
        warning: colors.deepOrange.base,
        error: colors.red.darken2,
        success: colors.lightGreen.base,
      }
    }
  }
});

进入全屏模式 退出全屏模式

App.vue中有一小段 CSS 用于添加黑色背景。结果现在是:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--atGFjJTU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/i/fzm5tfsbeluqgm7do6iu.png)

我实际上决定在菜单和标题栏中不使用白色文本,稍后我通过取出之前在 AppBar 和 Section 中设置的dark属性来调整它们。

新标识

由于该站点的名称是 CurateBot,因此我用一只手拿着一个可能会被认为是机器人的正方形。我在 Inkscape 中画了这个草图,并给它一个程式化的多边形:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--foYxrF3L--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/i/4keg5epdu4apxc3p5xcb.png)

我为此创建了几个不同的版本,用于网站上的徽标、网站图标和社交预览。

网站图标

Favicon 只是呈现为 260x260px 的徽标的方形版本:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--GETyWdjR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/i/qgf1jsdm1478li9wzjf5.png)

这被放入优秀的在线工具https://realfavicongenerator.net/中,该工具会生成一组不同分辨率的网站图标。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ejpbedMH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/i/thmi9s8gtsnstxpdl9ed.png)

这些都进入web/public文件夹,并编辑index.html文件以将它们包含在

:

<link rel="apple-touch-icon" sizes="180x180" href="<%= BASE_URL %>apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="<%= BASE_URL %>favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<%= BASE_URL %>favicon-16x16.png">
    <link rel="manifest" href="<%= BASE_URL %>site.webmanifest">
    <link rel="mask-icon" href="<%= BASE_URL %>safari-pinned-tab.svg" color="#FFA000">
    <meta name="msapplication-TileColor" content="#FFA000">

进入全屏模式 退出全屏模式

社交预览/Opengraph

下一个徽标是社交预览,这些预览会显示在 Discord 和 Twitter 上,当您粘贴链接时,图像会与链接卡一起使用。我创建了一个更大版本的徽标,并在徽标的两侧添加了很多额外的填充,因为不同的平台会以不同的方式裁剪图像。不幸的是,没有万能的,但这可能是最好的折衷方案:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--rtVqGVrz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/i/pljx1e5ja8kue3tqpslk.png)

的 opengraph 部分

在index.html现在看起来像这样:

<meta name="description" content="Curate and schedule AI-generated tweets">
    <meta name="keywords" content="Twitter,curate,ai,gpt2,bot">
    <meta name="author" content="Yuan Gao">
    <meta name="copyright" content="Copyright 2021, Yuan Gao">
    <meta name="theme-color" content="#FFA000">

    <!-- Twitter -->
    <meta name="twitter:title" content="CurateBot">
    <meta name="twitter:description" content="Curate and schedule AI-generated tweets">
    <meta name="twitter:image" content="https://curatebot.meseta.dev/curatebot_preview.png">
    <meta name="twitter:url" content="https://curatebot.meseta.dev/">

    <!-- Open Graph -->
    <meta property="og:title" content="CurateBot">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://curatebot.meseta.dev/">
    <meta property="og:image" content="https://curatebot.meseta.dev/curatebot_preview.png">
    <meta property="og:description" content="Curate and schedule AI-generated tweets">

进入全屏模式 退出全屏模式

这为 Twitter 和 Discord 等网站提供了呈现此链接所需的所有元数据。您可以使用 Twitter 的Card Validator 工具检查它的外观,该工具还可以帮助您为您的网站清除 Twitter 的缓存!

[](https://res.cloudinary.com/practicaldev/image/fetch/s--VB2sKEly--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/wu1fjwhdxhzzyesg2e8u.png)

不幸的是,Discord 的预览有点小,但它确实使用了正确的主题颜色:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--2dx4-H6V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev -to-uploads.s3.amazonaws.com/i/1kaywzu0yjwno4cu19ug.png)

最后,GitHub repo 在设置中也有自己的社交预览。所以我将相同的图像上传到它。如果您通过 Twitter 或其他网站和聊天平台将 GitHub 存储库发送给某人,则会显示此预览

[](https://res.cloudinary.com/practicaldev/image/fetch/s--NcxEuvyY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/i/h4vc7i6o8960loxf0cbw.png)

菜单图标

在移动设备上访问该网站时,菜单变得太宽,因此我决定在页面较窄时将菜单文本替换为图标,即响应式菜单。 Vuetify 让这件事变得非常简单。我可以使用内置断点$vuetify.breakpoint.smAndDown,它是一个布尔值,当页面宽度小于定义为small screen的任何值时为 True(它是可以调整的像素大小,但我使用的是默认值)

在我的 AppBar.vue 组件中,我为它设置了一个计算值,因为我使用的是vue-property-decorator,所以我可以使用 getter 来执行此操作:

  get collapse() {
    return this.$vuetify.breakpoint.smAndDown;
  }

进入全屏模式 退出全屏模式

然后在模板中我可以使用它和v-if指令来切换文本。这是主页按钮,例如:

      <v-btn text to="/">
        <v-icon :left="!collapse">mdi-home</v-icon>
        <span v-if="!collapse">Home</span>
      </v-btn>

进入全屏模式 退出全屏模式

当屏幕足够宽时,这将在“主页”之间切换,然后在屏幕窄时切换。结果如下所示:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--mQDGCR1Z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/i/05u59zo0ku1h3gh6vqh6.gif)

头版标志

最后是首页标志。我从以前制作了一个透明版本的徽标,并将其渲染为高分辨率:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--SqF6pRWl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/i/gj7tl9q2v4q6mb3n4fcs.png)

然后我把这个贴在网站的首页上以完成外观!

[](https://res.cloudinary.com/practicaldev/image/fetch/s--SBVEruTk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/i/otz8eqlj572pjfmni141.png)

而已!该网站位于https://curatebot.meseta.dev,目前托管我的Dev Influencer AI bot。当它发布时,“CurateBot-App”会出现在源代码中。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--kaQ8VUWJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/i/zhmq4qvc7oxvdt21hpez.png)