So My issue is this:
I don't know the process to theme inside regions in Drupal 8. I have the knowledge to theme regions by putting {{ page.XXX }} in the twig file (with regions declaration in the YML file) .But for example I have the "Content" region containing 2 blocks: Page Title and Main Page Content. How can I do to theme only the Page Title or the Main Page Content block in the twig file. Any help is most appreciated.
By default you can override the theme by any one of the below pattern
Pattern: block--[module|-delta]].html.twig
Base template: block.html.twig (base location: core/modules/block/templates/block.html.twig)
block--module--delta.html.twig
block--module.html.twig
block.html.twig
Related
I am not able to find information on how to modify the main page of Vuepress, which, although I like its structure, being in .yaml format does not allow me to put links.
Is it possible to put links?
Or better, is it possible to convert that page to markdown format but keeping the output it delivers?
Unfortunately it is not possible without modifying the Vue templates. The home page is rendered by the Home component component and it renders the page's frontmatter using Vue's "Mustache" syntax. Values inside the mustaches will only ever be rendered as plain text.
You'll have to modify the Home component by either "ejecting" the default theme or by creating a custom layout for the home page. In both cases, you will obviously not receive any updates to the components anymore when you upgrade Vuepress.
I've created a demo to show how to use a custom layout to allow the frontmatter to be HTML. I've copied the Layout and Home components from Vuepress and changed the new Home component to use v-html to inject HTML values into the h1 component. So now your heroText could be Hi! This is a <a href='https://www.google.com'>link</a> and it will be displayed as a link on the home page. You could obviously do the same for the other elements.
Be sure to set the layout value of your home page to the new layout, e.g. layout: HomeLayout.
For example:
I have an url like /content/supercontenturl/.
If this content type is a video (param in my DB), I'll show videoplayer on the page and other components, but if type of content is text or other, I'd like to load specific page.vue for this content with own components, but the url must be same - /content/supercontenturl/
My structure pages:
index.vue
/content/
/_supercontenturl/
_id.vue // The page for video
_id_text.vue // The page for text
... // Other pages
index.vue
you should remember in nuxt all vue files inside Pages directory are components check the guide, and each file or directory you add there will create routes.
the easy way to succeed your demand is put the video page and content page with a proper name in components directory. Create a new file in pages it will contains in scripts the data call and template will contains the component selector, you can use a v-if or dinamic components for load the right component. and pass the data by props.
I'm building a single-file-based Vue application from a template generated with the Vue UI tool.
I understand how a .vue file defines the styling/structure/behavior of a component, how smaller components can be composed into bigger components, and how the top-level "App" component mounts everything to an HTML Div.
As the user progresses through the app, though -- say from a login screen to a master screen to a detail screen -- what's the accepted approach to switching out the current screen-level component?
Ty in advance.
--The Vuebie
This is quite an open ended question so ill just show you what I have done in my own projects. I split my components directory into two directories; 'pages' and 'common'. (Ignore the 'firebase' directory is it beyond the scope of this question).
The common directory holds components that may be used in a page or re used in several different pages.
For example the 'account form' is used in my 'Edit Account page' and the category bar is used in several of my pages.
The pages directory holds components that are technically no different from my common components but they represent full pages on my website. A page component may contain several common components.
Now the biggest distinction between common and pages is in the router. I route different paths relative to the main url (that is probably not the technically correct description but hopefully you get the point) to each of the pages. Here is my index.js file from my router directory:
As you can see, I have a route pointing to each one of my pages. You can " switch out the current screen-level component" (as you put it) by using router-link tag's to navigate between different page components. These are clickable urls that your client can use, they can also be wrapped in buttons and such.
For example, this router link navigates to my home page, the component name is 'Helloworld'. See its corresponding reference in my router's index.js and in the pages directory so you can connect it all in your head.
<router-link class="nav-item nav-word" :to="{ name: 'HelloWorld' }">
Finally, I will talk a bit about the App.vue file. The App.vue acts like a base component as it contains the 'router view' tag within it's template:
<router-view/>
This means that every page that you route will be placed in the position of the 'router view tag'. I.e this tag will be replaced with the page. It is common practise to surround this tag with html code that you would like to be shown in each page. For example I have my router view tag between my nav bar and footer. So that the nav bar and footer will show on each page.
How or where is this variable defined in stencil?
{{ getFontsCollection }}
I'm hoping to include other google fonts in the theme. Are they automatically included if they are listed in schema.json?
According to the Stencil Docs, getFontsCollection is a handlebars injection helper function used to help you load the resource on the page:
{{getFontsCollection}}
The getFontsCollection helper is custom to Stencil. It returns a link tag that loads all selected font collections. It takes no parameters.
The helper method pulls from your global getThemeSettings() which are located in your config.json file. Look for the primary-font and secondary-font fields
"settings": {
"primary-font": "Google_Lato_700,400,300",
"secondary-font": "Google_Droid+Serif_400italic,400,700",
...
}
They are added via the config file
I'm having a problem with the django templating system.
I have a template with html, css, and js. When I use this template for my site, all of its margins and paddings change, and my template seems to become another template. For example margin 0 auto; seems to become margin 0 0;.
Note: I have a temp.html file and, for example, in the index of my home app, I have a file index.html that contains a {% extends "temp.html" %} tag and other block that they are in temp.html. (ed: ?)
If you need more code, please let me know.
You will need to make use of Django's built-in media hooks and relative URLs:
Django media URLs in CSS files