这周主要接触了 Bootstrap
、Node 和 npm
、linux 常用命令
,也尝试 用 Hexo 搭建了自己的博客
。
一、Bootstrap 全局 css 样式
我在 这篇文章 里学习的 Bootstrap,写的很详细,在这里简单的总结一下学习的主要内容,加深一下印象。
1. 布局
.container-fluid
表示宽度是100%,内容前后会有两个字符的缩进,
.container
表示宽度差不多是屏幕的 3/5 ,且水平居中。
2. 表格
class 属性 | 说明 |
---|---|
.table |
就会出现表格排列方式,组之前有间隔; |
.table-bordered |
给表格加边框; |
.table-striped |
给表格添加背景颜色,斑马条纹样式; |
.table-hover |
鼠标停留背景颜色加深 |
.table-condensed |
行与行之间距离表小 |
.active |
设置行或者单元格为浅灰色 |
.success |
设置行或者单元格为浅绿色 |
.info |
设置行或者单元格为浅蓝色 |
.warning |
设置行或者单元格为浅黄色 |
.danger |
设置行或者单元格为浅红色 |
3. 表单
表单类型:垂直排列、水平排列、内联排列。
表单元素:单行文本框(input)、多行文本框(textarea)、下拉框(select)、单选按钮(input type="radio")、多选按钮(input type="checkbox")、上传文件(input type="file")。
关于表单类型与元素的具体写法,我也用的不是很熟,每次用都会去官网查看。
4. 按钮
class属性 | 说明 |
---|---|
.btn |
可以给 a、input、button 标签设置按钮样式 |
.btn-default |
给按钮设置颜色 |
.btn-primary |
给按钮设置颜色 |
.btn-success |
给按钮设置颜色 |
.btn-info |
给按钮设置颜色 |
.btn-warning |
给按钮设置颜色 |
.btn-danger |
给按钮设置颜色 |
.btn-lg |
设置超大按钮 |
.btn-sm |
设置小按钮 |
.btn-xs |
设置超小按钮 |
二、Node 和 Npm
1. Node
浏览器包含v8引擎,v8引擎能把js代码翻译成0和1 这样电脑就能读出来;
Node也包含v8引擎,所以Node环境也是可以运行js代码的;
在电脑上安装Node,就可以运行js。
2. Npm(Node Package Manager)
Npm 是 node 的包管理器,那么包是什么?
模块
:在 node 环境下一个 js 文件就是一个模块,一个模块通常只实现单一功能,通过 module.exports
将模块内的方法或者属性导出去,也可以通过 require()
导入其它模块提供的方法或者属性。
包
:是一系列模块组成的,完成一个相对复杂的功能。Npm 有个官网,我们可以把自己写的包上传上去,也可以在上面下载自己需要的包,然后可以直接调用里面的方法实现功能,就不用自己再写代码。
// sum.js 加法
function sum (a, b) {
return a + b;
}
module.exports = sum;
// index.js
const sum = require('./sum');
const value = sum(2, 2);
console.log(value)
3. 发布 Npm 包
- 在 package.json 里面写好包的名称和版本;
- 在 Npm 官网注册一个帐号;
-
$ npm login
输入账户和密码; -
$ npm publish
发布包。
我上传的包 yml-calc
。
4. Npm 常用命令总结
-
$ npm init -y
快速生成 package.json 文件; -
$ npm install <pkgname>
下载包; -
$ npm login
登陆npm官网; -
$ npm publish
上传包到官网。
三、Linux 常用属性
命令 | 说明 |
---|---|
mkdir |
创建文件夹 |
touch |
创建文件 |
pwd |
显示当前目录所在路径 |
cd |
切换目录 |
ls |
查看当前目录的子文件 |
mv |
重命名 |
. |
当前目录 |
.. |
当前目录的上一级目录 |
这周学习的几个单词
- publish 发布,发版(图书)
- verify 校验
- log 日志
- dependencies 依赖
- init 初始化
- install 安装
四、接触 Hexo
1. hexo-cli
$ npm install hexo-cli
安装这个包之后,它会提供 hexo 命令。
-
hexo init yml
创建博客模板文件; -
hexo server --port 3000
运行 node 程序,设置打开的端口是 3000; -
hexo new “文章的名字”
创建一篇文章; -
hexo g
生成 html 静态页面。
2. Hexo 目录结构
|-- node_modules 这个项目依赖的包放在这里
|-- scaffolds 模板。使用 hexo new 的时候会用这里面的模板
|-- source
|-- _posts 写的文章都放在这里面 +++++
|-- themes 主题目录 ++++
|-- _config.yml 配置文件 +++++
|-- .gitignore git 忽略文件
|-- db.json
|-- package-lock.json 记录下载包的信息,版本/源文件路径
|-- package.json 这个工程介绍文件
3. 怎么换主题
- 从 github 选择一个主题下载下来;
- 把主题放在 thems 目录下;
- 把 _config.yml(配置文件)里面的 themes 改成下载主题文件夹的名字。
网友评论