Maison interface Web tutoriel HTML 十分钟搭建个人网站:Jekyll主题BoHu_html/css_WEB-ITnose

十分钟搭建个人网站:Jekyll主题BoHu_html/css_WEB-ITnose

Jun 24, 2016 am 11:19 AM

最近花了三天时间制作了我的第一个jekyll theme——BoHu。一款知乎风格的模板,使用jekyll模板引擎,十分钟就能搭建属于你自己的静态博客网站。

本主题的特征为:


  1. 知乎风格

  2. 分页导航使用的是具体页码而不是单纯的上一页下一页

  3. 支持博文搜索功能

  4. 支持文章分类和显示近期文章

  5. 首页能统计博文数量

  6. 内置中文和英文的艺术字体

  7. 内置音乐播放器

  8. 支持多说和disqus评论系统

  9. 移动设备浏览效果良好

  10. 使用MIT许可

具体步骤如下:

  1. 首先,你需要有GitHub帐号。
  2. 到我的GitHub上的bohu-jekyll-theme仓库中fork本主题。
  3. 在bohu-jekyll-theme目录下找到_config.yml配置文件并打开。修改个人配置信息。
  4. 将修改完成的网站目录上传至自己的GitHub仓库生成自己的博客网站。
  5. 以后只要把你的博文放在_post文件夹下并上传至GitHub,网站就会自动更新内容啦。

必填信息
title: 博客的名字
author: 博主的名字
baseurl: 博客的根地址==你的文件夹名称(默认为bohu-jekyll-theme),如果你更改了文件夹名称,请把此处也修改掉。
description: head中的网页描述信息。简要描述你的网站,让搜索引擎能更好的收录你的网站。

选填信息
email: 你的邮箱地址
twitter_username: 你的推特用户名
weibo_username: 你的微博用户名
github_username: 你的github用户名
以上四项信息你填写了之后博主信息栏里会自动出现相应的链接图标,不填就不会出现。

disqus_shortname: 你的disqus帐号
duoshuo——shortname: 你的多说帐号
以上两项可以不填,选填任意一项会自动加载相应的评论插件。

url: 如果你有自己的个人网站就填写你自己的网站地址,如果没有,就填写http://你的github名字.github.io/主题文件夹根目录名字/home,将会指向一个内置的个人主页。
使用内置的个人主页之后你需要配置一下个人信息: place,domain,company,position,school,major,resume
性别图标修改方法:打开home文件夹下的index.html,搜索类名fa-mars,将其改成fa-venus即可。

paginate: 填写一个数值,决定分页导航每一页显示的博文数量,达到这个数值会自动分页。

profile: 你的座右铭

其他修改项目


  • 网站图标和自定义头像在assets文件夹下,你也可以把路径设置为任何站外图片链接。

  • 使用SCSS预编译,要修改样式优先修改SCSS文件。

  • 搜索插件需要手动配置路径,找到search文件夹,将其中JS文件夹里的cb-search.js中第66行bohu-jekyll-theme改成博客网站根目录的名字。

  • 本主题的后续维护和更新内容请关注GitHub项目主页bohu-jekyll-theme。

    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

    Outils d'IA chauds

    Undresser.AI Undress

    Undresser.AI Undress

    Application basée sur l'IA pour créer des photos de nu réalistes

    AI Clothes Remover

    AI Clothes Remover

    Outil d'IA en ligne pour supprimer les vêtements des photos.

    Undress AI Tool

    Undress AI Tool

    Images de déshabillage gratuites

    Clothoff.io

    Clothoff.io

    Dissolvant de vêtements AI

    AI Hentai Generator

    AI Hentai Generator

    Générez AI Hentai gratuitement.

    Article chaud

    R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Meilleurs paramètres graphiques
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Comment réparer l'audio si vous n'entendez personne
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    WWE 2K25: Comment déverrouiller tout dans Myrise
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

    Outils chauds

    Bloc-notes++7.3.1

    Bloc-notes++7.3.1

    Éditeur de code facile à utiliser et gratuit

    SublimeText3 version chinoise

    SublimeText3 version chinoise

    Version chinoise, très simple à utiliser

    Envoyer Studio 13.0.1

    Envoyer Studio 13.0.1

    Puissant environnement de développement intégré PHP

    Dreamweaver CS6

    Dreamweaver CS6

    Outils de développement Web visuel

    SublimeText3 version Mac

    SublimeText3 version Mac

    Logiciel d'édition de code au niveau de Dieu (SublimeText3)

    Quel est le but du & lt; Progress & gt; élément? Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

    L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

    Quel est le but du & lt; datalist & gt; élément? Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

    L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

    Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Mar 17, 2025 pm 12:20 PM

    L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

    Quel est le but du & lt; mètre & gt; élément? Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

    L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

    Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Mar 17, 2025 pm 12:27 PM

    L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

    Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement? Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement? Mar 12, 2025 pm 04:05 PM

    Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit

    Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Mar 20, 2025 pm 05:56 PM

    L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.

    Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Mar 20, 2025 pm 06:05 PM

    L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.

    See all articles