准备工作

首先ssh连接到远程服务器控制台。用下面代码做系统更新。

sudo yum -y install epel-release
sudo yum -y update

用下面代码安装一些依赖项，对于安装Python3.9很重要

sudo yum groupinstall "Development Tools" -y
sudo yum install openssl-devel libffi-devel bzip2-devel -y

检查下gcc安装情况

$ gcc --version
gcc (GCC) 8.5.0 20210514 (Red Hat 8.5.0-4)

下载Python3.9

确保wget成功安装

sudo yum install wget -y

使用wget下载Python3.9，并解压安装包进入文件夹

wget https://www.python.org/ftp/python/3.9.13/Python-3.9.13.tgz
tar xvf Python-3.9.13.tgz
cd Python-3.9*/

安装Python3.9

在当前文件夹下执行代码来安装

./configure --enable-loadable-sqlite-extensions --enable-optimizations
make
make install

安装完毕运行python3.9和pip3.9即可使用

$ python3.9 --version
Python 3.9.13

为什么使用正则表达式

使计算机能够根据正则表达式，检查字符串的规则，提取字符串中符合规则的内容。

基础语法

检查字符

var reg = new RegExp("a","i");
reg = /a/i;

console.log(reg.test("abc"));

/* 
test() 
    检查字符串是否符合正则表达式规则
    符合返回 true 
    反之 false
*/

上面两个reg以不同方式创建，代表的都是检查字符串中是否有a。i代表匹配模式，忽略大小写。一种采取构造函数较为灵活，而第二种使用字面量的方式更为简单。

或 or

reg = /a|b|c/; 
reg = /[abc]/;
/*
检查是否含有a或b或c
*/

如果是一大串字符，采取以下写法

reg = /[a-z]/; 
reg = /[A-Z]/;
/*
检查是否含有a到z所有字母 大小写版本
*/

8月13日，阴天，结束了第一次coop。

第一次 coop, 学校的 WE Accelerate 项目，WE 选了 Microsoft stream。

花了一个月看 Microsoft 的教材然后考两场试。内容都是Azure和AI理论知识，不考操作。这段时间仅有的操作大概是教材上的命令行，感觉有点欠缺，虽然这方面也就查一下就能操作。

关于项目部分，我选择的是 AltaML - Health Canada。要求不高，内容主要偏思考，没有编程经验的人完全可以胜任这份工作。花了一个月，和小组成员拖着模块建了个模型，做了个演讲。

当然，虽然有一些吐槽的点，结果还是不错的。

可能是我第一次coop，对工作不太了解，所以吐槽了点东西吧。因为我本身比较喜欢更多的代码内容。

希望下学期能找个好工作吧。。

Create Class 创建类

在我们的源代码里面，我们已经有一个 App 类。大致是这样的：

class App extends Component {
  render() {
    return (
        /* html code */
    );
  }
}

现在我们创建一个名为 Car 的类，然后将内容返回到 App 类中，如下所示：

class Car extends Component {
  render() {
    return (
        <h1>I am a Car!</h1>
    );
  }
}

class App extends Component {
  render() {
    return (
        <div class="App">
            <Car />  
        </div>
    );
  }
}

上述代码返回的 HTML 代码等同于

<div class="App">
    <h1>I am a Car</h1>
</div>

构造器 Constructor

在讲构造器之前我们先理解一下state。state是一个存属性的对象。例如在创建的 Car 类中，加入这样的一段代码

class Car extends Component {
  constructor() {
    super();
    this.state = {
        color: "red",
    };
  }

  render() {
    return (
        <h1>I am a {this.state.color} Car!</h1>
    );
  }
}

返回的 HTML 代码等同于

<h1>I am a red Car!</h1>

在上面的代码中，我们加入了state属性，设置 color 为 red。在调用时，我们使用{ this.state.color }来获取这个属性。

Change State 改变属性

我们可以添加函数来改变属性，比如改变 color，我们就在类里加上下面的函数

changeColor = () => {
    this.setState({color: "blue"});
}

然后添加一个按钮调用这个函数，将render()写为

render() {
    return (
        <div>
            <h1>I am a {this.state.color} Car!</h1>
            <button onClick={this.changeColor}>Change Color</button> 
        </div>
    );
}

点击按钮，标题里的 red 变为 blue。

Props

Props用于传递属性给 Component，比如我们在 App 类里这样写

class App extends Component {
  render() {
    return (
        <div class="App">
            <Car brand="Ford"/>
        </div>
    );
  }
}

这段代码中的 Car 有了一个属性叫做 brand，数值为 Ford。这样我们就能在 Car 中调用这个函数，例如在render()中写

render() {
    return (
        <div>
            <h1>I am a {this.props.brand} Car!</h1>
        </div>
    );
}

这样返回的HTML代码就代表了

<div>
    <h1>I am a Ford Car!</h1>
</div>

和state不同的是，props是无法改变的属性（试图改变props会报错）

React Intro 介绍

