用 Typora 编辑博客丶

想用 Typora 编写博客

Typora 是一款流行的 Markdown 编辑器,不完美,内容多了会卡;这货是免费的!

Markdown

  • Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档

  • Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建

  • Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档

  • Markdown 编写的文档后缀为 .md, .markdown

Markdown 标题

先输入两个#号,再输入一个空格和标题的文字,再回车

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

提升或降低标题级别:ctrl+=、ctrl+-、ctrl+数字(小键盘上的不好使)

关于标题的内容,一个心得:把关键词放上去

Markdown 段落

摸索发现:回车了就是新的段落了,一直不回车的话,直到一行都结束,下一行开始了,该段落的每一行都是紧凑的。

字体

有三种形式:斜体粗体斜体加粗体

怎么搞出来的呢?前后加一颗星、两颗星、三颗星(或者不加星而加下划线)

实际写的时候用快捷键:斜体ctrl+i、粗体ctrl+b

骚操作:下划线ctrl+u删除线ait+shift+5

两头加双等号可以加背景高亮

也可以鼠标点击格式菜单选项,另外源代码模式也可以看出格式写法

分割线

三个以上的星号或井号或下划线都可以搞出一个分割线来


如这行字的上方,只是有些不明显,后面自定义好看点的

脚注

就是鼠标放上去后,弹出框中提示的内容

怎么搞出来呢?鼠标操作→段落→脚注

img

Markdown 列表

无序列表:星号或加号或减号,加上一个空格,加上内容

  • 星号可以
  • 加号和减号也可以,但是怎么结束这个列表的编辑呢?答案是ctrl+[

有序列表:数字加上点号加空格加内容

  1. 可以成功
  2. 同样的问题,怎么退出这个列表编辑状态呢?答案是ctrl+[
  3. 四个空格等价

有序列表和无序列表可以进行嵌套

Markdown 区块

引用、说明、PS

三月七日,沙湖道中遇雨,雨具先去,同行皆狼狈,余独不觉。已而遂晴,故作此词。

怎么搞出来的呢?尖括号加空格。这个颜色可以自定义好看点的

里边可结合列表使用,这样让列表看起来舒服点

Markdown 代码

$(document).ready(function () {
    alert('RUNOOB');
});

怎么搞成这么优美的样子呢?①直接按tab键后粘贴代码再填语言类型,或②先按三下反引号填语言再粘贴代码,或③也可以不管语言直接粘贴代码

Markdown 链接

有两种形式:

中括号 接 括弧 形式,前者是名称 后者是链接地址

或者

<链接地址>

Markdown 图片

感叹号加中括号加括弧,中括号内为图片名称,括弧内为图片路径

设置smms图床(qq邮箱),或这里

https://sm.ms/home/apitoken

但是有个问题,服务器图片满了咋整~

Markdown 表格

使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行

|  表头   | 表头  |
|  ----  | ----  |这一行配合冒号使用可以控制对齐格式
| 单元格  | 单元格 |
| 单元格  | 单元格 |
表头 表头
单元格 单元格
单元格 单元格

Markdown 高级技巧

\转义字符

去掉特殊含义

快捷键

组合键 作用
ctrl+shift+i 插入图片
ctrl+k 插入链接
ctrl+t 插入表格
ctrl+L 选中当前行
ctrl+d 选中单词
ctrl+h 替换

全屏模式+专注模式+night主题 贼舒服!

Markdown 画图

具体怎么玩还要进一步研究

横向流程图源码格式

graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]

竖向流程图源码格式

graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]

标准流程图源码格式

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op

UML时序图源码样例

对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗?

UML时序图源码复杂样例

Title: 标题:复杂使用
对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗?
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩

UML标准时序图样例

%% 时序图例子,-> 直线,-->虚线,->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗?
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!

甘特图样例

%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h

Typora 设置

修改设置,根据习惯来

878796-20201007214344223-928864996

修改主题的css

image-20201008103609709

找到需要修改的位置

image-20201008104108951

修改

/*
blockquote {
    border-left: 4px solid #dfe2e5;
    padding: 0 15px;
    color: #777777;
}
*/
blockquote {
    border-left: 4px solid #62ca38;
    padding: 0 15px;
    color: #777777;
}

高亮快捷键

image-20201125193816602

完成本地编辑

  • 目测 markdown 已经是趋势,很多博客都会支持 markdown,尽管兼容性都不好;
  • 编辑完成可以导出很多格式;
  • 放到GitHub上作版本控制是对劳动成果的最好保护(电脑最近经常死机蓝屏,要记得随时保存);
  • 另外一个就是考虑展示博文的地方;

尝试在主流博客进行发布

image-20201008151447556

直接将本地编辑好的内容拷贝上去即可,但是渲染还是会有很多问题(有的画图渲染不起:甘特图、时序图、流程图;有的区块渲染也有问题,图片也显示不了)

搭建自己的WordPress

也就是搭建自己的博客网站。大致步骤如下:

SSL证书注册

这里花45块钱/年购买,过程中慢操作并进行一通设置,完了之后可进行修改子域名和证书下载,解压放到服务器etc下,完了就是在nginx中配置的事了。完了就可以https访问了~

image-20201016171627627

image-20201016171925857

  • 服务器安装证书:解压,上传到服务器即可
  • 自动续签:暂时不用考虑
  • 配置nginx:如果用了https,wordpress设置内也要用https,不然格式会很乱

重装系统

环境有时候装坏了,就得先从重装云主机开始

image-20201016125651789

安装docker

# 安装 gcc 环境
yum -y install gcc
yum -y install gcc-c++

