QuykHtml 다운로드 - QuykHtml 소스 코드 다운로드

QuykHtml

기타 카테고리

1.0.0

다운로드

QuykHtml

쉽고 빠르게 HTML 템플릿을 생성하고 완전한 웹사이트를 만들 수 있게 해주는 Python 라이브러리입니다.

당신이 관대하다고 느끼거나 나에게 커피를 사거나 기부하고 싶다면 아래 내 현금 앱이 있습니다.
cash app: $elmling

pip 설치 QuykHtml

새로운 기능:
- 표현하다

주요 특징:
- 플라스크
- 명령을 함께 연결
- 자바스크립트/jQuery 지원
- 테이블 생성
- 아약스 생성
- 양식 작성
- 부스트랩
- SEO
- 랜딩페이지 예시

예: 4줄의 Hello World

 # 라이브러리에서 클래스 가져오기from QuykHtml import qhtml# 인스턴스화 classq = 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# 인스턴스화 classq = qhtml()# divdiv 만들기 = q.new("div")# 단락 만들기p = q.new("p")# 입력 만들기input = q.new("input") # 모든 객체를 displayq.display.insert([div, p, input]).render()에 삽입하여 결과를 렌더링합니다.

예: 요소 스타일 지정

 from QuykHtml import qhtml# 인스턴스화 classq = qhtml()# CSS를 선언하고 목록 목록을 허용합니다. 첫 번째 값은 # classname이고 두 번째 값은 마크업/스타일 문자열입니다.q.css.add([["div", "font-size:32px;"],[".div_custom","color:gray;"]])# 두 개의 추가 메소드를 호출하여 동일한 작업을 수행할 수도 있습니다. 인수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!")# 결과를 렌더링합니다q.display .insert([div, div2]).render()

예: 요소 설정자

 from QuykHtml import qhtml# 인스턴스화 classq = 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"). set_auto_complete(거짓)

예: 테이블

 from QuykHtml import qhtml# 인스턴스화 classq = qhtml()# 쉽게 'import' 부트스트랩 유틸리티q.bootstrap.use(True)# 1행 2열의 원시 테이블 생성table = q.table(1,2)# 0 기반을 사용하여 메서드 삽입 index -> insert_at(row,column,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 1 열 2"))# 또한 유효한 구문 테이블 = 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"))# 범위(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를 반환하는 테이블을 빌드해야 합니다. # 결과를 렌더링합니다q.display.insert(table).render()

예: JavaScript 코드

 from QuykHtml import qhtml# 인스턴스화 classq = 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에 추가합니다. objectp = q.new("p") .set_text("텍스트 요소").scripts_add('alert("페이지 로드 시 Js 코드가 실행되었습니다.");', on_page_load=True)q.display.insert(p).render()

예: Ajax 요청

 from QuykHtml import qhtml# 인스턴스화 classq = 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# 인스턴스화 classq = qhtml()# 쉽게 '가져오기' 부트스트랩 유틸리티q.bootstrap.use(True)# 양식 요소 만들기form = 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()# 양식 요소를 formform.insert([input)에 삽입합니다. ,버튼])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)

3개의 열로 구성된 행을 만듭니다.

 # 인스턴스화 classq = qhtml()# 부트스트랩 유틸리티를 쉽게 '가져오기'q.bootstrap.use(True)# 익스프레스 메소드는 # 실제 qhtml 객체 레이아웃을 반환합니다. = q.express([
	['div','p','div']
]).style.set('배경색:#45afed;')q.display.insert(layout).render()

3개의 열로 구성된 행을 만들고 HTML 값을 정의합니다.

 # 인스턴스화 classq = qhtml()# 부트스트랩 유틸리티를 쉽게 '가져오기'q.bootstrap.use(True)# 익스프레스 메소드는 # 실제 qhtml 객체 레이아웃을 반환합니다. = q.express([
	['div attr-class="myclass"','p attr-id="myid"','div attr-style="Background-color:red"']
]).style.set('배경색:#45afed;')q.display.insert(layout).render()

