VuePress项目搭建
VuePress项目搭建
VuePress项目搭建 AirHua-byte 6/2/2021 other 10分钟搭建个人博客,属于自己的小屋 这是一个纷繁的时代,信息渠道已经多到快让人喘不过气来。 而个人博客这种来自互联网初的载体,似乎与这个环境显得格格不入。 就像大海中的小岛,在海浪中显得那么不起眼,但它的存在本身就彰显了一种意义。 无论是波涛汹涌,还是风平浪静,它都在那里,而你的心也就找到了一处可以停靠的港湾。 关于VuePress VuePress(opens new window) 主题:一款简洁而优雅的 vuepress 博客 & 文档 主题。 vuepress-theme-reco(opens new window) 环境搭建 安装node8.0+ node官网(opens new window) # 设置淘宝镜像源 npm config set registry https://registry.npm.taobao.org # 查看使用的镜像源 npm config get registry # 安装淘宝镜像源 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装官网提示下载安装包安装即可 安装完成后打开命令行工具,输入node -v,若返回版本信息则安装成功。 创建博客工程 # 安装vuepress npm install vuepress -g # 安装脚手架工具 npm install @vuepress-reco/theme-cli -g # 创建项目 theme-cli init my-blog #my-blog可替换成自己需要的项目名称AIA 上述命令执行后,在命令行窗口会进行一系列的信息配置 ? What's the title of your project? #键入您的项目标题 ? What's the description of your project? #键入您的项目描述 ? What's the author's name? #键入作者姓名 ? What style do you want your home page to be?(Select afternoon-grocery, if you want to download reco_luan's '午后南杂') (Use arrow keys) ❯ blog # 此处通过方向键选择您首页风格,这里我们选择blog doc afternoon-grocery 接下来进入您的工程目录,启动您的项目吧 # 接入项目目录 cd my-blog #my-blog替换为之前您填入的项目名称 # 安装npm npm install # 运行测试环境 npm run dev 访问命令行输出的ip地址,一般为http://localhost:8080(若端口被占用则依次递增,以终端输出为准),即可访问您的博客了! 博客配置 工程结构 ├─ node_modules #存放着项目所需的依赖,我们不需要关心 ├─ docs #该目录下存放您编写的文档 │ └─ theme-reco │ ├─ api.md │ ├─ plugin.md │ ├─ theme.md │ └─ README.md ├─ blogs #该目录下存放您编写的博客文章 │ ├─ category1 │ │ ├─ 2018 │ │ │ └─ 121501.md │ │ └─ 2019 │ │ └─ 092101.md │ ├─ category2 │ │ ├─ 2016 │ │ │ └─ 121501.md │ │ └─ 2017 │ │ └─ 092101.md │ └─ other │ └─ guide.md ├─ .vuepress # 该目录下存放项目配置文件与静态资源 │ ├─ config.js #该文件用于配置项目 │ └─ public # 该目录下存放网页中所需的静态资源 │ ├─ hero.png # 首页大图 │ ├─ logo.png # 站点logo │ ├─ favicon.ico #站点图标 │ └─ avatar.png #头像 ├─ package.json #依赖管理文件 └─ README.md #这里存放着博客首页的内容 配置启动页 启动页展示的内容为博客标题与描述,即您在创建工程时输入的内容 您可以在.vuepress/config.js下找到如下内容,通过修改对应的字符来改变您的启动页 // .vuepress/config.js module.exports = { "title": "test", "description": "test", } 配置首页 首页即为启动页之后的主页面 首页的内容由项目根目录下的README.md 配置生成,您可以通过更改其中的配置项来变更您的首页 --- home: true #指定该文件为您的首页,改为false则不作为首页 heroText: vuepress-theme-reco #首页居中显示的文本 tagline: A simple and beautiful vuepress blog theme. # 首页显示的标语 # heroImage: /hero.png #首页显示的主图,默认被注释,取消注释可显示图片 # heroImageStyle: { # 首页主图的样式控制,默认被注释 # maxWidth: '600px', # width: '100%', # display: block, # margin: '9rem auto 2rem', # background: '#fff', # borderRadius: '1rem', # } bgImageStyle: { #背景图片样式 height: '450px' } # 以下内容基本上不生效,可以不用关心 isShowTitleInHome: false actionText: Guide actionLink: /views/other/guide features: - title: Yesterday details: 开发一款看着开心、写着顺手的 vuepress 博客主题 - title: Today details: 希望帮助更多的人花更多的时间在内容创作上,而不是博客搭建上 - title: Tomorrow details: 希望更多的爱好者能够参与进来,帮助这个主题更好的成长 --- Tip:代码中所引用的图片,均以.vuepress/public 为根目录 到此为主,您会注意到首页内容远不止这些,例如个人资料卡、文章列表,这些如何更改呢? 文章列表是根据您的文章自动生成的,一旦您发布的文章中的含有Front Matter,系统会自动将其收集至首页,默认按时间顺序展示 个人资料卡的头像和昵称由.vuepress/config.js进行配置,您可以找到如下内容,并进行修改配置。Category和Tag项则跟您的文章中标注的分类和标签自动生成 "author": "AirHua-byte", //昵称 "authorAvatar": "/avatar.png", //头像 Friend Link 则是您可以自由更改的,它的配置在.vuepress/config.js中,您可以找到如下内容,并对应进行修改配置,如果可以的话,您可以尝试将本站点添加为友链~ "friendLink": [ { "title": "AirHua-byte", //友联标题 "desc": "敲键盘、按快门与拨琴弦", //友链描述 "email": "3301833942@qq.com", //友链邮箱 "link": "http://huabyte.com" //友链地址 }, { "title": "vuepress-theme-reco", "desc": "A simple and beautiful vuepress Blog & Doc theme.", "avatar": "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png", "link": "https://vuepress-theme-reco.recoluan.com" } ], 配置底部 底边栏展示了如主题、备案信息、版权、年份等信息,这些内容仍需要您前往.vuepress/config.js进行修改 "author": "me", //版权信息,与昵称为同一数据 "record": "xxxx", //备案信息 "startYear": "2017" //开始年份 配置导航栏 logo 您需要前往.vuepress/config.js找到如下内容,修改您的logo图片,该图片存储在.vuepress/public中 "logo": "/logo.png", 搜索 您需要前往.vuepress/config.js找到如下内容,修改搜索相关配置 "search": true, //是否开启搜索 "searchMaxSuggestions": 10, //最多的搜索建议条目 导航 您需要前往.vuepress/config.js找到如下内容,修改导航相关配置 其中: 导航文本为导航按钮所展示的文字信息 路由地址即为跳转路径,根目录/对应您项目的根目录,在项目打包时会将对应目录下的README.md文件生成为index.html,例如您想将链接指向您的/docs/myDocument/README.md,则将link内容改为`/docs/myDocument,便可访问到您的文档。 图标则为导航文本左边显示的图标,可以在reco图标库 (opens new window)中寻找您需要的图标,也可以不要图标 "nav": [ //如下代码中,每个{...}即为一个导航块 { "text": "Home", //导航文本 "link": "/", //路由地址 "icon": "reco-home" //图标 }, { "text": "TimeLine", "link": "/timeline/", "icon": "reco-date" }, { "text": "Docs", "icon": "reco-message", "items": [ { "text": "vuepress-reco", "link": "/docs/theme-reco/" } ] }, { "text": "Contact", "icon": "reco-message", "items": [ { "text": "GitHub", "link": "https://github.com/recoluan", "icon": "reco-github" } ] } ], 或许您已经注意到,如果需要配置一个像Docs或者Contact这样的折叠的导航应该如何做呢?他们并不会直接跳转到对应的目标地址。 折叠导航的配置仍在之前所展示的导航配置代码中,现在将其单独提取出来进行分析。 即在导航块中加入一个items数组,数组元素为多个{...},是的,此{...}与导航块的{...}是同样的,所以您可以继续在其中添加文本、图标、路由等属性。 { "text": "Docs", //导航文本 "icon": "reco-message", //导航图标 "items": [ //导航子模块 { "text": "vuepress-reco", //子模块文本 "link": "/docs/theme-reco/" //子模块链接 } ] }, { "text": "Contact", "icon": "reco-message", "items": [ { "text": "GitHub", "link": "https://github.com/recoluan", "icon": "reco-github" } ] } 文档写作 Front Matter 在markdown文档的顶部插入一段yaml配置代码 一个完整的 Front Matter 案例: --- title: 烤鸭的做法 date: 2019-08-08 sidebar: 'auto' categories: - 烹饪 - 爱好 tags: - 烤 - 鸭子 keys: - '123456' publish: false --- 常用变量说明: title :文章标题,放弃通过一级目录定义标题的方式,改在 Front Matter 中定义。 date :文章创建日期,格式 2019-08-08 或 2019-08-08 08:08:08。 sidebar:是否开启侧边栏。 categories :所属分类。 tags :所属标签。 keys: 所属标签。 publish :文章是否发布。 另外还有一些Vuepress 默认主题的变量例如prev, next,请移步 官方文档(opens new window) 摘要 在markdown代码中,您将看到注释,注释前面的代码将显示在列表页面上的文章摘要中。 --- title: Vuepress使用指南(reco) date: 2020-08-16 sidebar: 'auto' categories: - 工具 tags: - vue publish: true --- ::: tip Vuepress是Vue作者尤雨溪开发的文档工具,本文采用Vuepress的reco主题进行相关配置说明 ::: <!-- more --> ### markdown正文 deploy.sh #!/usr/bin/env sh # 确保脚本抛出遇到的错误 set -e # 生成静态文件 npm run build # 进入生成的文件夹 cd public # 如果是发布到自定义域名 # echo 'www.yourwebsite.com' > CNAME git init git add -A git commit -m 'deploy' # 如果你想要部署到 https://USERNAME.github.io git push -f git@github.com:AirHua-byte/AirHua-byte.github.io.git master # 如果发布到 https://USERNAME.github.io/<REPO> REPO=github上的项目 # git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages cd -
 2022-5-26
