Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。而Element Plus是一款基于Vue3面向设计师和开发者的组件库。

最终效果：

![](https://suiyan.cc/assets/images/2023/elementtest.gif)

### 环境搭建

已安装 16.0 或更高版本的 Node.js，终端：

    npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

    ✔ Project name: … <your-project-name>
    ✔ Add TypeScript? … No / Yes
    ✔ Add JSX Support? … No / Yes
    ✔ Add Vue Router for Single Page Application development? … No / Yes
    ✔ Add Pinia for state management? … No / Yes
    ✔ Add Vitest for Unit testing? … No / Yes
    ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
    ✔ Add ESLint for code quality? … No / Yes
    ✔ Add Prettier for code formatting? … No / Yes

    Scaffolding project in ./<your-project-name>...
    Done.

然后：

    > cd <your-project-name>
    > npm install
    > npm run dev

然后打开提示的演示网址就能看到Vue的预览页面了。

### Element Plus

element+的安装：

    npm install element-plus --save
    npm install @element-plus/icons-vue

上边安装了element和内置的图标库。

    // main.js
    import { createApp } from 'vue'
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    import App from './App.vue'

    const app = createApp(App)

    app.use(ElementPlus)
    app.mount('#app')

然后再入口处引入element即可使用element了。

### 明暗主题的切换

明暗主题的切换非常简单，首先在项目的index.html中添加class="dark"：

    <html lang="en" class="dark">

在组件中使用Vueuse的内置函数就可以搞定了。

    import { useDark, useToggle } from '@vueuse/core'
    const toggleDark = useToggle(isDark)

模板里添加一个开关

    <el-switch v-model="isDark" size="large" class="mt-2" style="margin-left: 24px" inline-prompt :active-icon="Moon" :inactive-icon="Sunny" />

这样就可以自由切换应用的明暗主题了,其他具体代码可以查看代码仓库

最后，项目地址：

[https://github.com/bosichong/elementplus-test-demo](https://github.com/bosichong/elementplus-test-demo)

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。而Element Plus是一款基于Vue3面向设计师和开发者的组件库

Vue3+Element Plus环境搭建和一键切换明暗主题的配置


2023-07-05

截止今天，百度慢慢腾腾的收录了10个页面，偶尔也有从百度来的流量，虽然搜过搜索引擎，但是大家都认为百度不会收录Github的页面，好吧，我可以很负责的告诉你，百度收录Github pages 的静态页面的。

2023-06-08
神奇了，百度也开始收录和索引博客页面了，一直以为百度不会收录使用GitHub pages 部署且没有备案的网站。，Google已经不用手动提交网址了，每天都会自动索引最新的博文。

2023-05-28

百度终于收录了站点的首页，按首次提交sitemap的时间来算，大约整整一个月吧。而且也证明了，百度可以收录GitHub的静态站点信息，但是目前只收录了站点的首页而已。

2023-05-06 

今天登录了一下百度站长管理的后台，发现后台显示从五月二日开始有百度的抓取频次了，但是依然没有被索引。

Google依然没有主动去抓取我的站点地图。

2023-04-28

最近新注册了一个域名：suiyan.cc，自己写了Python脚本生成了静态页面，域名绑定了GitHub的静态页面，然后开始提交到各大搜索引擎，目前提交了Google、bing.com和百度。

对于网站的收录，目前的情况必应已经完全收录，必应的收录速度是最快的，当时我正在提交Google的站点收录，随手就提交了必应，使用的Google账号登录，导入了Google的配置，没想到很快就被完全收录了，第二天在必应搜索就能收到suiyan.cc。

但是Google就不怎么样了，提交了站点的sitemap的xml和txt两种格式都显示无法抓取，但是相同的文件导入必应确没有任何问题。Google通过网址检查可以零星的提交一些页面，收录还是很快的几乎第二天就能收录，就是很麻烦一些而且还有限额。

在说说百度，登录站长管理后天，提交了sitemap.txt，貌似xml格式的无法抓取，虽然资源数据提交有了反馈，显示百度已经收到了所有页面的列表，但是迟迟不进行蜘蛛的爬取，据说和站点是GitHub的静态页面有关，如果是这样也就只好暂时放弃了。

后续继续观察Google和百度的收录情况，会及时反馈到这里。

刚刚试着提交搜狗，结果搜狗提交必须是备过案的网站，否则无法在站长管理进行提交新站，没有备案的新站站们就不要麻烦去搜狗提交新站了。

然后就是看了一眼Yahoo，神奇，Yahoo已经自动收录了新站！这些大型搜索真是让人摸不着头脑哈。

Yahoo目前使用的是微软必应的搜索引擎，所以必应收录后，Yahoo直接就能搜到，百度依然不收录，Google不能读取sitemap，但可以手动添加。






最近新注册了一个域名：suiyan.cc，自己写了Python脚本生成了静态页面，域名绑定了GitHub的静态页面，然后开始提交到各大搜索引擎，目前提交了Google、bing.com和百度。

新站已提交sitemap百度不抓取Google也不收录


这是一款适合程序员的简约blog。
本项目为[碎言静态博客](https://github.com/bosichong/suiyan.git)主题。

[碎言静态博客Gitee](https://gitee.com/J_Sky/suiyan)
[碎言静态博客GitHub](https://github.com/bosichong/suiyan.git)

### 效果展示

![](https://suiyan.cc/assets/images/2023/coding-blog.png)


### 技术框架

主题模板采用了jinja2的模板引擎，使用了Bootstrap 5.3 等框架，模板设计移动优先。


### 安装教程

1. 首先克隆下载本主题到碎言静态博客程序`theme`目录下。
2. 修改配置文件 `config.json`中的"theme": "coding_blog",即可启用。


### 运行预览

本地主题开发编写，推荐使用`Live Server`这个vscode得插件，非常方便。
在配置文件里修改：
"dev": 1,  # 调试模式，如果改为1，则使用"blog_test_url"来添加静态资源地址前缀，方便本地调试。

### 修改主题样式

主题采用jinja2模板引擎，在主题或是模板目录修改样式，一键生成页面，直接同步页面。
在jinja2 模板中使用`{{ 属性名称 }}`来调用。

### github pages

如何部署GitHub pages 搭建自己的博客，这里就不在详细介绍了，请参考下文。

[GitHub Pages 快速入门](https://docs.github.com/zh/pages/quickstart)

除了部署GitHub，也可以将静态文件部署到虚拟主机云服务器上，复制静态文件目录下的所有文件到你的站点目录下即可。

本主题下载地址：

[https://github.com/bosichong/coding_blog](https://github.com/bosichong/coding_blog)

coding_blog一款适合程序员的简约博客主题。主题模板采用了jinja2的模板引擎，使用了Bootstrap 5.3 等框架，模板设计移动优先。

coding_blog 碎言静态博客主题



JianCe是一个简简单单的学习结果检测的小工具，通过设置一组在线试题（题型包括：单选、多选、判断、简答）来检验学习结果。


### 功能

- [x] 答题开始组件
- [x] 答题结束组件
- [x] 加载题库是先把题库随机打乱
- [x] 添加答题进度
- [x] 答题首页显示题目数量
- [x] 得分页面显示错题的时候问题和答案同时显示。
- [x] 添加ctrl+enter 进行下一道题
- [x] 把答题页面继续组件化
- [x] 答题的时间控制，倒计时展示
- [x] 显示每一道题的类型
- [ ] 加载失败或题库不存在的时候进行提示。
- [ ] 在答题页面时，如果要返回首页，应该提示是否要放弃答题而返回首页？
- [ ] 控制问题标题的文字大小

演示页面：https://suiyan.cc/demo/jiance/

界面预览：


![](https://suiyan.cc/assets/images/2023/jiance/01.png)


准备答题


![](https://suiyan.cc/assets/images/2023/jiance/02.png)
![](https://suiyan.cc/assets/images/2023/jiance/03.png)

亮色主题随心切换，答题结果、评分，错题展示。


![](https://suiyan.cc/assets/images/2023/jiance/04.png)
![](https://suiyan.cc/assets/images/2023/jiance/05.png)


### 安装依赖

项目依赖很简单：

    "dependencies": {
    "axios": "^1.3.4",
    "pinia": "^2.0.33",
    "vue": "^3.2.47",
    "vue-router": "^4.1.6"
    },

终端进入项目的根目录，先安装项目的依赖：

```sh
npm install
```

### 启动

```sh
npm run dev
```

### 编译打包

```sh
npm run build
```

### 添加和编辑题库

题库的编写使用json文件。

`public/data`  为题库及目录文件存放目录

`public/data/navigation.json` 题库目录，这里索引了所有的测试题连接

`public/data/test.json`  是一组测试题

目录json编辑很简答了，看下json的结构就可以了解了。

测试题目前有四种，下边是一组测试题的案例：

    {
    "title": "题库的标题",
    "description": "题库的描述题库的描述题库的描述",
    "questions": [
            {
            "type": "单选题",
            "question": "如何开始学习JavaScript？",
            "options": ["死记硬背","疯狂刷题","勇于实践","埋头苦干"],
            "answer": "勇于实践"
            },
            {
            "type": "多选题",
            "question": "如何开始学习Python？",
            "options": ["死记硬背","疯狂刷题","勇于实践","埋头苦干"],
            "answer": ["疯狂刷题","勇于实践"]
            },
            {
            "type": "判断题",
            "question": "JavaScript是世界上最好的编程语言？",
            "answer": "错误"
            },
            {
            "type": "简答题",
            "question": "为什么叫JavaScript？",
            "answer": "JavaScript 在刚诞生的时候，它的名字叫 “LiveScript”。但是因为当时 Java 很流行，所以决定将一种新语言定位为 Java 的“弟弟”会有助于它的流行"
            }
        ]
    }


### 写在最后

JianCe检测 是我为了测试孩子学习情况所编写的小玩意，当然也可以用来检测其他任何类型知识的学习结果的。希望大家喜欢，欢迎提交代码。

JianCe是一个简简单单的学习结果检测的小工具，通过设置一组在线试题（题型包括：单选、多选、判断、简答）来检验学习结果。

JianCe 简测 简单的在线答题应用

数据分页在项目中的使用频率是非常高的,但是对于新手来说是一个难点和痛点,这里我记录一次数据分页从环境搭建到最后页面的渲染的过程,对于新手可以用来参考,大佬勿喷高抬贵手.

最终效果：

![在这里插入图片描述](https://suiyan.cc/assets/images/2023/0423-01.png)

## 环境搭建
![在这里插入图片描述](https://suiyan.cc/assets/images/2023/0423-02.png)


`fastapi-backend` 后端目录
`vue-frontend` 前端目录
这里我只贴一些关键的代码了,文末有代码仓库可以查看完整的代码.

### 后端
后端采用了`fastapi`框架,首先安装相关依赖`fastapi faker uvicorn`等,具体依赖可以参考文件头部的引用.后端的搭建首先是创建`fastapi`的实例,和解决跨域的问题,这些很简单,官方就有现成的代码,复制过来修改,然后就是在`models.py`中定义数据的模型,本项目中只有一个表和简单的字段:


    from database import Base
    from sqlalchemy import String,Column,Integer
    class Item(Base):
        __tablename__ = 'item'
        id = Column(Integer,primary_key=True,autoincrement=True)
        addr = Column(String(256), nullable=False,index=True)

然后在main.py的入口处创建数据库,并添加一些假数据.


	Base.metadata.create_all(engine) # create all tables
	# 创建测试数据
	item_count = 999
	fk = Faker(locale="zh-CN")
	db = get_db()
	k = get_item_count(db)
	if (get_item_count(db)==0):
		for i in range(item_count):
			addr = fk.address()
			item = Item(addr=addr)
			create_item(db,item)


第一行是创建数据库,后边判断表中是否有数据,没有的话创建999条虚拟数据.

`crud.py`中定义了添加和查询的方法.


	from sqlalchemy.orm import Session
	from models import Item
	def create_item(db: Session, item: Item):
		db_item = Item(addr=item.addr)
		db.add(db_item)
		db.commit()
		db.refresh(db_item)
	def get_item_count(db: Session):
		return db.query(Item).count()
	# offset: 表示要跳过多少条数据,limit: 表示取几条数据,
	def get_items(db: Session,skip: int = 0, limit: int = 10):
		return db.query(Item).offset(skip).limit(limit).all()

分页数据后端的重点就在查询语句那里:**offset: 表示要跳过多少条数据,limit: 表示取几条数据,**根据前端返回的参数就可以查到需要的数据了.

然后就是创建`fastapi`的接口函数,`main.py`:


	@app.get("/getitems")
	def get_item_list(skip: int = 0, limit: int = 10,db:Session = Depends(get_db)):
		# print(skip,limit)
		data = dict()
		data["items"] = get_items(db=db,skip=skip,limit=limit)
		data["item_count"] = get_item_count(db)
		return data

至此,后端的搭建基本完成,运行`main.py`后,打开`http://127.0.0.1:8000/docs`,就可以调试接口获取数据了:
![在这里插入图片描述](https://suiyan.cc/assets/images/2023/0423-03.png)


如果能正常的获取数据,后端的搭建至此就结束了.

## 前端搭建
在项目的根目录终端下:

	npm init vue@latest  # 然后一路回车即可

起好前端项目的名字:`vue-frontend`,当然别的也可以.

安装 ant design for vue3

	npm i --save ant-design-vue

安装后 配置前端下边的`main.js`引入ui框架.

	import { createApp } from 'vue'
	import Antd from 'ant-design-vue';
	import App from './App.vue'
	import 'ant-design-vue/dist/antd.css';

	const app = createApp(App);
	app.use(Antd);
	app.mount('#app');

再安装`axios`  `npm install axios`

然后在前端目录的终端下:`npm run dev` 
即可看到项目正常启动了.

## 前端数据的渲染
首先搭建前端的界面,这里用到了`ant`的`list`和`pagination`,在 `home.vue`:


	<template lang="">
		<a-list bordered :data-source="items">
		<template #renderItem="{ item }">
			<a-list-item>{{ item.id }}.{{ item.addr }}</a-list-item>
		</template>
		<template #header>
			<div>列表展示</div>
		</template>
		<template #footer>
			<div><a-pagination @change="showSizeChange" v-model:current="current" :total="count" /></div>
		</template>
		</a-list>
	</template>

接下来就是定义`ref`和`ajax`的方法了:


	<script setup>
	import {ref} from 'vue'
	import axios from 'axios'

	const baseURL = 'http://localhost:8000'

	const items = ref([])
	const count = ref(0)
	const current = ref(1)

	axios.get(baseURL+'/getitems').then(function(response) {
		console.log(response.data)
		items.value = response.data.items
		count.value = response.data.item_count
	})

	const showSizeChange = (current,size) =>{
		console.log(current,size)
		let skip=size*(current-1)
		let limit=size
		axios.get(baseURL+'/getitems',
		{
			params:{
				skip: skip,
				limit: limit
			},
		},
		).then(function(response) {
		console.log(response.data)
		items.value = response.data.items
		count.value = response.data.item_count
	})
	}
	</script>

前端的代码很简答的,vue3极大的简化了代码,还有就是翻页的pagination封装了大量分页的逻辑控制,我们只要通过两个数据就可以控制这个前端的翻页组件,`let skip=size*(current-1)`,这个是比较关键的代码,控制着数据返回的起始点.如果没有什么问题项目已经可以正常翻页了.

本文代码仓库:
[https://github.com/bosichong/vue3-fastapi-pagination.git](https://github.com/bosichong/vue3-fastapi-pagination.git)

数据分页在项目中的使用频率是非常高的,但是对于新手来说是一个难点和痛点,这里我记录一次数据分页从环境搭建到最后页面的渲染的过程,对于新手可以用来参考。

vue3前端打包集成到后端fastAPI的uvicorn服务器


simple_blog是一款侧重与内容的博客主题并适配移动端。
本项目为[碎言静态博客](https://github.com/bosichong/suiyan.git)主题。
主题支持亮色和黑暗主题在线切换。

[碎言静态博客Gitee](https://gitee.com/J_Sky/suiyan)
[碎言静态博客GitHub](https://github.com/bosichong/suiyan.git)

### 效果展示

![在这里插入图片描述](https://suiyan.cc/assets/images/2023/0423-011.jpg)

### 技术框架

主题模板采用了jinja2的模板引擎，使用了pico.css样式制作。
图标：[FontAwesome 4.7.0 中完整的675个图标样式CSS参考](https://9iphp.com/fa-icons)
响应式适配移动端。


### 安装教程

1. 首先克隆下载本主题到碎言静态博客程序`theme`目录下。
2. 修改配置文件 `config.json`中的"theme": "主题目录",即可启用。


### 运行预览

本地主题开发编写，推荐使用`Live Server`这个vscode得插件，非常方便。
在配置文件里修改：
"dev": 1,  # 调试模式，如果改为1，则使用"blog_test_url"来添加静态资源地址前缀，方便本地调试。

### 修改主题样式

主题采用jinja2模板引擎，在主题或是模板目录修改样式，一键生成页面，直接同步页面。
在jinja2 模板中使用`{{ 属性名称 }}`来调用。

### github pages

如何部署GitHub pages 搭建自己的博客，这里就不在详细介绍了，请参考下文。

[GitHub Pages 快速入门](https://docs.github.com/zh/pages/quickstart)

除了部署GitHub，也可以将静态文件部署到虚拟主机云服务器上，复制静态文件目录下的所有文件到你的站点目录下即可。



simple_blog是一款侧重与内容的博客主题并适配移动端。主题支持亮色和黑暗主题在线切换。

simple_blog 碎言静态博客主题


[使用Python编写并部署个人静态博客:(一)分析与设计](https://suiyan.cc/2023/20230410075954.html)

[使用Python编写并部署个人静态博客:(二)实现静态页面的输出](https://suiyan.cc/2023/20230420101527.html)

[使用Python编写并部署个人静态博客:(三)搜集博客数据](https://suiyan.cc/2023/20230517084718.html)

[使用Python编写并部署个人静态博客:(四)逐步输出静态页面](https://suiyan.cc/2023/20230609081842.html)

[使用Python编写并部署个人静态博客:(五)Python异步输出博文页面](https://suiyan.cc/2023/20230613193700.html)

实现静态页面的输出其实很简单，按着顺序来就行：搜集Markdown文件和站点配置文件->组织数据并渲染模板(jinja2)->输出HTML并保存到静态目录中。

## 最简单的静态文件输出

如果您想要向HTML文件添加字符串模板，您可以使用Python的字符串格式化功能。例如，如果您想要向HTML文件添加标题：

    title = "My Title"
    html_template = "<html><head><title>{0}</title></head><body>{1}</body></html>"
    body = "<h1>hello world</h1>"
    with open("file.html", "w") as f:
        f.write(html_template.format(title, body))

在此代码中，我们定义一个名为title的变量，其值为“My Title”，以及一个名为html_template的变量，其值为"{1}"。{0}和{1}是title和body变量的占位符，分别。然后，我们定义一个名为body的变量，其值为"hello world"。最后，我们以写入模式打开文件“file.html”，并使用format()方法将格式化的字符串写入其中。运行这段脚本后会在当前目录下生成一个`file.html`文件，内容如下：

    <html><head><title>My Title</title></head><body><h1>hello world</h1></body></html>

至此，我们实现了一个简单的模板系统。

## 使用jinja2模板引擎

但是我们的站点不可能就只有一两个模板的变量，他会是由一系列的数据组成的，而且渲染的出来的HTML页面我们还需要进行布局和前端的美化，所以我们需要一个健壮的模板引擎。

> Jinja 是一个快速、富有表现力、可扩展的模板引擎。模板中的特殊占位符允许编写类似于 Python 语法的代码。然后向模板传递数据以呈现最终文档。

### 安装

    $ pip install Jinja2

通过上边的命令行，我们很容易就能安装jinja2的依赖文件。关于使用jinja2生成HTML有两个重要的步骤：
1. 组织jinja2的模板变量，也就是站点的上下文。
2. 编写jinja2的模板，这里包括模板的继承和模板的渲染，以及最后的保存输出。

### jinja2的配置

    # 设置jinja模板的所在目录
    env = Environment(loader=FileSystemLoader(os.path.join("theme")))
    context = {
        "title" : "hello",
        "body" : "world"
    }
    tmp = env.get_template("index.html")  # 获取对应的模板
    sitemap_path = os.path.join('index.html')  # 输出静态文件
    with open(sitemap_path, mode='w', encoding='utf-8') as f:
        f.write(tmp.render(**context))

这是一个最简单的jinja2模板的配置，我们所有的静态文件的输出都会使用这段代码。

### 编写jinja2模板

编写jinja2模板首先需要布局你的网站页面，先规划好博客需要的页面，因为博客的页面布局大体相同，所以要先写`layout.html`，通过模板的继承与引用来实现页面制作的分工，应避免把重复的内容写到多个页面。

### jinja2语法

jinja2的语法很简单：

1. 语句结构 {% %}
2. 变量取值 {{ }}
3.  注释 {# #}
   
输出页面的标题：

    <h1>{{ title }}</h1>

循环输出标签：

    {% for tag in tags %}
    <samll>{{ tag }}</samll>
    {% endfor %}

对于复杂的页面我们应该建立多个继承，对于固定的内容应当使用引用。

建立继承块：

    <title>{{ blog_name_en }}-{{ blog_name }}{% block title %}{% endblock %}</title>

通过继承进行修改：

    {% extends "layout.html" %}
    {% block title %}-{{ title }}{% endblock %}
    {# 此处省略了一些代码 #}

[jinja2官方文档](https://jinja.palletsprojects.com/en/3.1.x/)，这里可以查询到更多有关jinja2模板引擎的使用帮助。


## 组合到一起

通过一些列的操作，我们可以生成一些简单的HTML页面了，接下来我们来看看在Python中如何具体组织这些功能并实现他们。





实现静态页面的输出其实很简单，按着顺序来就行：搜集Markdown文件和站点配置文件->组织数据并渲染模板(jinja2)->输出HTML并保存到静态目录中。

使用Python编写并部署个人静态博客:(二)实现静态页面的输出


在前端界面的设计时，经常要用到css的布局属性，这里主要对flex、gird做一些学习上的总结，flex和grid都是CSS布局模块，允许响应式和灵活的设计。但是，它们具有不同的用例和属性。

### flex 弹性盒子

flex主要用于一维布局，例如在行或列中排列项目。它在容器元素上使用display: flex属性，在子元素上使用flex属性来控制它们的大小和位置。一些关键属性包括：

- flex-direction：确定主轴的方向（行或列）
- justify-content：沿主轴对齐项目
- align-items：沿交叉轴对齐项目
- flex-wrap：确定是否应在没有足够空间时将项目换行

例子：

    <nav>
    <ul style="display: flex; justify-content: space-between;">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    </nav>
<nav>
  <ul style="display: flex; justify-content: space-between;">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>



### grid 网格布局

grid用于二维布局，例如创建行和列的网格。它在容器元素上使用display: grid属性，在子元素上使用grid属性来控制它们的位置和大小。一些关键属性包括：

- grid-template-columns和grid-template-rows：定义网格中列和行的大小和数量
- grid-column和grid-row：指定网格中项目的起始和结束位置
- grid-gap：设置网格项之间的间距

一个简单的例子：

    <div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px;">
    <img src="https://suiyan.cc/assets/images/avatar.jpg">
    <img src="https://suiyan.cc/assets/images/avatar.jpg">
    <img src="https://suiyan.cc/assets/images/avatar.jpg">
    <img src="https://suiyan.cc/assets/images/avatar.jpg">
    <img src="https://suiyan.cc/assets/images/avatar.jpg">
    <img src="https://suiyan.cc/assets/images/avatar.jpg">
    </div>

<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px;">
  <img src="https://suiyan.cc/assets/images/avatar.jpg">
  <img src="https://suiyan.cc/assets/images/avatar.jpg">
  <img src="https://suiyan.cc/assets/images/avatar.jpg">
  <img src="https://suiyan.cc/assets/images/avatar.jpg">
  <img src="https://suiyan.cc/assets/images/avatar.jpg">
  <img src="https://suiyan.cc/assets/images/avatar.jpg">
</div>




总之，flex最适合一维布局，例如导航，瀑布流等，而grid最适合二维布局，比如站点的总体布局，数据表格布局等。但是，它们也可以一起使用以创建更复杂的布局。


在前端界面的设计时，经常要用到css的布局属性，这里主要对flex、gird做一些学习上的总结，flex和grid都是CSS布局模块，允许响应式和灵活的设计。但是，它们具有不同的用例和属性。

css布局如何选择flex和grid?

异步编程是JavaScript中的一个重要概念。为了理解异步编程，首先需要了解同步编程的工作原理。在同步编程中，代码按行执行，每行必须在下一行开始之前完成执行。当处理长时间运行的任务或需要等待外部资源时，这可能会导致性能问题。
JavaScript中的异步编程允许非阻塞代码执行，这意味着代码可以在等待长时间运行的任务或外部资源时继续运行。这是通过使用回调函数、Promise和async/await实现的。
回调函数是作为参数传递给其他函数并在原始函数完成其任务时执行的函数。Promise是表示异步操作的最终完成或失败的对象，并允许编写更可读和可维护的代码。
async/await是一种新的语法，通过使用关键字“async”和“await”来处理Promise，从而实现更可读和可维护的异步代码。

#### 回调

先从一个回调函数开始：

    function cb(callback){
        callback()
    }
    cb(()=>{console.log("callback函数")})

回调函数的参数中会有一个函数的参数。

下面的这个回调函数，调用了一个自定义的函数：

    function cb1(callback){
        const rest = {name:"callbackdata"}
        callback(rest)
    }

    function print_rest(rest){
        console.log(rest)
    }

    cb1(print_rest)

第三个回调函数加入了`setTimeout`：

    function fetchData(name, callback) {
        setTimeout(() => {
            const data = {name: name};
            callback(data);
        }, 3000);
    }

    fetchData("one", (data) => {
        console.log(data);
    });

这会使代码运行3秒后打印数据。其实最开始的时候我也不太理解回调，运行一下这三个函数试试理解一下。
在此示例中，fetchData函数使用setTimeout函数模拟从外部资源获取数据，以延迟执行回调函数1秒钟。fetchData函数接受一个回调函数作为参数，在可用时使用获取的数据执行该函数。
回调函数可能很快变得难以管理，并导致回调地狱，其中嵌套的回调函数变得难以阅读和维护。Promise可以通过允许编写更可读和可维护的代码来帮助缓解此问题.

#### Promise

以下是使用Promise处理JavaScript中的异步代码的示例：

    function fetchData_a() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                const data = {name: "two"};
                resolve(data);
            }, 2000);
        });
    }

    fetchData_a()
        .then((data) => {
            console.log(data);
        })
        .catch((error) => {
            console.error(error);
        });


在此示例中，fetchData_a函数返回一个Promise，该Promise在可用时解析为获取的数据。使用then方法处理已解析的Promise并将数据记录到控制台.使用catch方法处理可能在Promise执行期间发生的任何错误。

#### async/await
async/await是一种新的语法，通过使用关键字“async”和“await”来处理Promise，从而实现更可读和可维护的异步代码.
以下是使用async/await处理JavaScript中的异步代码的示例：

    function fetchData_b() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                const data = {name: "three"};
                resolve(data);
            }, 1000);
        });
    }

    async function getData() {
        try {
            const data = await fetchData_b();
            console.log(data);
        } catch (error) {
            console.error(error);
        }
    }

    getData();

在此示例中，fetchData_b函数返回一个Promise，该Promise在可用时解析为获取的数据。getData函数声明为async，并使用await关键字处理已解析的Promise并将数据记录到控制台.
使用try和catch块处理可能在Promise执行期间发生的任何错误.
总之，异步编程在JavaScript中是一个重要的概念，对于编写性能良好且易于维护的代码非常重要。通过使用回调函数、Promise和async/await，开发人员可以编写非阻塞代码并处理长时间运行的任务和外部资源.


异步编程是JavaScript中的一个重要概念。为了理解异步编程，首先需要了解同步编程的工作原理。在同步编程中，代码按行执行，每行必须在下一行开始之前完成执行。当处理长时间运行的任务或需要等待外部资源时，这可能会导致性能问题。

从回调函数到JavaScript异步编程


最近写了一些前端的项目使用了一些框架例，但是突然发现自己的前端基础是如此的渣，渣的自己好尴尬，遂决定重新学习并复习一下前端的HTML CSS JavaScript基础。

HTML css JavaScript是什么？

>HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
>CSS 是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。
>JavaScript 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）

### HTML——超文本标记语言

#### 简介

> HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。

#### 块级元素和内联元素

典型的例子就是：

    <p>我是块级元素</p>
    <span>我是内联元素<span/>

块级别的元素占用一行宽度，内联的则相互连接在一起，当然你可以使用css设置其为块级的元素。

#### 属性

每个标签都有自己的属性，比如表单的标签会有很多的属性，例如`class id href src`等。

#### 一个完整的HTML文档

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title>我的测试站点</title>
    </head>
    <body>
        <p>这是我的页面</p>
    </body>
    </html>


`<!DOCTYPE html>`: 声明文档类型。

`<html>`元素，这个元素包裹了页面中所有的内容，有时被称为根元素。

`<head>`元素，这个元素是一个容器，它包含了所有你想包含在HTML页面中但不在HTML页面中显示的内容，`<head>`元素中包含了例如css、js、meta等。

`<meta charset="utf-8" />`这是一个HTML文档的属性，meta有很多文档属性。

`<title>`是文档的标题

`<body>`元素是页面内容文档，包含了你访问页面时所有显示在页面上的内容，包含文本、图片、视频、游戏、可播放音频轨道等等。

#### head meta HTML的元信息

    <head>
    <title>头部信息</title>
    </head>

头部信息在HTML加载后并不会像body内容一样渲染在页面中，head的作用是保存一些页面中的元信息。
元数据在某些大网站中会有很多，一些比较常用的有：

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>“头”里有什么——HTML 元信息 - 学习 Web 开发 | MDN</title>
    <meta name="author" content="Chris Mills" />
    <meta name="description" content="description" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="my-css-file.css" />

还有一些例如连接css、js文件的，站点图标favicon的。
还可以在head中的`<script></script>`中直接写入JavaScript，`<style></style>`中直接写css样式。

#### body HTML文档的具体内容

body用来组织页面需要渲染的内容，所涉及的标签很多，比如文本、列表、表格、链接、图片和多媒体。
标签很多，但他们都是结构化的可以嵌套。随便打开一个互联网的页面都可以看到这些标签。


### CSS:层叠样式表

 > CSS（层叠样式表）用于设置和布置网页——例如，更改内容的字体、颜色、大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。这个模块为你掌握 CSS 的过程提供了一个温和的开端，包括它如何工作的基础知识，语法是什么样的，以及如何开始使用它来为 HTML 添加样式。

 css应用的方式有三种：
 
 1. 外部样式表：通过<link>标签引入。
 2. 内部样式表：将 CSS 放在 HTML 文件`<head>`标签里的`<style>`标签之中。
 3. 内联样式：内联样式表存在于 HTML 元素的 style 属性之中。

不推荐内联样式，因为不宜维护。

#### 选择器

css的选择器就是标记当前的css样式属于HTML文档中的所对应的标签。
选择器的种类：类型、类、和ID选择器，也可以通过属性来选择元素，另外还有伪类伪元素和关系选择器。

#### css样式的优先级

1. 最顶部：`!important`会覆盖页面内任何位置的元素样式.
2. 内联样式
3. ID选择器
4. class 伪类 属性选择器
5. 标签 伪元素选择器
6. 通配符、自雷选择器、兄弟选择器
7. 继承的样式。


#### css 长度

绝对长度：

单位	名称	等价换算

cm	厘米	1cm = 37.8px = 25.2/64in

mm	毫米	1mm = 1/10th of 1cm

Q	四分之一毫米	1Q = 1/40th of 1cm

in	英寸	1in = 2.54cm = 96px

pc	派卡	1pc = 1/6th of 1in

pt	点	1pt = 1/72th of 1in

px	像素	1px = 1/96th of 1in


相对长度：

单位	相对于

em	在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width。

ex	字符“x”的高度。

ch	数字“0”的宽度。

rem	根元素的字体大小。

lh	元素的行高。

rlh	根元素的行高。当用于根元素的 font-size 或 line-height 属性时，它指的是这些属性的初始值。

vw	视口宽度的 1%。

vh	视口高度的 1%。

vmin	视口较小尺寸的 1%。

vmax	视口大尺寸的 1%。

vb	在根元素的块向上，初始包含块的尺寸的 1%。

vi	在根元素的行向上，初始包含块的尺寸的 1%。

svw、svh	分别为视口较小尺寸的宽度和高度的 1%。

lvw、lvh	分别为视口大尺寸的宽度和高度的 1%。

dvw、dvh	分别为动态视口的宽度和高度的 1%。



#### 其他一些细节

这里对css的一些细节不在讨论，因为其内容及其繁多，包含了文本、图片、多媒体、盒模型等等。
属性众多，可以在这里看到详细的教程：[css教程](https://www.w3school.com.cn/css/index.asp)

#### 重点讨论css布局

display是css布局中的一个重要的属性，其属性决定了元素在页面中的布局表现方式。
> CSS display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。
[display详解](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display)

#### 弹性盒子：flex

![flex](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox/flex_terms.png)


如下代码，其中`#demo_a`中`display:flex;`，如果删除这个属性，你会发现，三个盒子会成为流式布局，及每一个盒子都会铺满整个横向的空间，这个例子是比较典型的弹性盒子的例子。


    <style>
        #demo_a {
            display:flex;
            width: 300px;
        }
        .demo_box {
            width:100px;
            height: 100px;
            background-color: aqua;
        }
        </style>

    <div id="demo_a">
        <div class="demo_box">aaa</div>
        <div class="demo_box">bbb</div>
        <div class="demo_box">ccc</div>
    </div>


<style>
      #demo_a {
        display:flex;
        width: 300px;
      }
      .demo_box {
        width:100px;
        height: 100px;
        background-color: aqua;
      }
    </style>

<div id="demo_a">
    <div class="demo_box">aaa</div>
    <div class="demo_box">bbb</div>
    <div class="demo_box">ccc</div>
</div>

#### CSS grid 网格

这里还是举一个例子：

    <style>
    .grid-demo {
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-gap: 2px;
    background-color: #2196F3;
    }
    .grid-demo > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    font-size: 30px;
    height:80px;
    }
    </style>
    <div class="grid-demo">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>  
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
    </div>

<style>
.grid-demo {
  display: grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap: 2px;
  background-color: #2196F3;
}
.grid-demo > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 30px;
  height:80px;
}
</style>
<div class="grid-demo">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

#### 浮动 float

float在页面的文字与图片的排版中使用率还是很高的，还有就是清除浮动。下边是一个很好的例子。

[float](https://developer.mozilla.org/zh-CN/docs/Web/CSS/float)


#### 响应式布局

HTML的头部添加如下meta标签：

    <meta name="viewport" content="width=device-width,initial-scale=1">

这个元标签告诉移动端浏览器，它们应该将视口宽度设定为设备的宽度，将文档放大到其预期大小的 100%，在移动端以你所希望的为移动优化的大小展示文档。

#### 媒体查询

    @media media-type and (media-feature-rule) {
    /* CSS rules go here */
    }

它由以下部分组成：
一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）；
一个媒体表达式，是一个被包含的 CSS 生效所需的规则或者测试；
一组 CSS 规则，会在测试通过且媒体类型正确的时候应用。

这里有一个不错的例子：

[媒体查询响应式布局](https://mdn.github.io/css-examples/learn/media-queries/grid.html)

css的内容众多，以上只是一个概括的复习，可以通过提供的连接延伸阅读。

### JavaScript

> JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。JavaScript 怎能缺席。它是标准 Web 技术蛋糕的第三层，其中 HTML 和 CSS 我们已经在学习中心的其他部分进行了详细的讲解。

一个简单的JavaScript小栗子：

    <button id="bt-01">hello</button>
    <script>
        const btn = document.getElementById("bt-01");

        function btn_click() {
            let name = prompt("请输入一个新的字符串：");
            btn.innerHTML = name
        }

        btn.addEventListener("click", btn_click);
    </script>

<button id="bt-01">hello</button>
<script>
    const btn = document.getElementById("bt-01");

    function btn_click() {
        let name = prompt("请输入一个新的字符串：");
        btn.innerHTML = name
    }

    btn.addEventListener("click", btn_click);
</script>

通过这个小栗子我们就可以了解到，JavaScript可以动态的修改网页中的元素，但是JavaScript的功能远远不止这些。

#### 页面中添加JavaScript的方式

1. 内联方式 
2. 内部方式
3. 外部方式

其中内部和外部方式使用的比较多，上边的例子就是使用的内部方式连接到JavaScript。

#### JavaScript变量

可以通过 `var` `let`来定义变量，let是现代JavaScript定义变量的方法。

#### 变量类型

Number String Boolean Array Object


#### 数字和字符串的操作

网上教程较多，这里略过了。

#### 数组

[一些基础的数组操作](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Arrays)

#### 条件和循环

略过

#### 函数和返回值

略过

#### 事件

    EventTarget.addEventListener()

为dom对象添加事件，该方法允许为一个事件添加多个监听器。
在事件处理函数内部，您可能会看到一个固定指定名称的参数，例如event，evt或简单的e。这被称为事件对象，它被自动传递给事件处理函数，以提供额外的功能和信息。

在事件对象上调用preventDefault()函数，这样就可以停止了表单提交。

#### 事件冒泡及捕获

标准事件对象具有可用的名为 `stopPropagation()`的函数，当在事件对象上调用该函数时，它只会让当前事件处理程序运行，但事件不会在冒泡链上进一步扩大，因此将不会有更多事件处理器被运行 (不会向上冒泡)。

#### 对象原型和原型链

其实这是一个比较复杂的内容，这里只是简单的概括一下。JavaScript 中所有的对象都有一个内置属性，称为它的 prototype（原型）。

实际上所有浏览器都使用 `__proto__`。访问对象原型的标准方法是 `Object.getPrototypeOf()`。

#### JavaScript 异步

由于内容较多，另起一篇笔记：
[从回调函数到JavaScript异步编程](https://suiyan.cc/2023/20230416175852.html)

#### JavaScript的事件

未完待续。。。。。

最近写了一些前端的项目使用了一些框架例，但是突然发现自己的前端基础是如此的渣，渣的自己好尴尬，遂决定重新学习并复习一下前端的HTML CSS JavaScript基础。

2023重学前端:HTML CSS JavaScript基础复习


### 可以开始写blog啦(*￣︶￣)

上次我说这话的时候还是2022-09-23，一下子都过去大半年了！花了三天的时间把之前写的静态博客重构了，这次的重构还算满意挺开心的，重构达到了预期的效果。

把之前在Python代码中使用字符串拼接的方式更换成了jinja2的模板引擎，大大的提高了前端页面的构建速度，之后需要丰富页面内容就简单多了，至少以后有人要用也看得懂，另外更换了前端的UI框架，这里推案件一个不错的框架：pico.css,Docs [https://picocss.com/docs/](https://picocss.com/docs/)。Pico选择使用极少的`.classes` 尽可能保持中性和语义,这使得使用原生的HTML标签写网页就很方便了，而且样式也不错挺美观的！

Python生成静态页面的代码也仔细的重构了一下，由于使用的jinja2模板引擎，代码量大大减少了很多。这几天抽空把这个静态博客的搭建心得分享一下。好了，今天起个头，以后的日子还长着呢。

上次我说这话的时候还是2022-09-23，一下子都过去大半年了！花了三天的时间把之前写的静态博客重构了，这次的重构还算满意挺开心的，重构达到了预期的效果。

好了，又可以愉快的写博客了


[使用Python编写并部署个人静态博客:(一)分析与设计](https://suiyan.cc/2023/20230410075954.html)

[使用Python编写并部署个人静态博客:(二)实现静态页面的输出](https://suiyan.cc/2023/20230420101527.html)

[使用Python编写并部署个人静态博客:(三)搜集博客数据](https://suiyan.cc/2023/20230517084718.html)

[使用Python编写并部署个人静态博客:(四)逐步输出静态页面](https://suiyan.cc/2023/20230609081842.html)

[使用Python编写并部署个人静态博客:(五)Python异步输出博文页面](https://suiyan.cc/2023/20230613193700.html)

## 什么是独立博客？

独立博客是指个人独立运营的博客，通常是由个人自己设计、开发、维护和更新的。相比于其他博客，独立博客可以自由定制，自制主题，自由评论不受平台限制等优点。

## 独立博客的特点

建立个人品牌：一个独立的博客可以帮助你建立个人品牌，展示你的专业知识和技能，增强你在技术领域的影响力和声誉。

分享知识和经验：编写技术博客可以帮助你分享自己的知识和经验，并向读者传达你的思考和观点。这不仅可以帮助他人解决问题，还可以帮助你深化自己的理解和思考。

提升写作能力：博客是一个很好的写作平台，编写技术博客可以帮助你提升写作能力，锻炼表达能力和逻辑思维能力。同时，博客的文章需要经过反复推敲和修改，也可以锻炼自己的耐心和细心。

留下成长记录：技术博客可以记录你的成长历程，留下你的学习和思考的痕迹，也可以帮助你回顾和总结过去的经验和成果。

扩大交流圈：通过技术博客，可以扩大自己的交流圈，结识更多的同行和志同道合的朋友，开拓自己的视野和思路。

## 为什么要编写并维护自己的博客？

首先，我们要明确自己的写博客的目的！我觉得写博客最大的目的就是：提升写作能力、建立自己的知识体系以及个人品牌。编写一个博客系统只是一个开端，是学习与实践的开始，而后则是漫长的博客维护创作的历程。

独立博客的实现有很多方法，目前现成的开原博客数不胜数，为什么要自己动手编写并设计博客呢？这是一次技术的实践，如果正在学习Python的路上，动手实践一个博客可以提高你的Python技术，了解对程序软件设计的流程，最主要的是你可以获得一份自由的感觉。

## 如何使用Python编写静态博客生成器？
首先我们分析需求：

![在这里插入图片描述](https://suiyan.cc/assets/images/2023/b01.png)


1. 一行简单的命令生成更新所有静态文件。
2. git push github master 

通过两行命令解决博客的更新，这样做的目的可以使博主专注于写作，而不必为生成博客文章、维护服务器、维护程序而费心。

## 静态文件的生成

综上所述可以看出，处理静态文件的输出是项目的核心，我们再次细分：

![在这里插入图片描述](https://suiyan.cc/assets/images/2023/b02.png)

到目前为止，我们的项目构建的思路基本明朗了，下一节我们就开始着手编写具体的代码来实现我们的博客生成器。

独立博客是指个人独立运营的博客，通常是由个人自己设计、开发、维护和更新的。相比于其他博客，独立博客可以自由定制，自制主题，自由评论不受平台限制等优点。

使用Python编写并部署个人静态博客:(一)分析与设计


大道至简，返璞归之，这是一款侧重与内容的博客主题
本项目为[碎言静态博客](https://github.com/bosichong/suiyan.git)主题。
主题支持亮色和黑暗主题在线切换。

[碎言静态博客Gitee](https://gitee.com/J_Sky/suiyan)
[碎言静态博客GitHub](https://github.com/bosichong/suiyan.git)

### 效果展示

![在这里插入图片描述](https://suiyan.cc/assets/images/2023/free_blog/001.png)

![在这里插入图片描述](https://suiyan.cc/assets/images/2023/free_blog/002.png)

### 技术框架

主题模板采用了jinja2的模板引擎，使用了pico.css样式制作。
图标：[FontAwesome 4.7.0 中完整的675个图标样式CSS参考](https://9iphp.com/fa-icons)
响应式适配移动端。


### 安装教程

1. 首先克隆下载本主题到碎言静态博客程序`theme`目录下。
2. 修改配置文件 `config.json`中的"theme": "主题目录",即可启用。


### 运行预览

本地主题开发编写，推荐使用`Live Server`这个vscode得插件，非常方便。
在配置文件里修改：
"dev": 1,  # 调试模式，如果改为1，则使用"blog_test_url"来添加静态资源地址前缀，方便本地调试。

### 修改主题样式

主题采用jinja2模板引擎，在主题或是模板目录修改样式，一键生成页面，直接同步页面。
在jinja2 模板中使用`{{ 属性名称 }}`来调用。

### github pages

如何部署GitHub pages 搭建自己的博客，这里就不在详细介绍了，请参考下文。

[GitHub Pages 快速入门](https://docs.github.com/zh/pages/quickstart)

除了部署GitHub，也可以将静态文件部署到虚拟主机云服务器上，复制静态文件目录下的所有文件到你的站点目录下即可。


### 仓库地址

[GitHub](https://github.com/bosichong/suiyan_free_blog)
[Gitee](https://gitee.com/J_Sky/suiyan_free_blog)


大道至简，返璞归之，这是一款侧重与内容的博客主题,本项目为[碎言静态博客](https://github.com/bosichong/suiyan.git)主题。

free_blog 碎言静态博客主题



### 起因

最近由于气温突然降温着凉，加上之前一直使用双显示器编写代码，导致颈椎病和肩周炎一起爆发。由于病起非常急，导致我左肩膀和左边的脖子非常不舒服，然后我就去拔罐子按摩理疗，以为会好写，结果反而没有疗效却导致病情急剧加重！最后疼的我晚上都无法入睡了。

### 肩周炎颈椎病的症状

颈椎病和肩周炎的症状不尽相同，但有一些共同点。常见的症状包括颈部或肩部的疼痛、麻木、刺痛感，以及颈部或肩部的灵活性下降。此外，颈椎病和肩周炎都可能伴随着手臂无力、疼痛或麻木等症状。

### 治疗

在发现自己的症状之后，我立即停止了使用双显示器，将屏幕调整到合适的高度，并且每隔一段时间就起身活动一下身体。同时，我也开始服用止疼药和非甾体消炎药，以缓解颈部和肩部的疼痛，至少晚上能睡觉啊，不然人得崩溃死了。后来大约过了10天左右，我就停药了，基本只剩下酸疼了。


### 最后康复训练

然而，止疼药和非甾体消炎药只是缓解疼痛的临时措施，要想真正保护好自己的颈椎和肩膀，我们需要采取一些长期的康复训练。我采用的是一些颈部和肩部的伸展运动，例如低头、抬头、向左看、向右看等动作，以缓解颈部和肩部的紧张肌肉。此外，我还加入了一些瑜伽练习，例如颈部前屈、后弯、扭转等动作，以加强颈部和肩部的灵活性和稳定性。

最后，我想提醒所有程序员兄弟姐妹们，要保护好自己的颈椎和肩膀。长时间保持同一姿势容易导致肌肉疲劳和紧张，从而引起颈椎病和肩周炎。因此，我们应该每隔一段时间就起身活动一下身体，适当地放松自己的颈椎和肩膀。此外，我们还可以采取一些预防措施，例如使用合适的电脑屏幕高度、定期锻炼颈部和肩部的肌肉等。让我们一起保护好自己的身体，更高效地工作！

我想提醒所有程序员兄弟姐妹们，要保护好自己的颈椎和肩膀。长时间保持同一姿势容易导致肌肉疲劳和紧张，从而引起颈椎病和肩周炎。因此，我们应该每隔一段时间就起身活动一下身体，适当地放松自己的颈椎和肩膀。此外，我们还可以采取一些预防措施，例如使用合适的电脑屏幕高度、定期锻炼颈部和肩部的肌肉等。让我们一起保护...

程序员的痛苦：颈椎病和肩周炎



### suiyan 碎言静态博客

### 介绍
碎言这个名称取自与"碎言片语"，码兄累了吗？累了就休息一下，为未来的自己留下一些碎言片语吧。


演示(github)： [碎言博客](https:/suiyan.cc/)

![](https://suiyan.cc/assets/images/2023/fba.png)

一键切换主题，自动主题。

![](https://suiyan.cc/assets/images/2023/fbb.png)

### 软件架构

2023-03-24 新版 3.0.0 发布啦！

集成了jinja2的模板引擎，大大的提高了静态页面的构建速度， 支持模板主题的制作。

使用了asyncio和aiofiles模块来实现异步IO操作，提高了生成静态博客页面的效率，几百页面瞬间生成。

更新当前博客主题：使用了pico.css样式，大道至简，返璞归真，没有组件，只有HTML标签。

构建博客索引并可以通过标题进行全站搜索。

博客文章写作采用Markdown技术支持，让你专注写作更流畅。

推荐使用Vscode搭配进行blog文章的编写(因为当创建新文章后会直接使用vscode直接打开)

如果新建blog文章无法在vscode中打开，请在命令面板中搜索shell，在PATH 中安装code命令。






### 安装教程

首先克隆下载碎言静态博客，
* [Gitee](https://gitee.com/J_Sky/suiyan)
* [GitHub](https://github.com/Jsky2020/suiyan)

终端运行:

    pip install -r requirements.txt

如果速度太慢请使用镜像：

    pip install -r requirements.txt -i http://mirrors.aliyun.com/pypi/simple/

安装相关依赖。


博客的管理支持终端和图形界面：

图形界面：

    python3 w.py

![](https://suiyan.cc/assets/images/2023/bloggui.png)

终端启动命令：

    python s.py

![](https://suiyan.cc/assets/images/2023/zhongduan1.png)

可以根据自己的喜好进行选择。

### 目录结构

下边是一个完整的项目结构，有些目录需要创建md文件和生成静态文件后才会显示。

    ├── LICENSE 开源协议
    ├── README.md 说明文档
    ├── articles md文件存放目录（名称可以自定义）
    ├── blog 静态文件存放目录（名称可以自定义）
    ├── config.json 站点配置文件
    ├── logs 日志存放目录
    ├── requirements.txt 依赖文件
    ├── s.py 主程序和终端操作命令行
    ├── seo 这里存放着一些SEO文件，比如验证，robots.txt
    ├── theme 主题目录，下边的每一个目录对应一个主题，可以在配置文件里修改主题
    ├── utils.py 程序依赖的方法
    └── w.py 窗口操作的程序


### 首次运行

首次运行建议先修改根目录下的配置文件`config.json`这里简单介绍一下配置项:

    {
        "dev": 0,  # 调试模式，如果改为1，则使用"blog_test_url"来添加静态资源地址前缀，方便本地调试。
        "blog_name": "碎言博客",   # 站点名称
        "blog_name_en": "SuiYan", # 站点英文名称
        "blog_author": "J.sky", # 站长昵称
        "blog_description_en": "You see see you , This one day day di.",  # 站长简介
        ## 下边是网页中的meta
        "meta_description": " Python Django JavaScript 学习讨论,我们是一群热爱Python的程序员，人生苦短，我用JavaScript！一个不会JavaScript的Python开发者不是一个好网管。",
        "meta_keywords":"Python,Django,JavaScript,程序员,人生苦短,我用Python",
        "profile_image":"assets/images/touxiang.jpg",  # 头像地址
        "blog_bg": "assets/pexels-masha-raymers-3068711.jpg", #当前站点背景图片地址
        "theme": "default_theme", # 当前使用的主题目录名称
        "build": "blog", # 静态文件的目录名称
        "md_dir": "articles", #md文件目录
        "blog_page_num":4,# 静态站点首页的数据分页数值
        "blog_test_url":"http://127.0.0.1:5500/blog/", #本地调试是的测试地址前缀
        "blog_url":"https://suiyan.cc/", # 你的域名，生产模式使用
        "github":"", # 这个是你的仓库地址前缀，暂时无用。
        # sns 图标 和地址，图标的选择，后边会说。
        "blog_sns": [
            {
                "ico": "github",
                "url": "https://github.com/bosichong/suiyan"
            },
            {
                "ico": "git",
                "url": "https://gitee.com/J_Sky/suiyan"
            },
            {
                "ico": "weibo",
                "url": "https://weibo.com/qq285911"
            },
            {
                "ico": "qq",
                "url": "https://user.qzone.qq.com/285911/"
            },
            {
                "ico": "book",
                "url": "https://www.zhihu.com/people/J_sky/activities"
            },
            {
                "ico": "rss",
                "url": "https://suiyan.cc/rss.xml"
            }
        ],
        # 站点的导航
        "nav": [
            {
                "ico": "home",
                "text": "Blog Home",
                "url": "index.html"
            },
            {
                "ico": "archive",
                "text": "Blog Archive",
                "url": "archives.html"
            },
            {
                "ico": "tags",
                "text": "Blog Tag",
                "url": "tags.html"
            },
            {
                "ico": "user",
                "text": "About Me",
                "url": "aboutme.html"
            }
        ]
    
    }

配置文件可以根据自己的需要添加删除，在jinja2 模板中使用`{{ 属性名称 }}`来调用。

修改完毕后就可以穿件文章了。

### 创建文章


    python z.py -n 此处写文章标题

注意！文章标题为必填！

这个时候就会在`articles`目录下创建一篇文章,并且使用`vscode`直接打开。
如果你没有安装`vscode`的命令行，需要安装后才会打开，但是文件会被创建


### 修改博客及站长资料

`config.json`里存放着一些站点的资料，上传前建议先修改成自己的资料。


### 运行站点

本地主题开发编写，推荐使用`Live Server`这个vscode得插件，非常方便。
在配置文件里修改：
"dev": 1,  # 调试模式，如果改为1，则使用"blog_test_url"来添加静态资源地址前缀，方便本地调试。

### 修改站点样式

采用jinja2模板引擎，在主题或是模板目录修改样式，一键生成页面，直接同步页面。
在jinja2 模板中使用`{{ 属性名称 }}`来调用。
站点图标：
[FontAwesome 4.7.0 中完整的675个图标样式CSS参考](https://9iphp.com/fa-icons)

### 部署

    git push origin master

提交`blog`目录下所有文件到git仓库即可，`blog`就是所有博客的全部文件！

### github pages

如何部署GitHub pages 搭建自己的博客，这里就不在详细介绍了，请参考下文。

[GitHub Pages 快速入门](https://docs.github.com/zh/pages/quickstart)


碎言这个名称取自与"碎言片语"，码兄累了吗？累了就休息一下，为未来的自己留下一些碎言片语吧。

碎言静态博客


### Github Pages绑定域名莫名失效？

最近更新博客的push更新到GitHub的仓库，更新之后总是发现域名莫名的失效了，我也没有动任何配置啊？为什么会时效呢？

### 回忆如何配置域名

在GitHub pages-- Settings -- pages -- Custom domain 添加你的域名


![在这里插入图片描述](https://suiyan.cc/assets/images/2023/0003.jpg)

每次失效的时候我都会发现这里的域名被删掉了，然后我有重新添加，但是我并没有手动删除，为什么会这样？

后来我添加了域名，发现有一条仓库的更新记录：Create CNAME，增加了一个：CNMAE的文件，里边有你的域名，至此我就知道为什么了，因为GitHub自动添加了CNAME，我却没有更新到本地，所以每次更新blog的时候都会删除掉这个CNAME文件，导致域名无法正常解析。

### 解决办法

添加域名解析后，更新CNAME文件到本地仓库，以后在更新blog提交push的时候就不会是CNAME文件缺失了。

最近更新博客的push更新到GitHub的仓库，更新之后总是发现域名莫名的失效了，我也没有动任何配置啊？为什么会时效呢？

Vue3+Element Plus环境搭建和一键切换明暗主题的配置

新站已提交sitemap百度不抓取Google也不收录

coding_blog 碎言静态博客主题

JianCe 简测简单的在线答题应用

vue3前端打包集成到后端fastAPI的uvicorn服务器

simple_blog 碎言静态博客主题

使用Python编写并部署个人静态博客:(二)实现静态页面的输出

css布局如何选择flex和grid?

从回调函数到JavaScript异步编程

2023重学前端:HTML CSS JavaScript基础复习

好了，又可以愉快的写博客了

使用Python编写并部署个人静态博客:(一)分析与设计

free_blog 碎言静态博客主题

程序员的痛苦：颈椎病和肩周炎

碎言静态博客

解决Github Pages自定义域名失效的问题

Vue3+Element Plus环境搭建和一键切换明暗主题的配置

新站已提交sitemap百度不抓取Google也不收录

coding_blog 碎言静态博客主题

JianCe 简测 简单的在线答题应用

vue3前端打包集成到后端fastAPI的uvicorn服务器

simple_blog 碎言静态博客主题

使用Python编写并部署个人静态博客:(二)实现静态页面的输出

css布局如何选择flex和grid?

从回调函数到JavaScript异步编程

2023重学前端:HTML CSS JavaScript基础复习

好了，又可以愉快的写博客了

使用Python编写并部署个人静态博客:(一)分析与设计

free_blog 碎言静态博客主题

程序员的痛苦：颈椎病和肩周炎

碎言静态博客

解决Github Pages自定义域名失效的问题

JianCe 简测简单的在线答题应用