QuykHtml

QuykHtml

ไลบรารี Python ที่ช่วยให้คุณสามารถสร้างเทมเพลต HTML ได้อย่างรวดเร็วและง่ายดาย และแม้แต่สร้างเว็บไซต์เต็มรูปแบบอีกด้วย

หากคุณรู้สึกมีน้ำใจหรือต้องการซื้อกาแฟหรือบริจาคให้ฉัน ด้านล่างนี้คือแอปเงินสดของฉัน:
cash app: $elmling

pip ติดตั้ง QuykHtml

คุณสมบัติใหม่:
- ด่วน

คุณสมบัติที่สำคัญ:
- กระติกน้ำ
- การเชื่อมโยงคำสั่งเข้าด้วยกัน
- รองรับจาวาสคริปต์ / jQuery
- การสร้างตาราง
- การสร้างอาแจ็กซ์
- การสร้างแบบฟอร์ม
- บูสแทรป
- SEO
- ตัวอย่างหน้า Landing Page

ตัวอย่าง: สวัสดีชาวโลกใน 4 บรรทัด

 # นำเข้าคลาสจากไลบรารีจาก QuykHtml นำเข้า qhtml# สร้างอินสแตนซ์ classq = qhtml()# แทรกองค์ประกอบ p ที่แก้ไขแล้วลงใน displayq.display.insert(q.new('p').set_text('Hello World').set_id หลักของเรา ('text-id').style.set('font-size:24px;'))# แสดงผลเพจq.display.render()

ตัวอย่าง: การประกาศขั้นพื้นฐาน

 จาก QuykHtml นำเข้า qhtml# สร้างอินสแตนซ์ classq = qhtml()# สร้าง divdiv = q.new("div")# สร้างย่อหน้าp = q.new("p")# สร้าง inputinput = q.new("input") # แสดงผลผลลัพธ์โดยการแทรกวัตถุทั้งหมดไปที่ displayq.display.insert([div, p, input]).render()

ตัวอย่าง: การจัดรูปแบบองค์ประกอบ

 จาก QuykHtml import qhtml# Instantiate classq = qhtml()# Declare css อนุญาตให้มีรายการต่างๆ โดยค่าแรกคือ# classname และสตริงมาร์กอัป/สไตล์สำหรับค่าที่สองq.css.add([["div", "font-size:32px;"],[".div_custom","color:gray;"]])# คุณยังสามารถทำเช่นเดียวกันได้โดยการเรียกใช้เมธอด add ด้วยสอง argumentsq.css.add("div","font-size:32px;")q.css.add(".div_custom","color:gray;")# สร้าง div ด้วยคลาส .div_custom และตั้งค่าข้อความ ใน 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]).เรนเดอร์()

ตัวอย่าง: ตัวตั้งค่าองค์ประกอบ

 จาก QuykHtml นำเข้า qhtml# สร้างอินสแตนซ์ classq = qhtml()p = q.new("p")# Global Element Settersp.style.set('color:red;')p.style.append('สีพื้นหลัง:สีเหลือง; ')p.add_attribute('title="Qhytml is ง่าย!"')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('ชื่อบางคน')p.set_value('custom 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('Mouse enter!');")p.on_mouse_leave("alert('Mouse left!');")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") set_auto_complete (เท็จ)

ตัวอย่าง: ตาราง

 จาก QuykHtml import qhtml# Instantiate classq = qhtml()# 'นำเข้า' bootstrap utilitiesq.bootstrap.use(True)# สร้างตาราง raw ของ 1 แถวและ 2 columnstable = 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"))# ไวยากรณ์ที่ถูกต้องด้วย = q.table(1,2).insert_at(0,0,q.new("p").set_text("แถวที่ 1 คอลัมน์ 1")).insert_at(0,1,q.new("p").set_text("Row 1 column 2"))# ตัวอย่างการจัดการ Tdfor i อยู่ในช่วง (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 ด้วยโค้ดตารางใน ittable = table.build()# แสดงผล resultsq.display.insert(table).render()

ตัวอย่าง: รหัสจาวาสคริปต์

 จาก QuykHtml import qhtml# Instantiate classq = qhtml()# 'นำเข้า' bootstrap utilitiesq.bootstrap.use(True)# ผนวกสคริปต์ได้อย่างง่ายดาย ยังสามารถอ่านได้จาก fileq.scripts.append( 'function js_function() {'' alert("A JS Function");''}')# เพิ่มสคริปต์ต่อท้าย qhtml objectp = q.new("p").set_text("องค์ประกอบข้อความ").scripts_add( 'function js_function() {'' alert("A JS Function");''}')# ผนวกโค้ดที่จะดำเนินการเมื่อโหลดหน้าเว็บ ไปที่ qhtml objectp = q.new("p").set_text("องค์ประกอบข้อความ").scripts_add('alert("โค้ด Js ทำงานเมื่อโหลดหน้าเว็บ");', on_page_load=True)q.display.insert(p).render()

