碎言博客

关于站长

J.sky 2019-12-30 16:25:07 未分类

About Me

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

关于碎言博客

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

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

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

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

碎言博客终端操作详解

J.sky 2019-12-30 15:56:49 碎言博客

关于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下。

碎言静态博客概述及快速开始

J.sky 2019-12-29 19:10:30 碎言博客

概述

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



软件架构

前端使用了 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

这是一个快速学习JavaScript的学习笔记4

J.sky 2019-12-24 13:53:19 jQuery

jQuery 和 HTML DOM

DOM 是 Document Object Model(文档对象模型)的缩写。

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

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

描述 JQuery JavaScript
创建节点 $("<div>') document.createElement("div“)
选择元素 $(CSS选择器) querySelector(CSS选择器);
document.querySelectorAll(CSS选择器);
getElementById();
getElementsByTagName();
getElementsByClassName();
更改元素CSS 修改单个CSS:$("p").css("backgroundColor", "red")
修改多个CSS:
$("p").css({
"color":"white",
"background-color":"#98bf21",
"font-family":"Arial",
"font-size":"20px",
"padding":"5px"
});
元素.style.backgroundColor="red"
更改元素属性 元素.prop("disabled",true);
元素.attr("disabled",true);
元素.disabled=true;
元素.setAttribute("disabled",true);
获取元素属性 元素.prop("disabled");
元素.attr("disabled");
元素.getAttribute(”disabled")
标签里添加 HTML 标签或文本 元素.html("<em>target4</em>") 元素.innerHTML="<em>target4</em>"
标签里只改变文本而不增加标签 元素.text() 元素.innerText或者元素.textContent(不同浏览器不同方法);
元素.文本子元素.nodeValue
设置或返回表单字段的值 元素.val() value
删除元素 元素自身.remove() 父元素.removeChild(子元素);
子元素.parentNode.removeChild(子元素);
末尾增加元素

新元素.appendTo(父元素)

父元素.append(新元素)

父元素.appendChild(新元素)
指定位置增加元素 父元素.insertBefore(插入元素,参照元素)
替换元素 父元素.replaceChild(插入元素,替换元素)
克隆元素 元素.clone(); 元素.cloneNode(true):深克隆;
元素.cloneNode(false):浅克隆;
父元素 元素.parent() 元素.parentNode
子元素 元素.children()
元素.children("CSS选择器")
元素.childNodes(返回NodeList对象)
元素.firstChild;
元素.lastChild;
后代元素 元素.find("CSS选择器")
示例:$('li.item-ii').find('li'),返回被选元素的后代元素,一路向下直到最后一个后代
兄弟元素 元素.next();
元素.prev();
元素.nextSibling;
元素.previousSibling;
伪类选择器选定子元素 $("button:nth-child(3)")
选择属于其父元素的第3个子元素的每个<button> 元素。
$(".target:odd") 选择奇数位置元素;
$(".target:even") 选择偶数位置元素;
显示元素 元素.show() 元素.style.display=“block"
隐藏元素 元素.hide() 元素.style.display=“none"
页面资源全装载完成后触发 ${window}.on("load",function(){}); window.onload=function(){};
DOM加载完成后触发 ${document}.read(function(){});
对象定义 var $pin = $( "#main" ); var main=document.getElementById('main')
访问元素集合指定索引值 $('li').eq(2)  (第二个li元素) nodeList[i]或nodeList.item(i)
集合中的第一个元素 .first()
集合中的最后一个元素 .last()
为数组每个匹配元素规定运行的函数

$(selector).each(function(index,value){})

$.each( object, function(index,value){})

for循环遍历执行
事件 元素.click(function(){...})

1、元素.onclick=function(){...}

2、元素.addClickListener('click',function(){...})

设置或返回元素的宽度(不包括内边距、边框或外边距) width() width
设置或返回元素的高度(不包括内边距、边框或外边距) height() height
返回元素的宽度(包括内边距) innerWidth() clientWidth
返回元素的高度(包括内边距) innerHeight() clientHeight
返回元素的宽度(包括内边距和边框) outerWidth() offsetWidth
返回元素的g高度(包括内边距和边框) outerHeight() offsetHeight
返回视口宽度/高度 $(window).width()/$(window).height() 内边距=0情况下的document.documentElement.clientWidth
返回文档宽度/高度 $(document).width()/$(document).height()
获取垂直滚动的距离 $(document).scrollTop() document.documentElement.scrollTop
获取水平滚动的距离 $(document).scrollLeft() document.documentElement.scrollLeft
被选元素相对于文档(document)的偏移坐标

offset().top,offset().left

offsetTop,offsetLeft(offsetParent是默认body时,或者是效果相当于body的定位元素时)

这是一个快速学习JavaScript的学习笔记3

J.sky 2019-12-23 11:53:19 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的学习笔记2

J.sky 2019-12-22 10:55:19 JavaScript

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

```

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

J.sky 2019-11-07 16:10:19 站长源创

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小学生常用单词,后台可以根据自己的需要进行添加题库进行测试。

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

参与贡献

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

源码下载:

PYBabyLog记录孩子成长过程的日记

J.sky 2019-09-29 00:15:30 站长源创

前言

岁月如风,唯有此忆。 任凭时光匆匆,记录点点滴滴。

当爸爸了,就多陪陪孩子,有事没事的记些与孩子在一起的时光,不要总把心思放在程序编码上,也多陪陪孩子!

做了那么多的程序,是时候为孩子做个数据库,也许将来某一天你也会翻翻看看。

PYBabyLog的前身是 BabyLog(Java开发版)

是用来记录孩子成长过程的日记,她包括:日记,语言,认知等,还包括身高,体重,并使用图表展示。

PYBabyLog

PYBabyLog使用Python开发的终端版本,其增删改查的操作都是在终端进行的,大大的节省了程序员老爹的宝贵时间。

采用Python+MySQL+argparse技术开发的全终端操作软件。

可以说编程新手下载随便看看都能看懂,软件功能非常简单,但意义非凡。

本程序数据库和 BabyLog(Java开发版) 通用,可以用来展示数据。 当然牛逼的你可以自己制作更威猛的展示,最好能提交一份代码给我好吗?

界面截图

输入图片说明

输入图片说明

安装方法

1.下载程序所有文件,并建立mysql数据库,导入下边的sql文件构建数据库 数据库构建文件

2.修改 DbHelp.py 中的MySQL的连接配置项即可

终端版操作命令简介

整理中。。。。。 x.py -h 就都出来了。

写在结尾

其实有很多话想说,估计很多程序员都有了自己的孩子,记录一些和孩子在一起的时光吧,那将是你自己最好的回忆。

若给各位大虾能提交些代码或是有好的建议,非常欢迎!

程序源码下载: