I use 'Docusaurus' to docs but I don`t know How to config multi-language sideBar.
[
'#docusaurus/preset-classic',
{
docs: {
path: 'docs',
routeBasePath: '/',
sidebarPath: require.resolve('./sidebars.js')
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
]```
The code only use a kind of sidebars, if I switch the language The sidebars can`t switch.
run the write-translations command, for example your locale is zh-cn, when command finished, you will get a current.json file in the i18n/zh-cn/docusaurus-plugin-content-docs directory
yarn run write-translations -- --locale zh-cn
the current.json contains the docs sidebar's category labels, modify it like the following:
{
"version.label": {
"message": "5.0.0.alpha.1",
"description": "The label for version current"
},
"sidebar.docsSidebar.category.Getting Started": {
"message": "开始上手",
"description": "The label for category Getting Started in sidebar docsSidebar"
},
"sidebar.docsSidebar.category.Guides": {
"message": "指南",
"description": "The label for category Guides in sidebar docsSidebar"
}
}
for more details, refer to:https://docusaurus.io/docs/next/i18n/tutorial#translate-plugin-data
Docusaurus allows you to add a navbar item so the user can select the language they want. You can enable the dropdown by adding the code below, as explained in the official documentation, to the docusaurus.config.js file.
If you want to find out more you can also have a look at this video in which I explain all the steps you need to follow to translate your Docusaurus website.
module.exports = {
themeConfig: {
navbar: {
items: [
{
type: 'localeDropdown',
position: 'left',
},
],
},
},
};
if I switch the language The sidebars can`t switch
If you properly prepared i18n JSON files, when you switch the locale (language), the sidebar label will show different languages.
Seeing as Vuetify adds around 300-340kb worth of icons when using icons: 'mdi' with the nuxt#vuetify-module, I've found answers indicating that purgeCSS is a good solution to shave off the unnecessary and unused icons.
I initially imported the icons manually from 'mdi/font' but quickly realized this was a very ineffective solution because it forced me to constantly come up with solutions of adding the icons manually to components.
I can't seem to get purgecss to remove the icons though (which is the most important to me).
I installed "#nuxtjs/vuetify": "^1.11.3",
I installed "nuxt-purgecss": "^1.0.0",
I installed "#mdi/font": "^5.9.55",
Looking at this answer I tried to create my settings
why do i see vuetify css in view source?
They also discuss it here:
https://github.com/vuetifyjs/vuetify/issues/7265
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true,
defaultAssets: {
font: {
family: 'Ubuntu',
},
icons: {
iconfont: 'mdi',
},
},
theme: {
dark: false,
themes: {
light: {
primary: '#fec655',
primarytext: '#23263e',
},
}
}
},
purgeCSS: {
enabled: true,
paths: [
'components/**/*.vue',
'layouts/**/*.vue',
'pages/**/*.vue',
'plugins/**/*.js',
'./node_modules/vuetify/dist/*.js',
'./node_modules/vuetify/dist/*.css',
'./node_modules/vuetify/src/**/*.ts',
'./node_modules/#mdi/fonts/*',
],
styleExtensions: ['.css'],
// whitelist: ['body', 'html', 'nuxt-progress', ''],
whitelist: ['v-application', 'v-application--wrap','layout','row','col'],
whitelistPatterns: [
/^v-((?!application).)*$/,
/^theme--*/,
/.*-transition/,
/^justify-*/,
/^p*-[0-9]/,
/^m*-[0-9]/,
/^text--*/,
/--text$/,
/^row-*/,
/^col-*/,
/leaflet/,
/marker/
],
whitelistPatternsChildren: [/^v-((?!application).)*$/, /^theme--*/],
extractors: [
{
extractor: content => content.match(/[A-z0-9-:\\/]+/g) || [],
extensions: ['html', 'vue', 'js']
}
]
},
Yet still, this request is being made with the original size, any ideas? What am I doing wrong here? The fonts clearly are pulled from locally and not the CDN.
Aside from working with PurgeCss, Have you tried using #mdi/js instead of mdi icons ?
This's from dev.materialdesignicons.com guide:
Using the webfont while easy to use is highly discouraged due to performance and overall request size
So you may roll that by switching to #mdi/js pachage:
https://www.npmjs.com/package/#mdi/js
then specify usage in vuetify options in nuxt.config.js
icons: {
iconfont: 'mdiSvg',
}
Now you have saved considerably in the bundle size.
In my config.js file I have created this sidebar
sidebar: {
'/docs/': [
'',
'gettingStarted',
'guides',
'media'
],
'/docs/gettingStarted/': [
'creatingFirstApplication',
'installing',
'understanding'
],
'/docs/gettingStarted/creatingFirstApplication': [
'setup'
],
'/docs/gettingStarted/installing': [
'installation'
],
'/docs/gettingStarted/understanding': [
'why',
'useCases',
'coreConcepts',
'architecture',
'gettingHelp'
],
'/docs/guides/': [
'firstApplication'
],
'/docs/media/': [
'downloads',
'onlineResources'
],
'/docs/media/downloads': [
'brochure'
],
'/docs/media/onlineResources': [
'articles',
'videos'
]
}
but I am only able to see the top level markdown files when building the page. So here you can see my project structure
When building the page only README.md, gettingStarted.md, guides.md, and media.md get rendered.
How can I fix it?
Please let me know if you need more information!
So this is the current state
and this is an example showing what I would like to achieve
I found more information here
https://vuepress.vuejs.org/theme/default-theme-config.html#multiple-sidebars
I tried to reverse my configuration
sidebar: {
'/docs/gettingStarted/creatingFirstApplication': [
'setup'
],
'/docs/gettingStarted/installing': [
'installation'
],
'/docs/gettingStarted/understanding': [
'why',
'useCases',
'coreConcepts',
'architecture',
'gettingHelp'
],
'/docs/gettingStarted/': [
'creatingFirstApplication',
'installing',
'understanding'
],
'/docs/guides/': [
'firstApplication'
],
'/docs/media/downloads': [
'brochure'
],
'/docs/media/onlineResources': [
'articles',
'videos'
],
'/docs/media/': [
'downloads',
'onlineResources'
],
'/docs/': [
'',
'gettingStarted',
'guides',
'media'
]
}
but this didn't help.
I created a small repository providing a small documentation with two pages per directory.
https://github.com/Garzec/VuePressTest
I hope this helps.
It's... a little confusing but from what I understand you need subfolders...
Remember that VuePress sidebar is used to organize how the user sees the items in a specific order. The sources not matters name or where the .md file is. You can add from any path but is better to follow the Directory structure convention.
There are some considerations in your case.
Firstly...
For subfolders routes, you need to create a README.md (take it like an index.html). So, you need a Default Page Routing. Router expects that the ending /{page}/ has a /{page}/README.md
Try renaming your index pages to its subfolder like '{name}/README.md'.
For example media.md --> media/README.md.
Secondly...
There are some tree errors in your config.
I noticed you use sidebar: {} (as an object). This is intended to make multiple sidebars (different pages/sections), like in VuePress documentation Guide | Config Reference | Plugin |etc you see in its navbar. If this is your goal, you have to place all child items inside '/docs/' for example and create a fallback:
sidebar: {
'/docs/': [
'', // this is your docs/README.md
// all sub-items here (I explain later)
],
'/': [ // Your fallback (this is your landing page)
'' // this is your README.md (main)
]
}
Thirdly...
As I introduced before, you need to place all the items under that main.
Instead of creating a different route for each page, you can (after renaming I mentioned before) you need to remember that Sidebar (at least in the default theme) only have 1 route level. Their hierarchy levels are made by H2, h3, h4...,
not by file structure.
BUT... You can organize your sidebar sections by grouping it. For example:
sidebar: {
'/docs/': [
'', // this is your docs/README.md
{
title: 'Getting Started',
collapsable: false,
children: [
'gettingStarted/', // 'docs/gettingStarted/README.md' if you renamed before
'gettingStarted/creatingFirstApplication',
'gettingStarted/creatingFirstApplication/setup', // maybe better to move content to `creatingFirstApplication.md`
'gettingStarted/installing/installation',
// Maybe group all this in another another group if is much extense (instead of Getting Started)
// or join into one file and use headers (to organize secions)
'gettingStarted/understanding/why',
'gettingStarted/understanding/useCases',
'gettingStarted/understanding/coreConcepts',
'gettingStarted/understanding/architecture',
'gettingStarted/understanding/gettingHelp',
]
},
{
title: 'Guides',
collapsable: false,
children: [
'guides/', // 'docs/guides/README.md' if you renamed before
'guides/firstApplication',
]
},
{
title: 'Media',
collapsable: false,
children: [
'media/', // 'docs/media/README.md' if you renamed before
'media/downloads/brochure',
'media/onlineResources/articles',
'media/onlineResources/videos',
]
}
],
'/': [ // Your fallback (this is your landing page)
'' // this is your README.md (main)
]
}
If you need split more, think in another section (instead of '/docs/' use each part as a new navbar item (like Guide | Config Reference | Plugin |etc)).
If not, you can also set the option sidebarDepth to 2:
themeConfig: {
sidebar: {
// . . .
},
sidebarDepth: 2
}
I hope this helps you. :)
Note: Maybe I missed some route, so check it your self.
Note 2: Not run in local, but should be fine the structure/syntax. Again, check it and comment,
The answer above really helped us. We're running Vuepress 1.3.1 and ran into some issues using the sidebar groups example code above. (under thirdly)
We ended up with a fairly complex sidebar and had to structure it accordingly. Below is an abbreviated version of our config file. (whole config file)
module.exports = {
// Removed other config options for readability
themeConfig: {
// Removed other themeConfig options for readability
sidebar: [
"/",
{
title: 'AccuTerm',
path: '/accuterm/',
collapsable: true,
children: [
{
title: 'Mobile',
path: '/accuterm/mobile/',
collapsable: true,
children: [
['/accuterm/mobile/quick-start/', 'Quick Start'],
['/accuterm/mobile/colors-and-themes-settings/', 'Colors & Themes Settings'],
['/accuterm/mobile/connection-settings/', 'Connection Settings'],
['/accuterm/mobile/keyboard-and-clipboard-settings/', 'Keyboard & Clipboard Settings'],
['/accuterm/mobile/screen-settings/', 'Screen Settings'],
['/accuterm/mobile/terminal-settings/', 'Terminal Settings'],
['/accuterm/mobile/user-guide/', 'User Guide']
]
},
{
title: 'Web',
path: '/accuterm/web/',
collapsable: true,
children: [
['/accuterm/web/web-introduction/', 'Web Introduction'],
['/accuterm/web/getting-started/', 'Getting Started'],
['/accuterm/web/release-notes/', 'Release Notes'],
['/accuterm/web/activating-accuterm-desktop-licensing/', 'Activating AccuTerm Desktop Licensing'],
['/accuterm/web/batch-user-actions/', 'Batch User Actions'],
['/accuterm/web/change-password/', 'Change AccuTerm.IO Password'],
['/accuterm/web/clipboard-settings/', 'Clipboard Settings'],
['/accuterm/web/connection-settings/', 'Connection Settings'],
['/accuterm/web/creating-profiles/', 'Creating Profiles'],
['/accuterm/web/creating-roles/', 'Creating Roles'],
['/accuterm/web/creating-users/', 'Creating Users'],
['/accuterm/web/font-and-character-settings/', 'Font & Character Settings'],
['/accuterm/web/installing-accuterm-io-server/', 'Installing AccuTerm IO Server'],
['/accuterm/web/keyboard-options/', 'Keyboard Options'],
['/accuterm/web/mouse-settings/', 'Mouse Settings'],
['/accuterm/web/sound-settings/', 'Sound Settings'],
['/accuterm/web/terminal-screen-options/', 'Terminal Screen Options'],
['/accuterm/web/terminal-settings/', 'Terminal Settings'],
['/accuterm/web/web-profiles/', 'Web Profiles'],
['/accuterm/web/rezume-session-resilience/', 'AccuTerm ReZume Session Resilience'],
['/accuterm/web/phi-reports/', 'PHI Reports']
]
}
]
},
["/docs/jbase/", "jBASE"]
]
}
};
Directory Structure
Hopefully seeing this example will help clarify sidebar groups. To see the whole sidebar and directory structure view it on github:
Vuepress config file
Vuepress directory structure
Using the latest version of Sencha Touch 2.3.1a, what event can I use to fire after I pull down the refresh and it goes back up. Ive tried all of them and nothing:
{
xtype: 'list',
itemId: 'passDownList',
store: 'PassDownEntrysStore',
plugins:
[
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true
},
{
xclass: 'Ext.plugin.PullRefresh',
pullText: 'Pull down to refresh',
listeners:
{
}
}
],
I left them out of the listeners cause they didnt do anything. But ive tried the events on the PullRefresh list of events like topchange, bottomchanged, etc.
Update: 6/20/2014
The way i got it to work was to override the fetchLatest() method. I know its not the most elegant but it works wish there was an actual event for it though.
Unable to make scrolling to work properly on 64bit IE10 Win7.
Main.js
Ext.define('ScrollLab.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
],
config: {
layout: 'vbox',
itemId: 'mainPanel',
scrollable: true,
items: [
{
xtype: 'container',
html: 'Sencha Touch 2.3 is the latest version of our industry-leading mobile app framework. In Sencha Touch 2.3 we updated the device APIs to make Apache Cordova a fully supported component in the library, including support (using the latest version of Sencha Command) for the Adobe PhoneGap Build. Touch 2.3 also includes two brand new themes: Cupertino and Mountain View, in addition to several enhancement to existing themes, especially the Blackberry 10 theme. Other enhancements in Touch 2.3 include full support for XMLHTTPRequest Level 2 (XHR2) on devices that support it, and a new ProgressIndicator Component to give users a true indication when uploading. Read more about all the new features of Touch 2.3.',
width: '100px'
}
]
}
});
MainController.js
Ext.define('ScrollLab.controller.MainController', {
extend : 'Ext.app.Controller',
requires : [
],
config:{
refs:{
mainView: 'main'
},
control:{
mainView: {
activate: 'onMainViewActivate'
}
}
},
onMainViewActivate: function(view) {
"use strict";
var me=this;
var container = view;
if(container.isXType('selectfield')) {
container = container.down('list');
}// Add support for selectbuttons
// Disable default scroll for mobile.
container.getScrollable().getScroller().setDisabled(true);
console.log(me.getMainView().element.dom);
var scrollContainers = Ext.DomQuery.select('.x-scroll-view', me.getMainView().element.dom);
var scrollBars = Ext.DomQuery.select('.x-scroll-indicator', me.getMainView().element.dom);
for(var i=0;i<scrollContainers.length;i++){
scrollContainers[i].style.overflowY = "scroll";
}
for(i=0;i<scrollBars.length;i++) {
scrollBars[i].style.zIndex = "-1";
}
console.log(scrollContainers);
console.log('Length - ' + scrollContainers.length);
}
});
This code enables the scroll but it freeze me on the current view and doesn't let me scroll up/down when content overgrows the screen.
This piece of code works great for Webkit browsers(Chrome, Safari) but doesn't work well on IE10.
I figured it out. Not a single solution. For different components I had to enable Scroll bars differently. But key thing is using overflow: scroll and height 100% CSS property at the right place in DOM.
Feel free to reach me if you need suggestions.