# 需要的安装包
sudo yum install -y yum-utils

# 设置镜像的仓库
sudo yum-config-manager \
    --add-repo \
    http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

# 更新yum软件包索引
yum makecache fast

#安装Docker引擎(ce表示社区版,ee表示企业版)
sudo yum install docker-ce docker-ce-cli containerd.io

#启动Docker
systemctl start docker
docker version

# 开机启动
# CentOS 7 新式语法
systemctl start docker.service

# hello world
docker run hello-world

#镜像加速(尽管我买的是Ucloud云主机,还是可以去注册阿里云账号,生成如下信息!阿里云NB丶)
sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": ["https://xnoai7333这里修改33334w.mirror.aliyuncs.com"]
}
EOF
sudo systemctl daemon-reload
sudo systemctl restart docker

安装docker-compose

# 下载
# 国内的镜像(版本可以跟着官网的版本指定):
curl -L https://get.daocloud.io/docker/compose/releases/download/1.27.3/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose

# 授权
sudo chmod +x /usr/local/bin/docker-compose

搭建WordPress

# 下方小操作是为了解决后面插件安装不了的问题,后面考虑写成shell脚本
cd /var
mkdir www
cd /var/www
mkdir html
cd /usr/local/etc
mkdir php
cd /usr/local/etc/php/
mkdir conf.d
cd /usr/local/etc/php/conf.d
vi uploads.ini

uploads.ini内容

file_uploads = On
memory_limit = 128M
upload_max_filesize = 512M
post_max_size = 128M
max_execution_time = 600

安装插件的问题是这样解决的

# 安装或者更新nss
yum install nss # 或者 yum update nss

配置docker-compose.yml

cd /data
mkdir my_wordpress
cd /data/my_wordpress
vim docker-compose.yml

docker-compose.yml内容如下

version: '3.3'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always # command: --default-authentication-plugin=mysql_native_password 如果是mysql8的话,和restart并列
     ports: # 如果不写端口映射的话,外部无法连接该mysql
       - "3306:3306"
     environment:
       MYSQL_ROOT_PASSWORD: root
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress

   wordpress:
     depends_on: # 依赖上方的 db service
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     volumes:
       - ./wp_site:/var/www/html
       - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
       WORDPRESS_DB_NAME: wordpress
       WORDPRESS_CONFIG_EXTRA: "define('WP_HOME','https://blog.possible2dream.cn'); define('WP_SITEURL','https://blog.possible2dream.cn');" # 定义域名
       
volumes:
    db_data: {}

部署&启动

docker-compose up -d #后台启动

数据库客户端连接有问题可以尝试

#进入mysql容器
docker-compose exec db bash
#登陆数据库
mysql -u root -p
密码是somewordpress
use mysql;
#开启root远程访问权限
grant all on *.* to 'root'@'%';
#修改加密规则
alter user 'root'@'localhost' identified by 'root' password expire never;
#更新密码
alter user 'root'@'%' identified with mysql_native_password by 'root';
#刷新权限
flush privileges;

将https证书解压上传到/etc

安装Nginx(暂时不用docker起)

cd /root
wget -c http://nginx.org/download/nginx-1.18.0.tar.gz
tar -zxvf nginx-1.18.0.tar.gz
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel
cd /root/nginx-1.18.0
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module
make
make install
cd /usr/local/nginx/conf
# 编辑配置文件 用notepadd编辑舒服些
vi nginx.conf

配置文件

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    client_max_body_size  2000m;  #最大限制为2000M(上传文件大小)
    keepalive_timeout  3600;

    upstream wordpress {
        #server 106.75.32.166:8000;
        server 127.0.0.1:8000 fail_timeout=10s;
    }

    server {
        listen       80;
        server_name  *.possible2dream.cn;
        return 301 https://$host$request_uri;
    }
    
    server { 
        server_name blog.possible2dream.cn;
        listen 443 ssl;
		
        ssl_certificate /etc/certs/Nginx/blog.possible2dream.cn.crt;
        ssl_certificate_key /etc/certs/Nginx/blog.possible2dream.cn.key;
		
		ssl_session_cache    shared:SSL:1m;
		ssl_session_timeout  5m;
		
		ssl_ciphers  HIGH:!aNULL:!MD5;
		ssl_prefer_server_ciphers  on;
		
        # 主机中 WordPress 数据卷位置
        root /var/lib/docker/volumes/my_wordpress_db_data/_data;
		
        location / {
            proxy_pass http://wordpress;
            proxy_read_timeout  3600;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto https;
        }
    }
}

启动nginx

cd /usr/local/nginx/sbin
./nginx
./nginx -s reload
netstat -ntlp

域名解析

image-20201017152545481

关于域名,四个地方都要一致:

  • https证书注册的地方
  • 域名解析配置的地方
  • wordpress站内配置
  • nginx配置内

开启需要用的端口

image-20201017135341758

访问有问题检查数据库

image-20201017130958839

WordPress安装插件

安装失败试试扶墙vpn

image-20201017151237613

编辑发布博客

image-20201016160219542

有了自己的博客网站

  • 用Typora编辑,到哪都适用,还能转成很多格式丶
  • 在GitHub上搞个私有仓库对所有的文档进行版本控制(GitHub支持免费私有仓库啦!!感谢盖茨!等于我们有了属于自己的云笔记!并且GitHub对Markdown支持挺好的,除了画图的部分)
  • WordPress只是一个展示博文的地方,另外需要解决WordPress图床的问题丶
  • 接下来就是堆博客的事情了
posted @ 2020-10-08 15:26  夜雨秋池  阅读(249)  评论(0编辑  收藏  举报