小程序组件-父子组件之间的通信
小程序组件-父子组件之间的通信
属性绑定 用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容的数据 父组件的data data: { count: 99 }, 父组件的结构 <test4 ccount="{{count}}"></test4> <view> 数据:{{count}}</view> 子组件 /** * 组件的属性列表 */ properties: { ccount:Number }, 子组件的结构 <view>这是组件4</view> <view>父组件传递过来的数据:{{ccount}}</view> 事件绑定 用于子组件向父组件传递数据,可以传递任意数据 在父组件的 js 中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件 syncount(e){ console.log(e.detail.value); this.setData({ count1:e.detail.value }) }, 在父组件的 wxml 中,通过自定义事件的形式,将步骤 1 中定义的函数引用,传递给子组件 {{count1}} <test5 bind:sync="syncount"></test5> 在子组件的 js 中,通过调用 this.triggerEvent('自定义事件名称', { / 参数对象 / }) ,将数据发送到父组件 addcount(){ this.setData({ count:this.data.count+1 }) // 调用父组件的sync函数 this.triggerEvent('sync',{value:this.data.count}) } 在父组件的 js 中,通过 e.detail 获取到子组件传递过来的数据 syncount(e){ console.log(e.detail.value); this.setData({ count1:e.detail.value }) },
 2022-5-26
小程序组件-插槽
小程序组件-插槽
什么是插槽 在自定义组件的 wxml 结构中,可以提供一个 slot 节点(插槽),用于承载组件使用者提供的 wxml 结构。 单个插槽 在小程序中,默认每个自定义组件中只允许使用一个 slot 进行占位,这种个数上的限制叫做单个插槽。 新建组件-在wxml中添加 <slot></slot> 在app.json里面定义组件 "usingComponents": { "test3":"/components/test3/test3" } 多个插槽 <slot name="a1"></slot> <slot name="a2"></slot> <slot name="a3"></slot> 在组件的js里面开启插槽 options:{ // 开启多个插槽 multipleSlots:true },
 2022-5-26
Python爬虫
Python爬虫
安装requests和bs4 安装requests pip install requests 安装bs4 pip install bs4 爬取豆瓣电影数据 # 获取页面 import requests as req # 1.向服务器发送请求 url="https://movie.douban.com/top250" header={ "User-Agent":"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.62 Safari/537.36" } html = req.get(url,headers=header).content.decode("utf-8") # 2.保存文件到本地 with open("top250.html","w",encoding="utf-8") as f: f.write(html) print(html) 数据处理 from bs4 import BeautifulSoup soup = BeautifulSoup(open("top250.html",encoding="utf-8"),"html.parser") print(soup) print(soup.find_all("a",class_="")) 获取所有标题 # 这里获取的爬取之后保存到本地的文件 soup = BeautifulSoup(open("hkiii.html",encoding="utf-8"),"html.parser") text = soup.select(".loglist_title") # 获取标签内的文字 for t in text: print(t.text) 爬取结果
 2022-5-25
axios配置
axios配置
关于Axios Axios,是一个基于promise的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。 全局配置 <body> <button onclick="search()">查询</button> <button onclick="add()">添加</button> </body> <script> // axios的配置 1.全局配置 2.自定义配置 axios.defaults.baseURL='http://localhost:8080/user' // 设置超时时间 axios.defaults.timeout = 3000 function search() { var url= 'search'; axios.get(url).then().catch(err=>{ console.log(err.message) }) } function add() { var url= 'add'; axios.get(url).then().catch(err=>{ console.log(err.message) }) } </script> 自定义配置 <body> <button onclick="search()">查询</button> <button onclick="add()">添加</button> </body> <script> // axios的配置 1.全局配置 2.自定义配置 const ax = axios.create({ baseURL:'http://localhost:8080/user', timeout:'3000' }); function search() { var url= 'search'; ax.get(url).then().catch(err=>{ console.log(err.message) }) } function add() { var url= 'add'; ax.get(url).then().catch(err=>{ console.log(err.message) }) } </script>
 2022-5-24
emlog模板-新拟态效果
emlog模板-新拟态效果
模板图片 关于模板 该模板基于Emlog默认模板开发,暂时没添加什么新功能,模板交流群:138778739,欢迎大家反馈问题! 更新内容 2022-05-23 首页不完全显示 手机端不显示侧边栏 首页描述超出 2022-5-25 首页新增笔记 优化阅读文章页面样式 模板下载 正版用户直接在模板商店下载即可,盗版用户勿扰!
 2022-5-23
Es6语法笔记(部分)
Es6语法笔记(部分)
Es6语法介绍 ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。 ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。 完整代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> .box-item{ width:100px; background-color: aquamarine; height: 50px; text-align: center; line-height: 50px; margin: 10px; } #ad{ width: 200px; height: 200px; background-color: bisque; } </style> <body> <div class="box-item">1</div> <div class="box-item">2</div> <div class="box-item">3</div> <div id="ad"></div> <script> //let小demo item = document.getElementsByClassName("box-item"); for (let i = 0; i < item.length; i++) { item[i].onclick=function(){ this.style="background-color:red"; this.innerText="我被点击了" } } // 数组的解构 const F4 = ['小沈阳','刘能','赵四','宋小宝']; let [xiao,liu,zhao,song]=F4; console.log(xiao); console.log(liu); console.log(zhao); console.log(song); // 对象的解构 const zhaobs = { name:'赵本山', age:'不详', xiaoping:function(){ console.log("我也可以演小品") } } let {name,age,xiaoping}=zhaobs; console.log(name); console.log(age); console.log(xiaoping); xiaoping(); // es6引入新的声明字符串的方式【``】 // 1.声明 let str = `我是字符串`; console.log(str,typeof str) // 2.内容中可以直接出现换行符 let strTwo = ` <ul> <li>box1</li> <li>box2</li> <li>box3</li> </ul>`; // 3.变量拼接 let lovest = '杨幂'; let out = `${lovest}是我最喜欢的演员`; console.log(out) // Es6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。 // 这样写更简洁 let namee = '大彭Sir'; let change=function(){ console.log('我贼能吃!!!') } const bi ={ namee,change} console.log(bi) // Es6允许使用箭头(=>)定义函数。 let fn = (a,b) => { return a+b; } let sum = fn(10,20) console.log(sum) // this是静态的.this始终指向函数声明时所在作用域下的this得值 function getName(){ console.log(this.name); } let getName2 = () =>{ console.log(this.name);//无法改变指向 } window.name = '彭Sir' const es = { name:'PengSir' } getName.call(es); getName2.call(es); // 不能作为构造函数实例化对象 // let person = (name,age) =>{ // this.name = name; // this.age = age; // } // let me = new person('xiao',30); // person is not a constructor // console.log(me); // 箭头函数的简写,当型参有且只有一个可以省略括号 let add = n =>{ console.log(n+n) } add(1) // 当代码体只有一条语句的时候可以省略花括号,return必须省略 // 语句执行结果就是函数的返回值 let pow = n =>n*n; console.log(pow(10)); // 箭头函数demo // 需求一:点击div 2s 后颜色变成 粉色 let ad = document.getElementById('ad'); ad.onclick = function(){ setTimeout(()=>{ this.style.background="pink" },2000) } // 需求二:从数组中返回偶数的元素 const arr = [1,6,9,10,100,25]; // 普通方法 // const result = arr.filter(function(item){ // if (item % 2 === 0) { // return true // } else{ // return false; // } // }); // 箭头函数 const result =arr.filter(item=>item%2===0) console.log(result) // 箭头函数适合与this无关的回调。定时器、数组方法的回调 // 箭头函数不适合与this有关的回调。时间回调,对象的方法 </script> </body> </html>
 2022-5-21
    名片赞助手
    小程序
    node
    笔记
    系统
    模板
    web
    Vue脚手架
    爬虫
    Downie4
    代码高亮
    箭头函数
    铭记国耻
    插槽
    数据库
    空间
    QQ小程序
    软件
    铭记
    Spring-MVC
    css
    文章
    工具
    测试
    axios
    插件
    源码
    教学
    QQx
    正则表达式
    表白墙
    SEO
    递归算法
    Json
    Brief
    SQL
    墨菲定律
    VuePress
    教程
    jQuery
    服务端
    Servlet
    电脑
    robots
    MYSQL
    图片上传
    内容安全
    新拟态效果
    Emlog小程序
    编程
    缓存
    Es6
    弹性布局
    VUE
    Mac
    晚安心语
    三层架构
    微信小程序
    图形
    Java
    IO流
    PS
    javaScript
    九一八事变
    代码
    PHP
    ajax
    js
    QQ
    Spring
    心情
    封装
    页面
    uniapp
    Mybatis
    邮箱验证
    事件
    轮播图
    前端
    安装
    Python
    Fabric
    自动化测试
    下载
    nodejs
    SSM
    emlog
    伪静态
    Vuex
    说说
    promise
    组件
    微信
    PhotoShop
    表单提交
    JSP
    HTML

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

标签