Try our conversational search powered by Generative AI!
AI OnAI Off
noob question regarding alloy site: how to edit the non editable parts of the page, how to find which templates its based on?
The normal rule is:
- If possible, make the field editable on page itself. Use blocks for content that occurs on more than one page
- For some framework stuff like footer and header it's common to have them editable on startpage instead.
- For generated content in .NET you need to track it back to the code. I normally check
- Is it part of a page or block? Check what content type it has in edit mode by hovering over the item in the content tree. The page for / usually has the StartPage content type for instance. About Us sounds like an ArticlePage content type. These models are defined in code (similar to entity framework code first if you have modeled databases)
- Find the matching controller and view in the solution. Normally you have a StartPageController to handle a StartPage content type etc so it's usually easy to find. The view is normally located below /Views/[ContentType]/Index.cshtml.
- Some blocks don't use a controller if they don't have much logic. Episerver will search for a matching view at /Views/Shared/Blocks in that case
You can actually see the type of page in the properties view. It's in the grey area together with id of page just above tools.
Sometimes this type has been localized to help editors (but makes it trickier for developers) and then you need to go to admin / content types and click the type you want to examine. If you then click settings you can get the exact class and assembly for the model class. That is generally not needed since hopefully they will translate the content type to something very similar but in rare cases you might need it.
A faster way I often use is inspect html of the page and find some kind of class or id that seems to indicate the content type used #article-page or similar and search in solution for the same css selector.
Hope that helps you get started. Happy coding!
Edited,
Nov 06, 2019 15:14
Thanks, very useful. It is possible to deduce the model, veiw and controller for a given page if they have been given similar names. I was expecting some sort of page/template inheritance like in dreamweaver, but there is no such heiarchy here. Rather they use blocks to help with duplication. If you have 2 pages which are very similar, it doesnt seem possible to create a super page and two sub pages, where sub pages can only edit the different parts, and if you edit the super page, you edit the common stuff for the two sub pages.
Anway, looking at the start page, it has a type of "Start Page". Not sure where this is defined, as its not in the model, view nor contoller:
View is in Views/StartPage/index.cshtml
Model is in Models/Pages/StartPage.cs
controller is in Controllers/StartPageController.cs
The view only contains one line:
@Html.PropertyFor(x => x.CurrentPage.MainContentArea, new { CssClass = "row equal-height", tag = Global.ContentAreaTags.FullWidth })
This is not a view? View should have all the html markup. Where is the HTML and its corresponding CSS kept and how are they linked?
Nov 06, 2019 17:37
Hey johnv,
There is a file called "_ViewStart.cshtml" inside view folder. where the _root.cshtml is defined
@{
Layout = "~/Views/Shared/Layouts/_Root.cshtml";
}and on this root cshtml, CSS and js are defined.
@model IPageViewModel<SitePageData>
<head>
<title>@(Model.CurrentPage.MetaTitle ?? Model.CurrentPage.Name)</title>
<link rel="stylesheet" href="@Url.Content("~/Static/css/bootstrap.css")" />
<link rel="stylesheet"
href="@Url.Content("~/Static/css/bootstrap-responsive.css")" />
<link rel="stylesheet" href="@Url.Content("~/Static/css/media.css")" />
<link rel="stylesheet" href="@Url.Content("~/Static/css/style.css")" />
<link rel="stylesheet" href="@Url.Content("~/Static/css/editmode.css")" />
<script type="text/javascript"
src="@Url.Content("~/Static/js/jquery.js")"></script>
<script type="text/javascript"
src="@Url.Content("~/Static/js/bootstrap.js")"></script>
</head>
<body>
@Html.RenderEPiServerQuickNavigator()
<div class="container">
<div class="row">
<div id="header">
<div class="span2">
<img src="/Static/gfx/logotype.png" />
</div>
<div class="span10">
@Html.Partial("_NavigationMenu", Model)
</div>
</div>
</div>
<hr />
@RenderBody()
</div>
</body>
Nov 06, 2019 21:19
Even more importantly take a look at the IPageViewModel class and how it is used.
when passing information from controller to view the alloy templates makes special use of this.
the currentPage object is attached as well as a generic Layout object that you can customize to your needs.
pay particular attention to the method ModifyLayout.
this will help you navigate the Alloy code
Nov 06, 2019 23:51
If we take a sub page at random of the default alloy (MVC) site, e.g. the about us page, it has some editable content blocks on the right, a non editable navigation box on the left, and header and footer.
I found where you edit the header and footer - its in the start page.
But where do you edit the rest of that page? I.e. where is the template for this page?
Having used other CMS system, they tell you which tempates the current page is based on, (which may be based on aonther template etc) so you can go to that template and edit it accordingly.
I cant see this info even in the "all properties" view?
Or is the template in the MVC code? I.e. you cant edit the rest of the page in the editor, only in the code? If this is the case, how do you find a pages template file? Looking at the source, there is no "AboutUs" under views, but there are things like "LandingPage". How does one know which of these corresponds to a given published web page?