I work with Liferay and sometimes I need to build models.ftl, it's including put all the code in a single file. Is it possible to automate this process? I have already searched and the only way I found is to put script tag with src, not the script inline.
Individuals files
/js/script.js
/css/style.css
Index.ftl
Should be:
Index.ftl
<style>
style here
</style>
<div>
html tags here with freemarker.
</div>
<script>
code here
</script>
Related
I need to be able to add a js file to be able to manipulate the html? I tried to add something similar to what is done in the assets.yml by loading the styles.css, but I did not have the expected result, and I do not understand how else I could do it.
There is a new Quick Start Guide in a JavaScript tutorial that has the exact example you are asking for:
https://doc.oroinc.com/frontend/javascript/js-quick-start/
You can do JavaScript coding inline, I would suggest making a separate file for it though, just like you do with a .css file. A .js file is called with a <script> tag instead of <link> in your HTML document.
How to do it
Make a new file called main.js inside your folder
Call it with the <script> tag in your HTML document, usually just before the closing </body> tag.
Make an element and manipulate it - this example is the p element that has the ID #change. One way to do it is with document.querySelector. You can do it with a classname as well if you prefer.
I'll let you do the rest.
document.querySelector('#change').innerHTML =
<p id="change">Change me</p>
<script src="main.js"></script>
<nav class="left-side">
this is my HTML tag. But on browse, I am getting
<nav v-d-asd0fd class="left-side">
can anybody tell from where does v-d-asd0fd generates? This same thing is also applied in CSS .plese help to find this
When Webpack processes your project it's "Scoping" the CSS. Basically it means that each component's classes are unique to that component and can't fight with other classes. So you could have left-side in different components with different styles.
Vue CSS Scope documentation.
You can change it by removing the word scoped from your Style tag
<style scoped> to <style>
Is there any way to make two different files for HTML and components in Vue.js? Meaning the HTML code is in a different file from the component's code like with Angular.
If your goal isn't to avoid precompilation, you can still use single-file components and split the js and css into different files. They include an example of this structure in the docs.
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>
UPDATE
Additional details can be found in the Nuxt feature request that I created.
ORIGINAL QUESTION:
I'm using Nuxt to build a pattern library app. My goal is to display the uncompiled SASS beside each rendered component, like this:
Public-facing .html page:
<div class="my-component"></div>
<pre>
<code>
#import "assets/stylesheets/colors";
.my-component {
color: $some-color;
}
</code>
</pre>
Following this example, I was able to create a custom <docs> language block:
.vue file:
<docs>
#import "assets/stylesheets/colors";
...
</docs>
<style lang="scss">
#import "assets/stylesheets/colors";
...
</style>
This works, but it forces me to duplicate my code. It would be much better if I could eliminate the <docs> block and process the <style> block twice, using two different loaders. Unfortunately, I haven't found a way to do this.
I tried the following, hoping that vue-loader would process both the <docs> block and the <style> block, but only the <docs> block is being processed (probably because the <style> block is nested?), so my SCSS is no longer being compiled and injected into the page:
.vue file:
<docs>
<style lang="scss">
#import "assets/stylesheets/colors";
...
</style>
</docs>
I'm using Nuxt Edge, which includes Webpack 4 and Vue Loader 15.
After reading though the Vue Loader code and hacking around, I don't think it's possible to run a single block through multiple sets of loaders (please correct me if I'm wrong). Nevertheless, I was able to find an adequate solution to my problem:
I ended up using Copy Webpack Plugin to duplicate my .vue files and save them with a .txt extension. I then request them via Axios (on the client side), or use FS to read them from the file system (on the server side). I then extract the <style> and <script> blocks via regex. This isn't ideal, but it works.
You can try seperate css into seperate files like this:
<docs src="/the/path/component.scss"></docs>
<style src="/the/path/component.scss"></styles>
then write a loader to read the file's content and render it.
I tried to add a js file or css file as i mentioned below in the .vm file
<script src='/templates/jquery-1.6.2.js>
it didn't work.
But when i tried adding as given below it worked
<script type="text/javascript">
#include( "jquery-1.6.2.js" )
</script>
But the issue is in the browser if do view source even the jquery-1.6.2.js code also appears.It doesnot hide the js code. Is there any alternate way to add the js or css file in velocity template ??
In case someone comes across this question, there is a straightforward way to include CSS styles in a Velocity template. I had a need to add some overrides to a .vm file, and putting a <style> tag with the appropriate rules inside <body> worked. I initially had the <style> inside the <head> tag but that wasn't being picked up by the parser for some reason. It looked fine in IE 8, FF 3.6, and Chrome.