Is it not possible to use an object type as a reference in sanity? For example this is not working. When I go to the field nothing shows up. If I can't do this how can I access the indexPage objects that have been created under other documents?
export const indexPage = {
title: "Index Page",
name: "indexPage",
type: "object",
fields: [
{
title: "Subheading",
name: "subheading",
type: "array",
of: [{ type: 'block' }]
},
{
title: "Content",
name: "content",
type: "array",
of: [{ type: "block" }]
},
]
}
// in another file
export const coolPage = {
title: "Cool Page",
name: "coolPage",
type: "object",
fields: [
{
title: "Reference Index Page",
name: "refIndexPage",
type: "reference",
to: [{ type: 'indexPage' }]
}
]
}
References can only point to other documents; not to a specific part of a document. So to achieve this, indexPage would need to be a document.
I think modelling indexPage as a document would be a viable option in your case. You mentioned "indexPage objects that have been created under other documents". Instead of creating indexPage data inside a specific document, indexPage should be its own document type. Any other document can then connect to it via a reference. This approach should be really flexible for you.
Sanity Studio recently added support for "references in place", which makes this workflow even better. The studio now allows you to create a document to reference while you are editing the document that references it—without leaving the editor. You can see a demo here (no extra work on your part is needed here, it's handled automatically by Sanity Studio).
In summary: if you have a piece of data you'd like to share between multiple documents, model it as its own document type that is referenced by every document that is related.
I want to add Schema Tags and load my custom CSS in head tag on some particular pages not all, So is their any easy way to do that as I am not a coder, Can anyone help me regarding this?
To Add custom style to the default installed vuepress I use the following code in index.styl under .vuepress/styles/ to update content__default css class:
/**
* Custom Styles here.
*
* ref：https://v1.vuepress.vuejs.org/config/#index-styl
*/
.home .hero img
max-width 450px!important
.content__default
background-color #3df085
Screen:
About SEO tags I suggest loris plugin
after reading your comment I see a custom layout is the solution.
Add tags to head via config.js:
head: [
['meta', { name: 'theme-color', content: '#3eaf7c' }],
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
['meta', { 'property': 'og:type', 'content': 'article' }]
],
Easy customization using default theme:
Custom style for each page using custom page class.
Add tags for each page using yaml header.
Example for #1 & #2:
/blog/README.md
---
pageClass: blog-page
home: true
heroText: Hero Title
actionLink: /blog/
meta:
- name: description
content: blog page by abuabdellah
- name: keywords
content: super duper SEO
---
# Introduction
This is a test for a blog using v1 Vuepress
/guide/README.md
---
pageClass: guide-page
meta:
- name: description
content: guide page by abuabdellah
- name: keywords
content: super duper SEO
---
# Introduction
VuePress is composed of two parts
index.styl
.theme-container.blog-page
background-color blue !important
.theme-container.guide-page
background-color green !important
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.
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
hey i was wondering about the following problem a long time:
In my previous app i specified an xtype to my classes like so:
Ext.define('Sencha.view.Home', {
extend: 'Ext.Panel',
xtype: 'homepanel',
then in my Viewport i added in the items the xtype of 'homepanel' and of course this worked fine and the homepanel and others were displayed in my view. But after upgrading to 2.0 final i can't do this anymore? No i have to use it like this to include my homepanel in the view:
xclass: 'Sencha.view.Home'
Was this a change in the version? Do i now always must call the xclass, or am i doing something wrong with my xtype? Thanks for help!
The Sencha Framework has an alias keyword instead of xtype for the declaration
http://docs.sencha.com/touch/2-0/#!/api/Ext.Class-cfg-alias
Ext.define('MyApp.CoolPanel', {
extend: 'Ext.panel.Panel',
alias: ['widget.coolpanel'],
title: 'Yeah!'
});
// Using Ext.create
Ext.widget('widget.coolpanel');
// Using the shorthand for widgets and in xtypes
Ext.widget('panel', {
items: [
{xtype: 'coolpanel', html: 'Foo'},
{xtype: 'coolpanel', html: 'Bar'}
]
});
Which is also how EXTJS does it nowadays:
https://stackoverflow.com/a/5608766/330417
I have a Sencha Touch 2.0 app and my viewport is set up like this:
Ext.define('example.view.Viewport', {
extend: 'Ext.Container',
config: {
fullscreen: true,
id: 'mainContainer',
layout: {
type: 'card',
animation: {}//we manually set this throughout the app
},
items: [
/*
* This is a list of all of the "cards" in our app that are preloaded
*/
{ xtype: 'dashboardpanel' },
{ xtype: 'customerlist' },
{ xtype: 'loginpanel' }
]
}
});
So if yours isn't working I'm guessing something else is going on. But its hard to tell without seeing more code.
So i figured out what was wrong with my xtypes: I declared my Views in my Controller not in my App.js, as i had put them into my app.js all worked fine for me!
Thanks for your help!
Ext.define('Sencha.view.Home', {
extend: 'Ext.Panel',
alias: 'widget.homepanel'
when you want to use the alias widget 'homepanel' you just say xtype:'homepanel wherever you want to implement it
just change your container to list from panel and set the list-config as
scrollable: false,
pinHeaders: false,