diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c74bdc0 --- /dev/null +++ b/.gitignore @@ -0,0 +1,18 @@ +.vscode/ +__pycache__ +.DS_Store +node_modules/ +dist/ +instance/ +_dist/ +_assets/ +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Editor directories and files +.idea +*.suo +*.ntvs* +*.njsproj +*.sln \ No newline at end of file diff --git a/README.md b/README.md index 4db3103..92e6ac9 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,10 @@ +Bfdhfdf + +B +B +> "What I cannot create, I do not understand." +> -- Richard Feynman + ## python created by leeing on 2017/12/19 主要目的: @@ -15,8 +22,58 @@ ## blog learn flask frame +### flask +1、session 操作 + app.config[SECRET_KEY] = os.urandom(24) + + session[key] = value -- 添加设置 + session.get(key) -- 获取 + seesion.pop(key) -- 删除某个键值 + session.clear() -- 清除 + 机制: + * 把敏感数据经过加密后放入`session`中,然后再把`session`存放到cookie中,下次请求的时候,再从浏览器发送过来的cookie中读取session,然后再从session中读取敏感信息,并进行解密,获取最终的用户数据 + +2、如果没有指定时间,那么浏览器关闭那么session就自动结束 + session.permanent = True -- 设置过期时间为31天 + app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(days=7) -- 设置过期时间为7天 + +3、get 传参 + url_for(url, q='leeing') -- url?q=leeing + 后台通过 + request.args.get('key') -- 获取get请求参数 + +4、post请求 + request.form.get('key') -- 获取表单数据 + request.values.get('key') -- 获取所有参数 + +5、g属性 保存全局变量 + g.username = xxx | g.ip = yyy + g对象是专门用来保存用户的数据的 + g对象在一次请求中的所有代码的地方,都是可以使用的 | 当你第二次请求的时候`g`就不是同一个了 | 范围是当前请求内 + * 所以实用性还不如 session,因为g变量保存的周期不常 + +6、hook 钩子函数 + before_request | 在请求之前执行 | 是在视图函数执行之前执行的 | 只是一个装饰器 + * 可以截取所有的访问 | 即在所有请求进入`app.route`装饰的函数前先被处理一次 + after_request + * 在用户请求得到函数响应后再执行一次 | 这个执行是在`函数返回数据前`被调用 | 形成了`response`,但未返回给用户 + context_processor | 返回结果必须是 dict | 上下文处理器,包含上下文共用的变量 | 只是一个装饰器 + * 目的是让所有自定义变量在模板中可见 + +7、优雅的重定向所有未登录用户到登录界面 + 使用`@app.before_request`hook钩子进行登录验证 + * 两个条件判断 | `session.get('username')` | `request.endpoint not in ('login','register','static')` | 否则会不断重定向 `302` + * request.endpoint | 每个视图函数都有一个endpoint | 就是 @app.route下面的 `def 函数名`视图函数 + * 视图蓝本 blueprint + app.register_blueprint(user, url_prefix='user') + app.register_blueprint(file, url_prefix='file') + 这种情况下如果视图函数重名 | 需要带上前面的 `user`、`file` 才行呢 + 安装`flask-login` | 但是每个需要认证的路由都还必须添加一个`@login_required`的装饰器 + +8、 + ## crawler some crawler demos ## reading - read some python books and some of my thoughts \ No newline at end of file + read some python books and some of my thoughts diff --git a/blog/app.py b/blog/app.py deleted file mode 100644 index 5da121a..0000000 --- a/blog/app.py +++ /dev/null @@ -1,31 +0,0 @@ -''' -my blog -''' -from flask import Flask, render_template, redirect, url_for -from flask_bootstrap import Bootstrap - -app = Flask(__name__) -bootstrap = Bootstrap(app) - -@app.errorhandler(404) -def page_not_found(e): - return render_template('404.html'), 404 - -@app.errorhandler(500) -def internal_server_error(e): - return render_template('500.html'), 500 - -@app.route('/') -def index(): - return render_template('index.html') - -@app.route('/user/', methods=['GET']) -def user(name=None): - return render_template('user.html', name=name) - -@app.route('/register', methods=['GET']) -def register(): - return render_template('login/register.html') - -if __name__ == "__main__": - app.run(debug=True) diff --git a/blog/app/__init__.py b/blog/app/__init__.py new file mode 100644 index 0000000..761e225 --- /dev/null +++ b/blog/app/__init__.py @@ -0,0 +1,18 @@ +# -*- coding:utf-8 -*- +from flask import Flask +from flask_sqlalchemy import SQLAlchemy +from .home import home +from .article import article +from .user import user + +app = Flask(__name__) +# db = SQLAlchemy(app) + +# 注册蓝图 +app.register_blueprint(home, url_prefix='/home') +app.register_blueprint(user, url_prefix='/user') +app.register_blueprint(article, url_prefix='/article') + + + + diff --git a/blog/app/app.py b/blog/app/app.py new file mode 100644 index 0000000..37cc999 --- /dev/null +++ b/blog/app/app.py @@ -0,0 +1,138 @@ +''' +my blog +''' +from flask import Flask, render_template, redirect, url_for, flash, request, session, g +from flask import current_app +from flask_bootstrap import Bootstrap +from flask_restful import Api, Resource +from db import get_mongo_connection +import os +from datetime import timedelta + +app = Flask(__name__, instance_relative_config=True) +app.config.from_object('config') +app.config.from_pyfile('config.py') +print(app.config['DEBUG']) +print(app.config['SECRET_KEY']) +print(app.config['MONGO_DBNAME']) + +bootstrap = Bootstrap(app) +api = Api(app) +todos = {} + +mongo = get_mongo_connection() +db = mongo.myblog + + +# app.config['SECRET_KEY'] = os.urandom(24) +# app.config['SECRET_KEY'] = os.environ.get('SECRET_KEY') or 'hard to guess string' +# app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(days=1) +# session.permanent = True + +class TodoSimple(Resource): + def get(self, todo_id): + return {todo_id: todos[todo_id]} + + def put(self, todo_id): + if todo_id not in todos: + todos[todo_id] = request.form['data'] + return {todo_id: todos[todo_id]} + +api.add_resource(TodoSimple, '/', '/todo/') + + +@app.errorhandler(404) +def page_not_found(e): + return render_template('404.html'), 404 + +@app.errorhandler(500) +def internal_server_error(e): + return render_template('500.html'), 500 + +# @app.before_request +# def my_before_request(): +# if not session.get('username') and request.endpoint not in ('login', 'register', 'static'): +# return redirect(url_for('login')) + +@app.route('/') +def index(): + username = session.get('username') + return render_template(current_app.config['INDEX_TEMPLATE'], username=username) + +@app.route('/get') +def get_user(): + print(request.endpoint) + print(request.endpoint in ('login', 'get', 'static')) + username = session.get('username') + param = request.args #获取get参数 + print(param) + return render_template('user.html', name=username) + +@app.route('/user/', methods=['GET']) +def user(name=None): + return render_template('user.html', name=name) + +@app.route('/register', methods=['GET', 'POST']) +def register(): + if request.method == 'POST': + username = request.form.get('username') + password = request.form.get('password') + user_isexist = db.users.find_one({'username': username}) + if user_isexist: + flash('该用户名已被注册,请换一个用户名注册!') + return render_template('login/register.html') + else: + new_user = { + 'username': username, + 'password': password, + 'isAdmin': False + } + session['username'] = username + db.users.insert(new_user) + return redirect(url_for('login')) + else: + return render_template('login/register.html') + +@app.route('/login', methods=['GET', 'POST']) +def login(): + if request.method == 'POST': + print(request.values) + username = request.form.get('username') + password = request.form.get('password') + remember_me = request.form.get('rememberme') == 'on' + print(remember_me) + print(list(db.users.find({}))) + login_user = db.users.find_one({'username': username, 'password': password}) + print(login_user) + if remember_me: + session.permanent = True + if login_user: + session['username'] = username + if login_user.get('isAdmin'): + session['is_admin'] = True + return redirect(url_for('index')) + else: + flash('用户名或密码错误!') + return redirect(url_for('login')) + else: + return render_template('login/login.html') + +@app.route('/logout') +def logout(): + session.clear() + return redirect(url_for('login')) + +@app.route('/about') +def about(): + return render_template('about.html') + +@app.route('/article') +def article_list(): + return render_template('article/article_list.html') + +@app.route('/article/:id') +def article_detail(): + return render_template('article/article_detail.html') + +if __name__ == "__main__": + app.run() diff --git a/blog/app/article/__init__.py b/blog/app/article/__init__.py new file mode 100644 index 0000000..a2358a2 --- /dev/null +++ b/blog/app/article/__init__.py @@ -0,0 +1,12 @@ +# -*- coding:utf-8 -*- + +from flask import Blueprint + +article = Blueprint( + 'article', + __name__, + template_folder='templates', + static_folder='static' +) + +from . import views \ No newline at end of file diff --git a/blog/app/article/views.py b/blog/app/article/views.py new file mode 100644 index 0000000..58a9944 --- /dev/null +++ b/blog/app/article/views.py @@ -0,0 +1,7 @@ +# -*- coding:utf-8 -*- + +from . import article + +@article.route('/') +def article(): + return 'article' \ No newline at end of file diff --git a/blog/app/config.py b/blog/app/config.py new file mode 100644 index 0000000..db1d417 --- /dev/null +++ b/blog/app/config.py @@ -0,0 +1,8 @@ +# -*- coding:utf-8 -*- +"""通用配置参数""" +DEBUG = True +SECRET_KEY = 'this is my secret key!' +SQLALCHEMY_DATABASE_URI = 'mysql+mysqlconnector://root:123456@localhost/emdp' +SQLALCHEMY_TRACK_MODIFICATIONS = False + +INDEX_TEMPLATE = 'index.html' \ No newline at end of file diff --git a/blog/app/db.py b/blog/app/db.py new file mode 100644 index 0000000..9dca25a --- /dev/null +++ b/blog/app/db.py @@ -0,0 +1,15 @@ +# -*- coding:utf-8 -*- +from pymongo import MongoClient +from pymysql import connect +from instance.config import MONGO_URI, MYSQL_URI + +def get_mongo_connection(): + """mongo数据库连接""" + return MongoClient(host=MONGO_URI) + +def get_mysql_connection(): + """Mysql数据库连接""" + return connect(host=MYSQL_URI) + +# client = pymongo.MongoClient('localhost', 27017) +# user_db = client['myblog']['users'] diff --git a/blog/app/home/__init__.py b/blog/app/home/__init__.py new file mode 100644 index 0000000..f857abb --- /dev/null +++ b/blog/app/home/__init__.py @@ -0,0 +1,12 @@ +# -*- coding:utf-8 -*- + +from flask import Blueprint + +home = Blueprint( + 'home', + __name__, + template_folder='templates', + static_folder='static' +) + +from . import views \ No newline at end of file diff --git a/blog/app/home/views.py b/blog/app/home/views.py new file mode 100644 index 0000000..e3674f6 --- /dev/null +++ b/blog/app/home/views.py @@ -0,0 +1,7 @@ +# -*- coding:utf-8 -*- + +from . import home + +@home.route('/') +def index(): + return 'home' \ No newline at end of file diff --git a/blog/app/models.py b/blog/app/models.py new file mode 100644 index 0000000..9e8d1ef --- /dev/null +++ b/blog/app/models.py @@ -0,0 +1,8 @@ +# -*- coding:utf-8 -*- + +from . import db + +class Engine(db.Model): + id = db.Column(db.Integer, primary_key=True, autoincrement=True) + title = db.Column(db.String(128)) + views = db.Column(db.Integer, default=0) \ No newline at end of file diff --git a/blog/app/static/css/about.css b/blog/app/static/css/about.css new file mode 100644 index 0000000..1e8ff9d --- /dev/null +++ b/blog/app/static/css/about.css @@ -0,0 +1,329 @@ +.m-about { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.9); + z-index: 9999; + overflow-y: scroll; + color: #fff; + text-align: center; +} +.m-about .header { + position: absolute; + top: 0; + left: 0; + display: flex; + justify-content: space-between; + align-items: center; + height: 60px; + width: 100%; + padding: 0 50px; + border-bottom: 1px solid #eee; + color: #ed0a75; +} +.m-about .header .logo { + font-weight: 600; + font-size: 18px; +} +.m-about .header .nav { + display: flex; + align-items: center; + justify-content: space-between; +} +.m-about .header .nav span { + display: inline-block; + background-color: #ed0a75; + transition: all 0.3s; +} +.m-about .header .nav .music span { + width: 3px; + height: 24px; + margin-left: 2px; +} +.m-about .header .nav .music span:nth-child(2n+1) { + transform: scaleY(0.6); +} +.m-about .header .nav .music:hover span:nth-child(2n) { + transform: scaleY(0.6); +} +.m-about .header .nav .music:hover span:nth-child(2n+1) { + transform: scaleY(1); +} +.m-about .header .nav .skip { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: flex-end; + margin-left: 35px; + height: 24px; +} +.m-about .header .nav .skip span { + display: inline-block; + width: 20px; + height: 2px; + transform-origin: 0%; +} +.m-about .header .nav .skip span:nth-child(2n) { + width: 14px; +} +.m-about .header .nav .skip:hover span:first-child { + transform: rotate(35deg); +} +.m-about .header .nav .skip:hover span:nth-child(2) { + display: none; +} +.m-about .header .nav .skip:hover span:last-child { + transform: rotate(-35deg); +} +.m-about .bg-picture { + display: none; +} +.m-about .god { + margin-top: 30%; + text-align: center; +} +.m-about .god .motto { + margin-bottom: 10px; + line-height: 1.5; + font-size: 48px; + font-weight: 700; + letter-spacing: 5px; +} +.m-about .god .about-me { + font-size: 2rem; + letter-spacing: 5px; + line-height: 1.5; + margin-bottom: 25px; +} +.m-about .god .my-status .title { + font-size: 18px; + font-weight: 600; + letter-spacing: 4px; +} +.m-about .god .my-status .new-list { + padding: 10px 0; + height: 80px; + overflow: hidden; + opacity: 0.7; +} +.m-about .god .my-status .new-list li { + line-height: 24px; + padding: 15px 0; +} +.m-about .about { + margin-top: 100px; +} +.m-about .about .info { + max-width: 60%; + margin: 0 auto 80px; +} +.m-about .about .info .avatar { + display: inline-block; + width: 100px; + height: 100px; + border: 2px solid #ddd; + border-radius: 50%; + overflow: hidden; +} +.m-about .about .info .avatar img { + width: 100%; + height: 100%; + border-radius: 50%; + transition: all 0.3s; + opacity: 0.9; +} +.m-about .about .info .avatar img:hover { + transform: scale(1.2); + opacity: 1; +} +.m-about .about .info .resume { + margin-top: 10px; + display: inline-block; + padding: 10px 24px; + border-radius: 20px; + background-color: #aaa; + color: #333; + font-size: 14px; + transition: all 0.3s; +} +.m-about .about .info .resume:hover { + background-color: #eee; +} +.m-about .about .info h3 { + margin-bottom: 10px; + font-size: 22px; + font-weight: 700; +} +.m-about .about .info hr { + height: 2px; + width: 50px; + margin: 15px auto 30px; + background-color: rgba(0, 0, 0, 0.6); +} +.m-about .about .info p { + font-size: 14px; + color: #eee; +} +.m-about .about .info ul { + display: flex; + justify-content: center; + align-items: center; + padding: 10px; +} +.m-about .about .info ul.ul-wrap { + margin-top: 30px; +} +.m-about .about .info ul.ul-wrap li { + display: flex; + justify-content: center; + align-items: center; + width: 48px; + height: 48px; + margin: 0 10px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.05); +} +.m-about .about .info ul.ul-wrap li i { + font-size: 24px; + transition: all .3s; +} +.m-about .about .info ul.ul-wrap li:hover { + background-color: rgba(255, 255, 255, 0.1); +} +.m-about .about .info ul.ul-wrap li:hover i { + transform: scale(0.8); +} +.m-about .about .info ul.skill li { + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 80px; + height: 80px; + margin-left: 10px; + border-radius: 5px; + background-color: rgba(255, 255, 255, 0.05); +} +.m-about .about .info ul.skill li i { + transition: all 0.3s; + opacity: 1; +} +.m-about .about .info ul.skill li .skill-name { + position: absolute; + left: 0; + bottom: -40%; + width: 100%; + text-align: center; + letter-spacing: 2px; + font-size: 12px; +} +.m-about .about .info ul.skill li .detail { + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; + cursor: pointer; + z-index: 9; +} +.m-about .about .info ul.skill li .detail .skill-info { + position: absolute; + vertical-align: middle; + top: 0; + left: 0; + display: table; + width: 100%; + height: 100%; + transition: all .3s ease; + background-color: rgba(255, 255, 255, 0.1); + transform: translateY(100%); + overflow: hidden; + opacity: 0; +} +.m-about .about .info ul.skill li .detail .skill-info::before, +.m-about .about .info ul.skill li .detail .skill-info::after { + content: ''; + position: absolute; + width: 400px; + height: 400px; + top: 0; + left: 50%; + border-radius: 45%; + background-color: rgba(255, 255, 255, 0.1); + transform: translate(-50%, -85%) rotate(0); + animation: rotate50 6s linear infinite; + z-index: 10; + opacity: 0; +} +.m-about .about .info ul.skill li .detail .skill-info::after { + border-radius: 47%; + background-color: rgba(255, 255, 255, 0.2); + transform: translate(-50%, -85%) rotate(0); + animation: rotate50 7s linear infinite; + z-index: 20; +} +.m-about .about .info ul.skill li .detail .skill-info span { + display: table-cell; + height: 100%; + vertical-align: middle; +} +.m-about .about .info ul.skill li .detail:hover + i { + opacity: 0; + transform: scale(0); + transform-origin: center; +} +.m-about .about .info ul.skill li .detail:hover .skill-info { + opacity: 1; + transform: translateY(0); +} +.m-about .about .info ul.skill li .detail:hover .skill-info::before, +.m-about .about .info ul.skill li .detail:hover .skill-info::after { + opacity: 1; +} +.m-about .about .info ul.experience { + flex-direction: column; +} +.m-about .about .info ul.experience li { + display: flex; + width: 400px; + margin-bottom: 15px; +} +.m-about .about .info ul.experience li time { + display: inline-block; + width: 120px; + font-size: .9rem; + opacity: .9; +} +.m-about .about .info ul.experience li div { + text-align: left; +} +.m-about .about .info ul.experience li div p:last-child { + font-size: .8rem; + opacity: 0.8; +} +.m-about .footer { + padding: 50px 0 100px; + color: #ddd; + font-size: .8rem; +} +.m-about .footer div { + margin-bottom: 1.5rem; +} +.m-about .footer div a { + display: inline-block; + width: 36px; + height: 36px; + color: #ddd; +} +.m-about .footer div a i { + font-size: 24px; +} +.m-about .footer div a i:hover { + color: #eee; +} +.m-about .footer p { + line-height: 1.5rem; +} diff --git a/blog/app/static/css/about.less b/blog/app/static/css/about.less new file mode 100644 index 0000000..de770a5 --- /dev/null +++ b/blog/app/static/css/about.less @@ -0,0 +1,345 @@ +.m-about { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,.9); + z-index: 9999; + overflow-y: scroll; + color: #fff; + text-align: center; + .header { + position: absolute; + top: 0; + left: 0; + display: flex; + justify-content: space-between; + align-items: center; + height: 60px; + width: 100%; + padding: 0 50px; + border-bottom: 1px solid #eee; + color: #ed0a75; + .logo { + font-weight: 600; + font-size: 18px; + } + .nav { + display: flex; + align-items: center; + justify-content: space-between; + span { + display: inline-block; + background-color: #ed0a75; + transition: all 0.3s; + } + .music { + span { + width: 3px; + height: 24px; + margin-left: 2px; + &:nth-child(2n+1) { + transform: scaleY(0.6); + } + } + &:hover { + span { + &:nth-child(2n) { + transform: scaleY(0.6); + } + &:nth-child(2n+1) { + transform: scaleY(1); + } + } + } + } + .skip { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: flex-end; + margin-left: 35px; + height: 24px;; + span { + display: inline-block; + width: 20px; + height: 2px; + transform-origin: 0%; + &:nth-child(2n) { + width: 14px; + } + } + &:hover { + span { + &:first-child { + transform: rotate(35deg); + } + &:nth-child(2) { + display: none; + } + &:last-child{ + transform: rotate(-35deg); + } + } + } + } + } + } + .bg-picture { + display: none; + } + .god { + margin-top: 30%; + text-align: center; + .motto { + margin-bottom: 10px; + line-height: 1.5; + font-size: 48px; + font-weight: 700; + letter-spacing: 5px; + } + .about-me { + font-size: 2rem; + letter-spacing: 5px; + line-height: 1.5; + margin-bottom: 25px; + } + .my-status { + .title { + font-size: 18px; + font-weight: 600; + letter-spacing: 4px; + } + .new-list { + padding: 10px 0; + height: 80px; + overflow: hidden; + opacity: 0.7; + li { + line-height: 24px; + padding: 15px 0; + } + } + } + } + .about { + margin-top: 100px; + .info { + max-width: 60%; + margin: 0 auto 80px; + .avatar { + display: inline-block; + width: 100px; + height: 100px; + border: 2px solid #ddd; + border-radius: 50%; + overflow: hidden; + img { + width: 100%; + height: 100%; + border-radius: 50%; + transition: all 0.3s; + opacity: 0.9; + &:hover { + transform: scale(1.2); + opacity: 1; + } + } + } + .resume { + margin-top: 10px; + display: inline-block; + padding: 10px 24px; + border-radius: 20px; + background-color: #aaa; + color: #333; + font-size: 14px; + transition: all 0.3s; + &:hover { + background-color: #eee; + } + } + h3 { + margin-bottom: 10px; + font-size: 22px; + font-weight: 700; + } + hr { + height: 2px; + width: 50px; + margin: 15px auto 30px; + background-color: rgba(0,0,0,.6); + } + p { + font-size: 14px; + color: #eee; + } + ul { + display: flex; + justify-content: center; + align-items: center; + padding: 10px; + &.ul-wrap { + margin-top: 30px; + li { + display: flex; + justify-content: center; + align-items: center; + width: 48px; + height: 48px; + margin: 0 10px; + border-radius: 50%; + background-color: rgba(255,255,255,.05); + i { + font-size: 24px; + transition: all .3s; + } + &:hover { + background-color: rgba(255,255,255,.1); + i { + transform: scale(.8); + } + } + } + } + &.skill { + li { + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 80px; + height: 80px; + margin-left: 10px; + border-radius: 5px; + background-color: rgba(255,255,255,.05); + i { + transition: all 0.3s; + opacity: 1; + } + .skill-name { + position: absolute; + left: 0; + bottom: -40%; + width: 100%; + text-align: center; + letter-spacing: 2px; + font-size: 12px; + } + .detail { + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; + cursor: pointer; + z-index: 9; + .skill-info { + position: absolute; + vertical-align: middle; + top: 0; + left: 0; + display: table; + width: 100%; + height: 100%; + transition: all .3s ease; + background-color: rgba(255,255,255,0.1); + transform: translateY(100%); + overflow: hidden; + opacity: 0; + &::before, + &::after { + content: ''; + position: absolute; + width: 400px; + height: 400px; + top: 0; + left: 50%; + border-radius: 45%; + background-color: rgba(255,255,255,.1); + transform: translate(-50%, -85%) rotate(0); + animation: rotate50 6s linear infinite; + z-index: 10; + opacity: 0; + } + &::after { + border-radius: 47%; + background-color: rgba(255,255,255,.2); + transform: translate(-50%, -85%) rotate(0); + animation: rotate50 7s linear infinite; + z-index: 20; + } + span { + display: table-cell; + height: 100%; + vertical-align: middle; + } + } + &:hover { + & + i { + opacity: 0; + transform: scale(0); + transform-origin: center; + } + .skill-info { + opacity: 1; + transform: translateY(0); + &::before, + &::after { + opacity: 1; + } + } + } + } + } + } + &.experience { + flex-direction: column; + li { + display: flex; + width: 400px; + margin-bottom: 15px; + time { + display: inline-block; + width: 120px; + font-size: .9rem; + opacity: .9; + } + div { + text-align: left; + p:last-child { + font-size: .8rem; + opacity: 0.8; + } + } + } + } + } + } + } + .footer { + padding: 50px 0 100px; + color: #ddd; + font-size: .8rem; + div { + margin-bottom: 1.5rem; + a { + display: inline-block; + width: 36px; + height: 36px; + color: #ddd; + i { + font-size: 24px; + &:hover { + color: #eee; + } + } + } + } + p { + line-height: 1.5rem; + } + } +} diff --git a/blog/app/static/css/animation.css b/blog/app/static/css/animation.css new file mode 100644 index 0000000..d9b52ff --- /dev/null +++ b/blog/app/static/css/animation.css @@ -0,0 +1,20 @@ +@keyframes rotate50 { + 50% { + transform: translate(-50%, -85%) rotate(180deg); + } + 100% { + transform: translate(-50%, -85%) rotate(360deg); + } +} + +@keyframes cursoring { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} \ No newline at end of file diff --git a/blog/app/static/css/article.css b/blog/app/static/css/article.css new file mode 100644 index 0000000..223d074 --- /dev/null +++ b/blog/app/static/css/article.css @@ -0,0 +1,72 @@ +.m-article { + margin-top: 25px; +} +.m-article > div { + margin-bottom: 15px; +} +.m-article > div:nth-child(2) .avatar { + background-image: url(../images/fengling.png); +} +.m-article > div:nth-child(3) .avatar { + background-image: url(../images/art.png); +} +.m-article > div:nth-child(4) .avatar { + background-image: url(../images/brain.png); +} +.m-article > div:nth-child(5) .avatar { + background-image: url(../images/cat.png); +} +.m-article > div:nth-child(6) .avatar { + background-image: url(../images/shop.png); +} +.m-article article { + background: #f5f5f5; +} +.m-article article a { + display: block; + padding: 10px; + transition: all .3s; + text-align: center; +} +.m-article article a .avatar { + display: flex; + justify-content: flex-end; + align-items: flex-end; + height: 180px; + border-radius: 5px; + background-image: url(../images/2018.png); + background-position: center; + background-size: 100%; +} +.m-article article a .avatar .info { + padding-right: 10px; + background: #333; + font-size: 12px; + opacity: 0.8; + color: #fff; +} +.m-article article a .avatar .info > span { + margin-left: 10px; +} +.m-article article a .avatar .info > span i:hover { + color: #f90; +} +.m-article article a footer { + padding: 20px 10px 10px; +} +.m-article article a footer .time { + color: #888; + font-size: 12px; +} +.m-article article a footer .title { + transition: all .2s linear; + font-weight: 600; +} +.m-article article a:hover { + transform: scale(0.95); +} +.m-article article a:hover .title { + transform: scale(1.3); + color: #ff5252; + letter-spacing: 2px; +} diff --git a/blog/app/static/css/article.less b/blog/app/static/css/article.less new file mode 100644 index 0000000..79121f9 --- /dev/null +++ b/blog/app/static/css/article.less @@ -0,0 +1,82 @@ +.m-article { + margin-top: 25px; + > div { + margin-bottom: 15px; + &:nth-child(2) { + .avatar { + background-image: url(../images/fengling.png); + } + } + &:nth-child(3) { + .avatar { + background-image: url(../images/art.png); + } + } + &:nth-child(4) { + .avatar { + background-image: url(../images/brain.png); + } + } + &:nth-child(5) { + .avatar { + background-image: url(../images/cat.png); + } + } + &:nth-child(6) { + .avatar { + background-image: url(../images/shop.png); + } + } + } + article { + background: #f5f5f5; + a { + display: block; + padding: 10px; + transition: all .3s; + text-align: center; + .avatar { + display: flex; + justify-content: flex-end; + align-items: flex-end; + height: 180px; + border-radius: 5px; + background-image: url(../images/2018.png); + background-position: center; + background-size: 100%; + .info { + padding-right: 10px; + background: #333; + font-size: 12px; + opacity: 0.8; + color: #fff; + > span { + margin-left: 10px; + i:hover { + color: #f90; + } + } + } + } + footer { + padding: 20px 10px 10px; + .time { + color: #888; + font-size: 12px; + } + .title { + transition: all .2s linear; + font-weight: 600; + } + } + &:hover { + transform: scale(.95); + .title { + transform: scale(1.3); + color: #ff5252; + letter-spacing: 2px; + } + } + } + } +} \ No newline at end of file diff --git a/blog/static/css/main.css b/blog/app/static/css/main.css similarity index 78% rename from blog/static/css/main.css rename to blog/app/static/css/main.css index c6649f6..c4258a9 100644 --- a/blog/static/css/main.css +++ b/blog/app/static/css/main.css @@ -12,10 +12,6 @@ .clearfix:after { clear: both; } -.logo { - color: #f90; - font-size: 22px; -} .m-bg { position: fixed; top: 0; @@ -37,7 +33,13 @@ width: 60%; margin: 50px auto; padding: 30px; - border: 1px solid #eee; + border: 1px solid #ddd; border-radius: 5px; box-shadow: 1px 1px 2px #ddd; + background-color: rgba(255, 255, 255, 0.5); +} +.m-login .checkbox { + display: flex; + justify-content: space-between; + padding-right: 5px; } diff --git a/blog/static/css/main.less b/blog/app/static/css/main.less similarity index 85% rename from blog/static/css/main.less rename to blog/app/static/css/main.less index 3bd13f8..802749e 100644 --- a/blog/static/css/main.less +++ b/blog/app/static/css/main.less @@ -35,10 +35,6 @@ .clearfix() } -.logo { - color: #f90; - font-size: 22px; -} // 背景 .m-bg { position: fixed; @@ -62,7 +58,14 @@ width: 60%; margin: 50px auto; padding: 30px; - border: 1px solid #eee; + border: 1px solid #ddd; border-radius: 5px; box-shadow: 1px 1px 2px #ddd; -} \ No newline at end of file + background-color: rgba(255,255,255,.5); + .checkbox { + display: flex; + justify-content: space-between; + padding-right: 5px; + } +} + diff --git a/blog/app/static/css/reset.css b/blog/app/static/css/reset.css new file mode 100644 index 0000000..a638fae --- /dev/null +++ b/blog/app/static/css/reset.css @@ -0,0 +1,59 @@ +@charset "utf-8"; +/* 初始化CSS */ +* { + box-sizing: border-box; +} +html, body, div, p, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0;word-wrap:break-word;word-break:break-all; }fieldset, img { border:none; } +h1, h2, h3, h4, h5, h6{font-weight: normal;} +fieldset, img { border:none; } +address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; } +ul,ol,dl,dd,dt,li { list-style:none;} +input,img,fieldset {border:none} +img{vertical-align:middle} +input { padding-top:0; padding-left:0; padding-bottom:0;outline:none;} +a:focus,input{outline:none} +select, input { vertical-align:middle; } +select, input, textarea { font-size:12px; padding: 0; margin:0; font-family:"Microsoft YaHei","微软雅黑", "宋体", Arial, "Times New Roman";} +table { border-collapse:collapse; } +table,tr,td{ border:none;} +/*td{ border-left:1px solid; border-bottom:1px solid;}*/ +body {background:#fff;color:#555; font:14px/20px "Microsoft YaHei","微软雅黑", "宋体", Arial, "Times New Roman"; } +a,a:hover{ color:#333; text-decoration:none; cursor: pointer;} +b{font-weight: normal;} +i{font-style: normal;} +input[type="text"],input[type="password"],input[type="number"],input[type="button"]{-webkit-appearance:none;appearance:none;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);} +hr{margin:0;} +.clearfix:before,.clearfix:after { + content:".";display:block;height:0;clear:both;visibility:hidden +} +.clearfix { + display:block; + zoom: 1; +} + +/*常用的几个css样式 简写*/ +.l { + float: left; +} +.r { + float: right; +} +.hide { + display: none; +} + +.scroll-bar::-webkit-scrollbar { + width: 10px; + height: 16px; + padding: 5px 0; + background: #aaa; + border-radius: 5px; +} +.scroll-bar::-webkit-scrollbar-thumb { + width: 10px; + background: #bbb; + border-radius: 5px; +} +.scroll-bar::-webkit-scrollbar-track { + background: #ddd; +} diff --git a/blog/static/favicon.1.ico b/blog/app/static/favicon.1.ico similarity index 100% rename from blog/static/favicon.1.ico rename to blog/app/static/favicon.1.ico diff --git a/blog/static/favicon.ico b/blog/app/static/favicon.ico similarity index 100% rename from blog/static/favicon.ico rename to blog/app/static/favicon.ico diff --git a/blog/app/static/font/iconfont/demo.css b/blog/app/static/font/iconfont/demo.css new file mode 100644 index 0000000..3d9cbe7 --- /dev/null +++ b/blog/app/static/font/iconfont/demo.css @@ -0,0 +1,370 @@ +*{margin: 0;padding: 0;list-style: none;} +/* +KISSY CSS Reset +理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作。清除和重置是紧密不可分的。 +2. reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。 +3. reset 期望提供一套普适通用的基础样式。但没有银弹,推荐根据具体需求,裁剪和修改后再使用。 +特色:1. 适应中文;2. 基于最新主流浏览器。 +维护:玉伯, 正淳 + */ + +/** 清除内外边距 **/ +body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ +dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ +pre, /* text formatting elements 文本格式元素 */ +form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ +th, td /* table elements 表格元素 */ { + margin: 0; + padding: 0; +} + +/** 设置默认字体 **/ +body, +button, input, select, textarea /* for ie */ { + font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; +} +h1, h2, h3, h4, h5, h6 { font-size: 100%; } +address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ +code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ +small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */ + +/** 重置列表元素 **/ +ul, ol { list-style: none; } + +/** 重置文本格式元素 **/ +a { text-decoration: none; } +a:hover { text-decoration: underline; } + + +/** 重置表单元素 **/ +legend { color: #000; } /* for ie6 */ +fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */ +button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ +/* 注:optgroup 无法扶正 */ + +/** 重置表格元素 **/ +table { border-collapse: collapse; border-spacing: 0; } + +/* 清除浮动 */ +.ks-clear:after, .clear:after { + content: '\20'; + display: block; + height: 0; + clear: both; +} +.ks-clear, .clear { + *zoom: 1; +} + +.main { + padding: 30px 100px; +width: 960px; +margin: 0 auto; +} +.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;} + +.helps{margin-top:40px;} +.helps pre{ + padding:20px; + margin:10px 0; + border:solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists{ + width: 100% !important; + +} + +.icon_lists li{ + float:left; + width: 100px; + height:180px; + text-align: center; + list-style: none !important; +} +.icon_lists .icon{ + font-size: 42px; + line-height: 100px; + margin: 10px 0; + color:#333; + -webkit-transition: font-size 0.25s ease-out 0s; + -moz-transition: font-size 0.25s ease-out 0s; + transition: font-size 0.25s ease-out 0s; + +} +.icon_lists .icon:hover{ + font-size: 100px; +} + + + +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p, +.markdown pre { + margin: 1em 0; +} + +.markdown > p, +.markdown > blockquote, +.markdown > .highlight, +.markdown > ol, +.markdown > ul { + width: 80%; +} + +.markdown ul > li { + list-style: circle; +} + +.markdown > ul li, +.markdown blockquote ul > li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown > ul li p, +.markdown > ol li p { + margin: 0.6em 0; +} + +.markdown ol > li { + list-style: decimal; +} + +.markdown > ol li, +.markdown blockquote ol > li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown pre { + border-radius: 6px; + background: #f7f7f7; + padding: 20px; +} + +.markdown pre code { + border: none; + background: #f7f7f7; + margin: 0; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown > table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown > table th { + white-space: nowrap; + color: #333; + font-weight: 600; + +} + +.markdown > table th, +.markdown > table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown > table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; + font-style: italic; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown > br, +.markdown > p > br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +pre{ + background: #fff; +} + + + + + diff --git a/blog/app/static/font/iconfont/demo_fontclass.html b/blog/app/static/font/iconfont/demo_fontclass.html new file mode 100644 index 0000000..65ff58b --- /dev/null +++ b/blog/app/static/font/iconfont/demo_fontclass.html @@ -0,0 +1,280 @@ + + + + + + IconFont + + + + +
+

