Merge pull request #8458 from umbraco/netcore/feature/AB7479-macro-templates-migration

NetCore: Migrating Macro Templates
This commit is contained in:
Bjarke Berg
2020-08-04 15:05:25 +02:00
committed by GitHub
25 changed files with 583 additions and 590 deletions

View File

@@ -0,0 +1,58 @@
@using Umbraco.Core.Models.PublishedContent
@using Umbraco.Web
@using Umbraco.Core
@using Umbraco.Core.Media
@using Umbraco.Extensions
@using Umbraco.Web.Routing
@inherits Umbraco.Web.Common.Macros.PartialViewMacroPage
@inject IPublishedValueFallback PublishedValueFallback
@inject IPublishedContentQuery PublishedContentQuery
@inject IVariationContextAccessor VariationContextAccessor
@inject IPublishedUrlProvider PublishedUrlProvider
@inject IImageUrlGenerator ImageUrlGenerator
@*
Macro to display a gallery of images from the Media section.
Works with either a 'Single Media Picker' or a 'Multiple Media Picker' macro parameter (see below).
How it works:
- Confirm the macro parameter has been passed in with a value
- Loop through all the media Ids passed in (might be a single item, might be many)
- Display any individual images, as well as any folders of images
Macro Parameters To Create, for this macro to work:
Alias:mediaIds Name:Select folders and/or images Type: Multiple Media Picker
Type: (note: You can use a Single Media Picker if that's more appropriate to your needs)
*@
@{ var mediaIds = Model.MacroParameters["mediaIds"] as string; }
@if (mediaIds != null)
{
<div class="row">
@foreach (var mediaId in mediaIds.Split(','))
{
var media = PublishedContentQuery.Media(mediaId);
@* a single image *@
if (media.IsDocumentType("Image"))
{
<div class="col-xs-6 col-md-3">
<a href="@media.Url(PublishedUrlProvider)" class="thumbnail">
<img src="@media.GetCropUrl(ImageUrlGenerator, PublishedValueFallback, PublishedUrlProvider, width: 200, height: 200)" alt="@media.Name"/>
</a>
</div>
}
@* a folder with images under it *@
foreach (var image in media.Children(VariationContextAccessor))
{
<div class="col-xs-6 col-md-3">
<a href="@image.Url(PublishedUrlProvider)" class="thumbnail">
<img src="@image.GetCropUrl(ImageUrlGenerator, PublishedValueFallback, PublishedUrlProvider, width: 200, height: 200)" alt="@image.Name"/>
</a>
</div>
}
}
</div>
}

View File

@@ -0,0 +1,27 @@
@using Umbraco.Core
@using Umbraco.Web.Routing
@inherits Umbraco.Web.Common.Macros.PartialViewMacroPage
@inject IPublishedUrlProvider PublishedUrlProvider
@*
This snippet makes a list of links to the of parents of the current page using an unordered HTML list.
How it works:
- It uses the Ancestors() method to get all parents and then generates links so the visitor can go back
- Finally it outputs the name of the current page (without a link)
*@
@{ var selection = Model.Content.Ancestors().ToArray(); }
@if (selection.Length > 0)
{
<ul>
@* For each page in the ancestors collection which have been ordered by Level (so we start with the highest top node first) *@
@foreach (var item in selection.OrderBy(x => x.Level))
{
<li><a href="@item.Url(PublishedUrlProvider)">@item.Name</a> &raquo;</li>
}
@* Display the current page as the last item in the list *@
<li>@Model.Content.Name</li>
</ul>
}

View File

@@ -0,0 +1,38 @@
@using Umbraco.Core
@using Umbraco.Core.Models.PublishedContent
@using Umbraco.Web
@using Umbraco.Web.Routing
@inherits Umbraco.Web.Common.Macros.PartialViewMacroPage
@inject IPublishedContentQuery PublishedContentQuery
@inject IPublishedValueFallback PublishedValueFallback
@inject IPublishedUrlProvider PublishedUrlProvider
@*
Macro to list all child pages under a specific page in the content tree.
How it works:
- Confirm the startNodeId macro parameter has been passed in with a value
- Loop through all child pages
- Display a list of link to those pages, sorted by the value of the propertyAlias
Macro Parameters To Create, for this macro to work:
Alias:startNodeId Name:Select starting page Type:Content Picker
*@
@{ var startNodeId = Model.MacroParameters["startNodeId"]; }
@if (startNodeId != null)
{
@* Get the starting page *@
var startNode = PublishedContentQuery.Content(startNodeId);
var selection = startNode.Children.Where(x => x.IsVisible(PublishedValueFallback)).ToArray();
if (selection.Length > 0)
{
<ul>
@foreach (var item in selection)
{
<li><a href="@item.Url(PublishedUrlProvider)">@item.Name</a></li>
}
</ul>
}
}

View File

@@ -0,0 +1,27 @@
@using Umbraco.Core
@using Umbraco.Core.Models.PublishedContent
@using Umbraco.Web.Routing
@inherits Umbraco.Web.Common.Macros.PartialViewMacroPage
@inject IPublishedValueFallback PublishedValueFallback
@inject IPublishedUrlProvider PublishedUrlProvider
@*
This snippet makes a list of links to the of children of the current page using an unordered HTML list.
How it works:
- It uses the Children method to get all child pages
- It then generates links so the visitor can go to each page
*@
@{ var selection = Model.Content.Children.Where(x => x.IsVisible(PublishedValueFallback)).ToArray(); }
@if (selection.Length > 0)
{
<ul>
@foreach (var item in selection)
{
<li>
<a href="@item.Url(PublishedUrlProvider)">@item.Name</a>
</li>
}
</ul>
}

View File

@@ -0,0 +1,26 @@
@using Umbraco.Core
@using Umbraco.Core.Models.PublishedContent
@using Umbraco.Web.Routing
@inherits Umbraco.Web.Common.Macros.PartialViewMacroPage
@inject IPublishedValueFallback PublishedValueFallback
@inject IPublishedUrlProvider PublishedUrlProvider
@*
This snippet makes a list of links to the of children of the current page using an unordered HTML list.
How it works:
- It uses the Children method to get all child pages
- It then uses the OrderByDescending() method, which takes the property to sort. In this case the page's creation date.
- It then generates links so the visitor can go to each page
*@
@{ var selection = Model.Content.Children.Where(x => x.IsVisible(PublishedValueFallback)).OrderByDescending(x => x.CreateDate).ToArray(); }
@if (selection.Length > 0)
{
<ul>
@foreach (var item in selection)
{
<li><a href="@item.Url(PublishedUrlProvider)">@item.Name</a></li>
}
</ul>
}

View File

@@ -0,0 +1,26 @@
@using Umbraco.Core
@using Umbraco.Core.Models.PublishedContent
@using Umbraco.Web.Routing
@inherits Umbraco.Web.Common.Macros.PartialViewMacroPage
@inject IPublishedValueFallback PublishedValueFallback
@inject IPublishedUrlProvider PublishedUrlProvider
@*
This snippet makes a list of links to the of children of the current page using an unordered HTML list.
How it works:
- It uses the Children method to get all child pages
- It then uses the OrderBy() method, which takes the property to sort. In this case, the page's name.
- It then generates links so the visitor can go to each page
*@
@{ var selection = Model.Content.Children.Where(x => x.IsVisible(PublishedValueFallback)).OrderBy(x => x.Name).ToArray(); }
@if (selection.Length > 0)
{
<ul>
@foreach (var item in selection)
{
<li><a href="@item.Url(PublishedUrlProvider))">@item.Name</a></li>
}
</ul>
}

View File

@@ -0,0 +1,34 @@
@using Umbraco.Core
@using Umbraco.Core.Models.PublishedContent
@using Umbraco.Web.Routing
@inherits Umbraco.Web.Common.Macros.PartialViewMacroPage
@inject IPublishedValueFallback PublishedValueFallback
@inject IPublishedUrlProvider PublishedUrlProvider
@*
Macro to list all child pages with a specific property, sorted by the value of that property.
How it works:
- Confirm the propertyAlias macro parameter has been passed in with a value
- Loop through all child pages that have the propertyAlias
- Display a list of link to those pages, sorted by the value of the propertyAlias
Macro Parameters To Create, for this macro to work:
Alias:propertyAlias Name:Property Alias Type:Textbox
*@
@{ var propertyAlias = Model.MacroParameters["propertyAlias"]; }
@if (propertyAlias != null)
{
var selection = Model.Content.Children.Where(x => x.IsVisible(PublishedValueFallback)).OrderBy(x => x.Value(PublishedValueFallback, propertyAlias.ToString())).ToArray();
if (selection.Length > 0)
{
<ul>
@foreach (var item in selection)
{
<li><a href="@item.Url(PublishedUrlProvider)">@item.Name</a></li>
}
</ul>
}
}

View File

@@ -0,0 +1,25 @@
@using Umbraco.Core
@using Umbraco.Core.Models.PublishedContent
@using Umbraco.Web.Routing
@inherits Umbraco.Web.Common.Macros.PartialViewMacroPage
@inject IVariationContextAccessor VariationContextAccessor
@inject IPublishedValueFallback PublishedValueFallback
@inject IPublishedUrlProvider PublishedUrlProvider
@*
This snippet shows how simple it is to fetch only children of a certain Document Type.
Be sure to change "IPublishedContent" below to match your needs, such as "TextPage" or "NewsItem".
(You can find the alias of your Document Type by editing it in the Settings section)
*@
@{ var selection = Model.Content.Children<IPublishedContent>(VariationContextAccessor).Where(x => x.IsVisible(PublishedValueFallback)).ToArray(); }
@if (selection.Length > 0)
{
<ul>
@foreach (var item in selection)
{
<li><a href="@item.Url(PublishedUrlProvider)">@item.Name</a></li>
}
</ul>
}

View File

@@ -0,0 +1,72 @@
@using Umbraco.Core
@using Umbraco.Core.Models.PublishedContent
@using Umbraco.Web.Routing
@inherits Umbraco.Web.Common.Macros.PartialViewMacroPage
@inject IPublishedValueFallback PublishedValueFallback
@inject IPublishedUrlProvider PublishedUrlProvider
@*
This snippet creates links for every single page (no matter how deep) below
the page currently being viewed by the website visitor, displayed as nested unordered HTML lists.
*@
@{ var selection = Model.Content.Children.Where(x => x.IsVisible(PublishedValueFallback)).ToArray(); }
@* Ensure that the Current Page has children *@
@if (selection.Length > 0)
{
@* Get the first page in the children, where the property umbracoNaviHide is not True *@
var naviLevel = selection[0].Level;
@* Add in level for a CSS hook *@
<ul class="level-@(naviLevel)">
@* Loop through the selection *@
@foreach (var item in selection)
{
<li>
<a href="@item.Url(PublishedUrlProvider)">@item.Name</a>
@* if this child page has any children, where the property umbracoNaviHide is not True *@
@{
var children = item.Children.Where(x => x.IsVisible(PublishedValueFallback)).ToArray();
if (children.Length > 0)
{
@* Call a local method to display the children *@
ChildPages(children);
}
}
</li>
}
</ul>
}
@{
void ChildPages(IPublishedContent[] selection)
{
//Ensure that we have a collection of pages
if (selection.Length > 0)
{
// Get the first page in pages and get the level
var naviLevel = selection[0].Level;
// Add in level for a CSS hook
<ul class="level-@(naviLevel)">
@foreach (var item in selection)
{
<li>
<a href="@item.Url(PublishedUrlProvider)">@item.Name</a>
@* if the page has any children, where the property umbracoNaviHide is not True *@
@{
var children = item.Children.Where(x => x.IsVisible(PublishedValueFallback)).ToArray();
if (children.Length > 0)
{
@* Recurse and call the ChildPages method to display the children *@
ChildPages(children);
}
}
</li>
}
</ul>
}
}
}

View File

@@ -0,0 +1,38 @@
@using Umbraco.Core
@using Umbraco.Web
@using Umbraco.Web.Routing
@inherits Umbraco.Web.Common.Macros.PartialViewMacroPage
@inject IPublishedContentQuery PublishedContentQuery
@inject IPublishedUrlProvider PublishedUrlProvider
@*
Macro to display a series of images from a media folder.
How it works:
- Confirm the macro parameter has been passed in with a value
- Loop through all the media Ids passed in (might be a single item, might be many)
- Display any individual images, as well as any folders of images
Macro Parameters To Create, for this macro to work:
Alias:mediaId Name:Select folder with images Type:Single Media Picker
*@
@{ var mediaId = Model.MacroParameters["mediaId"]; }
@if (mediaId != null)
{
@* Get the media item associated with the id passed in *@
var media = PublishedContentQuery.Media(mediaId);
var selection = media.Children.ToArray();
if (selection.Length > 0)
{
<ul>
@foreach (var item in selection)
{
<li>
<img src="@item.Url(PublishedUrlProvider)" alt="@item.Name" />
</li>
}
</ul>
}
}

View File

@@ -0,0 +1,27 @@
@using Umbraco.Core
@using Umbraco.Core.Models.PublishedContent
@using Umbraco.Web.Routing
@inherits Umbraco.Web.Common.Macros.PartialViewMacroPage
@inject IPublishedValueFallback PublishedValueFallback
@inject IPublishedUrlProvider PublishedUrlProvider
@*
This snippet lists the items from a Multinode tree picker, using the picker's default settings.
Content Values stored as XML.
To get it working with any site's data structure, set the selection equal to the property which has the
multinode treepicker (so: replace "PropertyWithPicker" with the alias of your property).
*@
@{ var selection = Model.Content.Value<IEnumerable<IPublishedContent>>(PublishedValueFallback, "PropertyWithPicker").ToArray(); }
@if (selection.Length > 0)
{
<ul>
@foreach (var item in selection)
{
<li>
<a href="@item.Url(PublishedUrlProvider)">@item.Name</a>
</li>
}
</ul>
}

View File

@@ -0,0 +1,25 @@
@using Umbraco.Core
@using Umbraco.Core.Models.PublishedContent
@using Umbraco.Web.Routing
@inherits Umbraco.Web.Common.Macros.PartialViewMacroPage
@inject IPublishedValueFallback PublishedValueFallback
@inject IPublishedUrlProvider PublishedUrlProvider
@*
This snippet displays a list of links of the pages immediately under the top-most page in the content tree.
This is the home page for a standard website.
It also highlights the current active page/section in the navigation with the CSS class "current".
*@
@{ var selection = Model.Content.Root().Children.Where(x => x.IsVisible(PublishedValueFallback)).ToArray(); }
@if (selection.Length > 0)
{
<ul>
@foreach (var item in selection)
{
<li class="@(item.IsAncestorOrSelf(Model.Content) ? "current" : null)">
<a href="@item.Url(PublishedUrlProvider)">@item.Name</a>
</li>
}
</ul>
}

View File

@@ -0,0 +1,47 @@
@using Umbraco.Core
@using Umbraco.Core.Models.PublishedContent
@using Umbraco.Web.Routing
@inherits Umbraco.Web.Common.Macros.PartialViewMacroPage
@inject IPublishedValueFallback PublishedValueFallback
@inject IPublishedUrlProvider PublishedUrlProvider
@*
This snippet makes a list of links of all visible pages of the site, as nested unordered HTML lists.
How it works:
- It uses a local method called Traverse() to select and display the markup and links.
*@
@{ var selection = Model.Content.Root(); }
<div class="sitemap">
@* Render the sitemap by passing the root node to the traverse method, below *@
@{ Traverse(selection); }
</div>
@* Helper method to traverse through all descendants *@
@{
void Traverse(IPublishedContent node)
{
//Update the level to reflect how deep you want the sitemap to go
const int maxLevelForSitemap = 4;
@* Select visible children *@
var selection = node.Children.Where(x => x.IsVisible(PublishedValueFallback) && x.Level <= maxLevelForSitemap).ToArray();
@* If any items are returned, render a list *@
if (selection.Length > 0)
{
<ul>
@foreach (var item in selection)
{
<li class="level-@item.Level">
<a href="@item.Url(PublishedUrlProvider)">@item.Name</a>
@* Run the traverse method again for any child pages *@
@{ Traverse(item); }
</li>
}
</ul>
}
}
}