3개의 열로 구성된 행을 만들고 해당 요소에 대해 Qhtml setter 메소드를 호출합니다.

 # 인스턴스화 classq = qhtml()# 쉽게 '가져오기' 부트스트랩 유틸리티q.bootstrap.use(True)# Qhtml 객체에는 set_text#라는 메서드가 있으며 set_img_src#이라는 메서드도 있으므로 'set_' 접두사를 생략합니다. 따라서# set_text("some text") 대신에 간단히 text="some text"#를 사용하여 상기 methodlayout = q.express([를 호출합니다.
	['div','p text="QuykHtml Rocks!"','div'],
	['div','img img_src="myimagesource.com" attr-class="myImgClass"','div']
]).style.set('배경색:#45afed;')q.display.insert(layout).render()

Express 실제 사례

간단한 양식 만들기

 # 인스턴스화 classq = qhtml()# 쉽게 '가져오기' 부트스트랩 유틸리티q.bootstrap.use(True)# 일부 정의 cssq.css.add('.center','text-align:center;')# 양식 만들기 elementslayout = q.익스프레스([
	['div', 'p text="이메일"', 'div'],
	['div', '입력', 'div'],
	['div', 'p text="비밀번호"', 'div'],
	['div', '입력', 'div'],
	['div', 'p text="확인"', 'div'],
	['div', '입력', 'div'],
	['div', 'button text="완료" attr-value="submit" 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)

예: SEO

 from QuykHtml import qhtml# 인스턴스화 classq = qhtml()# 일부 SEO 정의q.seo.set_page_title('페이지 제목')q.seo.set_page_author('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# 인스턴스화 classq = 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")
])# -----------------# 헤드 tag에 추가q.head.append('<script type=" text/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 colors: print(color) # - > #hex_value# qhtml 인스턴스의 생성된 모든 객체를 반복합니다.for element in q.all: print(' 요소 유형 - > ' + element.type) element.set_text("Overwrite")	
# 요소 개체 복제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')

간단한 랜딩 페이지 예1

 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('바닥글 텍스트 예. All Right Reserved.').style.align('center').style.font_size('15px').style.font_color('white')footer.insert(footer_text)q.display.insert([head,body, 바닥글]).render()

플라스크를 사용한 QuykHtml 예

pythonanywhere.com 사용

.html() 메소드를 사용하여 HTML 제공

 # 시작할 수 있는 매우 간단한 Flask Hello World 앱...from QuykHtml import qhtmlfrom 플라스크 import Flaskq = qhtml()q.bootstrap.use(True)app = Flask(__name__)# 항상 " "를 외부로 사용합니다. if needon_click_code = "alert('버튼을 클릭했습니다!');"# p 요소와 클릭 시 버튼이 포함된 Div 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)
])# itdiv2 = q.new('div').style.set('Background-color:gray;text-align:center;').insert([q.new(')에 인사말 텍스트가 있는 p 요소가 포함된 Div 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()

.render('out_put_file.txt') 및 .file_read('file.txt')를 사용하여 HTML 제공

 # 시작할 수 있는 매우 간단한 Flask Hello World 앱...from QuykHtml import qhtmlfrom 플라스크 import Flaskq = qhtml()q.bootstrap.use(True)app = Flask(__name__)# 항상 " "를 외부로 사용합니다. if needon_click_code = "alert('버튼을 클릭했습니다!');"# p 요소와 클릭 시 버튼이 포함된 Div 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)
])# itdiv2 = q.new('div').style.set('Background-color:gray;text-align:center;').insert([q.new(')에 인사말 텍스트가 있는 p 요소가 포함된 Div 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(): # 렌더링된 HTML을 가져와서 제공하려면 file_read 메서드를 사용하세요.html = q.file_read('test.txt')return html

확장하다

추가 정보