IconFont 图标

+
    + +
  • + +
    chat
    +
    .icon-chat
    +
  • + +
  • + +
    知乎
    +
    .icon-zhihu
    +
  • + +
  • + +
    全屏
    +
    .icon-fullscreen
    +
  • + +
  • + +
    html5
    +
    .icon-html5
    +
  • + +
  • + +
    微信
    +
    .icon-message
    +
  • + +
  • + +
    邮箱
    +
    .icon-email
    +
  • + +
  • + +
    音量
    +
    .icon-voice
    +
  • + +
  • + +
    电影
    +
    .icon-film
    +
  • + +
  • + +
    网易
    +
    .icon-wangyi
    +
  • + +
  • + +
    邮箱
    +
    .icon-email1
    +
  • + +
  • + +
    微博
    +
    .icon-sina
    +
  • + +
  • + +
    github
    +
    .icon-github
    +
  • + +
  • + +
    jianshu
    +
    .icon-jianshu
    +
  • + +
  • + +
    Git
    +
    .icon-git
    +
  • + +
  • + +
    github
    +
    .icon-github1
    +
  • + +
  • + +
    mongodb
    +
    .icon-mongodb
    +
  • + +
  • + +
    暂停
    +
    .icon-pause
    +
  • + +
  • + +
    返回
    +
    .icon-reset
    +
  • + +
  • + +
    react
    +
    .icon-react
    +
  • + +
  • + +
    python
    +
    .icon-python
    +
  • + +
  • + +
    代码
    +
    .icon-code
    +
  • + +
  • + +
    mysql
    +
    .icon-mysql
    +
  • + +
  • + +
    mongoDb
    +
    .icon-mongodb1
    +
  • + +
  • + +
    播放
    +
    .icon-paly1
    +
  • + +
  • + +
    Git
    +
    .icon-git1
    +
  • + +
  • + +
    vue
    +
    .icon-vue
    +
  • + +
  • + +
    nodejs
    +
    .icon-nodejs
    +
  • + +
  • + +
    icon_Music2
    +
    .icon-music1
    +
  • + +
  • + +
    icon-music-note
    +
    .icon-music-note
    +
  • + +
  • + +
    微信
    +
    .icon-weixin
    +
  • + +
  • + +
    js
    +
    .icon-js
    +
  • + +
  • + +
    Music Icon
    +
    .icon-music
    +
  • + +
  • + +
    播放
    +
    .icon-play
    +
  • + +
  • + +
    网易邮箱账号
    +
    .icon-wangyiyouxiangzhanghao
    +
  • + +
  • + +
    篮球
    +
    .icon-lanqiu
    +
  • + +
  • + +
    代码
    +
    .icon-source-code
    +
  • + +
  • + +
    zhihu
    +
    .icon-zhihu1
    +
  • + +
  • + +
    jianshu
    +
    .icon-jianshu1
    +
  • + +
  • + +
    koa
    +
    .icon-koa
    +
  • + +
  • + +
    网易云音乐
    +
    .icon-netease
    +
  • + +