ตัวอย่าง: คำขอ Ajax

 จาก QuykHtml นำเข้า qhtml# สร้างอินสแตนซ์ classq = qhtml()# 'นำเข้า' ยูทิลิตี้ bootstrap ได้อย่างง่ายดายq.bootstrap.use(True)# สร้างคำขอ ajax บนองค์ประกอบ p# ระบุ r ในฟังก์ชันการโทรกลับเสมอเนื่องจากเป็นข้อความตอบกลับ p = 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 ฟังก์ชั่นโดยใช้# element.ajax_get("pointer") <- วิธี 'ajax ที่สร้างโดย ajax_build'p.scripts_add(p.ajax_get("pointer"),on_page_load=True)q.display.insert(p).render()

ตัวอย่าง: แบบฟอร์ม

 จาก QuykHtml นำเข้า qhtml# สร้างอินสแตนซ์ classq = qhtml()# 'นำเข้า' bootstrap utilitiesq.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() เพื่อ # ทำให้ส่งแบบฟอร์มเมื่อมีการคลิกปุ่ม = q.new("button").set_text(" ส่ง").set_form_button()# แทรกองค์ประกอบของแบบฟอร์มลงใน formform.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)

สร้างแถวที่มี 3 คอลัมน์

 # ยกตัวอย่าง classq = qhtml()# 'นำเข้า' bootstrap utilitiesq.bootstrap.use(True)# express method ส่งคืน # qhtml objectlayout จริง = q.express([
	['div','p','div']
]).style.set('สีพื้นหลัง:#45afed;')q.display.insert(layout).render()

สร้างแถวที่มี 3 คอลัมน์และกำหนดค่า html

 # ยกตัวอย่าง classq = qhtml()# 'นำเข้า' bootstrap utilitiesq.bootstrap.use(True)# express method ส่งคืน # qhtml objectlayout จริง = q.express([
	['div attr-class="myclass"','p attr-id="myid"','div attr-style="พื้นหลังสี:สีแดง"']
]).style.set('สีพื้นหลัง:#45afed;')q.display.insert(layout).render()

สร้างแถวที่มี 3 คอลัมน์และเรียกใช้เมธอดตัวตั้งค่า Qhtml บนองค์ประกอบดังกล่าว

 # ยกตัวอย่าง classq = qhtml()# 'นำเข้า' bootstrap utilitiesq.bootstrap.use(True)# ได้อย่างง่ายดาย วัตถุ Qhtml มีวิธีการที่เรียกว่า: set_text# และยังมีวิธีการที่เรียกว่า: set_img_src# ดังนั้นเราจึงละเว้นคำนำหน้า 'set_' ดังนั้นแทนที่จะใช้ # set_text("some text") เราก็ใช้ text="some text"# เพื่อเรียก methodlayout = 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()

ตัวอย่างโลกแห่งความจริงด่วน

สร้างแบบฟอร์มง่ายๆ

 # ยกตัวอย่าง classq = qhtml()# 'นำเข้า' bootstrap utilitiesq.bootstrap.use(True)# ได้อย่างง่ายดาย กำหนด cssq.css.add('.center','text-align:center;')# สร้างองค์ประกอบแบบฟอร์มของเรา รูปแบบ = q.ด่วน([
	['div', 'p text="อีเมล"', 'div'],
	['div', 'อินพุต', 'div'],
	['div', 'p text="รหัสผ่าน"', 'div'],
	['div', 'อินพุต', 'div'],
	['div', 'p text="ยืนยัน"', 'div'],
	['div', 'อินพุต', 'div'],
	['div', 'button text="Complete" attr-value="submit" attr-class="margin-top-med signup"', 'div']
]).set_class("center", True)# สร้างฟอร์มคอนเทนเนอร์จริง elementform = q.new('form').set_class('center')# แทรกองค์ประกอบของฟอร์มและตั้งค่าแบบฟอร์ม optionsform.insert(layout) set_form_options("register.php", "post")# แสดงผล resultsq.display.insert(form)

ตัวอย่าง: SEO

 จาก QuykHtml นำเข้า qhtml# Instantiate classq = qhtml()# กำหนด SEOq.seo.set_page_title('Page Title') q.seo.set_page_author('Author')q.seo.set_page_keywords('some key') word')q.seo.set_page_encoding('UTF-8')q.seo.set_page_auto_refresh(30) # รีเฟรชทุกๆ 30 วินาทีlist_of_seo = q.seo.display_all_seo()

