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 方法來執行相同的操作q.css.add(" div", "font-size:32px;")q.css.add(".div_custom","color:gray;")# 使用.div_custom 類別建立一個div，並在div 中設定文字div = 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]).render()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("按鈕" ).set_form_button()q.new("iframe").set_iframe('google.com')q.new("input").set_auto_complete(False)from QuykHtml import qhtml# 實例化類別q = qhtml()# 輕鬆「導入」引導實用程式q.bootstrap.use(True)# 建立1 行2 列的原始表table = q.table(1,2)# 使用基於0 的插入方法index -> 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( "第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("文字元素").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 函式 using# element.ajax_get("pointer") <- 'ajax_build 建構的 ajax 方法' p.scripts_add(p.ajax_get("指標"),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("pert(q.new("pert .") .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">') # 內建顏色助手c = q.css.colorscolors = [c.LIGHT_GRAY, c.DARK_GRAY,c.LIGHT_GREEN,c.DARK_GREEN] # 以及更多..for color in color: print(color) # - > #hex_value# Loop透過 qhtml 實例的每個建立的物件 for element in q.all: print('Element type - > ' + element.type) element.set_text("Overwrite")
# 複製元素物件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 tag number 2').style.append('color:green;')# 導出新增到'q.css' 的css 樣式q. css.add('p','font-size:32px;')q.css.add('div','text-align:center;')q.css.export('path/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])footer = q.new('div').style.align('center').style.set('邊距:0px;位置:固定;底部:0px;寬度:100%;背景顏色:灰色;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('您點擊了按鈕！');"# Div 包含p 元素和帶有單擊事件的按鈕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('您點擊了按鈕！');"# Div 包含p 元素和帶有單擊事件的按鈕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 