+ +

font-class引用

+
+ +

font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。

+

与unicode使用方式相比,具有如下特点:

+
    +
  • 兼容性良好,支持ie8+,及所有现代浏览器。
  • +
  • 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
  • +
  • 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
  • +
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
  • +
+

使用步骤如下:

+

第一步:引入项目下面生成的fontclass代码:

+ + +
<link rel="stylesheet" type="text/css" href="./iconfont.css">
+

第二步:挑选相应图标并获取类名,应用于页面:

+
<i class="iconfont icon-xxx"></i>
+
+

"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。

+
+
+ + diff --git a/blog/app/static/font/iconfont/demo_symbol.html b/blog/app/static/font/iconfont/demo_symbol.html new file mode 100644 index 0000000..3cabef2 --- /dev/null +++ b/blog/app/static/font/iconfont/demo_symbol.html @@ -0,0 +1,383 @@ + + + + + + IconFont + + + + + + +
+

IconFont 图标

+
    + +
  • + +
    chat
    +
    #icon-chat
    +
  • + +
  • + +
    知乎
    +
    #icon-zhihu
    +
  • + +
  • + +
    全屏
    +
    #icon-fullscreen
    +
  • + +
  • + +
    html5
    +
    #icon-html5
    +
  • + +
  • + +
    微信
    +
    #icon-message
    +
  • + +
  • + +
    邮箱
    +
    #icon-email
    +
  • + +
  • + +
    音量
    +
    #icon-voice
    +
  • + +
  • + +
    电影
    +
    #icon-film
    +
  • + +
  • + +
    网易
    +
    #icon-wangyi
    +
  • + +
  • + +
    邮箱
    +
    #icon-email1
    +
  • + +
  • + +
    微博
    +
    #icon-sina
    +
  • + +
  • + +
    github
    +
    #icon-github
    +
  • + +
  • + +
    jianshu
    +
    #icon-jianshu
    +
  • + +
  • + +
    Git
    +
    #icon-git
    +
  • + +
  • + +
    github
    +
    #icon-github1
    +
  • + +
  • + +
    mongodb
    +
    #icon-mongodb
    +
  • + +
  • + +
    暂停
    +
    #icon-pause
    +
  • + +
  • + +
    返回
    +
    #icon-reset
    +
  • + +
  • + +
    react
    +
    #icon-react
    +
  • + +
  • + +
    python
    +
    #icon-python
    +
  • + +
  • + +
    代码
    +
    #icon-code
    +
  • + +
  • + +
    mysql
    +
    #icon-mysql
    +
  • + +
  • + +
    mongoDb
    +
    #icon-mongodb1
    +
  • + +
  • + +
    播放
    +
    #icon-paly1
    +
  • + +
  • + +
    Git
    +
    #icon-git1
    +
  • + +
  • + +
    vue
    +
    #icon-vue
    +
  • + +
  • + +
    nodejs
    +
    #icon-nodejs
    +
  • + +
  • + +
    icon_Music2
    +
    #icon-music1
    +
  • + +
  • + +
    icon-music-note
    +
    #icon-music-note
    +
  • + +
  • + +
    微信
    +
    #icon-weixin
    +
  • + +
  • + +
    js
    +
    #icon-js
    +
  • + +
  • + +
    Music Icon
    +
    #icon-music
    +
  • + +
  • + +
    播放
    +
    #icon-play
    +
  • + +
  • + +
    网易邮箱账号
    +
    #icon-wangyiyouxiangzhanghao
    +
  • + +
  • + +
    篮球
    +
    #icon-lanqiu
    +
  • + +
  • + +
    代码
    +
    #icon-source-code
    +
  • + +
  • + +
    zhihu
    +
    #icon-zhihu1
    +
  • + +
  • + +
    jianshu
    +
    #icon-jianshu1
    +
  • + +
  • + +
    koa
    +
    #icon-koa
    +
  • + +
  • + +
    网易云音乐
    +
    #icon-netease
    +
  • + +
