How to insert Header and Footer in .vm file - header

I have a .vm (Velocity) file which is run to generate a DOC file. I want to have a very simple header and footer in this resultant DOC file. How can I write code in .vm file for this.
I do not want to include header and footer files as external files. I want simple code in the same .vm file.
Please help!!!

Without including a separate file? Just write the HTML. The following code is an extract from a vm file:
<div class="footer">
<div class="footerlinks">
<ul>
<li class="first">Something</li>
</ul>
</div>
</div>

Related

How to create a single file with HTML, CSS and JS? inline

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>

I need to add a js file to be able to manipulate html

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>

Adding a background image in sass

Having a trouble placing a background image in one of simple Vue.js project that I'm currently doing!
I've tried all the possible solutions that I could come up with. But no luck. That's why I'm here to have experts' help like you!
Having created the hero section, I tried to add a background image to that. Yes, the background image is imported to the right folder and the location of the folder is correctly written as well. However, once the compiler compiled the program, I get crickets! Nothing!
Here's the Sass code
.hero
background: url ('..../assets/clouds.jpg')
background-size: cover
background-color:#ffffff
And here's the HTML code for your reference
<div class = "home">
<section class="hero">
<div class="hero-body">
<div class=" container">
<h1 class="title"> {{heading}} </h1>
<div class="is-two-thids column is-paddingless">
<h2 class="subtitile is-4"> {{subheading}} </h2>
</div>
<a class="button is-large is-primary" id ="learn"> Learn More</a>
</div>
</div>
</section>
</div>
The funny thing is there's no error message shown. That's right, zero error messages.
This is the final product I received
For most of you out there, this should be a pretty simple fix. So, can you help this beginner out from this agony!
Thank you!
Edit: Got the following error message after adapting the change
background: url ('#/assets/clouds.jpg')
Edit 2: Sass file and its location.
It's location is src/router/mq.saas
Edit 3: Got the required one
Your issue is that ..../ is not a valid relative-path traversal symbol. Only ./ (current directory) or ../ (parent directory) are valid.
Assuming you've built the app with Vue CLI (v3), you should be able to use
background: url ('#/assets/clouds.jpg')
where # is configured as an alias for <projectRoot>/src.
See https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules
Alternately, construct a valid relative path from your Sass file / Vue component.
For example, say you're in src/mq.sass and want to reference src/assets/clouds.jpg, the relative path would be
background: url('./assets/clouds.jpg')

how to take assets from an external application folder in Vue?

I have a folder with images and folder with vue-app(archy)
so i need to get in components those images
I tried something like this, but didn't succeed
<div v-if='photo' class="post-img">
<img :src="`~#/../../uploads/posts/${photo}`" alt="img">
</div>
any suggestions?

Using TagHelpers in Area Views

I spent the last hour refactoring to use Areas, now all my Views don't seem to have function taghelpers :/
So this is what's in the Index.cshtml
<div class="btn-group">
<a asp-controller="Survey" asp-area="Admin" asp-action="Create" class="btn btn-primary">Create New</a>
</div>
...and this is the rendered HTML :/
<div class="btn-group">
<a asp-controller="Survey" asp-area="Admin" asp-action="Create" class="btn btn-primary">Create New</a>
</div>
Intellisense doesn't even show the asp- prefixes and syntax highlighting on the asp- attributes is also lost.
Other SO issues reference "asp-route-area" but that just renders out verbtim like the rest.
These all worked fine when they were in ~/Views/Name/Index.cshtml, move them out to ~/Areas/Name/Views/Name/ and nopers...
Any thoughts?
Steve
According to official docs:
The #addTagHelper directive makes Tag Helpers available to the view.
In this case, the view file is Views/_ViewImports.cshtml, which by
default is inherited by all view files in the Views folder and
sub-directories; making Tag Helpers available. The code above uses the
wildcard syntax (“*”) to specify that all Tag Helpers in the specified
assembly (Microsoft.AspNetCore.Mvc.TagHelpers) will be available to
every view file in the Views directory or sub-directory.
If you use one layout per area, to use built-in tag helpers you should add _ViewImports.cshtml in ~/Areas/Name/Views/ folder(If you use shared layout you don't need. See MusicStore project for shared layout example).
I guess you used one layout per area and you didn't add _ViewImports.cshtml ~/Areas/Name/Views/. Copy /Views/_ViewImports.cshtml into ~/Areas/Name/Views/.
As it turns out, adding the _ViewImports.cshtml file to the Areas/ folder cascades the visibility of the file to all Areas/{area}/views within the folder.
So rather than:
-> Areas
--> Area1
----> Views
------> _ViewImports.cshtml
--> Area2
----> Views
------> _ViewImports.cshtml
We can just do:
-> Areas
--> Area1
--> Area2
--> _ViewImports.cshtml
Or more visually