QuykHtml
1.0.0
HTML テンプレートをすばやく簡単に生成したり、完全な Web サイトを作成したりできる Python ライブラリ。
もしあなたが寛大な気持ちを持っている場合、または私にコーヒーを買ったり寄付したりしたい場合は、以下が私の現金アプリです:
cash app: $elmling
新機能:
- 急行
主な特徴:
- フラスコ
- コマンドを連鎖させる
- Javascript/jQueryのサポート
- テーブルの作成
- Ajax の作成
- フォームの作成
- ブースストラップ
- SEO
- ランディングページの例
# ライブラリからクラスをインポート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")# input を作成しますinput = q.new("input") # すべてのオブジェクトを displayq.display.insert([div, p, input]).render() に挿入して結果をレンダリングしますfrom QuykHtml import qhtml# Instantiate classq = qhtml()# css を宣言し、最初の値が classname で、2 番目の値がマークアップ/スタイル文字列であるリストのリストを許可しますq.css.add([["div", "font-size:32px;"],[".div_custom","color:gray;"]])# 次のようにして add メソッドを呼び出すだけでも同じことを行うことができます。 2 つの引数q.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!")# Render にテキストを設定するためのスタイリング結果q.display.insert([div, div2]).render()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 は簡単!"')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('カスタム値')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")。 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"))# range(2) の i の Td 操作の例:
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))#必ずテーブルを構築してください # ittable = table.build() のテーブル コードを使用して div を返すテーブルをレンダリングしますresultsq.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 コードを追加します。 # element.ajax_get("pointer") <- 'ajax_build によって構築された ajax メソッド'p.scripts_add(p.ajax_get("pointer"),on_page_load=True)q.display.insert(p) を使用して ajax 関数を呼び出します。与える（）from QuykHtml import qhtml# クラスをインスタンス化しますq = qhtml()# ブートストラップ ユーティリティを簡単に「インポート」しますq.bootstrap.use(True)# フォーム要素を作成しますform = q.new("form").set_form_options('file.php','post' )# input 要素を作成し、名前を form_nameinput = に設定します。 q.new("input").set_name('form_name')# ボタンを作成し、メソッド .set_form_button() を使用して # クリックされたときにフォームを送信するようにしますbutton = q.new("button").set_text(" submit").set_form_button()# フォーム要素を formform.insert([input,button])q.display.insert(form).render() に挿入します公式マークアップ言語を簡単に使用 (ブートストラップを使用)
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 objectlayout = q.express([
['div','p','div']
]).style.set('背景色:#45afed;')q.display.insert(layout).render()# クラスをインスタンス化しますq = qhtml()# ブートストラップ ユーティリティを簡単に「インポート」しますq.bootstrap.use(True)# Express メソッドは、# 実際の qhtml objectlayout = q.express([
['div attr-class="myclass"','p attr-id="myid"','div attr-style="background-color:red"']
]).style.set('背景色:#45afed;')q.display.insert(layout).render() # class をインスタンス化しますq = qhtml()# ブートストラップ ユーティリティを簡単に「インポート」しますq.bootstrap.use(True)# Qhtml オブジェクトには set_text# というメソッドがあります# set_img_src# というメソッドもあるので、「set_」プレフィックスを省略します。したがって、# set_text("some text") の代わりに、単純に 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()# class をインスタンス化しますq = qhtml()# ブートストラップ ユーティリティを簡単に「インポート」しますq.bootstrap.use(True)# cssq.css.add('.center','text-align:center;')# フォーム要素を作成しますlayout = q.express([
['div', 'p text="電子メール"', 'div'],
['div', 'input', 'div'],
['div', 'p text="パスワード"', 'div'],
['div', 'input', 'div'],
['div', 'p text="確認"', 'div'],
['div', 'input', 'div'],
['div', 'button text="完了" attr-value="送信" attr-class="margin-top-med サインアップ"', 'div']
]).set_class("center", True)# 実際のフォームコンテナを作成します elementform = q.new('form').set_class('center')# フォーム要素を挿入し、フォーム optionsform.insert(layout) を設定します。 set_form_options("register.php", "post")# 結果をレンダリングしますq.display.insert(form) from QuykHtml import qhtml# Instantiate classq = qhtml()# SEO を定義するq.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()# ------ ------------------------# ブートストラップ - サポート# ---------- --------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# q.all の qhtml インスタンスフォー要素の作成されたすべてのオブジェクトをループします: print('要素タイプ - > ' + element.type) element.set_text("上書き")
# 要素オブジェクトを複製しますp_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 にスタイルが追加されました。エクスポート('パス/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('ランディング例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('グレー')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('例フッターテキスト。無断転載禁止。').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('ボタンをクリックしました!');"# p 要素とクリック時のボタンを含む Div eventsdiv = q.new('div').style.set('text-align:center;').insert([q.new("p").style.font_size('42px').set_text("This works"),q.new('button').style.font_size('24px').set_text('click me').on_click(on_click_code)
])# itdiv2 に挨拶テキストを持つ p 要素を含む Div = 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('ボタンをクリックしました!');"# p 要素とクリック時のボタンを含む Div eventsdiv = q.new('div').style.set('text-align:center;').insert([q.new("p").style.font_size('42px').set_text("This works"),q.new('button').style.font_size('24px').set_text('click me').on_click(on_click_code)
])# itdiv2 に挨拶テキストを持つ p 要素を含む Div = 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 