+ + +

symbol引用

+
+ +

这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:

+
    +
  • 支持多色图标了,不再受单色限制。
  • +
  • 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
  • +
  • 兼容性较差,支持 ie9+,及现代浏览器。
  • +
  • 浏览器渲染svg的性能一般,还不如png。
  • +
+

使用步骤如下:

+

第一步:引入项目下面生成的symbol代码:

+
<script src="./iconfont.js"></script>
+

第二步:加入通用css代码(引入一次就行):

+
<style type="text/css">
+.icon {
+   width: 1em; height: 1em;
+   vertical-align: -0.15em;
+   fill: currentColor;
+   overflow: hidden;
+}
+</style>
+

第三步:挑选相应图标并获取类名,应用于页面:

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+        
+
+ + diff --git a/blog/app/static/font/iconfont/demo_unicode.html b/blog/app/static/font/iconfont/demo_unicode.html new file mode 100644 index 0000000..0b25e37 --- /dev/null +++ b/blog/app/static/font/iconfont/demo_unicode.html @@ -0,0 +1,318 @@ + + + + + + IconFont + + + + + +
+

IconFont 图标

+
    + +
  • + +
    chat
    +
    &#xe64d;
    +
  • + +
  • + +
    知乎
    +
    &#xe6d1;
    +
  • + +
  • + +
    全屏
    +
    &#xe624;
    +
  • + +
  • + +
    html5
    +
    &#xe681;
    +
  • + +
  • + +
    微信
    +
    &#xe65c;
    +
  • + +
  • + +
    邮箱
    +
    &#xe65d;
    +
  • + +
  • + +
    音量
    +
    &#xe62a;
    +
  • + +
  • + +
    电影
    +
    &#xe619;
    +
  • + +
  • + +
    网易
    +
    &#xe672;
    +
  • + +
  • + +
    邮箱
    +
    &#xe65e;
    +
  • + +
  • + +
    微博
    +
    &#xe67b;
    +
  • + +
  • + +
    github
    +
    &#xe600;
    +
  • + +
  • + +
    jianshu
    +
    &#xe616;
    +
  • + +
  • + +
    Git
    +
    &#xe60f;
    +
  • + +
  • + +
    github
    +
    &#xe60b;
    +
  • + +
  • + +
    mongodb
    +
    &#xe657;
    +
  • + +
  • + +
    暂停
    +
    &#xe613;
    +
  • + +
  • + +
    返回
    +
    &#xe6d6;
    +
  • + +
  • + +
    react
    +
    &#xe770;
    +
  • + +
  • + +
    python
    +
    &#xe601;
    +
  • + +
  • + +
    代码
    +
    &#xe60d;
    +
  • + +
  • + +
    mysql
    +
    &#xe664;
    +
  • + +
  • + +
    mongoDb
    +
    &#xe668;
    +
  • + +
  • + +
    播放
    +
    &#xe63a;
    +
  • + +
  • + +
    Git
    +
    &#xe604;
    +
  • + +
  • + +
    vue
    +
    &#xe644;
    +
  • + +
  • + +
    nodejs
    +
    &#xe609;
    +
  • + +
  • + +
    icon_Music2
    +
    &#xe6bb;
    +
  • + +
  • + +
    icon-music-note
    +
    &#xe634;
    +
  • + +
  • + +
    微信
    +
    &#xe605;
    +
  • + +
  • + +
    js
    +
    &#xe606;
    +
  • + +
  • + +
    Music Icon
    +
    &#xe625;
    +
  • + +
  • + +
    播放
    +
    &#xe66a;
    +
  • + +
  • + +
    网易邮箱账号
    +
    &#xe62d;
    +
  • + +
  • + +
    篮球
    +
    &#xe6d9;
    +
  • + +
  • + +
    代码
    +
    &#xe607;
    +
  • + +
  • + +
    zhihu
    +
    &#xe60c;
    +
  • + +
  • + +
    jianshu
    +
    &#xe60e;
    +
  • + +
  • + +
    koa
    +
    &#xe671;
    +
  • + +
  • + +
    网易云音乐
    +
    &#xe60a;
    +
  • + +
