美文网首页
第七周学习笔记和总结

第七周学习笔记和总结

作者: 水水壶 | 来源:发表于2018-07-08 21:11 被阅读0次

    这周主要接触了 BootstrapNode 和 npmlinux 常用命令,也尝试 用 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 改成下载主题文件夹的名字。

    相关文章

      网友评论

          本文标题:第七周学习笔记和总结

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