Este tutorial asume que tienes un conocimiento básico y que tienes instalados .NET y C#.
Crea una carpeta donde instalar la aplicación.
Aqui puedes ver un video tutorial implmentando este blog
Aquí abres una línea de comando y pegas el siguiente snippet:
# Ensure we have the version specific Umbraco templates dotnet new install Umbraco.Templates::13.3.2 --force # Create solution/project dotnet new sln --name "Basico" dotnet new umbraco --force -n "Basico.Web" --friendly-name "Administrator" --email "admin@example.com" --password "1234567890" --development-database-type SQLite dotnet sln add "Basico.Web" dotnet run --project "Basico.Web" #Running
Esto instalará una aplicación de Umbraco básica, con SQLite como base de datos, evitando tener que configurar una en SQL.
Una vez instalado, copia la dirección que empieza así: "https://localhost/[número de puerto]" y pégala en un navegador.
Para acceder al back-office necesitas añadir "/umbraco/" de la siguiente manera: "https://localhost/[número de puerto]/umbraco/"
Ingresa las credenciales con las que creaste la aplicación: --email "admin@example.com" --password "1234567890"
En el back-office verás que todo está en inglés. Navega a Users en el menú de arriba y haz clic sobre el nombre del usuario, en este caso "Administrator".
En "Languages" verás que el idioma seleccionado es "English (United States)". Esto lo puedes cambiar a español; hay dos versiones disponibles: Spanish (Spain) y Spanish (Bolivia), que debes obtener del sitio web...
Si utilizas "Spanish (Spain)" tendrás la limitación de que está incompleto y verás una mezcla de inglés y español.
La versión que yo traduje está más actualizada. Copia y pega la carpeta "Config" dentro de la carpeta "Umbraco".
Si en la lista de idiomas no aparece en primer lugar o en su sitio alfabéticamente, ve a la línea de comando, presiona "Ctrl" y "C" y escribe "dotnet run". Esto hará un Build y el idioma Spanish (Bolivia) estará disponible, si lo necesitas (este paso no es necesario).
Una vez seleccionado el idioma que elijas, guarda (save), refresca la página y verás que el idioma ha cambiado.
Yo voy a trabajar con el español boliviano.
Navega a "Configuración" en el menú de arriba, verás en la mano izquierda el menú del lado donde están las opciones para configurar la aplicación. Para esta aplicación solo utilizaremos "Tipos de documentos".
Vamos a crear una página llamada Inicio. Los nombres son importantes pues nos referiremos a ellos para desplegar sus valores. Sobre "Tipos de documentos" mueve el ratón, verás que hay tres puntos, haz clic y te aparecerán varias opciones. Selecciona la primera "Tipo de Documento con Plantilla", dale el nombre de "Inicio",
haz clic sobre "Agregar grupo" y donde dice "Ingresa un nombre..." escribe "Contenido" y luego haz clic donde dice "Agregar propiedad". Luego selecciona el editor, para este proyecto utilizaremos Textbox, y luego selecciona "Textstring". De la misma manera añade "Título" y "Subtítulo". Para el botón utilizaremos otra propiedad, en el buscador de propiedades pon "URL Picker",
selecciona el segundo, debajo del título "Crear una nueva configuración", si has seguido el tutorial al pie de la letra, verás el siguiente texto "Inicio - Botón - Multi URL Picker".
Cámbialo a "Singular URL Picker" y donde dice "Maximum number of items" cambia el valor a 1. Envía.
Antes de continuar, vamos a cambiar el orden de las propiedades. Selecciona "Re-ordenar" y mueve Título al segundo lugar.
Una vez ingresadas las propiedades, vamos a configurar los permisos de esta página. En el submenú de arriba verás Diseño, Vista de lista, Permissions, Plantillas. Haz clic sobre Permissions, y selecciona "Permitir como Raíz" y guarda.
Hasta aqui esta parte.
En la mano izquierda desplaza hacia abajo y verás más opciones. Estamos buscando las Plantillas,
selecciona Inicio, copia y pega el siguiente snippet debajo del contenido existente.
<!doctype html>
<html lang="en" class="h-100" data-bs-theme="auto">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.122.0">
<title>Umbraco - Página de Espera</title>
<link href="https://getbootstrap.com/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="icon" href="/https://getbootstrap.com/docs/5.3/assets/img/favicons/favicon.ico">
</head>
<body class="d-flex h-100 text-center text-bg-dark">
<div class="container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">@Model.Value("nombre")</h3>
</div>
</header>
<main class="px-3">
<h1>@Model.Value("titulo")</h1>
<p class="lead">@Model.Value("subtitulo")</p>
<p class="lead">
@using Umbraco.Cms.Core.Models
@{
var link = Model.Value<Link>("boton");
if (link != null)
{
<a href="@link.Url" target="@link.Target" class="btn btn-lg btn-light fw-bold border-white bg-white">@link.Name</a>
}
}
</p>
</main>
<footer class="mt-auto text-white-50">
</footer>
</div>
<script src="https://getbootstrap.com/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
Guarda y navega en el menú de arriba hacia contenido.
Donde dice "Contenido" mueve el ratón y selecciona los tres puntos y aparecerá la opción de crear una página con la plantilla que creamos anteriormente. Selecciónala y verás lo siguiente.
Dale un nombre a la página y llena los valores de las propiedades.
El botón es un poco diferente y tendrás que ingresar los valores: Enlace: "https://www.google.com/", Título del enlace: "Google" y selecciona que abra el destino en una ventana o pestaña nueva.
Envía, guarda y publica. Selecciona, en el menú de la página "información" y haz clic debajo de Enlaces [].
Si todo ha salido bien verás lo siguiente, pero con los valores que tú has ingresado.
