VuePress使用教程前言作为一个程序员,拥有一个自己的博客网站算得上是家常便饭了 每当我们解决一个问题时,及时总结并记录下来是一个对学习很有帮助的习惯,方便以后遇到同类型的问题时,不用再去百度谷歌找半天。而将这些内容发布在自己的博客网站上,同样也可以让其他遇上同样问题的人看到,并帮助到他们。借用在一个个人博客上看到的一句话:对任何渴望进步的人来说,写博客/文章/回答对自己的成长帮助都是巨大的。
前言市面上的博客框架有很多,鉴于vuepress是静态博客框架,可以部署到GitHub Pages而不用自己提供服务器,并且对前端也非常友好,因此我选择了vuepress主题选用了vuepress-theme-hope。准备工作mkdir vuepress-demo cd vuepress-demo npm init vuepress-theme-hope docs这里的 docs 是一个参数,
介绍此主题继承至vuepress的默认主题,添加功能有标签页改造,主页改造,博客分类及展示,gitalk集成及gitalk自动化配置,最新google Analytics集成等。使用npm install vuepress-theme-reform -D # or yarn add vuepress-theme-reform 复制代码然后在docs/.vuepress/config.js文件中添加
VuePress 如何自定义主题和页面布局要自定义VuePress主题,需要做以下几步:创建主题文件夹:在VuePress项目的根目录下创建一个themes文件夹,并在其中新建一个以主题名命名的文件夹,例如my-theme。创建主题配置文件:在my-theme文件夹中创建一个config.js文件,用于配置主题的一些选项,例如导航栏、侧边栏、颜色等。创建主题模板文件:在my-theme文件夹中创
vuepress 基本配置::: tip 本页所列的选项仅对默认主题生效。如果你在使用一个自定义主题,选项可能会有不同。 :::首页配置首页配置文件是doc目录下的README.md文件,以下是一个如何使用的例子:--- home: true heroImage: /hero.png heroText: Hero 标题 tagline: Hero 副标题 actionText: 快速上手 → ac
首先附上vuepress官网: 介绍 | VuePress 正如官网上介绍的一样,vuepress由两部分组成: 极简静态网站生成器,默认主题(为写技术文档儿优化的)。这里我们先了解下如何搭建一个静态网站。目标:搭建一个类似如下的文档:没错,我除了看文档,还借鉴了这位大神的技术博客。附上链接: 搭建步骤:1. 创建并进入一个新目录,然后初始化。  2. 将
最近熬了很多个夜晚, 踩坑无数, 终于写出了用VuePress驱动的主题.只需体验三分钟,你就会跟我一样,爱上这款主题.vuepress-theme-indigo-material, 已经发布到npm, 请客官享用~~介绍vuepress-theme-indigo-material 的原主题是hexo-theme-indigo, github 的 star 数高达2042, fork 的有451个
前言上一章已经讲了 vuepress 主题如何实现继承,这样我们可以任意修改默认主题的任何组件及样式了。我们知道 vuepress 是无法自动根据我们 markdown 文件中的--- tags: - js - vue --- 复制代码生成标签云的页面的,而一个博客,标签在其中有知识分类及导航功能,是必不可少的一环,下面带领大家来改造一下默认主题让它能支持自动生成标签云页面第一步配置的修改既然是主
转载 1月前
17阅读
当我们的组件库具备一些组件之后,需要开发者能够更流畅地使用,就需要有使用文档。这里我是用vuepress来搭建对应的开发文档。关于如何独立地使用vuepress,我之前地文章可以参考本文地内容也是和这个差不多,只不过整合了vue的组件使用范例。一,安装VuePressnpm install -D vuepress二,新建基础文件根目录下新建如下文件:--docs ----README.md ---
VuePress 由两部分组成:一部分是支持用 Vue 开发主题的极简静态网站生成器,另一个部分是为书写技术文档而优化的默认主题。在VuePress应用的目录里面,一个.md文件可以生产一个.html文件,文件夹目录下默认访问README.md文件,也就相当于目录下的index.html,所以本地测试环境访问的链接如:http://localhost:8081/bar/barOne.html。确保
前言看见大部分前端人都有自己博客,骤然发现自己还没有自己的博客,这可不行!别人有的 我也要有! ps:我有自己的域名和服务器。本文详细说了自己如何快速使用VuePress快速搭建个人博客,看完不会打我(开玩笑的,大家不用看也是会的,但是可以帮我指出不足)。技术选用VuePress ,进入VuePress官网,快速上手。上手VuePress1.创建并进入一个新目录2.使用你喜欢的包管理器进行初始化3
推荐一款惊艳的VuePress主题:IndigoVuePress 是由 Vue.js 作者尤雨溪开发的一款轻量级静态站点生成器,它让编写文档变得更加便捷、美观。而今天我要向大家推荐的是一个基于 VuePress 的优秀主题——VuePress Theme Indigo。这是一个优雅且功能丰富的主题,为你的技术博客或文档站点提供了全新的视觉体验。项目简介是由开发者 @yscoder 制作的,其灵感来
  typecho是一款不错的php博客系统,轻便而功能完备,也有许多的支持者;但博客除了后台功能外,最重要的应该算得上是博客外观了,可是别人所作的模版一般都不大可能完全符合自己的使用习惯、或是品味。 我们有必要自己制作、或者至少:能够对已有的模版进行一些个性化的定制,那么,下面的这些小小的技巧也就是必不可少的了。你可以用它们对typecho模版进行一些人性化、个性化的改进。1,文章t
