Generar la personalización dinámicamente
This commit is contained in:
f
parent
56d991130f
commit
9cbaba6ba8
4 changed files with 158 additions and 107 deletions
|
|
@ -65,6 +65,7 @@ layouts:
|
|||
post: Article
|
||||
menu: Menu
|
||||
about: About this site
|
||||
theme: Customize theme
|
||||
menu:
|
||||
title: Menu
|
||||
share:
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@ layouts:
|
|||
post: Artículo
|
||||
menu: Menú
|
||||
about: Información del sitio
|
||||
theme: Personalizar plantilla
|
||||
menu:
|
||||
title: Menú
|
||||
share:
|
||||
|
|
|
|||
|
|
@ -6,144 +6,195 @@ title:
|
|||
en: Title
|
||||
es: Título
|
||||
help:
|
||||
en: ''
|
||||
es: ''
|
||||
en: 'The name you want to give to this customization'
|
||||
es: 'El nombre que quieras darle a esta personalización'
|
||||
enable_rounded:
|
||||
type: boolean
|
||||
label:
|
||||
en: 'Yes'
|
||||
es: Sí
|
||||
en: 'Rounded corners'
|
||||
es: 'Esquinas redondeadas'
|
||||
help:
|
||||
en: Enable or disable this option
|
||||
es: Habilita o deshabilita esta opción
|
||||
en: 'For buttons, form inputs, etc.'
|
||||
es: 'De los botones, campos de formularios, etc.'
|
||||
default:
|
||||
es: true
|
||||
en: true
|
||||
enable_shadows:
|
||||
type: boolean
|
||||
label:
|
||||
en: 'Yes'
|
||||
es: Sí
|
||||
en: 'Shadows'
|
||||
es: 'Sombras'
|
||||
help:
|
||||
en: Enable or disable this option
|
||||
es: Habilita o deshabilita esta opción
|
||||
en: 'Shadows behind elements'
|
||||
es: 'Sombras en los elementos'
|
||||
default:
|
||||
es: true
|
||||
en: true
|
||||
body_bg:
|
||||
type: color
|
||||
label:
|
||||
en: Color
|
||||
es: Color
|
||||
en: 'Background color'
|
||||
es: 'Color de fondo'
|
||||
help:
|
||||
en: Pick a color
|
||||
es: Elige un color
|
||||
en: "Site's background color"
|
||||
es: 'Color de fondo del sitio'
|
||||
default:
|
||||
es: '#FFFFFF'
|
||||
en: '#FFFFFF'
|
||||
body_color:
|
||||
type: color
|
||||
label:
|
||||
en: Color
|
||||
es: Color
|
||||
en: 'Text color'
|
||||
es: 'Color del texto'
|
||||
help:
|
||||
en: Pick a color
|
||||
es: Elige un color
|
||||
en: ''
|
||||
es: ''
|
||||
default:
|
||||
es: '#212529'
|
||||
en: '#212529'
|
||||
primary:
|
||||
type: color
|
||||
label:
|
||||
en: 'Primary color'
|
||||
es: 'Color principal'
|
||||
help:
|
||||
en: 'Highlights certain elements'
|
||||
es: 'Resalta algunos elementos'
|
||||
default:
|
||||
es: '#007bff'
|
||||
en: '#007bff'
|
||||
link_color:
|
||||
type: color
|
||||
label:
|
||||
en: Color
|
||||
es: Color
|
||||
en: 'Link color'
|
||||
es: 'Color de los vínculos'
|
||||
help:
|
||||
en: Pick a color
|
||||
es: Elige un color
|
||||
en: ''
|
||||
es: ''
|
||||
default:
|
||||
es: '#007bff'
|
||||
en: '#007bff'
|
||||
link_hover_color:
|
||||
type: color
|
||||
label:
|
||||
en: Color
|
||||
es: Color
|
||||
en: 'Link color when selected'
|
||||
es: 'Color de los vínculos al seleccionarlos'
|
||||
help:
|
||||
en: Pick a color
|
||||
es: Elige un color
|
||||
component_active_color:
|
||||
type: color
|
||||
label:
|
||||
en: Color
|
||||
es: Color
|
||||
help:
|
||||
en: Pick a color
|
||||
es: Elige un color
|
||||
en: ''
|
||||
es: ''
|
||||
default:
|
||||
es: '#0056b3'
|
||||
en: '#0056b3'
|
||||
h1_font_size:
|
||||
type: number
|
||||
label:
|
||||
en: Number
|
||||
es: Número
|
||||
en: 'Height for first level headings'
|
||||
es: 'Altura de los títulos de primer nivel'
|
||||
help:
|
||||
en: ''
|
||||
es: ''
|
||||
en: 'Proportional to font base height. For instance, 2 is double height.'
|
||||
es: 'En proporción al alto base de la tipografía. Por ejemplo 2 es el doble.'
|
||||
default:
|
||||
es: 2.5
|
||||
en: 2.5
|
||||
h2_font_size:
|
||||
type: number
|
||||
label:
|
||||
en: Number
|
||||
es: Número
|
||||
en: 'Height for second level headings'
|
||||
es: 'Altura de los títulos de segundo nivel'
|
||||
help:
|
||||
en: ''
|
||||
es: ''
|
||||
en: 'Proportional to font base height. For instance, 2 is double height.'
|
||||
es: 'En proporción al alto base de la tipografía. Por ejemplo 2 es el doble.'
|
||||
default:
|
||||
es: 2
|
||||
en: 2
|
||||
h3_font_size:
|
||||
type: number
|
||||
label:
|
||||
en: Number
|
||||
es: Número
|
||||
en: 'Height for third level headings'
|
||||
es: 'Altura de los títulos de tercer nivel'
|
||||
help:
|
||||
en: ''
|
||||
es: ''
|
||||
en: 'Proportional to font base height. For instance, 2 is double height.'
|
||||
es: 'En proporción al alto base de la tipografía. Por ejemplo 2 es el doble.'
|
||||
default:
|
||||
es: 1.75
|
||||
en: 1.75
|
||||
h4_font_size:
|
||||
type: number
|
||||
label:
|
||||
en: Number
|
||||
es: Número
|
||||
en: 'Height for fourth level headings'
|
||||
es: 'Altura de los títulos de cuarto nivel'
|
||||
help:
|
||||
en: ''
|
||||
es: ''
|
||||
en: 'Proportional to font base height. For instance, 2 is double height.'
|
||||
es: 'En proporción al alto base de la tipografía. Por ejemplo 2 es el doble.'
|
||||
default:
|
||||
es: 1.5
|
||||
en: 1.5
|
||||
h5_font_size:
|
||||
type: number
|
||||
label:
|
||||
en: Number
|
||||
es: Número
|
||||
en: 'Height for fifth level headings'
|
||||
es: 'Altura de los títulos de quinto nivel'
|
||||
help:
|
||||
en: ''
|
||||
es: ''
|
||||
en: 'Proportional to font base height. For instance, 2 is double height.'
|
||||
es: 'En proporción al alto base de la tipografía. Por ejemplo 2 es el doble.'
|
||||
default:
|
||||
es: 1.25
|
||||
en: 1.25
|
||||
h6_font_size:
|
||||
type: number
|
||||
label:
|
||||
en: Number
|
||||
es: Número
|
||||
en: 'Height for sixth level headings'
|
||||
es: 'Altura de los títulos de sexto nivel'
|
||||
help:
|
||||
en: ''
|
||||
es: ''
|
||||
en: 'Proportional to font base height. For instance, 2 is double height.'
|
||||
es: 'En proporción al alto base de la tipografía. Por ejemplo 2 es el doble.'
|
||||
default:
|
||||
es: 1
|
||||
en: 1
|
||||
mark_bg:
|
||||
type: color
|
||||
label:
|
||||
en: Color
|
||||
es: Color
|
||||
en: 'Highlight color'
|
||||
es: 'Color de resaltado'
|
||||
help:
|
||||
en: Pick a color
|
||||
es: Elige un color
|
||||
en: 'Default color for highlighted text'
|
||||
es: 'Color por defecto para el texto resaltado'
|
||||
default:
|
||||
es: '#fcf8e3'
|
||||
en: '#fcf8e3'
|
||||
navbar_light_color:
|
||||
type: color
|
||||
label:
|
||||
en: Color
|
||||
es: Color
|
||||
en: 'Navigation bar item color'
|
||||
es: 'Color de ítem en la barra de navegación'
|
||||
help:
|
||||
en: Pick a color
|
||||
es: Elige un color
|
||||
en: 'Text and icons'
|
||||
es: 'Texto e íconos'
|
||||
default:
|
||||
es: '#ced4da'
|
||||
en: '#ced4da'
|
||||
navbar_light_hover_color:
|
||||
type: color
|
||||
label:
|
||||
en: Color
|
||||
es: Color
|
||||
en: 'Navigation bar item color when selected'
|
||||
es: 'Color de ítem seleccionado en la barra de navegación'
|
||||
help:
|
||||
en: Pick a color
|
||||
es: Elige un color
|
||||
en: 'Text and icons'
|
||||
es: 'Texto e íconos'
|
||||
default:
|
||||
es: '#6c757d'
|
||||
en: '#6c757d'
|
||||
navbar_light_active_color:
|
||||
type: color
|
||||
label:
|
||||
en: Color
|
||||
es: Color
|
||||
en: 'Navigation bar item color when active'
|
||||
es: 'Color de ítem activo en la barra de navegación'
|
||||
help:
|
||||
en: Pick a color
|
||||
es: Elige un color
|
||||
en: 'Text and icons'
|
||||
es: 'Texto e íconos'
|
||||
default:
|
||||
es: '#212529'
|
||||
en: '#212529'
|
||||
order:
|
||||
type: order
|
||||
label:
|
||||
|
|
|
|||
|
|
@ -6,31 +6,41 @@
|
|||
/// @group Principal
|
||||
////
|
||||
|
||||
/// Traemos el primer artículo de tipo `about` para obtener los valores
|
||||
/// Traemos el primer artículo de tipo `theme` para obtener los valores
|
||||
/// personalizados.
|
||||
///
|
||||
/// @todo Mover a su propio SCSS
|
||||
{% assign about = site.posts | find: 'layout', 'about' %}
|
||||
|
||||
{% comment %}
|
||||
Los artículos con layout `theme` contienen variables utilizadas por
|
||||
Bootstrap que pueden ser redefinidas por les usuaries de Sutty a través
|
||||
del panel.
|
||||
{% endcomment %}
|
||||
{% assign theme = site.posts | find: 'layout', 'theme' %}
|
||||
{% assign theme_defaults = site.data.layouts.theme %}
|
||||
{% comment %}
|
||||
Ignorar estos campos que no son variables.
|
||||
{% endcomment %}
|
||||
{% assign ignored_keys = 'title,draft,order' | split: ',' %}
|
||||
{% comment %}
|
||||
Cada variable de Bootstrap viene desde la definición de `theme`. Por
|
||||
convención usamos snake_case, pero Bootstrap usa guión medio, así que
|
||||
las convertimos.
|
||||
|
||||
$enable-rounded: {{ theme.enable_rounded }};
|
||||
$enable-shadows: {{ theme.enable_shadows }};
|
||||
$body-bg: {{ theme.body_bg }};
|
||||
$body-color: {{ theme.body_color }};
|
||||
$link-color: {{ theme.link_color }};
|
||||
$link-hover-color: {{ theme.link_hover_color }};
|
||||
$component-active-color: {{ theme.component_active_color }};
|
||||
$h1-font-size: {{ theme.h1_font_size }}rem;
|
||||
$h2-font-size: {{ theme.h2_font_size }}rem;
|
||||
$h3-font-size: {{ theme.h3_font_size }}rem;
|
||||
$h4-font-size: {{ theme.h4_font_size }}rem;
|
||||
$h5-font-size: {{ theme.h5_font_size }}rem;
|
||||
$h6-font-size: {{ theme.h6_font_size }}rem;
|
||||
$mark-bg: {{ theme.mark_bg }};
|
||||
$navbar-light-color: {{ theme.navbar_light_color }};
|
||||
$navbar-light-hover-color: {{ theme.navbar_light_hover_color }};
|
||||
$navbar-light-active-color: {{ theme.navbar_light_active_color }};
|
||||
Utilizamos los valores que vengan del artículo y si no existen, usamos
|
||||
los valores por defecto de sutty-base. De lo contrario mantenemos los
|
||||
de Bootstrap.
|
||||
{% endcomment %}
|
||||
{% for variable in theme_defaults %}
|
||||
{% assign key = variable[0] %}
|
||||
{% if ignored_keys contains key %}{% continue %}{% endif %}
|
||||
{% assign default_value = variable[1].default[site.locale] %}
|
||||
{% assign variable_name = key | replace: '_', '-' %}
|
||||
{% if theme[key] or default_value %}
|
||||
{% comment %}
|
||||
Generamos una definición de variable de SASS
|
||||
{% endcomment %}
|
||||
${{ variable_name }}: {{ theme[key] | default: default_value }};
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
/// El modo debug se desactiva en producción
|
||||
$debug: {{ jekyll.environment | not: 'production' }};
|
||||
|
|
@ -44,18 +54,6 @@ $bezier: cubic-bezier(0.75, 0, 0.25, 1);
|
|||
|
||||
/// Redefinir la tipografía aquí, o borrar si usamos las de Bootstrap
|
||||
$font-family-sans-serif: sans-serif;
|
||||
/// El color primario de la paleta, se trae desde el `about` o sea usa
|
||||
/// el color por defecto.
|
||||
///
|
||||
/// @link _data/layouts/about.yml
|
||||
$primary: {{ about.primary | default: site.data.layouts.about.primary.default[site.locale] }};
|
||||
|
||||
/// El color secundario de la paleta, se trae desde el `about` o sea usa
|
||||
/// el color por defecto.
|
||||
///
|
||||
/// @link _data/layouts/about.yml
|
||||
$secondary: {{ about.secondary | default: site.data.layouts.about.secondary.default[site.locale] }};
|
||||
|
||||
|
||||
/// Agregamos los colores propios de la plantilla aquí. Bootstrap los
|
||||
/// agrega a su propia paleta de colores. Si usamos el mismo nombre
|
||||
|
|
|
|||
Loading…
Reference in a new issue