Ejercicio: Editar páginas
El propósito de este laboratorio práctico es crear una página web y editar el código fuente mediante Power Pages estudio de diseño.
Al final de estos ejercicios, puede:
- Abrir el estudio de diseño de Power Pages para editar su portal.
- Crear una página nueva mediante una plantilla estándar.
- Ver el código fuente de la página.
- Agregar código HTML personalizado directamente.
Para este ejercicio, necesita los siguientes elementos:
- Un sitio de Power Pages aprovisionado en su entorno. Si no tiene un sitio de Power Pages disponible, siga las instrucciones Crear y administrar sitios Power Pages para crear uno.
Escenario
Para mejorar la experiencia del sitio web para los visitantes, a veces es necesario agregar contenido HTML personalizado a una página. En este ejercicio, agregará un código HTML que crea una alerta descartable. El código también incluye un pequeño fragmento en lenguaje Liquid que crea un saludo dinámico para el visitante.
Pasos generales
- Abre tu portal en el estudio de diseño de Power Pages.
- Cree una nueva página web de aterrizaje.
- Edite la página, agregue un espaciador y un marcador de posición de contenido, luego agregue el código HTML.
- Guardar la página y navegar por el sitio para ver los resultados.
Pasos detallados
Inicio del estudio de diseño de Power Pages
Inicie sesión en Power Pages.
Seleccione un entorno de destino con el selector de entorno situado en la esquina superior derecha.
Seleccione el sitio y, a continuación, seleccione Editar para iniciar el estudio de diseño.
Asegúrese de que el espacio de trabajo Páginas esté seleccionado.
Crear una página web
- Seleccione + Página.
- Escriba un nombre de página.
- Seleccione Diseño estándar de página de aterrizaje y, a continuación, seleccione Agregar.
Editar página
Seleccione el primer botón de la página. Presione el signo más (+) y, a continuación, seleccione Elemento Spacer . Este comando agrega un espacio pequeño antes del contenido personalizado.
Seleccione el espaciador, presione el signo más (+) y, a continuación, seleccione Elemento de texto . Este comando agrega un marcador de posición para el contenido personalizado.
Su página debería tener este aspecto:
Presione Editar código para abrir la página en Visual Studio Code para el editor web.
Cuando se le solicite, seleccione Abrir Visual Studio Code:
Esta selección abre una nueva ventana o una pestaña con Visual Studio Code para la Web. Busque el elemento de texto que creó anteriormente con las palabras
Enter text:
Copie el código siguiente y péguelo en el código fuente de la página, reemplazando el contenido de
<p>Enter text</p>.<div role="alert" class="alert alert-info alert-dismissible"> <button type="button" data-bs-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button> <strong>Happy <span>{{ now | date: 'MMMM' }}</span>!</strong> Get your unlimited free education at <a href="https://dotnet.territoriali.olinfo.it/">Microsoft Learn</a> </div>El contenido debería tener este aspecto:
Pulse Ctrl-S (⌘-S en macOS) para guardar el archivo.
Cambie a la ventana del estudio de diseño. Presione el botón Sync para sincronizar los editores y mostrar el contenido actualizado en el lienzo:
Los cambios aparecen en el lienzo del estudio de diseño. Presione el botón Vista previa en la esquina superior derecha y, a continuación, seleccione Escritorio.
Se abre tu página personalizada con una alerta que se puede descartar.
Compruebe que el saludo incluye el mes actual.
Presione el icono de la cruz (x) para descartar la alerta.