QuykHtml
1.0.0
一个 Python 库，可让您快速轻松地生成 HTML 模板，甚至创建完整的网站。
如果您慷慨大方或想给我买杯咖啡或捐款，以下是我的现金应用程序：
cash app: $elmling
新功能：
- 表达
主要特点：
- 烧瓶
- 将命令链接在一起
- Javascript/jQuery 支持
- 表格创建
- 阿贾克斯创造
- 表格创建
- 升压
- 搜索引擎优化
- 登陆页面示例
# 从库中导入类from QuykHtml import qhtml# 实例化类q = qhtml()# 将修改后的p元素插入到我们的主显示中q.display.insert(q.new('p').set_text('Hello World').set_id ('text-id').style.set('font-size:24px;'))# 渲染页面q.display.render()from QuykHtml import qhtml# 实例化类 q = qhtml()# 创建一个 divdiv = q.new("div")# 创建一个段落 p = q.new("p")# 创建一个 inputinput = q.new("input") # 通过将所有对象插入到 displayq.display.insert([div, p, input]).render() 来渲染结果from QuykHtml import qhtml# 实例化类 q = qhtml()# 声明 css，允许列表列表，第一个值为类名，第二个值为标记/样式字符串 q.css.add([["div", "font-size:32px;"],[".div_custom","color:gray;"]])# 您也可以通过使用两个函数调用 add 方法来执行相同的操作argumentq.css.add("div","font-size:32px;")q.css.add(".div_custom","color:gray;")# 使用 .div_custom 类创建一个 div 并设置文本在 divdiv = q.new("div").set_class("div_custom").set_text("QuykHtml Rocks!")# 您可以使用内联样式来设置元素的样式并设置文本divdiv2 = q.new("div").style.set("font-size:48px;color:green;").set_text("QuykHtml Rocks!")# 渲染结果q.display.insert([div, div2 ]）。使成为（）from QuykHtml import qhtml# 实例化类 q = qhtml()p = q.new("p")# 全局元素 Settersp.style.set('color:red;')p.style.append('background-color:yellow; ')p.add_attribute('title="Qhytml 是简单！"')p.set_text('text')p.set_text_ipsum()p.set_text_ipsum_large()p.set_text_ipsum_small()p.set_class('class1 class2')p.set_form_button()p.set_id('my-id ')p.set_name('some-name')p.set_value('自定义值')p.set_tool_tip('简单悬停文本工具提示')p.on_click("alert('我被点击了！');")p.on_click_goto('google.com')p.on_right_click("alert('我被右键点击了！');") p.on_mouse_enter("alert('鼠标进入！');")p.on_mouse_leave("alert('鼠标离开！');")html = p.html()#特定元素settersq.new("img").set_img_src('src_url')q.new("img").set_img_placeholder(400)q.new("img").on_click_showPreview()q.new("form").set_form_ options('file.php','get')q.new("button").set_form_button()q.new("iframe").set_iframe('google.com')q.new("input").设置自动完成（假）from QuykHtml import qhtml# 实例化类 q = qhtml()# 轻松“导入”引导实用程序 q.bootstrap.use(True)# 创建 1 行 2 列的原始表table = q.table(1,2)# 使用基于 0 的插入方法索引 -> insert_at(行、列、qhtml_object 或列表qhtml_objects)table.insert_at(0,0,q.new("p").set_text("第1行第1列"))table.insert_at(0,1,q.new("p").set_text("行1 列 2"))# 同样有效的语法table = q.table(1,2).insert_at(0,0,q.new("p").set_text("Row 1第 1 列")).insert_at(0,1,q.new("p").set_text("第 1 行第 2 列"))# Td 操作示例 for i in range(2):
table.style_td_at(0,i,'text-align:center') table.set_td_class_at(0,i,'some-class') table.set_td_id_at(0,i,'some-id' + str(i))#确保构建表 # 该表返回一个带有表代码的 div tabletable = table.build()# 渲染结果 q.display.insert(table).render()from QuykHtml import qhtml# 实例化类 q = qhtml()# 轻松“导入”引导实用程序 q.bootstrap.use(True)# 附加脚本，甚至可以从文件中读取 q.scripts.append( 'function js_function() {'' alert("A JS Function");''}')# 将脚本附加到 qhtml 对象 p = q.new("p").set_text("Text element").scripts_add( 'function js_function() {''alert("A JS Function");''}')# 将页面加载时执行的代码附加到 qhtml 对象 p = q.new("p") .set_text("文本元素").scripts_add('alert("页面加载时运行Js代码");', on_page_load=True)q.display.insert(p).render()from QuykHtml import qhtml# 实例化类 q = qhtml()# 轻松“导入”引导实用程序 q.bootstrap.use(True)# 在 p 元素上创建 ajax 请求# 始终在回调函数中指定 r，因为这是响应 textp = q.new("p").ajax_build('get','file.php?args=1&args2=2","_some_call_back_func(r)')# 如果需要快速定义函数 bep.scripts_add('function _some_call_back_func(r) ){alert("Response text " + r.responseText);}')# 附加JS代码，以便页面加载时调用ajax function using# element.ajax_get("pointer") <- ajax_build构建的'ajax方法'p.scripts_add(p.ajax_get("pointer"),on_page_load=True)q.display.insert(p).render()from QuykHtml import qhtml# 实例化类 q = qhtml()# 轻松“导入”引导实用程序 q.bootstrap.use(True)# 创建表单 elementform = q.new("form").set_form_options('file.php','post' )# 创建输入元素并将名称设置为 form_nameinput = q.new("input").set_name('form_name')# 创建按钮并使用方法.set_form_button() # 使其在单击时发送表单button = q.new("button").set_text("submit").set_form_button()# 将表单元素插入表单form.insert([input,button ])q.display.insert(form).render()轻松使用官方标记语言（使用bootstrap）
快速轻松地定义 qhtml 对象。
- use attr-'attributename' to declare normal html element attributes - use 'attributename' to attempt to use ANY Qhtml setter methods on an element - you declare columns by element position in the list - each list item is essentially a row - requires bootstrap (instantiate with qhtml method)
# 实例化类 q = qhtml()# 轻松“导入”引导实用程序 q.bootstrap.use(True)# express 方法返回# 一个实际的 qhtml 对象layout = q.express([
['div','p','div']
]).style.set('背景颜色:#45afed;')q.display.insert(layout).render()# 实例化类 q = qhtml()# 轻松“导入”引导实用程序 q.bootstrap.use(True)# express 方法返回# 一个实际的 qhtml 对象layout = q.express([
['div attr-class="myclass"','p attr-id="myid"','div attr-style="background-color:red"']
]).style.set('背景颜色:#45afed;')q.display.insert(layout).render()# 实例化 classq = qhtml()# 轻松“导入”引导实用程序 q.bootstrap.use(True)# Qhtml 对象有一个名为：set_text 的方法# 它还有一个名为：set_img_src# 所以我们省略了“set_”前缀。因此，我们只需使用 text="some text"# 来调用所说的方法layout = q.express([
['div','p text="QuykHtml 太棒了！"','div'],
['div','img img_src="myimagesource.com" attr-class="myImgClass"','div']
]).style.set('背景颜色:#45afed;')q.display.insert(layout).render()# 实例化类 q = qhtml()# 轻松“导入”引导实用程序 q.bootstrap.use(True)# 定义一些 cssq.css.add('.center','text-align:center;')# 创建表单 elementslayout = q.express([
['div', 'p text="电子邮件"', 'div'],
['div', '输入', 'div'],
['div', 'p text="密码"', 'div'],
['div', '输入', 'div'],
['div', 'p text="确认"', 'div'],
['div', '输入', 'div'],
['div', 'button text="完成" attr-value="提交" attr-class="margin-top-med 注册"', 'div']
]).set_class("center", True)# 创建实际的表单容器 elementform = q.new('form').set_class('center')# 插入表单元素并设置表单选项form.insert(layout). set_form_options("register.php", "post")# 渲染结果q.display.insert(form)from QuykHtml import qhtml# 实例化类 q = qhtml()# 定义一些SEOq.seo.set_page_title('页面标题')q.seo.set_page_author('作者')q.seo.set_page_keywords('一些关键词')q.seo .set_page_encoding('UTF-8')q.seo.set_page_auto_refresh(30) # 刷新间隔30 秒list_of_seo = q.seo.display_all_seo()from QuykHtml import qhtml# 实例化类 q = qhtml()# 链接命令 q.new("p").set_text('some text').set_class('text-class').set_id('text-id').on_click( "alert('clicked me');").style.set("cursor:pointer;")# 渲染参数示例# output_file str_path, only_html boolean, set_clip_board booleanq.display.insert(q.new("p.").set_text("渲染参数")).render(output_file="file/path/file.html")q.display.insert(q. new("p.").set_text("渲染参数")).render(only_html=True)q.display.insert(q.new("p.").set_text("渲染参数")).render(output_file="file/path/file.html", set_clip_board=True)q.display.insert(q.new("p.").set_text("渲染参数")).render(only_html=True,set_clip_board=True)q.display.insert(q.new("p.").set_text("渲染参数")).render()# ------ ----------------------# Bootstrap - 支持# --------------------- ---------q.bootstrap.use(True)div = q.new("div").set_class("row")div_col1 = q.new("div").set_class("col").set_text("column1")div_col2 = q.new("div").set_class("col").set_text("column2")div.insert( [div_col1,div_col2])# 也是有效的语法div = q.new("div").set_class("row").insert([ q.new("div").set_class("col").set_text("column1"), q.new("div").set_class("col").set_text("column2")
])# ------------------------------# 追加到头部 tagq.head.append('<script type="文本/javascript" src="path/to/js_code.js"></script>')q.head.append('<link rel="stylesheet" href="path/to/css.css">') # 内置颜色助手sc = q.css.colorscolors = [c.LIGHT_GRAY, c.DARK_GRAY,c.LIGHT_GREEN,c.DARK_GREEN] # 以及更多..for color in color: print(color) # - > #hex_value# 循环遍历 qhtml 实例的每个创建的对象for element in q.all: print('元素类型 -> ' + element.type) element.set_text("覆盖")
# 复制元素对象sp_main = q.new("p").style.set("font-size:32px;")p1 = q.dupe(p_main).set_text('p标签编号1').style.append( 'color:red;')p2 = q.dupe(p_main).set_text('p 标签编号 2').style.append('color:green;')# 导出 css 样式添加到 'q.css'q.css.add('p','font-size:32px;')q.css.add('div','text-align:center;')q.css.export ('路径/to/export.css') from QuykHtml import qhtmlq = qhtml()q.bootstrap.use(True)head = q.new('div')head_text = q.new('p')head_text.set_text('示例登陆标题').style.align('center').style.font_size('64px;').style.append('padding-top:200px;padding-bottom:200px;background-color:gray;color:white; ')head.insert(head_text)body = q.new('div').style.set('width:65%;margin:auto;margin-bottom:100px;').set_class('row')body_text = q.new('p').set_text_ipsum_large().style.font_size('24px').style.align('left').style.append('margin-top:60px;margin-bottom:60px;') .style.font_color('灰色')body_img_1 = q.new('img').set_class('col').set_img_placeholder(400).style.height('400px').style.append('margin-top:20px;')body_img_2 = q.dupe(body_img_1 )body.insert([body_text,body_img_1,body_img_2])页脚= q.new('div').style.align('center').style.set('margin:0px;position:fixed;bottom:0px;width:100%;background-color:gray;padding-top: 5px;padding-bottom:5px;')footer_text = q.new('p').style.set('font-weight:bold;margin:0px;')footer_text.set_text('示例页脚文本。保留所有权利。').style.align('center').style.font_size('15px').style.font_color('white')footer.insert(footer_text)q.display.insert([head,body,页脚]).render() # 一个非常简单的 Flask Hello World 应用程序供您入门... from QuykHtml import qhtmlfrom Flask import Flaskq = qhtml()q.bootstrap.use(True)app = Flask(__name__)# 始终使用“”作为外部字符串引号和 ' ' 内 if needon_click_code = "alert('You clicked the button!');"# Div 包含 p 元素和带有 on click 事件的按钮 div = q.new('div').style.set('text-align:center;').insert([q.new("p").style.font_size('42px').set_text("这有效" ),q.new('button').style.font_size('24px').set_text('点击我').on_click(on_click_code)
])# Div 包含一个带有问候语文本的 p 元素div2 = q.new('div').style.set('background-color:gray;text-align:center;').insert([q.new(' p').style.set('font-size:32px;color:white;font-weight:bold;').set_text('来自 QuykHtml 和 Flask 的问候！')
])@app.route('/')def hello_world(): # 在 qhtml 对象上使用 .html 方法来获取它的 HTML 并提供它return div.html() + div2.html()# 一个非常简单的 Flask Hello World 应用程序供您入门... from QuykHtml import qhtmlfrom Flask import Flaskq = qhtml()q.bootstrap.use(True)app = Flask(__name__)# 始终使用“”作为外部字符串引号和 ' ' 内 if needon_click_code = "alert('You clicked the button!');"# Div 包含 p 元素和带有 on click 事件的按钮 div = q.new('div').style.set('text-align:center;').insert([q.new("p").style.font_size('42px').set_text("这有效" ),q.new('button').style.font_size('24px').set_text('点击我').on_click(on_click_code)
])# Div 包含一个带有问候语文本的 p 元素div2 = q.new('div').style.set('background-color:gray;text-align:center;').insert([q.new(' p').style.set('font-size:32px;color:white;font-weight:bold;').set_text('来自 QuykHtml 和 Flask 的问候！')
])# 将对象放置在显示中并将文件渲染到 test.txtq.display.insert([div,div2]).render(output_file='test.txt', only_html=True)@app.route('/ ')def hello_world(): # 使用 file_read 方法获取渲染的 HTML 并提供它html = q.file_read('test.txt')return html 
