Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Customizing Theme Issues #1004

Open
PrimalOutshoot opened this issue Nov 11, 2023 · 2 comments
Open

Customizing Theme Issues #1004

PrimalOutshoot opened this issue Nov 11, 2023 · 2 comments

Comments

@PrimalOutshoot
Copy link

I am new to both Nuxt and Docus theme. I don't know how to customize the themes.

The main page of docus says the theme is customizable with the words:

"Extensible. Customize the whole design, or add components using slots - you can make Docus your own."

  1. Add a top navigation globally since docus does not come with one.
  2. Add Padding to page-body content WHEN Aside is disabled

Customizing the style.css adds padding globally, but

I tried creating a component in layouts/customdefault.vue

<template>
    <DocsPageLayout :has-aside="false">
      <!-- Here you could add your top navigation slot if it's allowed by the original component -->
      <template #TopNav>
        <Navbar />
      </template>
      <slot />
    </DocsPageLayout>
  </template>
  
  <script>
  import DocsPageLayout from '@nuxt-themes/docus/components/app/docs/DocsPageLayout.vue';
  import Navbar from '~/components/Navbar.vue'; 
  
  export default {
    components: {
      DocsPageLayout,
      Navbar
    }
  };
  </script>

<style scoped>
.page-body {
  padding: 1rem;
}
</style>

and then using frontmatter or _dir.yaml to select the layout: customdefault, but my layout doesn't register. Even when it is as simple as HELLO WORLD. There does not seem to be any guidance on how to actually override or extend this themes layout. I do not know what to do and support for the theme seems to be limited. Hoping someone in the community could offer some guidance?

@dshuais
Copy link

dshuais commented Jan 17, 2024

Do you have a plan ?

@NicolasDurant
Copy link

I haven't tried so far to add a new custom layouts, but I had to override the default one and some of the default components in our docus theme. You can do this by matching exactly their directory structure and component naming. Creating layouts/default.vue or layouts/page.vue in your root, will override those layouts. I advise you to simply copy the components from e.g. node_modules/@nuxt-themes/docus/layouts/default.vue first, so you don't break functionality and then extend the code to your need. Hope that might help someone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants