I am playing as a newbie with Nuxtjs. I bought an html template to transform it as Nuxtjs project. The template, there are several css to display out a good layout.
There are issues on loading a page.vue as first call but if I reload it, the layout/css are displayed correctly.
My tries were:
- Adding css: [ ... ] at nuxt.config.js as global.
- Added css as script injected into the page.vue as follow:
export default {
head () {
return {
link: [
{ rel: 'stylesheet', type: 'text/css', href: './css/animate.css' },
{ rel: 'stylesheet', type: 'text/css', href: './css/et-line.css' },
],
}
}
}
I appreciate your clues & tricks.
Put your css files to assets or static folder. More info about the difference you could find in the doc: https://nuxtjs.org/guide/assets#static
Plug it in nuxt.config.js as so:
css: ["~assets/main.css"] or css: ["~/static/static.css"]
Rebuild the project
Related
I have been converting a WordPress site to Gatsby, and everything works nicely with gatsby develop, however after building with gatsby build some pages seem to render with only the page body and no wrapper layout or styling. I am using markdown pages with mdx, and I have all my markdown files under subfolders of the src/pages directory, like this:
src/pages/
--project/
--contact.md
--outputs.md
--project.md
--sources.md
--software/
--apps.md
--frontend.md
--system.md
The above structure is more for organizational reasons than anything else (there are many more mdx files in reality). It does also correspond to the overall path structure of the site, however. In my built site, when I go to http://localhost:9000/contact the page renders perfectly, but when I visit http://localhost:9000/project or any other pages relating to that folder I only see the page body (the text content), with no layout component wrapper or styling. Everything under the software folder renders fine.
Each markdown file has a slug defined in the usual way in the frontmatter. The slug defined in src/project/project.md is just '/project'. The slug for src/project/contact.md is '/project/contact'.
Clearly the presence of src/pages/project/project.md is causing problems, but I can't figure out exactly why. I tried renaming that to src/pages/project/index.md, but that did nothing. Interestingly, when I look at public/project I see an index.html at the top level, with subfolders for each subpage, each containing its index.html. For public/software there is no index.html at the top level.
My gatsby-config.js (relevant parts):
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages`,
},
},
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [`.md`, `.mdx`, `.markdown`],
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1024,
},
},
],
},
},
My template (under templates/page.js - I use some MUI components):
export default function SitePageTemplate({ data: { mdx } }) {
const { frontmatter, body } = mdx;
const { title } = frontmatter;
return (
<Layout>
<Seo title={title} />
<Container fixed>
<Stack direction="row" justifyContent="space-between">
<SideBar/>
<div style={ { padding: "0 0 0 3.5%", width: "75%" } }>
<MDXRenderer>{body}</MDXRenderer>
</div>
</Stack>
</Container>
</Layout>
);
}
export const pageQuery = graphql`
query ($id: String!) {
mdx(id: { eq: $id }) {
body
frontmatter {
date(formatString: "MMMM DD, YYYY")
slug
title
}
}
}`
My gatsby-node.js:
const path = require("path");
exports.createPages = async ({ graphql, actions, reporter }) => {
const { createPage } = actions
createPage({
path: "/using-dsg",
component: require.resolve("./src/templates/using-dsg.js"),
context: {},
defer: true,
})
const result = await graphql(`
query MARKDOWN {
allMdx {
edges {
node {
id
frontmatter {
date(formatString: "MMMM DD, YYYY")
slug
title
}
}
}
}
}
`);
if (result.errors) {
reporter.panicOnBuild("🚨 ERROR: Loading \"createPages\" query");
}
const md = result.data.allMdx.edges;
md.forEach(({ node }, index) => {
createPage({
// This component will wrap our MDX content
component: path.resolve("./src/templates/page.js"),
// Pass any value you want to access inside the template. They'll be available via `props`.
context: {
id: node.id
},
// Slug defined with frontmatter in each MDX file.
path: node.frontmatter.slug
});
});
}
If I place all the markdown files flat under the src/pages directory the problem goes away. But I would like to retain the above folder layout so that the markdown is organized properly. How can I do this whilst at the same time avoiding this problem?
OK, returning to this issue after a few months, I think I finally solved it. A warning I was also getting turned out to be the real clue - initially I had thought it unrelated to this issue. At develop and at build time I was getting a warning in the following format:
warn Non-deterministic routing danger: Attempting to create page: "/project/contact/", but page
"/project/contact" already exists
Others have reported this warning, but none of the reasons or propsed fixes seemed to relate to my problem. Looking at my gatsby-config.js, however, I noticed that I had at some time included the gatsby-plugin-page-creator plugin. I suspected that somehow this might be generating pages in addition to the mdx plugin. And it seemed as if this was right - removing the plugin removed both the warnings about duplicate page creation and also fixed my rendering problems. Everything looks fine now, for both development and production versions of my site.
I can't remember why I originally included this plugin - I was originally using the mdx extension for my markdown files, and I think I needed gatsby-plugin-page-creator so that files with that extension would be correctly interpreted as markdown. I now use the standard md extension, and removing gatsby-plugin-page-creator doesn't cause any problems.
I have light and dark theme files and mentioned in angular.json file as below:
"styles": [
"src/styles.scss",
{
"input": "src/styles/themes/light.theme.scss",
"bundleName": "light-theme",
"inject": false
},
{
"input": "src/styles/themes/dark.theme.scss",
"bundleName": "dark-theme",
"inject": false
}
],
and I want to inject each of the file dynamically via this code
loadStyle(styleName: string = 'light-theme' | 'dark-theme') {
const head = this.document.getElementsByTagName('head')[0];
let themeLink = this.document.getElementById('client-theme') as HTMLLinkElement;
if (themeLink) {
themeLink.href = styleName;
} else {
const style = this.document.createElement('link');
style.id = 'client-theme';
style.rel = 'stylesheet';
style.href = `${styleName}`;
head.appendChild(style);
}
}
The above code creates link as
<link id="client-theme" rel="stylesheet" href="dark-theme"> // href="light-theme"
but nothing happens because the actual theme file is not being injected in the head-tag.
Update
Accoring to Angular Material docs
You can define multiple themes in separate files by creating multiple theme files per Defining a theme, adding each of the files to the styles of your angular.json. However, you must additionally set the inject option for each of these files to false in order to prevent all the theme files from being loaded at the same time. When setting this property to false, your application becomes responsible for manually loading the desired file. The approach for this loading depends on your application.
https://material.angular.io/guide/theming#multiple-themes-across-separate-files
but the process of loading styles files in not there in the docs :(
Any suggestion/solution would be highly appreciable!!! :)
I don't think you can directly use the bundleName as href. Maybe try something like this:
style.href = `styles/themes/${styleName}.css`;
Set a default theme using inject attribute:
{
"input": "src/styles/themes/light.theme.scss",
"bundleName": "light-theme",
"inject": true
},
or update your ngOnInit in AppComponent:
ngOnInit(): void {
this.loadStyle('light-theme');
}
I have tried lots of things but I could not find any solution for that, How can I upload an image from the desktop in CK Editor in Angular 6. How can I configure that?
You need to write some code to insert images or links to images from your server path.
Try that:
<ckbutton [name]="'imageExplorer'"
[command]="'openImageExplorer'"
(click)="openImageExplorer($event)"
[icon]="'./images/Icon.png'"
[label]="'Open image explorer'"
[toolbar]="'insert,1'">
</ckbutton>
Config File:
this.ckeConfig = {
height: 400,
language: "en",
allowedContent: true,
toolbar: [
{ name: "clipboard", items: ["Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Undo", "Redo"] },
{ name: "links", items: ["Link", "Unlink", "Anchor"] },
{ name: "insert", items: ["Image", "Table", "HorizontalRule", "SpecialChar", "Iframe", "imageExplorer"] }
]
};
In your dialog window insert the link:
onAddImage() {
try
{
let link = this.ckeditor.instance.document.createElement("img");
link.setAttribute("alt", "Image");
link.setAttribute("src", "./Images/test.png");
this.ckeditor.instance.insertElement(link);
}
catch(error)
{
console.log((<Error>error).message);
}
this.showFiles = false;
}
For Documentation
Hope it helps thanks.
I am unable to add a header and footer in my PDF using jQuery DataTables with TableTools extension. Can anyone give me any idea?
This is my code:
var oTable;
var line1Value,line2Value;
var myVar = "<img src='../macro/$proj/images/images.jpg' alt='myImage' title='myImage'/>"
\$(document).ready(function(){
oTable=\$('#PdfTable').DataTable({
"scrollY":"500px",
"scrollCollapse": true,
"paging":false,
dom: 'T<"clear">lfrtip',
tableTools: {
"sSwfPath": "../macro/$proj/js/Pdfjs/copy_csv_xls_pdf.swf",
"aButtons": [
"copy",
"csv",
"xls",
{
"sExtends": "pdf",
'sTitle': "Benchmark Report",
"sPdfOrientation": "landscape"
},
"print"
]
}
});
});
This is not possible.
It requires changing the swf action script file ('copy_csv_xls_pdf.swf' or 'flashExport.swf').
TableTools uses the AlivePDF library ( http://alivepdf.bytearray.org ) for creating PDFs. The AS3 code used by TableTools is here: https://github.com/DataTables/TableTools/blob/master/media/as3/ZeroClipboardPdf.as.
Source: https://datatables.net/forums/discussion/19049/customizing-pdf
You can use header and footer property like this
$("#example").DataTable({
header : true,
footer: true,
});
This way you can enable to print header and footer.
In the code below, if I set the activeTab to 0, the contents of /viewer/welcome show up as expected. If I set activeTab to 1 (like below), the second tab is activated on load, but when I click on the first tab, the content never displays. I can see it loading the content for the tab BEFORE I click on the tab (if I set autoLoad: false, it doesn't load it at all), but even though it loaded, it doesn't display.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: true
},
layout: {
type: 'fit'
},
title: 'Welcome'
},
...
}
Why doesn't the content of the tab actually render when the tab is activated? Why does it work if that tab is the active tab on load, but not when it is activated otherwise?
If I make these changes, the text displays all the time as expected, but I get an extra page load from the spurious activate call.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: false
},
layout: {
type: 'fit'
},
title: 'Welcome',
listeners: {
activate: function(me, opts) {
me.getLoader().load();
}
}
},
...
}
I'm just not understanding why the tabs are not managing this content as part of being a tab.....
I think the problem here is what you have indicated - the tabs are not managing content. The reason why they are not managing it properly is the HTML content that gets returned from loader is just that - some HTML, it is not an ExtJS Component. It is arguable that ExtJS "should" manage content that it has loaded but the docs allude to the contrary: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-cfg-html It might be worth while filing a bug on this.
Also, I noticed you had a fit layout specified on the welcome panel. Since you have no other items contained in that panel, you probably don't need that setting - incidentally it may (or may not) improve how the loaded html fragment gets handled.
Good luck.
I found out that in ExtJS 5.1 using the reference name didn't work. Had to put in an itemId