I've been using Docusaurus v2 with the default theme for my Python library website and love it! I'd like to change the position of the announcement bar, which is currently at the top of the page, as it isn't very visible. I think it would work better beneath the "hero". Is there any way to accomplish this without swizzling the Layout element? Thanks!
You can always create your own annoucement bar component and add it to your index.js file. This is what I did to create any additional bar under the hero.
CODE EXAMPLE:
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (
<header className={clsx('hero hero--primary', styles.heroBanner)}>
<div className='container'>
<h1 className='hero__title'>{siteConfig.title}</h1>
<p className='hero__subtitle'>{siteConfig.tagline}</p>
<div className={styles.buttons}>
<Link
className='button button--secondary button--lg'
to='/docs/intro'
>
Docusaurus Tutorial - 5min ⏱️
</Link>
</div>
{/* YOU CAN ADD YOUR ANNOUNCEMENT BAR HERE */}
<div>
<YourComponent />
</div>
</div>
</header>
);
}
Create and Add your Annoucement Bar Component
This is how I added it to my website under that homepage hero...
Example Home Page Annoucement Bar Docusaurus Website
Related
Let's say I want to create my own Link.
const Link = ({ href, style }) => {
return <a href={href} class={style}>
<Slot />
</a>
}
Now I want to use this Link in the Menu of my website, and the Menu component is imported inside the main layout.
// main layout
<Menu />
<Slot />
<Footer />
Here, I get this error:
[vite] Internal server error: can not be rendered because one of its ancestor is already a .
This goes against the HTML spec: https://html.spec.whatwg.org/multipage/dom.html#interactive-content
Why does this happen? It's because inside the main layout, we practically included another <Slot /> by including <Menu /> which contains <Link /> components.
So, what do you think we should do here?
If we ask all developers to specify the name of the slot, that's highly inefficient and dirty:
<Link href="/">
<span q:slot='link'>About us</span>
</Link>
This is very ugly and inefficient. I don't have many slots in my Link component. I have one Slot. I should not be specifying a name for it.
What should I do?
****(The main issue Link should work, but it should be encapsulate inside the router. If encapsulated than obviously , it would like nested router. which i dont want. i just want to render register component only when i click the link below)****
return (
<h1>Login Page</h1>
Its the login form, no issue with login form
<form action="">
<button }>Login</button>
</form>
<
**(The main issue is this should work, but it should be encapsulate inside the router. If encapsulated than obviously , it would like nested router. which i dont want. i just want to render register component only when i click the link below)**
<Link to="" component={Register}> Create Account </Link>
</div>
);
Could you try and use Link to declare the path, then use Route inside a switch to give functionality.
<h1>Login Page</h1>
Its the login form, no issue with login form
<form action="">
<button>Login</button>
</form>
<Link to="path/here" component={Register}> Create Account </Link>
<Switch>
<Route path="path/here">
< Register />
</Route>
</Switch>
Of course you will have to import Route and Switch
I'm using this handy pagination tool called vuejs-paginate and it works just fine in terms of functionality when I click each individual page item, but when I press the navbar brand (which switches to page 1), the pagination tool does not switch the active class to page 1 and the active class just remains on the page you were previously at.
Here's my pagination code:
<template>
<section role="region" class="paginate py-md-5 py-4" id="paginate">
<div class="container">
<div class="row">
<div class="col-12">
<paginate
:page-count="20"
:click-handler="clickCallback"
:prev-text="'<'"
:next-text="'>'"
:container-class="'pagination'"
:page-class="'page-item'"
:page-link-class="'page-link'"
:next-class="'page-item'"
:next-link-class="'page-link'"
:prev-class="'page-item'"
:prev-link-class="'page-link'"
class="justify-content-center mb-0"
>
</paginate>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
methods: {
clickCallback(pageNum) {
this.$router.push({
path: `/page/${pageNum}`
})
}
}
}
</script>
<style lang="scss">
</style>
I was thinking of using some sort of way to programmatically click the first page item of the pagination when clicking on the navbar brand, but I'm not sure how to achieve this. Thanks for the help!
After a lot of debugging, I found out that it was actually where I had placed my pagination component. In my Nuxt app, I had put it inside default layouts. This means that when I had clicked on the navbar brand to go to the first page, the pagination did not remount. So what I did to resolve the problem was to transfer my pagination component to its individual pages. Now, when I switch from route to route, the active class will change because the pagination component remounts to react to the changes.
I'm using the vue-instagram component to display images from my own instagram account..
The url's are correct (when i inspect element, and open the url in new tab, the image shows up...), but it only shows up as an icon (see image below)..
Here's my code : (boilerplate from example) :
<template>
<vue-instagram token="209161622.1677ed0.cd18b9a41f0c4a53b646b8f012f465ab" :count="5" mediaType="image">
<template slot="feeds" slot-scope="props">
<!-- <li class="fancy-list"> {{ props.feed.link }} </li> -->
<img :src="props.feed.link" />
</template>
<template slot="error" slot-scope="props">
<div class="fancy-alert"> {{ props.error.error_message }} </div>
</template>
</vue-instagram>
import VueInstagram from 'vue-instagram'
export default {
components: {
VueInstagram,
}
}
</script>
As you see from the image below, it only display the icon, not the picture itself :
Here is the rendered HTML :
Any idea what i'm doing wrong here ?
Your links are to the post (an HTML page), not directly to the image so they cannot be displayed as images.
From snooping around the component's Github page, it seems you want
<img :src="props.feed.images.low_resolution.url" alt="Image">
I am design an Vuejs app which page render based on route.
e.g. for
route = /, Component = Main.vue
<template>
<div>
<toolbar :user="user"></toolbar>
<app-content></app-content>
</div>
</template>
route = /:user, Component = User.vue
<template>
<div>
<toolbar :user="user"></toolbar>
<userHeader></userHeader>
<app-content></app-content>
</div>
</template>
When the page is show, the toolbar component will fetch data from server, the problem is, when the page go from / to /user, the data fetching data X 2 because that are 2 toolbar components in the app itself.
How should resolve this issue ? is that any way to reuse share component instances like toolbar ?
or should i put the design in one whole component instead ? ( use v-if to show hide the additional component)
You should be having <toolbar /> outside of <router-view></router-view>.
So your code should look like:
<div id="app">
<toolbar user="user" />
<router-view />
</div>
With this <toolbar /> won't change even if you change your routes, and will result in data fetching for a single time only.