VuePress博客构建教程(6)、VuePress配置头、自定义风格lmdyx哥哥博客
另一方面，创建public文件夹并在. vuepress目录下创建public文件夹，在public文件夹下放置两个文件Beauty.jpg和icon.jpg，分别作为主界面的图标
在config.js中引入icon.jpg的头图标：
在head: [ ['link '，{rel: 'icon '，href:'/icon.jpg'}]docs下的自述. MD主页文件中引入Beauty.jgp文件
在heroImage: /Beauty.jpg、引入自定义样式. vuepress目录下创建styles文件夹。 此文件夹用于存储全局样式文件，并在此文件夹下创建index.styl文件。 内容如下。
. theme-default-content h1 border-bottom3pxsolidrgb (0，172，193 ) padding 20 px0px 20 px font-size 24 px.theme-defauaurgb 193 ) padding 15 px0px 15 px0px font-size 20 px.theme-default-contentpmargin 336015 px0px 15 px0px；/* prism js1. 24.1https://prism js.com/download.html # themes=prism-tomorrow languages=markupcssclikejavascript */markupcssclikejavascript prism.jstomorrownighteightiesforjavascript，CoffeeScript， cssandhtml * based on https://github.com/chriskempson/tomorrow-theme * @ authorrosepritchard */code [ class *=' languaguage ] font-family: Consolas，Monaco，' Andale Mono '，' Ubuntu Mono '，monospace； font-size: 1em； 文本对齐：左对齐； white-space: pre； 魔兽世界： normal； 魔兽世界： 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； 惠普：无； }/* codeblocks */pre [ class *=' language-' ] { padding 33601 em； margin:5em 0； Overflow :自动； }:not(pre ) code(class*='language-'，pre ) class *=' language-' } { background 3360 # 2d2d； }/*在线代码*/: not (pre )代码(class *=' language-' )填充：1 em； border-radius:3em； white-space :正规； }.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 : # 6196 cc； }.token.boolean， token.number， token.function { color : # f08d 49； }.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 3360 # 7ec 699； }.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的样式。 如果你想定制自己的代码样式，可以到这个官方网站下载满足你需求的css文件。 另外，index.styl文件的前几行添加了我自己写的标题样式。 根据需要，大家一起添加各种风格就可以了。
三、看看效果的展示效果。
将显示头图标和主界面图标。
还将显示自定义的h1和h2样式。