(16)打鸡儿教你Vue.js

作者: 魔王哪吒 | 来源:发表于2019-07-01 17:41 被阅读15次

博客:
Hexo搭建个性博客

https://hexo.io/zh-cn/

快速、简洁且高效的博客框架

超快速度
Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。

支持 Markdown
Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。

一键部署
只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。

丰富的插件
Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。

npm install hexo-cli -g

hexo init blog

cd blog

npm install

hexo server

安装hexo

npm install hexo-cli -g

初始化Hexo
D:\> hexo init blog

获取博客主题
git clone https://github.com/WeicMa/Hexo-Theme-Life.git themes-life

_config.yml 可称为站点配置文件

编译命令:hexo g

启动命令:hexo s

_config.yml中配置Git

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: '这里填写你自己的项目地址'
root: '这里写项目名称'
permalink: :year/:month/:day/:title/
permalink_defaults:

安装自动部署发布工具:
npm install hexo-deployer-git --save

hexo clean && hexo g && hexo d

文章直接放在/Hexo/source/_posts目录下

什么是hexo?
安装,git,node.js,hexo

$ npm install -g hexo-cli

安装 Git

  • Windows:下载并安装 git.

安装 Node.js

安装 Node.js 的最佳方式是使用 nvm

安装 Hexo

$ npm install -g hexo-cli
image.png
image.png image.png

使用 git 将主题 clone 至你的 hexo 博客项目下的 themes 文件夹下

cd themes && git clone https://github.com/Mrminfive/hexo-theme-skapp.git

clone 完后将根目录下的 _config.yml 文件中的 theme 字段设置为 hexo-theme-skapp,同时安装对应 node 依赖:

npm install --save hexo-autoprefixer hexo-filter-cleanup hexo-generator-feed hexo-generator-sitemap hexo-renderer-sass hexo-renderer-swig mamboer/lunr.js moment node-sass object-assign

注意:如果安装失败可尝试用 cnpm 进行安装。另外,由于使用 nodejieba 分词库,所以 windows 下用户应提前安装好相应编译环境。操作如下:

npm install -g windows-build-tools
npm install -g node-gyp

主题设置:

编辑根 _config.yml 文件,将 language 设置为你想要的语言:

language: zh-cn

设置菜单
编辑根 _config.yml 文件,将 menu 设置为如下:

menu:
  home: / 
  archive: /archives
  about: /about

主题默认的菜单项有:

键值 设定值 显示文本(简体中文)

home    home: / 首页
archive archive: /archives  归档
about   about: /about   关于
search  search: /search 搜索页

创建 about 页面:

hexo new page about

创建 search 页面:

hexo new page search

博客配置:

# Site
# 博客的标题
title: MINFIVE

# banner显示的子标题
subtitle: MINFIVE BLOG

# banner显示的简短介绍
subtitle_desc: 日常学习与兴趣交流

# seo关键字
keywords: minfive, minfive blog, 前端博客, 前端, 程序员, 前端开发, 全栈开发, node.js, javascript

# 博客介绍(同时用于seo)
description: 日常学习与兴趣交流的个人博客

# 个人介绍
introduction: 不思量,自难忘!

# 博客的favicon图标,支持本地及在线两种方式,本地请将图标放置于 themes/hexo-theme-skapp/source/img 目录下
favicon_ico: https://blog.static.minfive.com/other/favicon.ico

# 博客的左上角logo图标,支持本地及在线两种方式
logo: http://oo12ugek5.bkt.clouddn.com/images/logo-text-white.png

# 头像/二维码(用于显示在底部)二选一
avatar: http://oo12ugek5.bkt.clouddn.com/images/qrcode.png
# qrcode: http://oo12ugek5.bkt.clouddn.com/images/qrcode.png

# 文章的默认封面
default_cover: http://oo12ugek5.bkt.clouddn.com/images/default_cover.png

# header 的背景图
header_cover: https://blog.static.minfive.com/other/banner-bg.jpg

# 404 页面的背景图
error_page_bg: https://blog.static.minfive.com/other/dogs.jpg

# 页面加载loading图标
loader_img: https://blog.static.minfive.com/other/loader.gif

# 站长信息
author:
  name: 
  link: 
# 用于页面 footer 的站长信息
about:
  info: 本站是基于 Hexo 搭建的静态资源博客,主要用于分享日常学习、生活及工作的一些心得总结,欢迎点击右下角订阅 rss。
  address: Guangzhou, Guangdong Province, China
  email: 

icon-email: 邮箱
icon-rss: rss
icon-in: linkedin
icon-twitter: twitter
icon-facebook: facebook
icon-github: github
icon-zhihu: 知乎
icon-douban: 豆瓣
icon-weibo: 微博
icon-telegram: telegram

https://github.com/Mrminfive/hexo-theme-skapp/blob/master/README-cn.md


请点赞!因为你的鼓励是我写作的最大动力!

官方微信公众号

吹逼交流群:711613774

吹逼交流群

相关文章

  • (16)打鸡儿教你Vue.js

    博客:Hexo搭建个性博客 https://hexo.io/zh-cn/ 快速、简洁且高效的博客框架 超快速度No...

  • (2)打鸡儿教你Vue.js

    Vue双向绑定 语法:v-bind:title="msg"简写::title="msg" key属性 -class...

  • (3)打鸡儿教你Vue.js

    vue.js是一套构建用户界面的渐进式框架vue关注视图层,采用自底向上增量开发的设计 vue.js安装下载 vu...

  • (20)打鸡儿教你Vue.js

    vue-cli 快速创建工程,工程化项目目录 https://www.bootcdn.cn/ https://ww...

  • (21)打鸡儿教你Vue.js

    组件化思想: 组件化实现功能模块的复用 高执行效率 开发单页面复杂应用 组件状态管理(vuex) 多组件的混合使用...

  • (23)打鸡儿教你Vue.js

    实例: 模板语法vue-router,vuex以及调式方法介绍打包部署: Webpack 目前无论在求职还是工作中...

  • (22)打鸡儿教你Vue.js

    vue.js 单页面,多页面 Vue cli工具复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代...

  • (27)打鸡儿教你Vue.js

    v-for 数组参数的顺序 当含有index时,以前传递的参数顺序是:(index, value)。现在(valu...

  • (19)打鸡儿教你Vue.js

    了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli...

  • (26)打鸡儿教你Vue.js

    weex框架的使用 1、weex开发入门2、weex开发环境搭建3、掌握部分weex组件模块4、了解一些vue基本...

网友评论

    本文标题:(16)打鸡儿教你Vue.js

    本文链接:https://www.haomeiwen.com/subject/meagcctx.html