ตัวอย่าง: เบ็ดเตล็ด

 จาก QuykHtml นำเข้า qhtml# สร้างอินสแตนซ์ classq = qhtml()# Chaining commandsq.new("p").set_text('some text').set_class('text-class').set_id('text-id').on_click( "alert('คลิกฉัน');").style.set("cursor:pointer;")# Render arguments examples# output_file str_path, only_html บูลีน, set_clip_board booleanq.display.insert(q.new("p.").set_text("อาร์กิวเมนต์การเรนเดอร์")).render(output_file="file/path/file.html")q.display.insert(q. ใหม่("p.").set_text("อาร์กิวเมนต์การเรนเดอร์")).render(only_html=True)q.display.insert(q.new("p.").set_text("Render อาร์กิวเมนต์")).render(output_file="file/path/file.html",set_clip_board=True)q.display.insert(q.new("p.").set_text("Render Arguments")).render( only_html=True,set_clip_board=True)q.display.insert(q.new("p.").set_text("Render Arguments")).render()# ------------- -----------------# Bootstrap - Support# ----------------------------------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=" text/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] # และอื่นๆ..สำหรับสีในสี: print(color) # - > #hex_value# วนซ้ำทุกอ็อบเจ็กต์ที่สร้างขึ้นของ qhtml instancefor element ใน q.all: print(' ประเภทองค์ประกอบ -> ' + element.type) element.set_text("เขียนทับ")	
# การทำซ้ำองค์ประกอบ objectp_main = q.new("p").style.set("font-size:32px;")p1 = q.dupe(p_main).set_text('p tag number 1').style.append( 'color:red;')p2 = q.dupe(p_main).set_text('p tag number 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')

ตัวอย่างแลนดิ้งเพจแบบธรรมดา1

 จาก QuykHtml นำเข้า qhtmlq = qhtml()q.bootstrap.use(True)head = q.new('div')head_text = q.new('p')head_text.set_text('ตัวอย่าง Landing Header').style.align('center').style.font_size('64px;').style.append('padding-top:200px;padding-bottom:200px;สีพื้นหลัง:สีเทา;สี:สีขาว; ')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('gray')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%;สีพื้นหลัง:สีเทา;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()

ตัวอย่าง QuykHtml พร้อม Flask

ใช้ pythonanywhere.com

ให้บริการ HTML โดยใช้ .html() วิธีการ

 # แอป Flask Hello World ที่เรียบง่ายสำหรับคุณในการเริ่มต้น...จาก QuykHtml import qhtmlfrom flask import Flaskq = qhtml()q.bootstrap.use(True)app = Flask(__name__)# มักจะใช้ " " เป็นด้านนอก string quote และ ' ' inside if needon_click_code = "alert('You clicked the button!');"# Div ที่มีองค์ประกอบ p และปุ่มที่มี on click eventdiv = q.new('div').style.set('text-align:center;').insert([q.new("p").style.font_size('42px').set_text("ใช้งานได้ "),q.new('ปุ่ม').style.font_size('24px').set_text('คลิกฉัน').on_click(on_click_code)
])# Div ที่มีองค์ประกอบ p พร้อมด้วยข้อความทักทายใน itdiv2 = 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(): # ใช้วิธี .html บนวัตถุ qhtml เพื่อรับเป็น HTML และให้บริการ itreturn div.html() + div2.html()

ให้บริการ HTML โดยใช้ .render('out_put_file.txt') และ .file_read('file.txt')

 # แอป Flask Hello World ที่เรียบง่ายสำหรับคุณในการเริ่มต้น...จาก QuykHtml import qhtmlfrom flask import Flaskq = qhtml()q.bootstrap.use(True)app = Flask(__name__)# มักจะใช้ " " เป็นด้านนอก string quote และ ' ' inside if needon_click_code = "alert('You clicked the button!');"# Div ที่มีองค์ประกอบ p และปุ่มที่มี on click eventdiv = q.new('div').style.set('text-align:center;').insert([q.new("p").style.font_size('42px').set_text("ใช้งานได้ "),q.new('ปุ่ม').style.font_size('24px').set_text('คลิกฉัน').on_click(on_click_code)
])# Div ที่มีองค์ประกอบ p พร้อมด้วยข้อความทักทายใน itdiv2 = 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 ที่เรนเดอร์และให้บริการ ithtml = q.file_read('test.txt')return html