第七周学习笔记和总结

这周主要接触了 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 下载包；
• $ 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 改成下载主题文件夹的名字。