+

unicode引用

+
+ +

unicode是字体在网页端最原始的应用方式,特点是:

+
    +
  • 兼容性最好,支持ie6+,及所有现代浏览器。
  • +
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • +
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
  • +
+
+

注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式

+
+

unicode使用步骤如下:

+

第一步:拷贝项目下面生成的font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.eot');
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+  url('iconfont.woff') format('woff'),
+  url('iconfont.ttf') format('truetype'),
+  url('iconfont.svg#iconfont') format('svg');
+}
+
+

第二步:定义使用iconfont的样式

+
.iconfont{
+  font-family:"iconfont" !important;
+  font-size:16px;font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: 0.2px;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步:挑选相应图标并获取字体编码,应用于页面

+
<i class="iconfont">&#x33;</i>
+ +
+

"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。

+
+
+ + + + diff --git a/blog/app/static/font/iconfont/iconfont.css b/blog/app/static/font/iconfont/iconfont.css new file mode 100644 index 0000000..94c3ea1 --- /dev/null +++ b/blog/app/static/font/iconfont/iconfont.css @@ -0,0 +1,101 @@ + +@font-face {font-family: "iconfont"; + src: url('iconfont.eot?t=1514356874343'); /* IE9*/ + src: url('iconfont.eot?t=1514356874343#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), + url('iconfont.ttf?t=1514356874343') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ + url('iconfont.svg?t=1514356874343#iconfont') format('svg'); /* iOS 4.1- */ +} + +.iconfont { + font-family:"iconfont" !important; + font-size:16px; + font-style:normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-chat:before { content: "\e64d"; } + +.icon-zhihu:before { content: "\e6d1"; } + +.icon-fullscreen:before { content: "\e624"; } + +.icon-html5:before { content: "\e681"; } + +.icon-message:before { content: "\e65c"; } + +.icon-email:before { content: "\e65d"; } + +.icon-voice:before { content: "\e62a"; } + +.icon-film:before { content: "\e619"; } + +.icon-wangyi:before { content: "\e672"; } + +.icon-email1:before { content: "\e65e"; } + +.icon-sina:before { content: "\e67b"; } + +.icon-github:before { content: "\e600"; } + +.icon-jianshu:before { content: "\e616"; } + +.icon-git:before { content: "\e60f"; } + +.icon-github1:before { content: "\e60b"; } + +.icon-pause:before { content: "\e613"; } + +.icon-reset:before { content: "\e6d6"; } + +.icon-react:before { content: "\e770"; } + +.icon-python:before { content: "\e601"; } + +.icon-code:before { content: "\e60d"; } + +.icon-mysql:before { content: "\e664"; } + +.icon-mongodb:before { content: "\e668"; } + +.icon-paly1:before { content: "\e63a"; } + +.icon-browse:before { content: "\e65f"; } + +.icon-enshrine:before { content: "\e614"; } + +.icon-vue:before { content: "\e644"; } + +.icon-nodejs:before { content: "\e609"; } + +.icon-search:before { content: "\e610"; } + +.icon-music-note:before { content: "\e634"; } + +.icon-weixin:before { content: "\e605"; } + +.icon-js:before { content: "\e606"; } + +.icon-music:before { content: "\e625"; } + +.icon-play:before { content: "\e66a"; } + +.icon-star:before { content: "\e602"; } + +.icon-wangyiyouxiangzhanghao:before { content: "\e62d"; } + +.icon-basketball:before { content: "\e6d9"; } + +.icon-source-code:before { content: "\e607"; } + +.icon-zhihu1:before { content: "\e60c"; } + +.icon-jianshu1:before { content: "\e60e"; } + +.icon-json:before { content: "\e652"; } + +.icon-koa:before { content: "\e671"; } + +.icon-netease:before { content: "\e60a"; } + diff --git a/blog/app/static/font/iconfont/iconfont.eot b/blog/app/static/font/iconfont/iconfont.eot new file mode 100644 index 0000000..49ff2d8 Binary files /dev/null and b/blog/app/static/font/iconfont/iconfont.eot differ diff --git a/blog/app/static/font/iconfont/iconfont.js b/blog/app/static/font/iconfont/iconfont.js new file mode 100644 index 0000000..47085c1 --- /dev/null +++ b/blog/app/static/font/iconfont/iconfont.js @@ -0,0 +1 @@ +(function(window){var svgSprite='';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window) \ No newline at end of file diff --git a/blog/app/static/font/iconfont/iconfont.svg b/blog/app/static/font/iconfont/iconfont.svg new file mode 100644 index 0000000..f8b6c2d --- /dev/null +++ b/blog/app/static/font/iconfont/iconfont.svg @@ -0,0 +1,159 @@ + + + + + +Created by iconfont + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/blog/app/static/font/iconfont/iconfont.ttf b/blog/app/static/font/iconfont/iconfont.ttf new file mode 100644 index 0000000..dd74497 Binary files /dev/null and b/blog/app/static/font/iconfont/iconfont.ttf differ diff --git a/blog/app/static/font/iconfont/iconfont.woff b/blog/app/static/font/iconfont/iconfont.woff new file mode 100644 index 0000000..eb986f9 Binary files /dev/null and b/blog/app/static/font/iconfont/iconfont.woff differ diff --git a/blog/app/static/images/2018.png b/blog/app/static/images/2018.png new file mode 100644 index 0000000..832c528 Binary files /dev/null and b/blog/app/static/images/2018.png differ diff --git a/blog/app/static/images/2018s.png b/blog/app/static/images/2018s.png new file mode 100644 index 0000000..e5b3d39 Binary files /dev/null and b/blog/app/static/images/2018s.png differ diff --git a/blog/app/static/images/art.png b/blog/app/static/images/art.png new file mode 100644 index 0000000..f6316e7 Binary files /dev/null and b/blog/app/static/images/art.png differ diff --git a/blog/app/static/images/avatar.png b/blog/app/static/images/avatar.png new file mode 100644 index 0000000..e3bc6ea Binary files /dev/null and b/blog/app/static/images/avatar.png differ diff --git a/blog/static/images/banner-05.jpg b/blog/app/static/images/banner-05.jpg similarity index 100% rename from blog/static/images/banner-05.jpg rename to blog/app/static/images/banner-05.jpg diff --git a/blog/static/images/banner-06.jpg b/blog/app/static/images/banner-06.jpg similarity index 100% rename from blog/static/images/banner-06.jpg rename to blog/app/static/images/banner-06.jpg diff --git a/blog/app/static/images/brain.png b/blog/app/static/images/brain.png new file mode 100644 index 0000000..4e83b34 Binary files /dev/null and b/blog/app/static/images/brain.png differ diff --git a/blog/app/static/images/cat.png b/blog/app/static/images/cat.png new file mode 100644 index 0000000..d5c59bb Binary files /dev/null and b/blog/app/static/images/cat.png differ diff --git a/blog/app/static/images/fengling.png b/blog/app/static/images/fengling.png new file mode 100644 index 0000000..523e3d9 Binary files /dev/null and b/blog/app/static/images/fengling.png differ diff --git a/blog/app/static/images/lovelytime.png b/blog/app/static/images/lovelytime.png new file mode 100644 index 0000000..8fddf2e Binary files /dev/null and b/blog/app/static/images/lovelytime.png differ diff --git a/blog/app/static/images/shop.png b/blog/app/static/images/shop.png new file mode 100644 index 0000000..884395d Binary files /dev/null and b/blog/app/static/images/shop.png differ diff --git a/blog/app/static/js/main.js b/blog/app/static/js/main.js new file mode 100644 index 0000000..6db7946 --- /dev/null +++ b/blog/app/static/js/main.js @@ -0,0 +1,21 @@ +$(function() { + console.log(` + + 444444444 000000000 444444444 + 4::::::::4 00:::::::::00 4::::::::4 + 4:::::::::4 00:::::::::::::00 4:::::::::4 +4::::44::::4 0:::::::000:::::::0 4::::44::::4 +4::::4 4::::4 0::::::0 0::::::0 4::::4 4::::4 +4::::4 4::::4 0:::::0 0:::::0 4::::4 4::::4 +4::::4 4::::4 0:::::0 0:::::0 4::::4 4::::4 +4::::444444::::4440:::::0 000 0:::::04::::444444::::444 +4::::::::::::::::40:::::0 000 0:::::04::::::::::::::::4 +4444444444:::::4440:::::0 0:::::04444444444:::::444 + 4::::4 0:::::0 0:::::0 4::::4 + 4::::4 0::::::0 0::::::0 4::::4 + 4::::4 0:::::::000:::::::0 4::::4 + 44::::::44 00:::::::::::::00 44::::::44 + 4::::::::4 00:::::::::00 4::::::::4 + 4444444444 000000000 4444444444 + `) +}) \ No newline at end of file diff --git a/blog/templates/404.html b/blog/app/templates/404.html similarity index 100% rename from blog/templates/404.html rename to blog/app/templates/404.html diff --git a/blog/templates/500.html b/blog/app/templates/500.html similarity index 91% rename from blog/templates/500.html rename to blog/app/templates/500.html index c2a4a6e..911c987 100644 --- a/blog/templates/500.html +++ b/blog/app/templates/500.html @@ -6,4 +6,4 @@ -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/blog/app/templates/about.html b/blog/app/templates/about.html new file mode 100644 index 0000000..10a58c2 --- /dev/null +++ b/blog/app/templates/about.html @@ -0,0 +1,203 @@ +{% extends "base.html" %} + +{% block title %}About{% endblock %} +{% block my_link %} + {{super()}} + +{% endblock %} + + +{% block main %} +
+
+ + +
+
+ +
+
+
+

保持简单和稳定

+

ABOUT ME

+
+

我的动态

+
+
    +
  • 定义模块的层次结构就像在文件系统上建立目录结构一样容易
  • +
  • 定义模块的层次结构就像在文件系统上建立目录结构一样容易
  • +
  • 定义模块的层次结构就像在文件系统上建立目录结构一样容易
  • +
+
+
+
+
+
+ + avatar + +
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+ 我的简历 +
+
+

BELEIVE

+
+

定义模块的层次结构就像在文件系统上建立目录结构一样容易定义模块的层次结构就像在文件系统上建立目录结构一样容易

+
+
+

ENJOY

+
+
    +
  • +
  • +
  • +
  • +
+
+
+

PROGRESS

+
+
    +
  • + +
    +

    同方威视技术股份有限公司

    +

    web开发工程师

    +
    +
  • +
  • + +
    +

    北京恒昌利通投资管理有限公司

    +

    前端开发工程师

    +
    +
  • +
  • + +
    +

    北京亚控科技发展有限公司

    +

    产品研发工程师

    +
    +
  • +
  • + +
    +

    湖南大学 -- 硕士

    +

    电子科学与技术

    +
    +
  • +
+
+
+

SKILLS

+
+
    +
  • +
    +
    + 80% +
    +
    + +

    Html5

    +
  • +
  • +
    +
    + 70% +
    +
    + +

    Javascript

    +
  • +
  • +
    +
    + 70% +
    +
    + +

    Vue

    +
  • +
  • +
    +
    + 50% +
    +
    + +

    React

    +
  • +
  • +
    +
    + 60% +
    +
    + +

    Nodejs

    +
  • +
  • +
    +
    + 75% +
    +
    + +

    Python

    +
  • +
  • +
    +
    + 70% +
    +
    + +

    Mongodb

    +
  • +
+
+
+
+
+ + + + + +
+

版权左右 2017 Leeing。保留所有版权,欢迎多多交流

+

powered by python, Developed by Leeing

+
+
+
+{% endblock %} diff --git a/blog/app/templates/article/article_detail.html b/blog/app/templates/article/article_detail.html new file mode 100644 index 0000000..dbd53ed --- /dev/null +++ b/blog/app/templates/article/article_detail.html @@ -0,0 +1,12 @@ +{% extends "base.html" %} +{% block title %}Article{% endblock %} +{% block my_link %} + {{super()}} + +{% endblock %} + +{% block page_content %} +
+ +
+{% endblock %} diff --git a/blog/app/templates/article/article_list.html b/blog/app/templates/article/article_list.html new file mode 100644 index 0000000..09cfd8d --- /dev/null +++ b/blog/app/templates/article/article_list.html @@ -0,0 +1,167 @@ +{% extends "base.html" %} +{% block title %}Article{% endblock %} +{% block my_link %} + {{super()}} + +{% endblock %} + +{% block page_content %} +
+ + + + + + +
+{% endblock %} \ No newline at end of file diff --git a/blog/templates/base.html b/blog/app/templates/base.html similarity index 59% rename from blog/templates/base.html rename to blog/app/templates/base.html index 9320bdb..f622870 100644 --- a/blog/templates/base.html +++ b/blog/app/templates/base.html @@ -7,6 +7,9 @@ {% block my_link %} + + + {% endblock %} {% endblock %} @@ -27,19 +30,27 @@