Fragmentos de código del Administrador de diseño de SharePoint
Importante
Esta opción de extensibilidad solo está disponible para experiencias clásicas de SharePoint. No puede usar esta opción con experiencias modernas en SharePoint Online, como con los sitios de comunicación. No se recomienda seguir usando la experiencia clásica o esas técnicas de personalización de marca.
Un fragmento de código es una representación HTML de un componente de SharePoint o un control (como una barra de navegación o un elemento web). Con la Galería de fragmentos de código del Administrador de diseño, puede agregar rápidamente funcionalidad de SharePoint a la página principal HTML o al diseño de página.
Introducción a los fragmentos de código y a la Galería de fragmentos
Después de convertir una página principal o crear un diseño de página, tiene una versión HTML de la página. Con la Galería de fragmentos de código, puede agregar rápidamente funcionalidad específica de SharePoint, como la búsqueda, la navegación o los paneles de canales de dispositivos al archivo HTML asociado a la página principal o al diseño de página. La Galería de fragmentos de código es una página del Administrador de diseño donde puede:
Elegir un componente de SharePoint de los que están disponibles en la cinta.
Configurar las propiedades para ese componente.
Copiar el fragmento de código HTML en el portapapeles para que se pueda pegar en la ubicación que quiera del archivo HTML.
La Galería de fragmentos de código muestra diferentes opciones en la cinta de opciones, dependiendo de se esté editando una página maestra o un diseño de página. Por ejemplo, los controles de navegación solo se muestran en páginas maestras y las zonas de elementos web y los controles de campo de página solo se muestran en diseños de página. Además, al modificar un diseño de página, los campos de página que están disponibles dependen del tipo de contenido del diseño de página que se modifica.
Después de pegar un fragmento de código en el archivo HTML, obtiene una vista previa en tiempo de diseño del HTML especificado en el fragmento de código. También puede utilizar la vista previa del lado del servidor en el Administrador de diseño para ver cómo aparecerá el control en el sitio activo. La vista previa en tiempo de diseño puede incluir datos de ejemplo estáticos, pero la vista previa del lado servidor, si está disponible, utiliza datos activos. Por ejemplo, un control de navegación que extrae vínculos de navegación de un conjunto de términos mostrará un conjunto de términos dinámicamente en la vista previa del lado servidor, pero la vista previa en tiempo de diseño tendrá una instantánea estática de los términos en el momento en el que se crea el fragmento de código. Aunque los datos activos no están disponibles en la vista previa del lado del servidor para algunos fragmentos de código, incluidos muchos elementos web. En este caso, la vista previa del lado servidor puede indicar Vista previa no disponible.
Nota
Un fragmento de código contiene el código HTML que proporciona una vista previa en tiempo de diseño en su editor HTML, pero el marcado HTML contenido en los comentarios "vista previa de inicio" y "vista previa de finalización" no deben editarse ya que solo afecta a la vista previa en tiempo de diseño, no a la forma en que SharePoint representa finalmente ese fragmento de código. En su lugar, para aplicar un estilo al fragmento de código, normalmente tiene que identificar y reemplazar los estilos de SharePoint predeterminados que se aplican al fragmento de código.
Insertar un fragmento de código de la Galería de fragmentos de código
La Galería de fragmentos de código muestra diferentes opciones dependiendo del archivo que está modificando. Por ejemplo, diseños de página diferentes tienen distintos conjuntos de campos de página a su disposición. Por este motivo, para desplazarse a la Galería de fragmentos de código, primero debe seleccionar una página principal o un diseño de página para editar.
Para insertar un fragmento de código
Vaya a su sitio de publicación.
En la esquina superior derecha de la página, elija el engranaje Configuración y luego elija Administrador de diseño.
En el Administrador de diseño, en el panel de navegación izquierdo, elija Editar páginas principales o Editar diseños de página, en función del tipo de archivo que está editando.
Seleccione el nombre de la página principal o del diseño de página que quiere agregar a los fragmentos de código.
Para abrir la Galería de fragmentos de código, elija Fragmentos de código en la esquina superior derecha de la vista previa del lado del servidor.
En la cinta, en la ficha Diseño, seleccione el fragmento de código que quiere agregar a la página.
Cuando selecciona un fragmento de código, la Galería de fragmentos se actualiza para que la página muestre las propiedades disponibles para dicho fragmento de código y el fragmento de código HTML que se puede copiar en la página principal HTML o en el diseño de página.
Nota
La vista previa de la Galería de fragmentos está en desuso y no muestra una vista previa del fragmento seleccionado cuando se actualiza.
En el lado derecho de la Galería de fragmentos de código, en Acerca de este componente, haga clic o seleccione los encabezados de sección para expandir o contraer los grupos de propiedades y luego configure las opciones personalizadas que quiera.
Las propiedades más importantes para el propósito principal del fragmento de código aparecen en la sección superior con el nombre Importante. Estas son las propiedades claves que debe conocer al usar un fragmento de código.
Nota
Si la cuadrícula de propiedades tiene un encabezado que termina con AjaxDelta, debe omitir estas propiedades porque se aplican a los controles relacionados con la Estrategia de descarga mínima, que está deshabilitado para las páginas principales y para los diseños de página creados con el Administrador de diseño.
Después de configurar las propiedades, elija Actualizar. Así se actualiza el fragmento de código HTML en el lado izquierdo de la página, para que el marcado refleje los cambios. Siempre puede elegir Restablecer para devolver todas las propiedades a sus configuraciones predeterminadas.
En el lado izquierdo de la Galería de fragmentos de código, en Fragmento de código HTML, elija Copiar al Portapapeles.
En su editor HTML, abra la unidad de red asignada en su equipo y luego abra el archivo HTML de la página principal o del diseño de página al que quiere agregar el fragmento de código.
En el archivo HTML, pegue el fragmento de código en el lugar donde quiere que aparezca el marcado.
Cada fragmento de código contiene código HTML que proporciona una vista previa de los datos de ejemplo y los componentes. No debe modificar este código HTML en la vista previa de solo lectura dentro de la etiquetas <!--PS> y <!--PE> porque este marcado afecta solo a la vista previa en tiempo de diseño del fragmento de código, no a cómo se mostrará el fragmento de código en el sitio activo.
Para ver la vista previa de servidor del fragmento de código, guarde el archivo HTML para sincronizar los cambios en el archivo ASP.NET asociado y luego actualice la vista previa del lado del servidor en el Administrador de diseño.
A diferencia de la vista previa en tiempo de diseño, la vista previa del lado del servidor muestra el control representado por SharePoint.
Comprender el marcado en un fragmento de código HTML
Un fragmento de código contiene cuatro secciones básicas:
Encabezado, con etiquetas inicial
y <!--CS> (excepto los fragmentos de código ASP.NET personalizados, que no se ajustan en una etiqueta)Marcado de SharePoint, donde se incluyen los fragmentos de código en etiquetas <!--MS> inicial y <!--ME> final
Vista previa HTML, entre etiquetas <!--PS> inicial y <!--PE> final etiquetas
Pie de página, con etiquetas de cierre <!--CE> y
Todas las secciones de un fragmento de código, excepto la vista previa HTML, se incluyen en los comentarios HTML para evitar las interacciones con el modelo de objetos de documento (DOM) y estilo existente. Un fragmento de código comienza con el nombre de un componente y luego incluye su marcado ASP.NET real, una vista previa HTML para la representación en tiempo de diseño y, después, etiquetas finales. El marcado ASP.NET está comentado, pero SharePoint quita las etiquetas de comentario y este marcado se utiliza cuando el archivo HTML se sincroniza con el archivo .master o aspx. Si sabe ASP.NET, puede personalizar este formato en el fragmento de código.
El ejemplo siguiente es el marcado predeterminado para un Panel de modo de edición que simplemente es un contenedor que muestra condicionalmente otro contenido y controles.
Encabezado
<div data-name="EditModePanelShowInEdit">
<!--CS: Start Edit Mode Panel Snippet-->
Marcado de SharePoint
<!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<Publishing:EditModePanel runat="server" CssClass="edit-mode-panel">-->
Vista previa HTML
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
<div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
You should replace this div with content that renders based on your Edit Mode Panel Properties.
</div>
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
Pie de página
<!--ME:</Publishing:EditModePanel>-->
<!--CE: End Edit Mode Panel Snippet-->
</div>
Lo siguiente es el marcado predeterminado para un fragmento de código de navegación de la parte superior, que es más complejo porque este fragmento de código contiene varios controles diferentes, con algunas anidados dentro de otros, como un origen de datos para los términos de navegación, un control delegado y un marcador de posición de contenido.
Nota
Algunos de los controles, como el marcador de posición de contenido, contienen etiquetas vacías para una vista previa de HTML porque ese elemento requiere una representación visual de la página.
Encabezado
<div data-name="TopNavigationNoFlyoutWithStartNode">
<!--CS: Start Top Navigation Snippet--> <!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<Publishing:EditModePanel runat="server" CssClass="edit-mode-panel">-->
Marcado de SharePoint
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<SharePoint:AjaxDelta ID="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation ms-dialogHidden" runat="server">-->
Vista previa HTML
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<!--PE: End of READ-ONLY PREVIEW-->
Marcado de SharePoint
<!--MS:<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">-->
Vista previa HTML
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<span style="display:none">
<table cellpadding="4" cellspacing="0" style="font:messagebox;color:buttontext;background-color:buttonface;border: solid 1px;border-top-color:buttonhighlight;border-left-color:buttonhighlight;border-bottom-color:buttonshadow;border-right-color:buttonshadow">
<tr><td nowrap="nowrap">
<span style="font-weight:bold">PortalSiteMapDataSource</span> - topSiteMap</td></tr><tr><td></td></tr></table></span>
<!--PE: End of READ-ONLY PREVIEW-->
Marcado de SharePoint
<!--MS:<Template_Controls>-->
<!--MS:<asp:SiteMapDataSource ShowStartingNode="True" SiteMapProvider="SPNavigationProvider" ID="topSiteMap" runat="server" StartingNodeUrl="sid:1002">-->
Marcado de SharePoint
<!--ME:</asp:SiteMapDataSource>-->
<!--ME:</Template_Controls>-->
<!--ME:</SharePoint:DelegateControl>--><a name="startNavigation"></a>
Marcado de SharePoint
<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderTopNavBar" runat="server">-->
<!--MS:<SharePoint:AspMenu ID="TopNavigationMenu" runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="&#60;%$Resources:wss,navigation_accesskey%&#62;" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="2" AdjustForShowStartingNode="false" MaximumDynamicDisplayLevels="0" SkipLinkText="">-->
Vista previa HTML
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/menu-21.css" />
<div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox">
<ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static">
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" title="Default Publishing Site" href="/sites/PubSite/Pages/default.aspx" accesskey="1">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Default Publishing Site</span></span></a></li></ul></div>
<!--PE: End of READ-ONLY PREVIEW-->
Marcado de SharePoint
<!--ME:</SharePoint:AspMenu>-->
<!--ME:</asp:ContentPlaceHolder>-->
Vista previa HTML
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<!--PE: End of READ-ONLY PREVIEW-->
Marcado de SharePoint
<!--ME:</SharePoint:AjaxDelta>-->
Pie de página
<!--CE: End Top Navigation Snippet-->
</div>
Tipos de marcado
Este es un desglose de los tipos de marcado que se incluyen en un fragmento de código.
Registro del espacio de nombres de SharePoint SPM ("marcado de SharePoint") indica una línea que registra un espacio de nombres de SharePoint.
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
Comentarios CS y CE ("Inicio de comentario" y "Fin de comentario") le ayudarán a analizar las líneas de marcado.
<!--CS: Start Top Navigation Snippet-->
…
<!--CE: End Top Navigation Snippet-->
Fragmentos de código MS y ME ("Inicio de marcado" y "Fin de marcado") indican el principio y el final de un control de SharePoint o de un fragmento de código. Algunos fragmentos de código, como la cinta o el control de navegación de la parte superior anterior, contienen varios controles anidados en un único fragmento de código.
<!--MS:<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">-->
…
<!--ME:</SharePoint:DelegateControl>--><a name="startNavigation"></a>
<!--MS:<Template_Controls>-->
…
<!--ME:</Template_Controls>-->
<!--MS:<asp:SiteMapDataSource ShowStartingNode="True" SiteMapProvider="SPNavigationProvider" ID="topSiteMap" runat="server" StartingNodeUrl="sid:1002">-->
…
<!--ME:</asp:SiteMapDataSource>-->
Vista previa de bloques PS y PE ("Inicio de vista previa" y "Fin de vista previa") alrededor de una sección de código HTML que no debe editar. Estas secciones de vista previa son una instantánea en el momento en el que el control de SharePoint se inserta en ese fragmento de código. Una vista previa permite trabajar con mayor sentido en el archivo HTML en un editor HTML del lado del cliente. Sin embargo, cambiar el contenido o el estilo de la vista previa no tiene ningún efecto definitivo en el archivo. master, que es lo que en última instancia usa SharePoint. Para aplicar el estilo de un fragmento de código, debe identificar y reemplazar los estilos de SharePoint con su propia CSS personalizada.
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><span style="display:none"><table cellpadding="4" cellspacing="0" style="font:messagebox;color:buttontext;background-color:buttonface;border: solid 1px;border-top-color:buttonhighlight;border-left-color:buttonhighlight;border-bottom-color:buttonshadow;border-right-color:buttonshadow"><tr><td nowrap="nowrap"><span style="font-weight:bold">PortalSiteMapDataSource</span> - topSiteMap</td></tr><tr><td></td></tr></table></span><!--PE: End of READ-ONLY PREVIEW-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/menu-21.css" /><div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox"><ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" title="Default Publishing Site" href="/sites/PubSite/Pages/default.aspx" accesskey="1"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Default Publishing Site</span></span></a></li></ul></div><!--PE: End of READ-ONLY PREVIEW-->