I wonder how to use these beautiful rectangles with corner radius in docusaurus to lead readers to other docs.
I don't know what it is really called... Looked through the documentation of Docusaurus, but not found this.
They're called the DocCardList component. (See the bottom of this page for a link to this reference page)
There are a few different ways to implement them:
Method #1: Creating a generated index page as described by #D.Kastier
Method #2: Embed it into an existing doc page
Just include the following in your doc,
import DocCardList from '#theme/DocCardList';
<DocCardList />
Let's suppose that you have the following folder-structure:
+-- docs
+-- Category1
|-- _category_.json
|-- file1.md
|-- file2.md
+-- Category2
|-- _category_.json
|-- fileA.md
|-- fileB.md
To enable the index page (your image) for a category, you should create and edit the file _category_.json inside the respective folder, it should look like this:
{
"label": "Category1 Label",
"link": {
"type": "generated-index",
"description": "Description of the category goes here...",
}
}
Related
I would like to have custom links and different sidebar for every single page I don't want my headings render as table of contents in sidebar I would like to have custom content like this.
Node JS
-Lecture 1 Introduction
--Sub Lecture
-Lecture 2 Basics
--Sub Lecture
---Nested Lecture
Where all the lectures are custom links. So how can I do that.
sidebar
Type: false | 'auto' | SidebarConfigArray | SidebarConfigObject
Default: 'auto'
Details:
Configuration of sidebar.
You can override this global option via sidebar frontmatter in your pages.
Set to false to disable sidebar.
If you set it to 'auto', the sidebar will be automatically generated from the page headers.
To configure the sidebar items manually, you can set this option to a sidebar array, each item of which could be a SidebarItem object or a string:
A SidebarItem object should have a text field, could have an optional link field and an optional children field. The children field should be a sidebar array.
A string should be the path to the target page file. It will be converted to a SidebarItem object, whose text is the page title, link is the page route path, and children is automatically generated from the page headers.
If you want to set different sidebar for different sub paths, you can set this option to a sidebar object:
The key should be the path prefix.
The value should be a sidebar array.
In order to add custom links external as well as internal see this:
module.exports = {
themeConfig: {
// sidebar object
// pages under different sub paths will use different sidebar
sidebar: {
'/guide/': [
{
text: 'Guide',
children: ['/guide/README.md', '/guide/getting-started.md'],
},
],
'/reference/': [
{
text: 'Reference',
children: ['/reference/cli.md', '/reference/config.md'],
},
],
},
},
}
For more info see Sidebar Config
Problem
The automatic indents in .vm files don't behave as I want them to. Below I add the auto formatted file and also the formatting I want.
The following code snippet is auto formatted by IntelliJ:
#styleTitle('sample-title')
##styleDescription()
A short description of the component
#end
##styleComponent('/components/molecules/sampleComponent/sampleComponent', {
"headline": 'A headline title',
"alertText": "Alert text example",
"link" : {
"href": "www.stackoverflow.com",
"text": "Click here!"
}
})#end
What I want:
#styleTitle('sample-title')
##styleDescription()
A short description of the component
#end
##styleComponent('/components/molecules/sampleComponent/sampleComponent', {
"headline": 'A headline title',
"alertText": "Alert text example",
"link" : {
"href": "www.stackoverflow.com",
"text": "Click here!"
}
})#end
Question
I couldn't find any additional configuration under IntelliJ IDEA | Preferences | Editor | Code Style | Velocity to adjust indention for different code blocks.
How can I configure the code style manually for a specific file type in IntelliJ and how does such a configuration file look like?
I'm using the riot for the system. but I have a problem using the common tag in every place. because I have to copy the all common tag each page.
I added all tags like this. Does anyone have the solution for this ?
<st-service>
<st-alert></st-alert>
<st-header></st-header>
<st-body></st-body>
<st-footer></st-footer>
</st-service>
<st-profile>
<st-alert></st-alert>
<st-header></st-header>
<st-body></st-body>
<st-footer></st-footer>
</st-profile>
I found a solution, I'm using this method to handle these common tags. like this
<st-common>
<st-alert></st-alert>
<st-header></st-header>
<yeild></yeild>
<st-footer></st-footer>
</st-common>
service-page.tag // page
<st-service-page>
<st-common>
<st-service></st-service>
</st-common>
<st-service-page>
profile-page.tag // page
<st-profile-page>
<st-common>
<st-profile></st-profile>
</st-common>
<st-profile-page>
service-view.tag
<st-service>
// html / code body related to module
</st-service>
profile-view.tag
<st-profile>
// html / code body related to module
</st-profile>
If needed in details about this I can explain.
I'd have to know more about how you're routing to say for sure, but I think you should avoid using a different outer tag for each page. If your HTML looks something like this:
<body>
<st-app />
<script>
const pages = {
"/": "st-home",
"/about/": "st-about",
}
const content_tag = pages[window.location.pathname] || "st-notfound"
riot.mount("st-app", {
content_tag: content_tag
})
</script>
</body>
Then <st-app> would be defined something like:
<st-app>
<st-alert></st-alert>
<st-header></st-header>
<div data-is={this.opts.content_page}></div>
<st-footer></st-footer>
</st-app>
The important thing here being that you're controlling which tag should be used via the data-is attribute and the mounting options for <st-app>. In this example <st-home>, <st-about>, and <st-notfound> are riot components defined elsewhere.
This occurs when it renders the bullets -
This is the HTML it is inserting the class="tp-bullet-image" with a style="background-image: url("undefined")
I searched through the .js files and the .css files and can't find the style or where it is coming from.
Seems to keep the slider from auto sliding - I can't find where this style is coming from.
Thanks, Geoff
To elaborate on Geoff's response to his own question, the tmp key must be added to the bullets associative array:
navigation: {
bullets: {
enable: true,
style: 'custom',
tmp: '',
...
}
},
See the Slider Revolution Documentation > Navigation Syntax > Bullets. Note: The style key can be set as desired (not necessarily custom).
This is a QML newbie question. From the table view example I have code like this:
Column {
anchors.top: toolbar.bottom
.....
TabView {
id:frame
......
Tab {
title: "XmlListModel"
...
}
Tab { ...
As the qml file gets quite long, I wonder if I can have nested qml files
Column {
anchors.top: toolbar.bottom
.....
TabView {
id:frame
......
<include tab 1 qml file> <-- possible ????? -------
<include tab 2 qml file>
If such an include is not possible, how does a QML programmer structure his code? Even in the simple example there are already far too many lines to handle IMHO.
-- Edit --
After the answer I have found this readworthy:
http://qt-project.org/doc/qt-5.0/qtqml/qtqml-syntax-directoryimports.html
How to reuse code at QML
No, you can't do "includes" but you can put things into named objects.
For example, take your Tab #1 file, put it in a file called "Tab1" (or a better name that relates to what it's actually displaying; I don't know so can't help you with a name).
So in Tab1.qml we have:
import ...
Tab {
id: tab1
...
}
And then in the main file you can now reference it:
...
Tabview {
id: frame
Tab1 { id: tab1 }
}
You'll note that I included an id for it again, as the parent won't be
able to reference the id within the child without it. (they can be different names, but don't do that. Animals will cry. Actually, you can leave out the id in the child as well, but many people like being able to see it within a file.)