简单来说，React 是JS的一个库，是一个做 UI的工具。

工作原理

React 的工作原理是在内存中创建一个虚拟的 DOM，在这个虚拟 DOM 中做完操作，再去更改浏览器 DOM。在使用时，React 可以直接写入 HTML。

Prerequisite 关于环境

在使用 React 前，首先先要安装 NPM 和 Node.js。不多说，直接下载链接扔在这

NPM 和 Node.js 下载

Hello World 第一个程序

如果做只是测试的话，我们可以直接写在 HTML 文件中

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
  
<div id="mydiv"></div>

<script type="text/babel">
class Hello extends React.Component {
  render() {
    return <h1>Hello World!</h1>
  }
}

ReactDOM.render(<Hello/>, document.getElementById('mydiv'))
</script>

</body>
</html>

body 段的代码运行结果等同于

<div id="mydiv">
    <h1>Hello World!</h1>
</div>

但是在写的时候最好建立 React 环境。运行下列命令

npm install -g create-react-app 
npx create-react-app firstapp

第二行命令建立了一个叫firstapp的文件夹。用下列代码可以运行

cd firstapp
npm start

就可以看到初始的界面。下一步我们可以尝试更改src/App.js来创建自己的网页。例如将 App.js改成如下的代码

import React, { Component } from 'react';
import './App.css'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello World!</h1>
      </div>
    );
  }
}

export default App;

我们将得到一个只有一个 Hello World 的网页。

首先，Django 是一个Web框架，用于开发交互式网站的工具。Django 能够响应网页请求，同时管理用户及读写数据库。

再说说为什么使用 Django。Django 从来不是一个主流的框架，Java 才是 Web 的大头。但是，这玩意上手快，写的快，封装的东西开箱即用，python 的库有多方便不用我多说吧。当然，这东西限于小项目，和 Flask 相比也不太灵活（完成任务 Django 合适，加深理解 Flask 更好），当然尝试一下没什么问题。

废话不多说，直接上手。

建立项目

激活虚拟环境

Python安装不提。首先我们先创建虚拟工作环境。新建文件夹，切换到文件夹目录下，打开 Git Bash 然后执行下列命令

$ python -m venv env

建立完之后我们得到一个文件夹env，找到 activate 的位置并激活。运行如下

$ source env/scripts/activate
(my_project)

括号代表的是环境处于激活状态，后面所有的操作都请保持激活，环境名将包含于括号内。激活环境之后就可以安装 Django 了。

安装 Django

然后运行下列命令

$ pip install Django

显示Successfully installed Django安装成功。

Django 创建项目

运行下列命令

$ django-admin startproject project .

得到大致如下的文件夹目录

.
├─ env
├─ project
│  ├─ __init__.py
│  ├─ asgi.py
│  ├─ settings.py
│  ├─ urls.py
│  └─ wsgi.py
└─ manage.py

创建数据库

运行下列命令

$ python manage.py migrate

当前文件夹下会新增db.sqlite3文件。SQLite是使用单个文件的数据库，适合简单的应用程序。

查看项目

运行下列命令

$ python manage.py runserver

然后访问网页http://127.0.0.1:8000/，加载出来会显示你成功建立项目。

后续

我学框架的一个原因是因为 Jekyll 是一个静态博客系统，所以我后面是打算学着建一个带注册登录功能的个人博客。前面我可能会先学着写个 calculator 和 timetable 之类的东西。当然在我学成前我并不打算租服务器和域名。可能我会服务器白嫖GCP的，毕竟三百刀一年试用，我可以多注册点邮箱去嫖(๑‾ ꇴ ‾๑)，而且这样域名就不用备案啦哈哈哈。

传送门

下一章: Django 应用

各类选项

• Disqus: 优秀的评论系统，开箱即用，然而被墙了。
• Gitment: 得 GitHub 账号登录，不是程序员的人没法评论，而且听说在国内也凉了
• Duoshuo 多说: 已经关闭了，网上有不少文章写的这个，别掉坑里了
• 畅言: 博客要备案
• Gitalk: 同 Gitment

类似还有很多，给我整自闭了。

解决方案

最终决定使用 Valine。免费开源且不被墙，这作者简直是国内评论系统的救星（T_T）。这里附上官网链接

Valine官网教程：https://valine.js.org/en/quickstart.html

操作步骤

总共操作就以下两步

• 配置 LeanCloud
• 添加代码

配置 LeanCloud

首先我们注册LeanCloud

然后创建一个应用。创建完成点进去选择左下角设置>应用Key，就能看到你的 AppID 以及 AppKey 了。

添加代码

首先打开_config.yml，在里面添加

valine: 
  enable: true
  appid: your-appid
  appkey: your-appkey
  enableQQ: true

这里 your-appid 和 your-appkey 替换成 LeanCloud 上的那两个。

然后打开comments.html这个专门放评论系统的文件，然后在下面添加

