博客作为一个记录与分享工具是十分必要的,当前各大博客网站CSDN、简书、掘金等每天都有大量的分享文章出来,当然我们可以把文章分享到这些平台,不过我认为拥有一个可控的、定制的个人博客网站才是一个更酷的事情,而vuepress是当前非常火热的博客搭建框架。
vuepress1.0 到目前已经发布了 beta 版,其中最重要的修改是主题能够实现继承,再也不用 vuepress eject 把默认主题拉过来修改,更麻烦不说,也让 vuepress 项目不容易升级,所以以下分析都是建立在 vuepress1.0 下。
# 安装
yarn global add vuepress@next # 或者:npm install -g vuepress@next
# 新建项目文件夹
mkdir vuepress-test
# 进入项目
cd vuepress-test
# 创建docs文件夹
mkdir docs
# 新建一个 markdown 文件
echo '# Hello VuePress theme!' > docs/README.md
# 生成package.json文件
npm init
# 在package.json中添加脚本
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
# 运行
yarn docs:dev
把默认主题复制到项目
vuepress eject
发现项目中出现了.vuepress文件夹,此文件夹下就是存放的默认主题,不过当前修改主题也不会有任何效果,复制过来只是方便查看
查看官方文档发现Layout.vue文件是vuepress的入口,打开 theme/Layout.vue
<Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar"/>
<!-- 这块代码是主题的头部,shouldShowNavbar是判断是否显示头部
toggleSidebar是当屏幕出现在手机端目录隐藏或显示的判断-->
<div class="sidebar-mask" @click="toggleSidebar(false)"></div>
<!-- 在移动端时点击内容部分目录会隐藏 -->
<Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar">...</Sidebar>
<!-- 侧边栏 -->
<div class="custom-layout" v-if="$page.frontmatter.layout">
<component :is="$page.frontmatter.layout"/>
</div>
<!-- 内容显示部分,可通过在md文件中使用layout: xxx.vue作为布局组件 -->
<Home v-else-if="$page.frontmatter.home"/>
<!-- 如果md文件中有 home:true 就使用该组件 -->
<Page v-else :sidebar-items="sidebarItems">
<slot name="page-top" slot="top"/>
<slot name="page-bottom" slot="bottom"/>
</Page>
<!-- 一般的md文件使用的组件 -->
这里主要是通过一些判断加载对应的组件,Navbar是头部显示组件,Sidebar是侧边栏组件,Home为默认的主页,Page为显示文档内容的组件
<SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/>
<!-- 适配移动端,展示隐藏目录的按钮,默认主题对移动端的适配下足了
功夫,这也是我改造默认主题而不是自定义主题的原因,自己写主题当然也
能实现,但是无疑会花上加倍的时间,很多第三方主题都不支持移动端-->
<router-link :to="$localePath" class="home-link">...</router-link>
<!-- 左边部分博客的标题的配置,这部分有title和logo,都是从config.js中读取的 -->
<div class="links" :style="{
'max-width': linksWrapMaxWidth + 'px'
}">
<AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia"/>
<SearchBox v-else-if="$site.themeConfig.search !== false"/>
<NavLinks class="can-hide"/>
</div>
<!-- 这块是目录部分,共三个组件,第一个是配置文件配置了algolia的,使用algolia组件(此组件需去官方网站注册,作用是提供全文搜索),
第二部分是默认的搜索组件,
第三部分是目录组件-->
先新建文件及文件夹,以下是最简单的继承目录
docs
|_.vuepress
|_theme
|_components
|_Navbar.vue
|_loyouts
|_Layout.vue
|_index.js
在 theme 新建 index.js 文件,输入以下内容
module.exports = {
extend: '@vuepress/theme-default'
}
这里有个坑,当时在官方文档中怎么也找不到上面的代码应该放到哪里,试了很久才发现应该放到theme目录下,如果这里没有配对,修改的样式不仅可能不会生效页面可能还会出现白屏
在 theme 下新建 layouts 目录,在 layouts 下新建 Layout.vue,修改 Layout.vue 文件,比如在顶部dom中添加一个test,如果页面出现这个test说明继承成功。
VuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。
全局安装;新建一个文件夹 (例如 my-vuepress-test);打开自动生成的package.json文件,默认创建的文件如下;然后在scripts属性中输入一下指令;然后在my-vuepress-test夹中创建docs文件夹,然后在创建README.md文件
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!