Kentico

De Banane Atomic
Révision datée du 23 octobre 2018 à 09:25 par Nicolas (discussion | contributions) (→‎Ajouter des champs de configuration)
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)
Aller à la navigationAller à la recherche

Liens

Créer un nouveau site

  1. http://localhost/Kentico11/Admin/CMSAdministration.aspx
  2. Icône en haut à gauche → Configuration → Site → New site wizard
Kentico utilise le nom de domaine pour sélectionner le site à afficher.
Il ne peut donc y avoir qu'un site par domaine.

Page

Pages application → Edit → + → Page (menu edit)

Ajouter une page qui reprend la master page du parent: Create a blank page

Master page

Pour créer une mise en forme partagée par toutes les pages (header, footer, menu).

  1. Pages application → sélectionner la page racine → Master page → Edit layout
  • pageplaceholder → contenu dynanique des pages

Dupliquer le template pour ne pas modifier celui d'origine

  1. Page templates application → ... → New category
  2. Pages application → sélectionner la page racine → Properties → Template
  3. Save as new template

Page Template

Définit la structures et les composants de la page à l'exception de son contenu.

  • Ad-hoc page templates: un template utilisé seulement pour une page.
  • Reusable (shared) page templates: un template utilisé sur plusieurs pages.

Page Layout

  • Template contient le placeholder et les web parts.
  • Layouts définit le contenu du placeholder, il contient la structure HTML et les web part zones.

Page Type

Définit la structure des données et comment les données sont affichées.

  1. Créer un formulaire pour entrer les données.
  2. Utiliser une Transformation pour mettre en forme les données (template de code qui détermine le rendu).

Transformation types (ASCX, Text/XML (Kentico macros), HTML, XSLT)

Redirection

Rediriger une page vers une autre, ex: root vers Home
Pages → (root) → Navigation → Menu Actions → URL redirection ~/Home.aspx

CSS

Pages application → Master page → html → head

Html.svg 
<link href="~/CMSPages/GetResource.ashx?stylesheetfile=/{% CurrentSiteName %}/Stylesheets/Styles.css" type="text/css" rel="stylesheet" />

Images

C:\inetpub\wwwroot\Kentico11\CMS\App_Themes\<SiteName>\Images

Css.svg 
background-image: url("/Kentico11/App_Themes/<SiteName>/Images/image.png");
background-image: url("../App_Themes/<SiteName>/Images/image.png");

C:\inetpub\wwwroot\Kentico11\CMS\<SiteName>\Design\Images

Html.svg 
<img src="~/<SiteName>/Design/Images/image.png">

Javascript

Les fichiers javascript custom sont ajoutés dans ~/CMSScripts/Custom/

  • Pages application → Onglet Master Page → head ou à la fin de body → script src=
  • Page templates application → Onglet Header → script src=
  • JavaScript files application → Upload file | Pages application → ajouter Javascript webpart
