vuepress-theme-daassuite

Instalación

Requisito

Tener repositorio en su sistema de gestión de proyectos y control de versiones de código.

• Crea tu carpeta para tu nuevo proyecto.

# Crear la carpeta del proyecto

$ mkdir newDocs

• Clona nuestro repositorio.

# Acceder a la carpeta creada y clonar el directorio

$ cd newDocs && git clone [email protected]:roiupagency/daassuite.vuepress.doc.template.git

• Cambia la URL del remoto por la nueva URL remota creada en nuestro sistema de gestión de proyectos.

# Este comando te enumera tus remotos existentes

$ git remote -v

# Cambiar tu URL remota

$ git remote set-url origin <aqui la nueva URL remota>

• Comprueba que tu URL remota se ha cambiado correctamente.

# Compruébalo

$ git remote -v

Te dejo un link de ayuda.

Empezando

• Comienza levantando el proyecto desde el directorio clonado con el siguiente comando:

cd daassuite.vuepress.doc.template && yarn && yarn start

Configuración de la página de inicio

• En este archivo podrás configurar las diferentes propiedades que puede contener nuestra página de inicio.

  Esta será la estructura de propiedades que podremos configurar:

// docs/.vuepress/theme/config.js

module.exports = {
    header: {},
    info: {
        item: {},
    },
    footer: {
        subFooter: {}
    },
 };

Propiedades de configuración de la página de inicio

Header

• En esta propiedad podemos configurar la cabecera de nuestra página de inicio, añadiendo a su vez algunas propiedades.

// docs/.vuepress/theme/config.js

module.exports = {
    header: {
        img: 'https://daas-components.s3.eu-west-3.amazonaws.com/logo-daas-white',
        definition: `<span>Es una <strong>plataforma de marketing automation</strong> que permite una conexión directa con prácticamente <strong>cualquier tecnología,</strong> online u offline.</span>`,
        button: { goToLink: '/guide/' },
    },
 };

Info

• En esta propiedad podemos configurar un bloque de información a continuación de la cabecera, añadiendo a su vez una o más propiedades, en este caso llamada " item " con su propiedades internas.

// docs/.vuepress/theme/config.js

module.exports = {
    info: {
        item1: {
            id: 1,
            img: 'https://daasg.com/img/img-home-signup.svg',
            header: 'Date de alta',
            paragraph: `<span>Crea tu ficha en  <strong>solo 3 pasos</strong>  sin necesidad de poner tu cuenta corriente <strong>y comienza a anunciarte</strong> en internet en pocos minutos.</span>`,
        },
       item2: {
            id: 2,
            img: 'https://daasg.com/img/img-home-create-ads.svg',
            header: 'Crea un anuncio',
            paragraph: `<span>Nuestro <strong>asistente virtual</strong> te guiará en todo momento para mejorar el impacto de tus anuncios y<strong> sacar el máximo partido</strong> a tú presupuesto.</span`,
       },
       item3: {
            id: 3,
            img: 'https://daasg.com/img/img-home-stats.svg',
            header: 'Recibe informes y optimiza',
            paragraph: `<span>Daas Ads te enviará<strong> informes periódicos</strong> sobre el estado de tus anuncios. Utiliza esta información y nuestro asistente<strong> para aumentar el retorno.</strong></span>`,
       },
    },
 };

Footer

• En esta propiedad podemos configurar el pie de página, añadiendo a su vez 2 propiedades " footer " y " subFooter " con su respectivas propiedades cada una.

Footer

En esta propiedad podemos configurar el pie de página que aparecera en primer lugar, añadiendo a su vez una propiedad con su propiedades, como:

• logo
• dividerImg
• links: que contiene 2 propiedades más " ofInterest " y " legal ", en las cuales tenemos sus propiedades internas; que en este caso serán una serie de " link "

// docs/.vuepress/theme/config.js

module.exports = {
    footer: {
        logo: {
            img: 'https://daas-components.s3.eu-west-3.amazonaws.com/logo-daas',
            textLogo: 'DaaS Ads es la plataforma de gestión para anuncios de búsqueda desarrollada por ROI UP Agency, líderes en disrupción omnicanal.',
        },
        dividerImg: 'https://daas-components.s3.eu-west-3.amazonaws.com/divider-red',
        links: {
            ofInterest: {
                title: 'Enlaces de interés',
                link1: {
                    id: 'functionalities',
                    name: 'Funcionalidades',
                    url: 'https://daasg.com/features',
                },
                link2: {
                    id: 'price',
                    name: 'Precio',
                    url: 'https://daasg.com/price',
                }
            },
            legal : {
                title: 'Legal',
                link3: {
                    id: 'cookies',
                    name: 'Política de cookies',
                    url: 'https://daasg.com/features',
                },
                link4: {
                    id: 'privacy',
                    name: 'Privacidad',
                    url: 'https://daasg.com/features',
                },
                link5: {
                    id: 'terms',
                    name: 'Términos y condiciones',
                    url: 'https://daasg.com/features',
                },
            }
        subFooter: {},
    },
 };

SubFooter

En esta propiedad podemos configurar el pie de página que aparecera acontinuación del " footer ", añadiendo a su vez una propiedad con su propiedades, como:

• copyright
• socialNetworks: que a su vez contiene una o más propiedades, en este caso llamada "network" con sus propiedades internas

// docs/.vuepress/theme/config.js

module.exports = {
    footer: {
        subFooter: {
            copyright: `© DAAS SUITE ${new Date().getFullYear()}. All right reserved`,
            socialNetworks: {
                network1: {
                    id: 'linkedin',
                    name: 'linkedin',
                    url: 'https://www.linkedin.com/company/roi-up-agency-espa-a/',
                    img: 'https://daasg.com/img/ico-linkedin.svg',
                },
                network2: {
                    id: 'instagram',
                    name: 'instagram',
                    url: 'https://www.instagram.com/roiupgroup/',
                    img: 'https://daasg.com/img/ico-instagram.svg',
                },
                network3: {
                    id: 'facebook',
                    name: 'facebook',
                    url: 'https://www.facebook.com/ROIUP.Group/',
                    img: 'https://daasg.com/img/ico-facebook.svg',
                },
                network4: {
                    id: 'twitter',
                    name: 'twitter',
                    url: 'https://twitter.com/RoiupES',
                    img: 'https://daasg.com/img/ico-twitter.svg',
                },
            },
        }
    },
 };