主题使用教程为站点开启伪静态,这个自己直接百度在 Typecho后台->设置->永久链接 开启地址重写功能,不然我自定将主题上传并解压主题到 站点根目录/usr/themes确保主题文件夹名为 jian在 Typecho后台->控制台->外观 中启动主题在&n
zblog主题模板:zblog主题经典两栏WordPress博客主题模板 下面介绍一下zblog主题模板: zblog主题经典两栏WordPress博客主题模板的特点: 主题采用标准的前端代码开发制作,红色百搭风格,主体最大宽度1440像素,兼容PC和移动端包括IE10+、Firefox、Chrome、Safari等浏览器在内的主流浏览器,浏览访问体验相当不错。 主题设计有多个不同的网页模块,从上
一个模块如果需要支持多套模板文件的话,就可以使用模板主题功能。 默认情况下,没有开启模板主题功能,如果需要开启,设置 DEFAULT_THEME 参数即可: 大理石平台精度等级 // 设置默认的模板主题 'DEFAULT_THEME' => 'default' 采用模板主题后,需要在视图目录下面创建
转载 2019-11-08 16:11:00
339阅读
2评论
前言想要分分钟搭建自己博客,可以直接跳到最后,教你如何分分钟搭建博客。速览预览地址 主题插件GitHub地址 个人博客部署GitHub地址 主题使用安装主题创建一个新的项目 my-blog:mkdir my-blog cd my-blog初始化 yarn 或 npm :yarn init 或 npm init -y安装 vuepressvuepress-theme-melodydl:yar
zblog主题模板:zblog主题网络工作室主题 下面介绍一下zblog主题模板: zblog主题网络工作室主题的特点: 主题比较充分的考虑了工作室公司网站的展示需求,设计有大幅轮播图片、公司简介、服务范围、作品产品、成功案例、合作伙伴、公司优势、客户评价、新闻资讯以及联系咨询共十个左右的内容模块,几乎涵盖了公司网站常用的展示模块,且每个模块都精致美观,视觉效果舒适! 用户前台提交留言,会保存到网
不满足于WordPress默认功能的站长们都会对WordPress强大的扩展功能感到好奇,进而尝试自己修改主题。对WordPress主题进行修改时,没有必要精通PHP,你需要的,只是一点基础的HTML知识和一些解决问题的常识。下载一份WordPress主题文件的副本,保存,然后打开这些主题问题,根据下面的步骤以及WordPress手册中的说明逐步了解主题文件的运转以及修改方法。这篇文章是关于Wor
zblog主题模板:zblog主题 php自适应网址导航模板 下面介绍一下zblog主题模板: zblog主题 php自适应网址导航模板的特点: 自适应式设计,支持电脑和移动设备访问; 内置便捷的后台主题配置面板; 内置基础SEO设置,支持自定义首页、分类页面、文章页面、独立页面的标题、关键词和描述; 内置[热门点评]、[热门关注]、[最新增加]、[最新信息]四个主题自带侧栏模块; 内置四个普通广
  • 1
  • 2
  • 3
  • 4
  • 5