Html.svg 
<!-- loading custom JavaScript libraries only on the live site -->
{% if(ViewMode == "livesite"){ %}
<script src="~/CMSScripts/Custom/myscript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="\bootstrap-3.3.7\less\bootstrap.min.css">
<script src="\bootstrap-3.3.7\dist\js\bootstrap.js"></script>
{% } #%}

Webpart

  • Pages app → Design → menu 3 barres de Master page → Edit layout
  • Layout element: Web part zone → Insert
Html.svg 
<cms:CMSWebPartZone ZoneID="ZoneX" runat="server" />
ZoneID doit être unique dans le template de page.
  • Pages app → Design → menu 3 barres de ZoneX → add new web part

Accordion layout

Modifier le texte des headers

Map

Nécessite une API Key de la part de Google ou Bing
  • Large view scale → niveau de zoom initial (entre 1 (loin) et 19 (près), 13 est un niveau de zoom moyen)
  • Enable map dragging → permet de se déplacer latéralement sur la carte
  • Show scale control → affiche l'échelle

Créer une webpart

  1. Ouvrir la solution C:\inetpub\wwwroot\Kentico11\WebSite.sln
  2. CMS\CMSWebParts\Viewers\Documents → Add → Web User Control
C:\inetpub\wwwroot\Kentico11\CMS\CMSWebParts\Viewers\Documents\MyWebPart.ascx.cs 
using CMS.PortalEngine.Web.UI;  // C:\inetpub\wwwroot\Kentico11\CMS\Bin\CMS.PortalEngine.Web.UI.dll

public partial class CMSWebParts_Viewers_Documents_MyWebPart : CMSAbstractWebPart
{
    protected void Page_Load(object sender, EventArgs e)
    {
        MySpan.Attributes["my-attribute"] = GetValue("MyField") as string;
        MySpan.Attributes.Add("my-attribute", GetValue("MyField") as string);
        if (GetValue("MyField") as string == "True") { /* ... */ }
C:\inetpub\wwwroot\Kentico11\CMS\CMSWebParts\Viewers\Documents\MyWebPart.ascx 
<%@ Control Language="C#" AutoEventWireup="true" Inherits="CMSWebParts_Viewers_Documents_MyWebPart" CodeFile="MyWebPart.ascx.cs" %>

<span id="MySpan" runat="server" my-attribute=""></span>

Enregistrer la webpart dans le système

  1. Web parts application
  2. ... → New Category → Category display name = Custom webparts
  3. All web parts → Custom webparts → bouton New web part
    1. Use existing file = ~/CMSWebParts/Viewers/Documents/HelloWorld.ascx

Ajouter des champs de configuration

  1. Web parts application → Custom webparts → My Web Part → onglet Properties → New field

Export / Import

  • Export: Web parts → ... à côté du nom de la web part → Export
  • Import: Sites → Import site or objects

Widget

  • Webpart
    • ajout dans l'onglet Design
    • lié au template, disponible sur toute les pages
  • Widget
    • ajout dans l'onglet Page
    • lié à la page, la Widget Zone est disponible sur toutes les pages mais le Widget est disponible uniquement sur la page sur laquelle il a été ajouté

Form

  1. Application Forms → New Form
  2. Application Pages → Design → ajouter une webpart On-line form
    1. Form name → Select

Blog

  1. Application Pages → + → Blog
  2. Application Pages → sélectionner la page de blog → + → Blog post

Lister les posts

Repeater
Path ./%
Page types CMS.BlogPost
ORDER BY expression BlogPostDate DESC
WHERE condition 
('{?ToInt(tagid, "")?}' = 0 AND '{?tagname?}'='') OR (DocumentID IN (SELECT DocumentID FROM CMS_DocumentTag WHERE TagID = {?ToInt(tagid, "")?} )) OR (DocumentID IN (SELECT DocumentID FROM CMS_DocumentTag WHERE TagID IN (SELECT TagID FROM CMS_Tag WHERE TagName = '{?tagname?}' AND TagGroupID = {?ToInt(groupid, "")?} )))
Transformation
Html.svg 
<div class="listBoxWithTeaser">
    <div class="teaser">
        <%# IfEmpty(Eval("BlogPostTeaser"), 
            "<a href=\""+GetDocumentUrl()+"\" title=\""+HTMLEncode(LimitLength(Eval("BlogName"), 70, "..."))+"\"><img src=\"~/App_Themes/CorporateSite/Images/no_image.png\" width=\"90\" alt=\"Default blog teaser image\" /></a>", 
            "<a href=\""+GetDocumentUrl()+"\" title=\""+HTMLEncode(LimitLength(Eval("BlogName"), 70, "..."))+"\">"+GetImage("BlogPostTeaser", 90)+"</a>")
        %>            
    </div>
    <div class="description">
        <a class="header bold" href="<%# GetDocumentUrl() %>">
            <%# Eval("BlogPostTitle", true) %>
        </a>
        <p>
            <%# Eval("BlogPostSummary") %>
            <br />
            <span class="bold black">
                <%# BlogFunctions.GetUserFullName(Eval("NodeOwner")) %>
            </span> |
            <%# Eval("BlogPostDate") %> |
            <a class="gray" href="<%# GetDocumentUrl() %>#comments">
                <%# BlogFunctions.GetBlogCommentsCount(Eval("DocumentID"), Eval("NodeAliasPath")) %>
                comments
            </a>
        </p>
        <hr>
    </div>
</div>
Selected item transformation
Html.svg 
<div class="blogPostDetail">
    <h1 class="black">
        <%# Eval("BlogPostTitle", true) %>
    </h1>
    <div class="bold">
        <%# Eval("BlogPostSummary") %>
    </div>
    <p>
        <%# IfEmpty(Eval("BlogPostTeaser"), "<img src=\"~/App_Themes/CorporateSite/Images/no_image.png\" alt=\"Default blog teaser image\" />", GetImage("BlogPostTeaser", 230)) %><%# Eval("BlogPostBody") %>
    </p>
    <span class="black bold">
        <%# BlogFunctions.GetUserFullName(Eval("NodeOwner")) %>
    </span>
    <span class="black">| <%# Eval("BlogPostDate") %>
    </span>
    | <a class="gray" href="<%# GetDocumentUrl() %>"><%# BlogFunctions.GetBlogCommentsCount(Eval("DocumentID"),Eval("NodeAliasPath")) %> comments</a>
    <br />
    <%# IfEmpty(Eval("DocumentTags"),"","Filed under: " + BlogFunctions.GetDocumentTags(Eval("DocumentTagGroupID"), Eval("DocumentTags"), "~/Community/Blogs/Andrew-Jones-Blog.aspx")) %>
</div>

Path expressions

/% All pages on the website
/news/% All pages under /News
/news/news1 The News1 page.
./% All items under the current page.
./logo The Logo page under the current page.
./images/% All pages under the Images page that is a child of the current page.
../contacts/% All pages under the Contacts page that is on the same level as the current page.
/{0}/% All pages under the page located on the first level of the current path.

Cache

Settings application → System → Debug → Cache access →Enable cache access debug
Settings application → System → Performance

  • Output caching
    • Enable output caching (static pages)
    • Enable partial caching (web parts)

Debug application → Cache items

Liens

Bootstrap menu

  1. Ajouter un Repeater
  2. Content → Path: /%
  3. Content filter → Page types: Page (menu item) (CMS.MenuItem)
  4. HTML Envelope
Html.svg 
<!-- Content before -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">

<!-- Content after -->
    </ul>
  </div>
</nav>
  1. Transformations → Transformation → New → Text/XML
Html.svg 
<li class="nav-item{% IsCurrentDocument() ? " active" : "" %}">
  <a href="{% GetDocumentUrl() %}" class="nav-link">{% HTMLEncode(DocumentName) %}</a>
</li>

Galerie d'images

  • Application Media Libraries → New media library
  • Application Pages → Design
  • Ajouter une webpart Media files data source → Media library name = <media library code name>
  • Ajouter une webpart Basic repeater → Data source name = <Web part control ID du Media files data source>
    • Transformation name → New
Html.svg 
<div class="image">
  <a href="<%# MediaLibraryFunctions.GetMediaFileUrl(Eval("FileGUID"), Eval("FileName")) %>">
    <img class="image-tile" src="<%# MediaLibraryFunctions.GetMediaFileUrl(Eval("FileGUID"), Eval("FileName")) %>">
  </a>
</div>
  • HTML Envelope
Html.svg 
<div class="image-gallery">
</div>
  • CSS
Css.svg 
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2em;
}
.image {
    width: 25%;
    margin-bottom: 10px;
}
.image-tile {
    max-width: 100%;
    max-height: 100%;
}

Installation

Installing Kentico - custom installation

licence

  1. http://localhost/Kentico11/Admin/CMSAdministration.aspx
  2. Licenses
  3. Supprimer toutes les anciennes licences (trial)
  4. New license
1 licence par domaine, le domaine localhost est valide si au moins une licence est valide.

Users, Roles

Privilege level Description
None
  • Afficher les pages
  • Pas d'accès à l'interface d'administration
Editor
  • Édition des pages
  • Accès à l'interface d'administration

Utiliser les rôles pour permettre l'accès aux applications.

Administrator
  • Accès sans restriction (permission et UI personalization) à toutes les applications non-globales.

Ils ne peuvent pas:

  • Access applications that are restricted to global administrators (typically those that affect the entire system, for example Sites)
  • Perform certain actions restricted only to global administrators
  • Upgrade the privilege level to global administrator for their own account
  • Grant users the administrator privilege level
  • Edit the user accounts of other administrators
Global administrator God Mode

Langues

  1. Sites application → Edit website → Cultures → Add cultures
  2. Page application → changer la culture en bas à gauche → choisir l'option de création des pages pour la nouvelle culture

URL

Transformer les urls http://www.domain.net/Kentico11/my-page.aspx?lang=fr-ch en http://www.domain.net/Kentico11/fr-ch/my-page.aspx
Settings application → URLs and SEO → SEO - Culture → Use language prefix for URLs

Interface d'administration

Localization application → Cultures tab → Editer la culture choisie → Is UI culture

Performance

Settings application → System → Performance

Webparts

  • désactiver les vérifications de sécurité (permissions)
    Configure → System settings → Check permissions
  • désactiver le viewstate
    Configure → Performance → Disable view state
  • désactiver les macros
    Configure → Performance → Disable macros

Rendre le site accessible depuis l'extérieur

  1. générer une licence avec l'ip du pc et l'ajouter dans l'application Licenses
  2. change l'ip du site: Sites → editer le site → General → Site domain name

Exporting and importing sites

Par défaut, les src des images des Media Libraries n'ont pas la bonne url car celle-ci contient l'ancien nom de site /Kentico11/SiteName/Design/Images/MyImage.jpg
Pour corriger cela il faut exporter les fichiers physiques:

  • Export étape 2 → Website → Content Management → Media Libraries → Export physical files

Astuces

SiteName dans Static HTML

Html.svg 
<img src="/Kentico11/{%CurrentSite.SiteName#%}/Design/Images/bg1.jpg" />

Debug

Settings application → System → Debug → All

  • Debug everything everywhere
  • Enable all debugs

Debug application

Performance / Debug SQL

  1. Settings application → System → Debug → SQL queries → Enable SQL query debug
  2. Debug application → SQL queries

Reduire le nombre de colonnes dans une requête

Repeater → Menu 3 barres → Configure → Content filter → Columns

Remplacer des requêtes imbriquées par une seule requête

Repeater → Menu 3 barres → Configure → Transformations → Transformation → Edit

Erreurs

web.config 
<configuration>
  <appSettings>
    <!-- pour avoir des erreurs détaillées -->
    <add key="CMSDisplayApplicationErrorMessages" value="true"/>

Login failed for user 'NT AUTHORITY\NETWORK SERVICE'

  1. Désintaller puis refaire l'installation
  2. à l'étape 3 Database → ne pas cocher I have access to SQL server

L'installer installe la bdd sur une nouvelle instance de SQL Server Express (localdb)\.\Kentico

Xml.svg 
<add name="CMSConnectionString" connectionString="Data Source=(localdb)\.\Kentico;Initial Catalog=Kentico11;Integrated Security=True;Persist Security Info=False;Connect Timeout=60;Encrypt=False;Current Language=English;" />

Installation

I don't have access to SQL Server

Dans ce cas Kentico installe SQL Server Express:

Instance (localdb)\.\Kentico
Bdd Kentico11
Authentification Windows Authentication
Login <Domain>\<ServerName>$
Récupérée de « http://wiki.bananeatomic.fr/index.php?title=Kentico&oldid=20393 »