VuePress搭建博客教程(六)、vuepress配置head和自定义样式

小景哥哥博客

一、创建public文件夹

在.vuepress目录下创建public文件夹，在public文件夹下存入两个文件Beauty.jpg和icon.jpg，分别用于主界面的图标和head的图标。

在config.js中引入icon.jpg的head图标：

head: [["link", {rel: "icon", href: "/icon.jpg"}]
]

在docs下面的README.md主页文件中引入Beauty.jgp文件：

heroImage: /Beauty.jpg

二、引入自定义样式

在.vuepress目录下创建styles文件夹，这个文件夹用来存放全局的样式文件，在此文件夹下创建index.styl文件，其内容如下：

.theme-default-contenth1border-bottom 3px solid rgb(0,172,193)padding 20px 0px 20px 0pxfont-size 24px.theme-default-contenth2border-bottom 2px solid rgb(0,172,193)padding 15px 0px 15px 0pxfont-size 20px.theme-default-contentpmargin: 15px 0px 15px 0px;/* PrismJS 1.24.1
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript */
/*** prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML* Based on https://github.com/chriskempson/tomorrow-theme* @author Rose Pritchard*/code[class*="language-"],
pre[class*="language-"] {color: #ccc;background: none;font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size: 1em;text-align: left;white-space: pre;word-spacing: normal;word-break: normal;word-wrap: normal;line-height: 1.5;-moz-tab-size: 4;-o-tab-size: 4;tab-size: 4;-webkit-hyphens: none;-moz-hyphens: none;-ms-hyphens: none;hyphens: none;}/* Code blocks */
pre[class*="language-"] {padding: 1em;margin: .5em 0;overflow: auto;
}:not(pre) > code[class*="language-"],
pre[class*="language-"] {background: #2d2d2d;
}/* Inline code */
:not(pre) > code[class*="language-"] {padding: .1em;border-radius: .3em;white-space: normal;
}.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {color: #999;
}.token.punctuation {color: #ccc;
}.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {color: #e2777a;
}.token.function-name {color: #6196cc;
}.token.boolean,
.token.number,
.token.function {color: #f08d49;
}.token.property,
.token.class-name,
.token.constant,
.token.symbol {color: #f8c555;
}.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {color: #cc99cd;
}.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {color: #7ec699;
}.token.operator,
.token.entity,
.token.url {color: #67cdcc;
}.token.important,
.token.bold {font-weight: bold;
}
.token.italic {font-style: italic;
}.token.entity {cursor: help;
}.token.inserted {color: green;
}

这里使用了PrismJS的样式，如果大家想定制化自己的code样式，可以去这个官网下载满足自己需要的css文件。另外在index.styl文件的最前面几行，添加了我自己写的标题样式，大家可以根据需要自行添加各种样式即可。

三、效果展示

让我们看一下效果。

head图标和主界面的图标都显示出来了。

自定义的h1和h2的样式也显示出来了。

VuePress搭建博客教程(六)、vuepress配置head和自定义样式相关推荐

手把手教从零开始在GitHub上使用Hexo搭建博客教程(二)-Hexo参数设置
前言前文手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置介绍了github注册.git相关设置以及hexo基本操作. 本文主要介绍一下hexo的常用参数设置. ...
Hexo搭建博客教程-基于Butterfly主题
title: Hexo搭建博客教程 tags: Hexo 博客教程 categories: Hexo keywords: 'Hexo,博客教程' description: Hexo搭建博客,以及主题b ...
hugo搭建博客教程-简单搭建
title: Hugo简单搭建博客 tags: Hugo 博客教程 categories: Hugo keywords: 'Hugo,博客教程' description: 简单的Hugo搭建博客教程, ...
hexo搭建博客教程(matery主题)
hexo搭建博客教程(matery主题) 写在前面这篇教程是我搭建个人博客的路程经历和经验总结,matery主题挺多人用,网上也有各种详细教程,没时间我就不出详细教程了,这里给出其他大佬的教程链接, ...
hexo最全搭建博客教程
目录前言入门安装 Node.js 安装 Git 检验Git是否安装成功安装Hexo Hexo 初始化配置本地查看效果将博客部署到 Gitee Pages 上注册 Gitee 账户创建项 ...
Hexo+NexT（零）：最全Hexo+Next搭建博客教程
欢迎访问博主博客www.guide2it.com 快速.简洁且高效的博客框架有位大神说,喜欢写博客的人的人,折腾博客会经历三个阶段.找到一个免费空间,搭建一个博客,很欣喜,很有成就感,此为一阶段:受 ...
【django】搭建博客教程(2)——Template的使用
测试Template 前面我们只是将后端的数据显示到页面上而已,这并不能满足我们的需求,实际上,我们需要用到html,css,js,jquery等等来构建我们的博客.在界面设计方面,我们使用Boots ...
hexo博客本地服务器显示正常,Hexo 搭建博客本地运行常见报错及解决办法
作为一名在hexo方面的新手,我在使用hexo编辑文档时遇到了很多问题,hexo generate编译的时候遇到了各种错误. 在此将这些错误及其解决方案记录下来,以便日后查证之用,同时,也可给各位在遇 ...
令人愉快的 Nuxt3 教程 (二): 快速轻松地搭建博客
令人愉快的 Nuxt3 教程 (二): 快速轻松地搭建博客继令人愉快的 Nuxt3 教程 (一): 应用的创建与配置后,我们已经成功的创建了一个 Nuxt3 应用,同时已经添加了大量的开发配置. ...

VuePress搭建博客教程(六)、vuepress配置head和自定义样式

VuePress搭建博客教程(六)、vuepress配置head和自定义样式

一、创建public文件夹

二、引入自定义样式

三、效果展示

VuePress搭建博客教程(六)、vuepress配置head和自定义样式相关推荐

最新文章

热门文章