Un tema Jekyll simple, limpio y responsivo para académicos. Si te gusta el tema, ¡dale una estrella!
¿Quieres saber más sobre Jekyll? Mira este tutorial. ¿Por qué Jekyll? ¡Lea la publicación del blog de Andrej Karpathy!
Para obtener un tutorial práctico sobre la instalación de al-folio, consulte este fantástico vídeo tutorial realizado por uno de los miembros de la comunidad. ? ?
La forma preferida de utilizar esta plantilla es haciendo clic en Usar esta plantilla encima de la lista de archivos. Luego, cree un nuevo repositorio en github.com:<your-username>/<your-repo-name>
. Si planea cargar su sitio en <your-github-username>.github.io
, tenga en cuenta que el nombre de su repositorio debe ser <your-github-username>.github.io
o <your-github-orgname>.github.io
, como se indica en los documentos de las páginas de GitHub. Para obtener más información sobre cómo implementar su sitio, consulte la sección Implementación a continuación. Después de crear su nuevo repositorio, simplemente descárguelo a su máquina:
$ git clone [email protected]: < your-username > / < your-repo-name > .git
$ cd < your-repo-name >
Usar Docker para instalar las dependencias de Jekyll y Ruby es la forma más sencilla.
Debe seguir los siguientes pasos para que al-folio
esté en funcionamiento en su máquina local:
$ docker compose pull
$ docker compose up
Tenga en cuenta que cuando lo ejecute por primera vez, descargará una imagen de la ventana acoplable de un tamaño aproximado de 400 MB.
Ahora, siéntete libre de personalizar el tema como quieras (¡no olvides cambiar el nombre!). Una vez que haya terminado, puede usar el mismo comando ( docker compose up
) para representar la página web con todos los cambios. Además, asegúrese de confirmar los cambios finales.
Para cambiar el número de puerto, puede editar el archivo
docker-compose.yml
.
Nota: este enfoque sólo es necesario si desea crear una versión anterior o muy personalizada de al-folio.
Cree y ejecute una nueva imagen de Docker usando:
$ docker compose up --build
Si desea actualizar jekyll, instalar nuevos paquetes de Ruby, etc., todo lo que tiene que hacer es crear la imagen nuevamente usando el argumento
--force-recreate
al final del comando anterior. Descargará Ruby y Jekyll e instalará todos los paquetes de Ruby nuevamente desde cero.
Si desea utilizar una versión específica de Docker, puede hacerlo cambiando la etiqueta latest
a your_version
en docker-compose.yaml
. Por ejemplo, es posible que haya creado su sitio web en v0.10.0
y quiera seguir con eso.
Suponiendo que tiene Ruby y Bundler instalados en su sistema ( sugerencia: para facilitar la administración de Ruby Gems, considere usar rbenv ), y también Python y pip ( sugerencia: para facilitar la administración de paquetes de Python, considere usar un entorno virtual, como venv o conda Si va a utilizar sólo jupyter
, puede utilizar pipx ).
$ bundle install
# assuming pip is your Python package manager
$ pip install jupyter
$ bundle exec jekyll serve --lsi
Ahora, siéntete libre de personalizar el tema como quieras (¡no olvides cambiar el nombre!). Una vez que haya terminado, confirme sus cambios finales.
Implementar su sitio web en GitHub Pages es la opción más popular. ¡A partir de la versión v0.3.5, al-folio volverá a implementar automáticamente su página web cada vez que envíe nuevos cambios a su repositorio!
Para páginas web personales y de organizaciones:
<your-github-username>.github.io
o <your-github-orgname>.github.io
._config.yml
, configure url
en https://<your-github-username>.github.io
y deje baseurl
vacía.<your-github-username>.github.io
.Para páginas de proyectos:
_config.yml
, configure url
en https://<your-github-username>.github.io
y baseurl
en /<your-repository-name>/
.<your-github-username>.github.io/<your-repository-name>/
.Para habilitar la implementación automática:
master
, su repositorio ahora debería tener una rama gh-pages
recién construida.gh-pages
( NO en master
). Para obtener más detalles, consulte Configurar una fuente de publicación para su sitio de GitHub Pages. Si mantiene su sitio en otra sucursal, abra .github/workflows/deploy.yml
en la sucursal en la que mantiene su sitio web y cambie on->push->branches y on->pull_request->branches a la sucursal en la que mantiene su sitio web. en. Esto activará la acción de tirar/empujar en esa rama. Luego, la acción implementará el sitio web en la sucursal desde la que se activó.
Si necesita volver a implementar manualmente su sitio web en las páginas de GitHub, vaya a Acciones, haga clic en "Implementar" en la barra lateral izquierda y luego en "Ejecutar flujo de trabajo".
Si decide no utilizar GitHub Pages y alojar su página en otro lugar, simplemente ejecute:
$ bundle exec jekyll build --lsi
que (re)generará la página web estática en la carpeta _site/
. Luego simplemente copie el contenido del directorio _site/
a su servidor de alojamiento.
Si también desea eliminar las clases CSS no utilizadas de su archivo, ejecute:
$ purgecss -c purgecss.config.js
que reemplazará los archivos css en la carpeta _site/assets/css/
con los archivos css eliminados.
Nota: asegúrese de configurar correctamente los campos url
y baseurl
en _config.yml
antes de crear la página web. Si está implementando su página web en your-domain.com/your-project/
, debe configurar url: your-domain.com
y baseurl: /your-project/
. Si está implementando directamente en your-domain.com
, deje baseurl
en blanco.
Nota: No intente utilizar este método a menos que sepa lo que está haciendo (asegúrese de estar familiarizado con las fuentes de publicación). Este enfoque permite tener el código fuente del sitio web en un repositorio y la versión de implementación en un repositorio diferente.
Supongamos que la fuente de publicación de su sitio web es un subdirectorio publishing-source
de un repositorio con versión git clonado en $HOME/repo/
. Para el sitio de un usuario, esto bien podría ser algo como $HOME/<user>.github.io
.
En primer lugar, desde el directorio del repositorio de implementación, consulte la rama de git que aloja su fuente de publicación.
Luego, desde el directorio de fuentes del sitio web (comúnmente el clon de su bifurcación al-folio):
$ bundle exec jekyll build --lsi --destination $HOME /repo/publishing-source
Esto le indicará a jekyll que implemente el sitio web en $HOME/repo/publishing-source
.
Nota: ¡Jekyll limpiará $HOME/repo/publishing-source
antes de compilar!
La siguiente cita está tomada directamente de los documentos de configuración de jekyll:
Las carpetas de destino se limpian en las compilaciones del sitio
El contenido de
<destination>
se limpia automáticamente, de forma predeterminada, cuando se crea el sitio. Se eliminarán los archivos o carpetas que no sean creados por su sitio. Algunos archivos se pueden conservar especificándolos dentro de la directiva de configuración<keep_files>
.No utilice una ubicación importante para
<destination>
; en su lugar, utilícelo como área de preparación y copie los archivos desde allí a su servidor web.
Si $HOME/repo/publishing-source
contiene archivos que desea que jekyll deje intactos, especifíquelos en keep_files
en _config.yml
. En su configuración predeterminada, al-folio copiará el README.md
de nivel superior a la fuente de publicación. Si desea cambiar este comportamiento, agregue README.md
en exclude
en _config.yml
.
Nota: No ejecute jekyll clean
en su repositorio fuente de publicación, ya que esto provocará que se elimine todo el directorio, independientemente del contenido de keep_files
en _config.yml
.
Si instaló al-folio como se describe anteriormente, puede configurar una acción de GitHub para sincronizar automáticamente su repositorio con la última versión del tema.
Vaya a Configuración -> Acciones -> General -> Permisos de flujo de trabajo, otorgue permisos de lectura y escritura a GitHub Actions, marque "Permitir que GitHub Actions cree y apruebe solicitudes de extracción" y guarde los cambios.
Luego vaya a Acciones -> Nuevo flujo de trabajo -> configure un flujo de trabajo usted mismo, configure el siguiente flujo de trabajo y confirme sus cambios:
name : Sync from template
on :
# cronjob trigger
schedule :
- cron : " 0 0 1 * * "
# manual trigger
workflow_dispatch :
jobs :
repo-sync :
runs-on : ubuntu-latest
steps :
# To use this repository's private action, you must check out the repository
- name : Checkout
uses : actions/checkout@v3
- name : actions-template-sync
uses : AndreasAugustin/[email protected]
with :
github_token : ${{ secrets.GITHUB_TOKEN }}
source_repo_path : alshedivat/al-folio
upstream_branch : master
Recibirá una solicitud de extracción dentro de su repositorio si hay algunos cambios disponibles en la plantilla.
Otra opción es actualizar manualmente su código siguiendo los pasos a continuación:
# Assuming the current directory is <your-repo-name>
$ git remote add upstream https://github.com/alshedivat/al-folio.git
$ git fetch upstream
$ git rebase v0.9.0
Si ha personalizado ampliamente una versión anterior, puede resultar más complicado actualizarla. Aún puedes seguir los pasos anteriores, pero git rebase
puede generar conflictos de fusión que deben resolverse. Consulte el manual de git rebase y cómo resolver conflictos para obtener más información. Si cambiar la base es demasiado complicado, recomendamos reinstalar la nueva versión del tema desde cero y transferir su contenido y cambios de la versión anterior manualmente.
Aquí hay algunas preguntas frecuentes. Si tiene una pregunta diferente, hágala mediante Discusiones.
P: Después de crear un nuevo repositorio a partir de esta plantilla y configurarlo, aparece un error de implementación. ¿No se supone que el sitio web se implemente correctamente de forma automática?
R: Sí, si está utilizando la versión v0.3.5
o posterior, el sitio web se volverá a implementar de forma automática y correcta inmediatamente después de su primera confirmación. Realice algunos cambios (por ejemplo, cambie la información de su sitio web en _config.yml
), confirme y envíe. Asegúrese de seguir las instrucciones de implementación de la sección anterior. (Cuestión relevante: 209.)
P: Estoy usando un dominio personalizado (por ejemplo, foo.com
). Mi dominio personalizado queda en blanco en la configuración del repositorio después de cada implementación. ¿Cómo soluciono eso?
R: Debe agregar el archivo CNAME
a la rama master
o source
de su repositorio. El archivo debe contener su nombre de dominio personalizado. (Asunto relevante: 130.)
P: Mi página web funciona localmente. Pero después de la implementación, no se puede compilar y arroja Unknown tag 'toc'
. ¿Cómo soluciono eso?
R: Asegúrese de seguir las instrucciones de implementación de la sección anterior. Deberías haber configurado la rama de implementación en gh-pages
. (Número relacionado: 1438.)
P: Mi página web funciona localmente. Pero después de la implementación, no se muestra correctamente (CSS y JS no se cargan correctamente). ¿Cómo soluciono eso?
R: Asegúrese de especificar correctamente las rutas url
y baseurl
en _config.yml
. Establezca url
en https://<your-github-username>.github.io
o en https://<your.custom.domain>
si está utilizando un dominio personalizado. Si está implementando un sitio web personal o de una organización, deje baseurl
en blanco. Si está implementando una página de proyecto, configure baseurl: /<your-project-name>/
. Si todos los pasos anteriores se realizaron correctamente, lo único que falta es que su navegador vuelva a buscar la hoja de estilo del sitio.
P: La alimentación atómica no funciona. ¿Por qué?
R: Asegúrese de especificar correctamente las rutas url
y baseurl
en _config.yml
. El complemento RSS Feed funciona con estos campos configurados correctamente: title
, url
, description
y author
. Asegúrate de completarlos de manera adecuada y vuelve a intentarlo.
P: Mi sitio no funciona cuando habilito related_blog_posts
. ¿Por qué?
R: Esto probablemente se deba al complemento Classifier Reborn, que se utiliza para calcular publicaciones relacionadas. Si el error indica Liquid Exception: Zero vectors can not be normalized...
, significa que no se pudieron calcular publicaciones relacionadas para una publicación específica. Esto generalmente se debe a publicaciones de blog vacías o mínimas sin palabras significativas (es decir, solo palabras vacías) o incluso caracteres específicos que usó en sus publicaciones. Además, el cálculo de publicaciones similares se realiza para cada post
, lo que significa cada página que utiliza layout: post
, incluidos los anuncios. Para cambiar este comportamiento, simplemente agregue related_posts: false
al principio de la página en la que no desea mostrar publicaciones relacionadas.
P: Al intentar implementar, se solicitan las credenciales de inicio de sesión de github, lo cual github deshabilitó la autenticación de contraseña y sale con un error. ¿Cómo solucionarlo?
R: Abra el archivo .git/config usando su editor preferido. Cambie la parte https
de la variable url
a ssh
. Intente implementar nuevamente.
La página de tus publicaciones se genera automáticamente a partir de tu bibliografía BibTex. Simplemente edite _bibliography/papers.bib
. También puede agregar nuevos archivos *.bib
y personalizar el aspecto de sus publicaciones como desee editando _pages/publications.md
.
En las publicaciones, la entrada del autor se identifica mediante la matriz de cadenas scholar:last_name
y scholar:first_name
en _config.yml
:
scholar :
last_name : [Einstein]
first_name : [Albert, A.]
Si la entrada coincide con una forma de apellidos y nombres, se subrayará. Mantenga la metainformación sobre sus coautores en _data/coauthors.yml
y Jekyll insertará enlaces a sus páginas web automáticamente. El formato de datos de coautor en _data/coauthors.yml
es el siguiente,
" Adams " :
- firstname : ["Edwin", "E.", "E. P.", "Edwin Plimpton"]
url : https://en.wikipedia.org/wiki/Edwin_Plimpton_Adams
" Podolsky " :
- firstname : ["Boris", "B.", "B. Y.", "Boris Yakovlevich"]
url : https://en.wikipedia.org/wiki/Boris_Podolsky
" Rosen " :
- firstname : ["Nathan", "N."]
url : https://en.wikipedia.org/wiki/Nathan_Rosen
" Bach " :
- firstname : ["Johann Sebastian", "J. S."]
url : https://en.wikipedia.org/wiki/Johann_Sebastian_Bach
- firstname : ["Carl Philipp Emanuel", "C. P. E."]
url : https://en.wikipedia.org/wiki/Carl_Philipp_Emanuel_Bach
Si la entrada coincide con una de las combinaciones de apellidos y nombres, se resaltará y se vinculará a la URL proporcionada.
Hay varias palabras clave bibtex personalizadas que puede utilizar para afectar la forma en que se muestran las entradas en la página web:
abbr
: agrega una abreviatura a la izquierda de la entrada. Puede agregar enlaces a estos creando un archivo place.yaml en la carpeta _data y agregando entradas que coincidan.abstract
: agrega un botón "Abs" que expande un campo de texto oculto cuando se hace clic para mostrar el texto abstractoarxiv
: Agrega un enlace al sitio web de Arxiv (Nota: aquí solo agregue el identificador de arxiv; el enlace se genera automáticamente)bibtex_show
: Agrega un botón "Bib" que expande un campo de texto oculto con la entrada de bibliografía completa.html
: Inserta un botón "HTML" que redirige al enlace especificado por el usuario.pdf
: agrega un botón "PDF" que redirige a un archivo específico (si no se especifica un enlace completo, se asumirá que el archivo está ubicado en el directorio /assets/pdf/)supp
: Agrega un botón "Supp" a un archivo específico (si no se especifica un enlace completo, se asumirá que el archivo está ubicado en el directorio /assets/pdf/)blog
: agrega un botón "Blog" que redirige al enlace especificadocode
: agrega un botón "Código" que redirige al enlace especificadoposter
: Agrega un botón "Póster" que redirige a un archivo específico (si no se especifica un enlace completo, se asumirá que el archivo está ubicado en el directorio /assets/pdf/)slides
: Agrega un botón "Diapositivas" que redirige a un archivo específico (si no se especifica un enlace completo, se asumirá que el archivo está ubicado en el directorio /assets/pdf/)website
: agrega un botón "Sitio web" que redirige al enlace especificadoaltmetric
: agrega una insignia Altmetric (Nota: si se proporciona DOI, simplemente use true
; de lo contrario, solo agregue el identificador altmetric aquí; el enlace se genera automáticamente)dimensions
: Agrega una insignia de Dimensiones (Nota: si se proporciona DOI o PMID, simplemente use true
; de lo contrario, solo agregue el identificador de Dimensiones aquí; el enlace se genera automáticamente)Puede implementar sus propios botones editando el archivo bib.html.
Este tema de Jekyll implementa collections
que te permiten dividir tu trabajo en categorías. El tema viene con dos colecciones predeterminadas: news
y projects
. Los elementos de la colección news
se muestran automáticamente en la página de inicio. Los elementos de la colección projects
se muestran en una cuadrícula responsiva en la página de proyectos.
Puedes crear fácilmente tus propias colecciones, aplicaciones, cuentos, cursos o cualquiera que sea tu trabajo creativo. Para hacer esto, edite las colecciones en el archivo _config.yml
, cree una carpeta correspondiente y cree una página de inicio para su colección, similar a _pages/projects.md
.
al-folio viene con diseños elegantes para páginas y publicaciones de blog.
El tema te permite crear publicaciones de blog al estilo distill.pub:
Para obtener más detalles sobre cómo crear publicaciones con estilo destilado usando etiquetas <d-*>
, consulte el ejemplo.
al-folio admite la composición tipográfica matemática rápida a través de MathJax y el resaltado de sintaxis de código usando el estilo GitHub:
El formato de fotografías se simplifica utilizando el sistema de cuadrícula de Bootstrap. Cree fácilmente hermosas cuadrículas dentro de las publicaciones de su blog y páginas de proyectos:
al-folio usa github-readme-stats y github-profile-tropic para mostrar los repositorios de GitHub y las estadísticas de los usuarios en la página /repositories/
.
Edite _data/repositories.yml
y cambie las listas github_users
y github_repos
para incluir su propio perfil de GitHub y repositorios en la página /repositories/
.
También puede utilizar los siguientes códigos para mostrar esto en cualquier otra página.
<!-- code for GitHub users -->
{% if site.data.repositories.github_users %}
< div class =" repositories d-flex flex-wrap flex-md-row flex-column justify-content-between align-items-center " >
{% for user in site.data.repositories.github_users %}
{% include repository/repo_user.html username=user %}
{% endfor %}
</ div >
{% endif %}
<!-- code for GitHub trophies -->
{% if site.repo_trophies.enabled %}
{% for user in site.data.repositories.github_users %}
{% if site.data.repositories.github_users.size > 1 %}
< h4 > {{ user }} </ h4 >
{% endif %}
< div class =" repositories d-flex flex-wrap flex-md-row flex-column justify-content-between align-items-center " >
{% include repository/repo_trophies.html username=user %}
</ div >
{% endfor %}
{% endif %}
<!-- code for GitHub repositories -->
{% if site.data.repositories.github_repos %}
< div class =" repositories d-flex flex-wrap flex-md-row flex-column justify-content-between align-items-center " >
{% for repo in site.data.repositories.github_repos %}
{% include repository/repo.html repository=repo %}
{% endfor %}
</ div >
{% endif %}
Se ha seleccionado una variedad de hermosos colores temáticos para que usted elija. El valor predeterminado es violeta, pero puedes cambiarlo rápidamente editando la variable --global-theme-color
en el archivo _sass/_themes.scss
. Allí también se enumeran otras variables de color. Las opciones de color del tema estándar disponibles se pueden encontrar en _sass/_variables.scss
. También puede agregar sus propios colores a este archivo asignando a cada uno un nombre para facilitar su uso en toda la plantilla.
al-folio admite imágenes de vista previa en las redes sociales. Para habilitar esta funcionalidad, deberá serve_og_meta
en true
en su _config.yml
. Una vez que lo haya hecho, todas las páginas de su sitio incluirán datos de Open Graph en el elemento de encabezado HTML.
Luego deberá configurar qué imagen mostrar en las vistas previas de las redes sociales de su sitio. Esto se puede configurar por página, configurando la variable de página og_image
. Si para una página individual esta variable no está configurada, entonces el tema recurrirá a una variable og_image
para todo el sitio, configurable en su _config.yml
. Tanto en el caso de una página específica como en el de todo el sitio, la variable og_image
debe contener la URL de la imagen que desea mostrar en las vistas previas de las redes sociales.
Genera un feed Atom (tipo RSS) de sus publicaciones, útil para lectores Atom y RSS. Se puede acceder al feed simplemente escribiendo después de su página de inicio /feed.xml
. Por ejemplo, suponiendo que el punto de montaje de su sitio web sea la carpeta principal, puede escribir yourusername.github.io/feed.xml
De forma predeterminada, habrá una sección de publicaciones relacionadas en la parte inferior de las publicaciones del blog. Estos se generan seleccionando las publicaciones más recientes max_related
que comparten al menos etiquetas min_common_tags
con la publicación actual. Si no desea mostrar publicaciones relacionadas en una publicación específica, simplemente agregue related_posts: false
al principio de la publicación. Si desea deshabilitarlo para todas las publicaciones, simplemente configúrelo enabled
en falso en la sección related_blog_posts
en _config.yml
.
¡Las contribuciones a al-folio son bienvenidas! Antes de comenzar, consulte las pautas.
Si desea mejorar la documentación, agregar su página web a la lista a continuación o corregir una inconsistencia o un error menor, no dude en enviar un PR directamente a master
. Para problemas/errores más complejos o solicitudes de funciones, abra un problema utilizando la plantilla adecuada.
Nuestros contribuyentes más activos son bienvenidos a unirse al equipo de mantenedores. Si está interesado, ¡comuníquese!
maruán | Rohan Deb Sarkar | Amir Pourmand | jorge |
Hecho con contribuciones.rocks.
El tema está disponible como código abierto según los términos de la licencia MIT.
Originalmente, al-folio se basó en el tema *folio (publicado por Lia Bogoev y bajo licencia del MIT). Desde entonces, se reescribieron completamente los estilos y muchas características interesantes adicionales.