{%- if site.valine.enable -%}
<!--LeanCloud 操作库:-->
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<!--Valine 代码库:-->
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<div id="vcomment"></div>
    <script>
        var valine = new Valine();
        valine.init({
            el: '#vcomment' ,
            appId:  '{{ site.valine.appid }}', 
            appKey:  '{{ site.valine.appkey }}', 
            path:  '{{ page.url }}', 
            enableqq:  '{{ site.valine.enableQQ }}' 
        });
    </script>
{%- endif -%}

这样你的评论系统就配置完成了。所有的评论都会存在 LeanCloud 的结构化数据中。对 Valine 评论系统后续开发感兴趣可以看看 Valine-Admin，这里不多讲述。

前文链接: Jekyll Blog 个人博客搭建(1)。

官方文档链接: https://jekyllrb.com/docs

Directory Structure 文件夹结构

刚建立博客，我们目前的文件夹目录应该为:

.
├─ _posts
│  ├─ 2021-04-17-welcome-to-jekyll.markdown
├─ .gitignore.txt
├─ _config.yml
├─ 404.html
├─ about.markdown
├─ Gemfile
├─ Gemfile.lock
└─ index.markdown

在自己设计博客一般会用到以下几个文件夹，如果准备套模板可以忽略这些内容，这里建议锻炼一下自己的前端三件套(html, css, javascript)的能力

layouts

_layouts 文件夹存放作用于帖子的模板，或者说是布局文件。建静态博客一般存这四个模板

.
├─ home.html    # 主页模板
├─ page.html    # 页面模板
├─ post.html    # 帖子模板
└─ default.html # 自定义模板

includes

_includes 文件夹存放模板文件的组合部分，例如 footer, header 等，用于注入到模板中

.
├─ head.html      # 头文件
├─ header.html    # 页面顶部
├─ footer.html    # 页面底部
└─ comments.html  # 评论区

sass 与 assets

这里两个文件夹放在一起说是因为都是存放 scss 文件的地方，也就是样式表。assets通常存放一个主文件，用于 import 其他位于_sass文件夹中的样式表文件。当然全写在主文件不用_sass文件夹也可以，就是很累咯。建议是给对应部分建对应的样式表文件，例如给 header.html 写个 _header.scss，footer.html 写个 _footer.scss。

js

存放 javascript 文件，可以在页面添加一些好玩的效果，这个大坑后面慢慢填 (ง `ω´)ง

Add Content 添加内容

Add pages 添加页面

我们添加一个名为 _pages 的文件夹，用于存放我们的页面文件，例如 categories, about等等。这些文件可以是 html 或者 markdown 文件，如下图所示

.
├─ about.md
├─ index.html
├─ categories.html
└─ tags.html

通过 Jekyll 我们可以在这些文件的开头添加 YAML frontmatter 来指定你页面的路径和标题等。例如你希望你的 categories.html 展示在user.github.io/categories，我们可以文件的开头写:

---
layout: page
title: Categories
permalink: /category/
type: page
---

然后在下面添加页面的内容。

Add posts 添加页面

在_posts文件夹下新建 markdown 文件，文件名为Year-Month-Date-Name.markdown，前面是发布的时间，后面名字可以随意起。和添加页面一样，我们也得在文件开头添加 YAML frontmatter，然后添加自己的内容，如下所示:

---
layout: post
title: post-title
date: year-month-date
category: post-category
author: name
---

关于 YAML frontmatter

这些元素可用于注入到你的模板文件中。例如你在每篇文章的下面都想添加日期和作者，我们便可将这些标签注入到 html. 举个例子，我们希望将当前页面作者作为文章的一个标签，就可以像下面这样写

---
tag: something
---

<h1>{{ page.tag }}</h1>

这样我们就成功添加了一个一级标题，标题为 something，是页面 tag 里的内容。

除此以外_config.yml里面的属性也都是可以注入到网页中的。具体的一些操作下一章来讲。

传送门

上一章: Jekyll Blog 个人博客搭建(1)

下一章: Jekyll Blog 个人博客搭建(3)

Headers 标题

使用#代表标题级别，具体语法为:

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题

效果图:

两级标题

三级标题

四级标题

五级标题

Emphasis 强调

**加粗**
_斜体_
_斜**加粗**体_

效果图:

加粗
斜体
斜加粗体

Strikethrough 删除线

~~装逼~~学习

效果图:

装逼学习

Hyperlink 超链接

[超链接1](https://thomasmental.github.io/)
[超链接2](https://thomasmental.github.io/, '一个链接')
展示链接: <https://thomasmental.github.io/>

效果图:

超链接1
超链接2
https://thomasmental.github.io/

Newline 换行

这一句话<br>分两行

效果图:

这一句话
分两行

分割线

___
\_\_\_

效果图:

---

___

Code Block 代码块

(`) 忽略括号重复三次后面加语言 样例为c
printf("hello world");
(`) 忽略括号重复三次

效果图:

printf("hello world");

Blockquote 引用块

> 一段话

效果图:

一段话