To improve the load time of customer self service web pages you can use the application to minimise the style sheet (CSS) and JavaScript files at run time.
This uses Razor technology.
Step-by-step guide
To bundle and minify JavaScript files:
- Login as an administrator
- Go to the "Template Editor" page
- Open up the "Code Editor"
- Include web optimisation into the razor template
- Create a new "Script Bundle"
- Include your scripts into the bundle
- Create and load your bundle
Code Block |
---|
|
@using System.Web.Optimization;
@{
var cvScripts = new ScriptBundle("~/TemplateBundles/CVScripts");
}
... Other HTML here
@{
cvScripts.Include("~/Scripts/cv.util.js");
}
... Other HTML here
@{
BundleTable.Bundles.Add(cvScripts);
@Raw(@Model.TemplateUtil.ScriptRender("~/TemplateBundles/CVScripts"))
} |
To bundle and minify CSS files:
...
Code Block |
---|
|
@using System.Web.Optimization;
@using Bundler;
@{
var cvStyles = new cvStyleBundle("~/TemplateBundles/CVStyles");
}
... Other HTML here
@{
cvStyles.Include("~/documents/css/print/pmain.css");
cvStyles.Include("~/documents/css/print/pbutton.css");
cvStyles.Include("~/documents/css/print/preset.css");
// or you can use
cvStyles.Include( new string [] {
"~/documents/css/handheld/hbuttons.css",
"~/documents/css/handheld/hreset.css",
"~/documents/css/handheld/hmain.css"
});
}
... Other HTML here
@{
BundleTable.Bundles.Add(cvStyles);
@Raw(@Model.TemplateUtil.StyleRender("~/TemplateBundles/CVStyles"))
// If you want to attach additional tags you can use
@Raw(@Model.TemplateUtil.StyleRender("~/TemplateBundles/CVStyles","Media:Print;Id:test;SomeTag:SomeValue"))
} |
Tip |
---|
To enable this functionality the template needs to be a version 4 (Razor) template |
...
Related
...
help
Content by Label |
---|
showLabels | false |
---|
max | 5 |
---|
spaces | KB |
---|
showSpace | DRAFTfalse |
---|
sort | modified |
---|
showSpace | false |
---|
reverse | true |
---|
type | page |
---|
cql | label in ("javascript","scripts-styles") and type = "page" and space = "KB" |
---|
labels | kb-how-to-article javascript css |
---|
|