QuykHtml
1.0.0
Eine Python-Bibliothek, mit der Sie schnell und einfach HTML-Vorlagen generieren und sogar vollständige Websites erstellen können.
Wenn Sie sich großzügig fühlen oder mir einen Kaffee kaufen oder spenden möchten, finden Sie unten meine Cash-App:
cash app: $elmling
Neue Funktionen:
- Äußern
Hauptmerkmale:
- Flasche
- Befehle miteinander verketten
- Javascript/jQuery-Unterstützung
- Tabellenerstellung
- Ajax-Erstellung
- Formularerstellung
- Boostrap
- SEO
- Beispiel für eine Landingpage
# Importieren Sie die Klasse aus der Bibliothek von QuykHtml import qhtml# Instanziieren Sie die Klasseq = qhtml()# Fügen Sie ein geändertes p-Element in unsere Hauptanzeige einq.display.insert(q.new('p').set_text('Hello World').set_id ('text-id').style.set('font-size:24px;'))# Rendern Sie die Seiteq.display.render() from QuykHtml import qhtml# Klasse instanziierenq = qhtml()# Erstellen Sie ein divdiv = q.new("div")# Erstellen Sie einen Absatzp = q.new("p")# Erstellen Sie eine Eingabeinput = q.new("input") # Rendern Sie die Ergebnisse, indem Sie alle Objekte in displayq.display.insert([div, p, input]).render() einfügen aus QuykHtml importieren qhtml# Klasse instanziierenq = qhtml()# CSS deklarieren, ermöglicht eine Liste von Listen, wobei der erste Wert# Klassenname und die Markup-/Stilzeichenfolge für den zweiten Wert istq.css.add([["div", "font-size:32px;"],[".div_custom","color:gray;"]])# Sie können das Gleiche auch tun, indem Sie einfach die Add-Methode mit zwei aufrufen argumentsq.css.add("div","font-size:32px;")q.css.add(".div_custom","color:gray;")# Erstellen Sie ein Div mit der Klasse .div_custom und legen Sie den Text fest im divdiv = q.new("div").set_class("div_custom").set_text("QuykHtml Rocks!")# Sie können das Inline-Styling verwenden, um das Element zu formatieren und den Text im festzulegen divdiv2 = q.new("div").style.set("font-size:48px;color:green;").set_text("QuykHtml Rocks!")# Rendern Sie die Ergebnisseq.display.insert([div, div2 ]).machen() from QuykHtml import qhtml# Instantiate classq = qhtml()p = q.new("p")# Global Element Settersp.style.set('color:red;')p.style.append('background-color:yellow; ')p.add_attribute('title="Qhytml ist einfach!"')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('benutzerdefinierter Wert')p.set_tool_tip('einfaches Hover-Text-Tool tip')p.on_click("alert('Ich wurde mit der rechten Maustaste angeklickt!');")p.on_click_goto('google.com')p.on_right_click("alert('Ich wurde mit der rechten Maustaste angeklickt!');")p. on_mouse_enter("alert('Maus betreten!');")p.on_mouse_leave("alert('Maus links!');")html = p.html()# Spezifisches Element 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(False) aus QuykHtml import qhtml# Klasse instanziierenq = qhtml()# Bootstrap-Dienstprogramme einfach „importieren“q.bootstrap.use(True)# Rohtabelle mit 1 Zeile und 2 Spalten erstellentable = q.table(1,2)# Methode mit 0-Basis einfügen index -> insert_at(row,column,qhtml_object or list of qhtml_objects)table.insert_at(0,0,q.new("p").set_text("Zeile 1 Spalte 1"))table.insert_at(0,1,q.new("p").set_text("Zeile 1 Spalte 2"))# Auch gültig syntaxtable = q.table(1,2).insert_at(0,0,q.new("p").set_text("Zeile 1 Spalte 1")).insert_at(0,1,q.new("p").set_text("Zeile 1 Spalte 2"))# Td-Manipulationsbeispiele für 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))# Stellen Sie sicher, dass Sie die Tabelle # erstellen, die ein Div mit dem Tabellencode in ittable = table.build()# zurückgibt. Rendern Sie die Ergebnisseq.display.insert(table).render() from QuykHtml import qhtml# Klasse instanziierenq = qhtml()# Einfaches „Importieren“ von Bootstrap-Dienstprogrammenq.bootstrap.use(True)# Ein Skript anhängen, kann sogar aus einer Datei gelesen werdenq.scripts.append( 'function js_function() {'' warning("A JS Function");''}')# Ein Skript an ein qhtml-Objekt anhängenp = q.new("p").set_text("Text element").scripts_add( 'function js_function() {'' alarm("A JS Function");''}')# Code anhängen, der beim Laden der Seite ausgeführt werden soll, an ein qhtml-Objektp = q.new("p") .set_text("Textelement").scripts_add('alert("Js-Code wurde beim Laden der Seite ausgeführt");', on_page_load=True)q.display.insert(p).render() from QuykHtml import qhtml# Klasse instanziierenq = qhtml()# Einfaches „Importieren“ von Bootstrap-Dienstprogrammenq.bootstrap.use(True)# Erstellen Sie eine Ajax-Anfrage für das p-Element# Geben Sie in der Rückruffunktion immer r an, da dies der Antworttext ist q.new("p").ajax_build('get','file.php?args=1&args2=2","_some_call_back_func(r)')# Definieren Sie die Funktion bei Bedarf schnell bep.scripts_add('function _some_call_back_func(r ){alert("Response text " + r.responseText);}')# JS-Code anhängen, wenn die Seite geladen wird, rufen Sie auf die Ajax-Funktion using# element.ajax_get("pointer") <- die von ajax_build'p.scripts_add(p.ajax_get("pointer"),on_page_load=True)q.display.insert(p).render erstellte Ajax-Methode () from QuykHtml import qhtml# Klasse instanziierenq = qhtml()# Einfaches „Importieren“ von Bootstrap-Dienstprogrammenq.bootstrap.use(True)# Formular erstellen elementform = q.new("form").set_form_options('file.php','post' )# Erstellen Sie das Eingabeelement und setzen Sie den Namen auf form_nameinput = q.new("input").set_name('form_name')# Erstellen Sie die Schaltfläche und verwenden Sie die Methode .set_form_button(), um # das Formular zu senden, wenn darauf geklickt wirdbutton = q.new("button").set_text("submit").set_form_button()# Fügen Sie die Formularelemente in formform.insert([input,button ])q.display.insert(form).render() Einfache Verwendung der offiziellen Auszeichnungssprache (verwendet Bootstrap)
um schnell und einfach qhtml-Objekte zu definieren.
- 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)
# Klasse instanziierenq = qhtml()# Einfaches „Importieren“ von Bootstrap-Dienstprogrammenq.bootstrap.use(True)# Express-Methode gibt# ein tatsächliches qhtml-Objekt zurücklayout = q.express([
['div','p','div']
]).style.set('background-color:#45afed;')q.display.insert(layout).render() # Klasse instanziierenq = qhtml()# Einfaches „Importieren“ von Bootstrap-Dienstprogrammenq.bootstrap.use(True)# Express-Methode gibt# ein tatsächliches qhtml-Objekt zurücklayout = q.express([
['div attr-class="myclass"','p attr-id="myid"','div attr-style="background-color:red"']
]).style.set('background-color:#45afed;')q.display.insert(layout).render() # Klasse instanziierenq = qhtml()# Einfaches „Importieren“ von Bootstrap-Dienstprogrammenq.bootstrap.use(True)# Ein Qhtml-Objekt hat eine Methode namens: set_text# und auch eine Methode namens: set_img_src#, daher lassen wir das Präfix „set_“ weg. Anstelle von # set_text("some text") verwenden wir einfach text="some text"#, um die Methode aufzurufenlayout = q.express([
['div','p text="QuykHtml Rocks!"','div'],
['div','img img_src="myimagesource.com" attr-class="myImgClass"','div']
]).style.set('background-color:#45afed;')q.display.insert(layout).render() # Klasse instanziierenq = qhtml()# Einfaches „Importieren“ von Bootstrap-Dienstprogrammenq.bootstrap.use(True)# Definieren Sie einige cssq.css.add('.center','text-align:center;')# Erstellen Sie unsere Formularelementelayout = q.express([
['div', 'p text="Email"', 'div'],
['div', 'input', 'div'],
['div', 'p text="Passwort"', 'div'],
['div', 'input', 'div'],
['div', 'p text="Bestätigen"', 'div'],
['div', 'input', 'div'],
['div', 'button text="Complete" attr-value="submit" attr-class="margin-top-med signup"', 'div']
]).set_class("center", True)# Erstellen Sie den tatsächlichen Formularcontainer elementform = q.new('form').set_class('center')# Fügen Sie die Formularelemente ein und legen Sie die Formularoptionen festform.insert(layout). set_form_options("register.php", "post")# Rendern Sie die Ergebnisseq.display.insert(form) from QuykHtml import qhtml# Instantiate classq = qhtml()# Definieren Sie einige SEOq.seo.set_page_title('Seitentitel')q.seo.set_page_author('Autor')q.seo.set_page_keywords('einige Schlüsselwörter')q.seo .set_page_encoding('UTF-8')q.seo.set_page_auto_refresh(30) # alle aktualisieren 30 Sekundenlist_of_seo = q.seo.display_all_seo() from QuykHtml import qhtml# Instantiate classq = qhtml()# Chaining commandsq.new("p").set_text('some text').set_class('text-class').set_id('text-id').on_click( "alert('clicked me');").style.set("cursor:pointer;")# Beispiele für Renderargumente# Output_file str_path, only_html boolean, set_clip_board booleanq.display.insert(q.new("p.").set_text("Render-Argumente")).render(output_file="file/path/file.html")q.display.insert(q.new(" p.").set_text("Render-Argumente")).render(only_html=True)q.display.insert(q.new("p.").set_text("Render Argumente")).render(output_file="file/path/file.html",set_clip_board=True)q.display.insert(q.new("p.").set_text("Render-Argumente")).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])# Auch gültige Syntaxdiv = 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")
])# ------------------------------# An den Kopf anhängen 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">') # Integrierte Farbhelfersc = q.css.colorscolors = [c.LIGHT_GRAY, c.DARK_GRAY,c.LIGHT_GREEN,c.DARK_GREEN] # und mehr..für Farbe in Farben: print(color) # - > #hex_value# Schleife durch jedes erstellte Objekt einer qhtml-Instanz für ein Element in q. all: print('Elementtyp - > ' + element.type) element.set_text("Überschreiben")
# Elementobjekte duplizierenp_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;')# Exportieren von CSS-Stilen hinzugefügt 'q.css'q.css.add('p','font-size:32px;')q.css.add('div','text-align:center;')q.css.export(' Pfad/zu/export.css‘) from QuykHtml import qhtmlq = qhtml()q.bootstrap.use(True)head = q.new('div')head_text = q.new('p')head_text.set_text('Example Landing Header').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('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])footer = 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('Beispiel-Fußzeilentext. Alle Rechte vorbehalten.').style.align('center').style.font_size('15px').style.font_color('white')footer.insert(footer_text)q.display.insert([head,body, Fußzeile]).render() # Eine sehr einfache Flask Hello World-App für den Einstieg ... from QuykHtml import qhtmlfrom flask import Flaskq = qhtml()q.bootstrap.use(True)app = Flask(__name__)# Verwenden Sie immer „ “ als äußeres Element Zeichenfolgenanführungszeichen und ' ' darin if needon_click_code = "alert('Sie haben auf die Schaltfläche geklickt!');"# Div, das ein p-Element und eine Schaltfläche mit einem On-Click-Ereignis enthältdiv = q.new('div').style.set('text-align:center;').insert([q.new("p").style.font_size('42px').set_text("Das funktioniert" ),q.new('button').style.font_size('24px').set_text('click me').on_click(on_click_code)
])# Div enthält ein p-Element mit Begrüßungstext darindiv2 = 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('Hallo von QuykHtml und Flask!')
])@app.route('/')def hello_world(): # Verwenden Sie die .html-Methode für ein qhtml-Objekt, um dessen HTML abzurufen und es bereitzustellenreturn div.html() + div2.html() # Eine sehr einfache Flask Hello World-App für den Einstieg ... from QuykHtml import qhtmlfrom flask import Flaskq = qhtml()q.bootstrap.use(True)app = Flask(__name__)# Verwenden Sie immer „ “ als äußeres Element Zeichenfolgenanführungszeichen und ' ' darin if needon_click_code = "alert('Sie haben auf die Schaltfläche geklickt!');"# Div, das ein p-Element und eine Schaltfläche mit einem On-Click-Ereignis enthältdiv = q.new('div').style.set('text-align:center;').insert([q.new("p").style.font_size('42px').set_text("Das funktioniert" ),q.new('button').style.font_size('24px').set_text('click me').on_click(on_click_code)
])# Div enthält ein p-Element mit Begrüßungstext darindiv2 = 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('Hallo von QuykHtml und Flask!')
])# Platzieren Sie Objekte in der Anzeige und rendern Sie die Datei in test.txtq.display.insert([div,div2]).render(output_file='test.txt', only_html=True)@app.route('/ ')def hello_world(): # Verwenden Sie die Methode file_read, um den gerenderten HTML-Code abzurufen und bereitzustellen. HTML = q.file_read('test.txt')return html 
