VuePress theme デフォルトをいじる

VuePress フォントを変える

Noto Sans JP に変更します。 https://fonts.google.com/specimen/Noto+Sans+JP

vuepress eject docsでデフォルトの theme コンポーネント書き出し。

docs/.vuepress/config.js

module.exports = {
  head: [
    [
      'link',
      {
        rel: 'stylesheet',
        href: `https://fonts.googleapis.com/css?family=Noto+Sans+JP`
      }
    ]
  ]
};

docs/.vuepress/theme/styles/theme.styl

body
  font-family 'Noto Sans JP', sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  font-size 17px
  color $textColor

Navbar 検索バーを一番右に

NavLinks.vue

.nav-links {
  display: inline-block;
  margin-right: 2rem;

Navbar.vue

<template>
  <header class="navbar">
    <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/>

    <router-link
      :to="$localePath"
      class="home-link"
    >
      <img
        class="logo"
        v-if="$site.themeConfig.logo"
        :src="$withBase($site.themeConfig.logo)"
        :alt="$siteTitle"
      >
      <span
        ref="siteName"
        class="site-name"
        v-if="$siteTitle"
        :class="{ 'can-hide': $site.themeConfig.logo }"
      >{{ $siteTitle }}</span>
    </router-link>

    <div
      class="links"
      :style="{
        'max-width': linksWrapMaxWidth + 'px'
      }"
    >
      <NavLinks class="can-hide"/>
      <AlgoliaSearchBox
        v-if="isAlgoliaSearch"
        :options="algolia"
      />
      <SearchBox v-else-if="$site.themeConfig.search !== false"/>
    </div>
  </header>
</template>