I have an external JavaScript and a CSS file . I am not getting the idea how to add this file to my page. I am using DWT TBBs for both CTs and PTs.
I am writing internal CSS in my page TBB for getting the output for the time being. but I am not getting how to implement JavaScript. Can somebody help me?
Should I make these file as component and render them on my page? Is this the correct way? If yes, please tell me the steps to be followed.
This is a topic for wide discussion, I'll try to outline the various possibilities:
Option #1 is the easiest, with quite a few drawbacks.
<link href="tcm:27-2762" rel="stylesheet" type="text/css" />
<script src="tcm:27-2763" type="text/javascript"></script>
If your template uses the Default Finish Actions Building Block, then Tridion will resolve the references to those binaries and publish it with your page. This has the side-effect that these binaries would be published with ALL pages that use the same template.
Option #2 requires you to write a Dynamic Component Template, possibly with some code to determine where files get published to. This is more in line with what I normally implement, but at this point in time I would not recommend that you do this. As you grow Tridion knowledge, you'll feel comfortable enough to do this by yourself. Using this option you can then publish the CSS/JS files to a given location, then use references in your DWT that instead of using the TCM URIs (as above) would use the URL that the files get published to.
Option #3 requires you to create a "code component & template", meaning a simple schema with just one large text field (not rich text) where copy/paste the content of your CSS or JS. Then write a simple component template that will just output the content as is. Something like @@Fields.Code@@
.
Lastly you create 2 page templates (one with extension .js, the other with extension .css) with only one DW Template:
<!-- TemplateBeginRepeat name="Components" -->
@@RenderComponentPresentation()@@
<!-- TemplateEndRepeat -->
Last, and definitely not least (there's many ways to skin this cat) you could just place these CSS/JS files directly on your webserver, and add a link in your DWT to the URLs where these files are available.
Hope this gives you some options. Remember that including CSS/JS should be done at Page Template Level (ideally in the <head>
portion of your page), and not in your Component Template.
There is a great series of how to articles from Building Blocks that explains this
Check out these links:
If you want to keep things really simple (but I don't recommend this as it will republish your CSS or JS every time you publish a page). You can store the CSS as a Multimedia Component (and write down its URI) and reference it like this in your DWT Page Layout:
<link rel="stylesheet" href="tcm:1-2-16" />
or
<script type="text/javascript" src="tcm:1-2-16"></script>
Then use the Default Finish Actions to make sure the binary is published and the links are resolved.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With