碎言博客HTML结构

博客HTML只有4个：

• index.html 博客首页
• archives.html 归档
• tags.html 标签页
• p.html 博文详情页

CSS修改

碎言博客CSS前端采用的bootstrap4框架，CSS样式修改采用了less本地修改生成的.css文件。这里推荐一个vscode插件: Easy LESS

这个插件的特点就是在相同目录下可以生成一个同名的.CSS文件，配合 less 的引用命令 @import "theme-dark-1.less"; 使用起来很方便的。

博客的样式修改

碎言博客的样式主要集中在 <link id="blogcss"> 标签连接的CSS，通过修改对应的LESS文件中对应的颜色变量，可以快速的修改博客的颜色及相关样式，变量我都有注释。

Markdown代码样式

Markdown代码样式通过修改 <link id="highlight"> 标签连接的highlightCSS来修改，在 assets/plugins/highlight/styles 下可以选择自己喜欢的样式。

进阶修改

觉得手动修改站点样式太麻烦？可以利用 jQuery 在站点上添加在线改变站点样式的浮动按钮，近期会考录添加的碎言博客的。

About Me

一个浪迹于互联网的编程爱好者且酷爱画画，希望能成为一名出色的插画师。

关于碎言博客

本来用 Python Django 开发了一套简易的博客系统，但是由于维护起来倍感吃力，而且云服务器也即将到期费用不菲。

索性改成静态博客得了，试了几个静态博客程序，但是总觉得和别人一样太没意思，正好最近在学习 JavaScript jQuery ，

索性撸一个静态博客，发现自己就是爱重复造轮子。

欢迎进群讨论学习Q群:217840699

关于z.py

z.py 是碎言博客构建索引的关键程序，采用 Python3 相关技术开发。

终端运行： python3 z.py

即可看到相关的命令帮助。

-i

python3 z.py -i

每次创建完新文章后都会自动创建索引，若是修改了文章的标题，作者，标签，时间等头部信息后，应该运行此命令进行索引更新。

-n

python3 z.py -n 这里写你的新文章的标题名称

• -n 用来创建新文章，其中还有几个选项可以使用，其中 -n 后边必须跟随一个新标题。

• -d 用来创建一个存放的目录

  python3 z.py -n blog_title -d blog

会在默认 .md 存放目录 articles 下创建一个 blog 目录，新文章就创建在这里。

• -t -a -p 分别对应标签，作者和文章地址页面名称。作者留空默认填充为博客站长昵称。

• -v 显示当前程序的版本。

• -tt 参数为 int ，此命令用来生成测试blog,填写需要生成的数目，测试文章放在目录suiyantest下。

概述

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

软件架构

前端使用了 jQuery，bootstrap4,font-awesome-4.07,marked.js,highlight.js,jqPaginator,less,jQuery.toTop等技术框架。

本地构建博客索引使用了 Python 的相关技术。

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

快速开始

安装

首先克隆下载碎言静态博客， Gitee GitHub

安装完成。

创建文章

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

这个时候就会在 articles 目录下创建一篇文章。 更多终端操作

创建索引

博客的文章排序及搜索以来此索引 blog_data.json ，每次创建文章的时候回自动更新索引，但是如果你修改了头部的一些索引信息，则需要运行命令来更新索引。

python z.py -i

修改博客及站长资料

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

config 配置详解点击查看

运行站点

推荐使用 Live Server 这个vscode得插件，非常方便。

修改站点样式

碎言博客内置了八套网站样式，四套light四套dark，修改四个html页面的外链CSS连接即可。

具体修改方法请点击查看： 细说修改碎言博客站点的样式

部署

git push origin master

提交所有文件到git仓库即可。

欢迎交流

如果有什么问题，欢迎进群讨论学习Q群:217840699

jQuery 和 HTML DOM

DOM 是 Document Object Model（文档对象模型）的缩写。

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。 换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。

JavaScript中的对象

JavaScript 定义了 5 种原始数据类型：

string
number
boolean
null
undefined

除了这些都是对象，对象是包含变量的变量。

//JavaScript对象
//定义对象
var p = {fname:"javascript",lname:"function"}
p.oname = "java";//对象添加属性
//forin 遍历对象属性。
for (k in p ){console.log(p[k]);}
delete p.oname;
console.log(p.oname);//undefined
p.f = function (s) { console.log(s)}//方法
p.f('定义对象中的方法。')

// 定义类
function Person(name,age){
    this.name = name;
    this.age = age;
}

JavaScript 对象原型

所有 JavaScript 对象都从原型继承属性和方法。

Object.prototype 位于原型继承链的顶端：

为对象添加属性和方法：

// 接上边的例子
//通过prototype添加属性和方法。
Person.prototype.where = 'china';
Person.prototype.sayHello = function() {alert(this.name+" hello "+this.where)}
p1.sayHello();

JavaScript语句

var和function是用来声明变量和语句的。 ```JavaScript var a,b,c=88;

```

条件语句

```JavaScript //if else var n = 2; if (n == 1) { alert('ok') } else { lert('no') }

//switch var m = 4; switch (m) { case 1: alert('no') break; case 4: alert('yes') default: //如果条件都不符合执行 break; }

```

循环语句

• for - 多次遍历代码块
• for/in - 遍历对象属性
• while - 当指定条件为 true 时循环一段代码块

• do/while - 当指定条件为 true 时循环一段代码块

• break 语句“跳出”循环。

• continue 语句“跳过”循环中的一个迭代。

```JavaScript //while 略 //do while 略

// for var i = 0, j = 10; for (i; i<j; i++) { console.log(i)

}

```

function

function用来声明一个函数。

```JavaScript function myFunction(p1, p2) { return p1 * p2; // 该函数返回 p1 和 p2 的乘积 }

var mf = myFunction(p1, p2) { return p1 * p2; // 该函数返回 p1 和 p2 的乘积 }

//见 test.js var mf = function myFunction(p1, p2) { return p1 * p2; // 该函数返回 p1 和 p2 的乘积 } document.querySelector("div").textContent = mf(6,2);//12

```

匿名函数与闭包

```JavaScript

//这是一个匿名函数 //匿名函数可以用来命名空间，且立即执行，避免变量污染。 (function(){console.log('匿名函数写法1')}()); //推荐第二种方法。 (function(s){console.log(s)})('匿名函数写法2');

//简书上一篇不错的JavaScript闭包的文章 //https://www.jianshu.com/p/80fb145d57d7 //闭包1 var add = (function () { var counter = 0; return function () {return counter += 1;} })();

add(); add(); console.log(add());//=>3

//闭包2 ;(function(){ var a=1; var addOne=function(x){ return x+a; } window.addOne=addOne; })() console.log(addOne(2)); // 3

```

PyWordTest

介绍

孩子的学习总是让父母担忧，英语学习也是让家长的头疼之事，做为程序员老爸不能整天忙于编程而忽视了孩子的教育，我们也要搞点事情。孩子英文单词到底背的怎么样了？别怕，用PyWordTest,创建题库，轻松搞定孩子的英语单词拼写情况。

> 本软件非英语单词学习软件，只是通过在线答题来检测孩子对单词拼写的掌握。

软件通过在线考试，记录考试结果及每个单词的拼写对错情况，最后通过一些算法分析孩子对单词拼写熟练度。

通过易错单词了解孩子哪些单词没有掌握，通过自建题库加强孩子对生疏单词的反复练习，更多功能还在研发中。

程序截图：

软件架构

基于Django构建的小学生英文单词背写检测考试系统。

环境需求： python (3.6.1) Django (2.2.7) Pillow

安装教程

进入程序目录后，运行python3 manage.py runserver

后台管理地址http://127.0.0.1:8000/admin/

管理员登陆:

用户名：admin 密码：17python.com

前台地址http://127.0.0.1:8000/

使用说明

程序已经采集了近1000小学生常用单词，后台可以根据自己的需要进行添加题库进行测试。

建议新建一个帐号用来考试建题库使用。

参与贡献

非常欢迎有想法的程序员参与提交代码，程序还很不完善！希望大家多多参与！

源码下载：

• github
• 开源中国码云镜像gitee