pug Laravel + SQLite + Vue.js + Pug + Stylus 환경 구축 Laravel에서 Vue.js 환경 구축 DB를 SQLite로 설정 (laradock 라든지 MySQL 라든지 사용하면 좋다고 생각합니다.) Vue.js를 Pug와 Stylus로 걸도록 설정한다. 우선 Laravel의 환경 구축 평소의 녀석 설정과 시작이 필요하지 않은 SQLite DB 구축은 간단하고 테스트 환경에 수요가 있다고 생각했습니다. .env를 편집합니다. 다음 명령 실행❯ tou... pugVue.js라라벨sqlitestylus 11ty(eleventy)의 collections와 front-matter로 유기적인 내비게이션을 자동 생성 내비게이션을 자동화하려는 목적으로 사이트의 문서를 11ty와 Pug로 다시 작성합니다. 11ty에서는 collections.all 로 사이트 전체의 정보를 객체로 얻을 수 있습니다. 또한 각 페이지의 시작 부분에 다음과 같이 front-matter를 작성하여 페이지별 변수를 전달할 수 있습니다. 이것을 이용해, 아래의 화상과 같이 의사적인 계층을 가지면서, 차례로 읽을 수 있는 링크도 표시하... HTMLpug11tyeleventy node.js+Express+pug로 DBD 맵 카운터 만들기 DBD라는 대인 게임에서, 어떤 캐릭터를 사용하면 서투른 맵만 닿기 때문에, 의심에서 맵 카운터를 만들었습니다. (또한 결과로는 내가 서투른지도가 DBD에 많았을 뿐이었습니다!) 목차 node.js+Express+pug 설치 DBD의 맵을 스크리핑 JSON 읽기/쓰기 동적 링크 처리 .pug에 변수 전달 .pug로 HTML 생성 css 묘사 1.node.js+Express+pug 설치 보면서... pugExpress파이썬자바스크립트Node.js Buefy placeholder가 작동하지 않는 경우 위와 같은 디자인을 구현하기 위해 을 참고로 구현. (코피페) pug 그러나 실제로 표시되는 것은 아래의 디자인으로, 공식 문서와 같은 구현이 되지 않는다. 무엇보다 placeholder가 효과가 없는 것이 제일 신경이 쓰인다. 왜 年/月/日 라고 표시되어 있다. (왠지 오른쪽 끝에 캘린더 아이콘도 표시됩니다) 기대하는 움직임은 placeholder="Select a date" 로 설정하고 ... HTMLpugVue.js#buefy 【Nuxt.js】Vue 파일의 Pug 템플릿을 HTML로 변환하는 방법 Nuxt.js에서 template 부분을 pug로 기술하고 있었지만 HTML로 다시 작성했을 때의 메모입니다. 그만한 이유는 eslint-plugin-vue가 작동하지 않기 때문입니다. 이것에 의해서 쓰는 방법에 통일감이 없고 에러도 자력으로 발견하지 않으면 안 되는 등 여러가지 문제가 보아 왔습니다. 그 밖에도 소스의 샘플이 대체로 HTML로 쓰여져 있으며, pug에서 할 수있는 일은 대체... HTMLpugVue.jsnuxt.js pug 쓰는 방법, 사용법(변수 & 배열편) 덮어쓸 수 있는 변수를 지정할 수 있다. 지정하고 있는 파일과 다른 파일에서도 덮어쓰기가 가능. 하이픈 + 개행 + 들여 쓰기로 일일이 하이픈을 쓰지 않아도된다 var도 생략할 수 있다 템플릿 리터럴 방식으로 변수와 문자열을 연결할 수 있으며, 그 때는 ${XXX}문자열로 단순히 내뱉을 때는 #{XXX} 덮어쓸 수 없는 변수를 지정할 수 있습니다. 덮어 쓰려고하면 오류가 발생합니다. var ... HTMLpug Gulp에서의 환경 구축 정리～Pug/Sass/TypeScript/BrowserSync～ 프런트 엔드의 개발을 할 때, 가능한 한 현장에 가까운 환경을 구축해 개발하고 싶다고 생각했기 때문에 정리했습니다. ← 공개하고 있습니다. 사용하는 경우 아래와 조합하면 비교적 환경 구축은 OK! (라고 생각하고 싶다.) ※windows로 환경 구축하고 있습니다. ✅참고 각 플러그인에 대해 정리해 준다. 개요 잡는다. ※실제로 환경 구축할 때까지는 흠뻑 빠졌습니다. ✅ 개요 이번에는 이하의 ... pugBrowserSyncTypeScriptgulpSass 【Svelte】Svelte에서 Material UI를 사용해 보았다 【Material UI】 Svelte에는 React 등과 마찬가지로 MaterialUI가 준비되어 있으므로 도입 절차를 작성합니다. MaterialUI 설치 전체 패키지 설치 콘솔 이번에는 무엇을 사용할지 미정이므로 일단 전체 설치합니다. 보충: component 단위 설치 콘솔 일단 이렇게 component 단위로도 설치할 수 있으므로, 실제로 사용하는 것이 정해지면 이쪽이 좋을지도입니다. theme 디렉토리 추가... MaterialUIpugTypeScript자바스크립트Svelte Pug에서 HTML 태그를 포함하는 문자열을 변수 확장하고 싶습니다. 실패 예 #{} 를 사용하면 잘 안된다. sample.pug 컴파일 해 보면,,, sample.html #{} 기법은 특수 문자를 이스케이프 처리하고 나서 출력하기 (위해)때문에, 이러한 결과가 됩니다. 성공 예 여기서는 이스케이프하지 않고 HTML 태그로 출력하고 싶으므로 !{} 를 사용하여 이스케이프하지 않고 출력시킵니다. sample.pug sample.html 잘 갔다... pugHTML5 storybook for html이 너무 사용하기 어렵기 때문에 pug를 사용하여 잘 사용하는 방법을 생각해 보았습니다. storybook for html을 이용하는 경우는 vu이라든지 사용하지 않는다고 생각합니다만, 실제 제작으로 원소의 HTML로 쓰는 케이스는 거의 없지요. 그런 가운데 storybook을 이용하고 싶은 경우 【코드 보완이 없는 환경에서 HTML을 쓴다】인가 【빌드하고 코피페】, 게다가 쓴 곳에서 pug로서 재이용할 수 있는 내용이 아닙니다. 잘못하면 일이 늘어나는 것만으로 분명히 말해서 사... pugHTML자바스크립트CSSstorybook 비주얼 스튜디오 2019에서 사쿠토 Flask Jade (Pug) # 1 이른 이야기가 가고시마 사투리와 표준어의 차이를 말하는 것과 같다. 다음을 클릭 만들기를 클릭 프로젝트가 완성된다. runserver.py __init__.py views.py layout.jade index.jade about.jade contact.jade 이상의 파일이 바삭하게 완성된다. 순식간에 편지지가 완성된다. Getting started Get More Libraries Mcir... pugVisualStudio2019FlaskBootstrap3Jade Pug 초학자의 비망록 : 루프편 Pug 초학자의 비망록입니다. 점점 추기해 갑니다. 완성 이미지 ↑와 같이 루프로 li.item 를 생성하면서, 각각에 i1 , i2 , i3 … 와 번호 첨부의 클래스명을 할당하고 싶을 때에. index.pug 더 똑똑한 쓰기가있을 것 같은 느낌 ... 완성 이미지 일반적인 메뉴 목록을 만들 때. index.pug 잘 다룰 수 있으면 즐거워 보인다! 계속 공부하겠습니다.... HTMLpugHTML5초보자 Nuxt (v2.4 이상) + Typescript 설정 2019/06/10 현재의 주요 모듈 버전은 다음과 같습니다. nuxt: 2.8.1 다음 명령으로 응용 프로그램을 초기화합니다. 위의 명령을 실행하면 몇 가지 질문을받습니다. 여기에서는 다음과 같이 대답하여 작업을 진행한다. 대답이 끝나면 모듈 다운로드와 같은 응용 프로그램의 초기화가 수행됩니다. 처리가 종료되면 다음 메시지가 출력됩니다. 기본값으로 남아 있으면 http://localhost... Sasspugnuxt.jsTypeScript Node.js,Express 메모 ⑤의 4 이 튜토리얼 Part5의 하위 페이지 네 번째입니다. 여기에서 catalog/에서 액세스하는 웹 페이지를 만드는 것 같습니다. ①이미 기술하고 있는 컨트롤러 함수의 갱신 ② 렌더링용 .pug 파일의 작성 이 체트리얼은 Book에 대한 페이지 작성이므로 catalog/의 루트 페이지는 bookController.js에 쓰는 것 같습니다. 게다가 거기의 페이지를 이렇게 지정하고 있는 것은 rou... Express.jspugNode.js pug와 sass 올레올레 템플릿 드물게 새로운 사이트를 만들지 않는 탄포 탑승을위한 올레올레스 니펫입니다. 탄포포는 모처럼 기억한 모던한 구조를 바로 잊는다… See the Pen by H.NOTSU ( ) index.pug 참고 사이트 위 링크의 소스를 pug 용으로 다시 작성하여 추가 수정 main.scss 참고 사이트 상기를 참고로 이하 약 추가 포인트는 main의 min-height: calc( 100vh - ( [... HTMLCSSSasspug Vue.js 사이트에서의 사용은 NG이지만, Vue.js에서의 개발은 포기하지 않은 이야기 상대적으로 페이지 수가 많은 사이트를 만들 때, Vue.js의 구성 요소를 사용한 개발 고려 여러 가지 이유로 사이트에서 Vue.js에서의 사용이 NG가 되었다. 개발은 Vue의 컴퍼넌트를 이용해, 프리 렌더링 출력한 정적 HTML와 CSS를 프로덕션 환경에 사용하기로 했다 일반적으로 프리 렌더링은 SEO 대책을 위해서 실시하는 것입니다만, 이번은 어디까지나 컴퍼넌트 베이스로의 개발, 및 정... JadepugVue.js How to make animation on scroll ? There have so many animation for icon scroll, but today we will do animation type arrow run down like animated last post. Start with element html You just simple put html will is:<div class="icon-scroll"></div>and if you... pugHTMLscssothersanimation 【초보자라도 OK】Node+Express로 간단한 폼을 구현! 저 자신도 개발 업무는 거의 미경험입니다만, N예비교의 Web 어플리케이션 코스나 라고 하는 참고서를 바탕으로 서버 측을 공부하고 있습니다. Node.js 주의해야 할 것은 "express --view=◯◯ △△"로 ◯◯에는 사용하는 HTML 템플릿을 △△에는 임의의 이름을 붙여 주십시오. generator로 작성되는 템플릿의 구조 등을 자세히 알고 싶은 분은 이 시점에서 기본적으로 할당됩니... pug자바스크립트ExpressNode.js Firebase + Express + Pug로 동적 페이지를 localhost로 호스팅 아직의 사람은 이쪽의 페이지를 부디( ) Firebase 계정 및 호스팅 프로젝트 생성이 완료되었다고 가정합니다. 아직의 사람은 이쪽의 페이지를 부디 ( ) 기존 Express 프로젝트를 번거롭지 않고 Firebase에서 이동하고 싶습니다. 'firebase init' 뒤의 첫 번째 질문에서 'Functions'와 'Hosting'에 체크를 넣어두면, 나중의 질문은 모두 디폴트 그대로 건너뛸... pugFirebaseExpress지역Node.js fish로 여러 파일 이름 바꾸기 fish는 보완효과가 좋기 때문에 사용하고 있습니다 jade → pug에 100 파일 정도의 이름을 바꿀 수있는 기회가있었습니다. 현재의 디렉토리로부터 서브 디렉토리까지 리네임하고 있는 것은 발견되지 않았기 때문에 투고합니다. rename.sh 추가입니다. sed 사용하면 이해하기 어렵기 때문에 basename으로 문자열을 추출하는 방법도 써 둡니다. 이쪽이 정규 표현을 이스케이프하지 않기 ... JadefishBashpug nuxt.config.js에서 pug-loader에 options 전달 하고 싶었던 일 Nuxt.js에서 pug에 option basedir을 전달하고 싶었습니다. 유효했던 쓰기 쓸모 없었던 쓰기... pugnuxt.jsvue-loader atom-beautify로 .vue를 성형했을 때 pug의 들여 쓰기가 마음에 들지 않는다. 제목 시점에서 뭔가 틈새 느낌이 든다. 시간이 없을 때만 궁금해지는 것이군요… Vue 의 단일 컴퍼넌트 파일 *.vue 를 atom-beautify 로 성형하면 , 뭐 괜찮은 것 성형 하는 것이군요, 무서운 것에. 그런데 <template lang="pug"> 로 사용하고 있으면, 왠지 여기만 들여쓰기가 탭이 된다. 왜. 모두 (?) 곤란한 것입니다. pug-beautify의 코드 괴롭히고 ... pugVue.jsATOM 헤더에 설명하는 다양한 요약 | OGP 헤더에 설명 된 다양한 요약을 Pug와 html 모두 메모 index.pug index.html... HTMLpugOGP Node.js + Express4 + Passport + pug로 로그인 인증 화면 만들기 (오류 표시 있음) 웹 어플리케이션을 만들려고 하면 뭔가 필요하게 되는 로그인 인증 화면. 이번에는 Express4, Passport, pug를 사용하여 오류 메시지 (플래시 메시지)가 표시되는 것을 쓸 수 있었기 때문에 메모. 일부러 데이터베이스를 사용하는 것이 귀찮았기 때문에 일시적인 배열에 유저를 보관 유지하고 있습니다. ScreenName에 'user1', Password에 'pass1'로 로그인할 수 ... express4pugPassportNode.js Parcel에서 vue.js를 사용할 때 언젠가 플러그인이 더 이상 필요하지 않은 문제 거의 제목대로. 버전 1.7부터 대응한 모양. 이것을 쓰고 있는 2018년 4월 18일 현재, 「parcel vue」로 구그하면 「parcel-plugin-vue를 사용해」적인 기사가 대량으로 히트 하는 것이지만, 이것은 더 이상 불필요하다는 것 같다. 원래 에도 그 취지 써 있다. 역시 「에, 그래도 괜찮아요?」라고 하는 정도로 또 심플하다. 너무 담백하기 때문에 샘플적인 것이 뭔지 없는지... pugVue.jsparcel Parcel + Riot 고속으로 환경 구축 parcel은 설정 파일이 필요없는 고속 번들. 이번에는 공식적인 것이 아니지만 parcel 용 riot 플러그인 parcel-plugin-riotjs를 사용합니다. npm init -ynpm install --save riot parcel-bundler parcel-plugin-riotjs --index.html --main.js --app.tag --package.json 우선 index... pugriotparcel Excel 시트의 내용을 javascript에서 json으로 변환하여 pug용 파일로 출력한 메모 홈페이지 작성에 pug를 사용하게 되었지만, 표를 작성하기 위한 json을 수타하는 것이 귀찮아져 왔다. Excel에서 작성한 테이블을 명령 한 번으로 가져올 수 있도록 한다. windows10 Excel 2016 MSO(16.0.9001.2080) 32bit vagrant1.9.7 virtualbox5.1.26 ubuntu-16.04 Docker version 17.09.0-ce, buil... pug자바스크립트ExcelNode.js도커 VSCode에서 곤란한 두 가지 VSCode를 사용하고 있어 곤란한 것이 두 가지있었습니다. 1. 탭을 열어도 덮어쓰여져 버려 여러 탭으로 펼쳐지지 않는다 2. ⌘ + option + ↑ or ↓ 로 커서를 추가하여 들여쓰기를 변경하려고 하면 빈 줄이 막힌다 둘 다 어리석은 문제로 미안하지만 나는이 두 가지로 좌절했습니다 우선 1.의 해결방법에서 이것은 상당히 간단하며 두 가지 해결책이 있습니다. · 파일을 더블 클릭하여 ... pug탭커서VSCode들여쓰기 vue.js의 컴포넌트 컬렉션 "Element"를 사용하여 다중 선택을 구현합니다. 멀티플 셀렉트란 간단하게 말하면 복수 선택 가능한 셀렉트 박스입니다. 의외로 고객이 요구하는 UI상 필요한 것이 많아, 지금까지도 몇번이나 요망에 응해 왔습니다. 대체로 jQuery의 멀티플 셀렉트를 사용하고 있었습니다만, 어쩐지 맛이 없다. ●jQuery 멀티플 셀렉트 데모 vue.js에서 리셉션을 개발할 때 고객으로부터 「이 셀렉트 박스 복수 선택하고 싶다」라는 요망. 아~, 또? 라는 ... pugVue.jselement 이전 기사 보기
Laravel + SQLite + Vue.js + Pug + Stylus 환경 구축 Laravel에서 Vue.js 환경 구축 DB를 SQLite로 설정 (laradock 라든지 MySQL 라든지 사용하면 좋다고 생각합니다.) Vue.js를 Pug와 Stylus로 걸도록 설정한다. 우선 Laravel의 환경 구축 평소의 녀석 설정과 시작이 필요하지 않은 SQLite DB 구축은 간단하고 테스트 환경에 수요가 있다고 생각했습니다. .env를 편집합니다. 다음 명령 실행❯ tou... pugVue.js라라벨sqlitestylus 11ty(eleventy)의 collections와 front-matter로 유기적인 내비게이션을 자동 생성 내비게이션을 자동화하려는 목적으로 사이트의 문서를 11ty와 Pug로 다시 작성합니다. 11ty에서는 collections.all 로 사이트 전체의 정보를 객체로 얻을 수 있습니다. 또한 각 페이지의 시작 부분에 다음과 같이 front-matter를 작성하여 페이지별 변수를 전달할 수 있습니다. 이것을 이용해, 아래의 화상과 같이 의사적인 계층을 가지면서, 차례로 읽을 수 있는 링크도 표시하... HTMLpug11tyeleventy node.js+Express+pug로 DBD 맵 카운터 만들기 DBD라는 대인 게임에서, 어떤 캐릭터를 사용하면 서투른 맵만 닿기 때문에, 의심에서 맵 카운터를 만들었습니다. (또한 결과로는 내가 서투른지도가 DBD에 많았을 뿐이었습니다!) 목차 node.js+Express+pug 설치 DBD의 맵을 스크리핑 JSON 읽기/쓰기 동적 링크 처리 .pug에 변수 전달 .pug로 HTML 생성 css 묘사 1.node.js+Express+pug 설치 보면서... pugExpress파이썬자바스크립트Node.js Buefy placeholder가 작동하지 않는 경우 위와 같은 디자인을 구현하기 위해 을 참고로 구현. (코피페) pug 그러나 실제로 표시되는 것은 아래의 디자인으로, 공식 문서와 같은 구현이 되지 않는다. 무엇보다 placeholder가 효과가 없는 것이 제일 신경이 쓰인다. 왜 年/月/日 라고 표시되어 있다. (왠지 오른쪽 끝에 캘린더 아이콘도 표시됩니다) 기대하는 움직임은 placeholder="Select a date" 로 설정하고 ... HTMLpugVue.js#buefy 【Nuxt.js】Vue 파일의 Pug 템플릿을 HTML로 변환하는 방법 Nuxt.js에서 template 부분을 pug로 기술하고 있었지만 HTML로 다시 작성했을 때의 메모입니다. 그만한 이유는 eslint-plugin-vue가 작동하지 않기 때문입니다. 이것에 의해서 쓰는 방법에 통일감이 없고 에러도 자력으로 발견하지 않으면 안 되는 등 여러가지 문제가 보아 왔습니다. 그 밖에도 소스의 샘플이 대체로 HTML로 쓰여져 있으며, pug에서 할 수있는 일은 대체... HTMLpugVue.jsnuxt.js pug 쓰는 방법, 사용법(변수 & 배열편) 덮어쓸 수 있는 변수를 지정할 수 있다. 지정하고 있는 파일과 다른 파일에서도 덮어쓰기가 가능. 하이픈 + 개행 + 들여 쓰기로 일일이 하이픈을 쓰지 않아도된다 var도 생략할 수 있다 템플릿 리터럴 방식으로 변수와 문자열을 연결할 수 있으며, 그 때는 ${XXX}문자열로 단순히 내뱉을 때는 #{XXX} 덮어쓸 수 없는 변수를 지정할 수 있습니다. 덮어 쓰려고하면 오류가 발생합니다. var ... HTMLpug Gulp에서의 환경 구축 정리～Pug/Sass/TypeScript/BrowserSync～ 프런트 엔드의 개발을 할 때, 가능한 한 현장에 가까운 환경을 구축해 개발하고 싶다고 생각했기 때문에 정리했습니다. ← 공개하고 있습니다. 사용하는 경우 아래와 조합하면 비교적 환경 구축은 OK! (라고 생각하고 싶다.) ※windows로 환경 구축하고 있습니다. ✅참고 각 플러그인에 대해 정리해 준다. 개요 잡는다. ※실제로 환경 구축할 때까지는 흠뻑 빠졌습니다. ✅ 개요 이번에는 이하의 ... pugBrowserSyncTypeScriptgulpSass 【Svelte】Svelte에서 Material UI를 사용해 보았다 【Material UI】 Svelte에는 React 등과 마찬가지로 MaterialUI가 준비되어 있으므로 도입 절차를 작성합니다. MaterialUI 설치 전체 패키지 설치 콘솔 이번에는 무엇을 사용할지 미정이므로 일단 전체 설치합니다. 보충: component 단위 설치 콘솔 일단 이렇게 component 단위로도 설치할 수 있으므로, 실제로 사용하는 것이 정해지면 이쪽이 좋을지도입니다. theme 디렉토리 추가... MaterialUIpugTypeScript자바스크립트Svelte Pug에서 HTML 태그를 포함하는 문자열을 변수 확장하고 싶습니다. 실패 예 #{} 를 사용하면 잘 안된다. sample.pug 컴파일 해 보면,,, sample.html #{} 기법은 특수 문자를 이스케이프 처리하고 나서 출력하기 (위해)때문에, 이러한 결과가 됩니다. 성공 예 여기서는 이스케이프하지 않고 HTML 태그로 출력하고 싶으므로 !{} 를 사용하여 이스케이프하지 않고 출력시킵니다. sample.pug sample.html 잘 갔다... pugHTML5 storybook for html이 너무 사용하기 어렵기 때문에 pug를 사용하여 잘 사용하는 방법을 생각해 보았습니다. storybook for html을 이용하는 경우는 vu이라든지 사용하지 않는다고 생각합니다만, 실제 제작으로 원소의 HTML로 쓰는 케이스는 거의 없지요. 그런 가운데 storybook을 이용하고 싶은 경우 【코드 보완이 없는 환경에서 HTML을 쓴다】인가 【빌드하고 코피페】, 게다가 쓴 곳에서 pug로서 재이용할 수 있는 내용이 아닙니다. 잘못하면 일이 늘어나는 것만으로 분명히 말해서 사... pugHTML자바스크립트CSSstorybook 비주얼 스튜디오 2019에서 사쿠토 Flask Jade (Pug) # 1 이른 이야기가 가고시마 사투리와 표준어의 차이를 말하는 것과 같다. 다음을 클릭 만들기를 클릭 프로젝트가 완성된다. runserver.py __init__.py views.py layout.jade index.jade about.jade contact.jade 이상의 파일이 바삭하게 완성된다. 순식간에 편지지가 완성된다. Getting started Get More Libraries Mcir... pugVisualStudio2019FlaskBootstrap3Jade Pug 초학자의 비망록 : 루프편 Pug 초학자의 비망록입니다. 점점 추기해 갑니다. 완성 이미지 ↑와 같이 루프로 li.item 를 생성하면서, 각각에 i1 , i2 , i3 … 와 번호 첨부의 클래스명을 할당하고 싶을 때에. index.pug 더 똑똑한 쓰기가있을 것 같은 느낌 ... 완성 이미지 일반적인 메뉴 목록을 만들 때. index.pug 잘 다룰 수 있으면 즐거워 보인다! 계속 공부하겠습니다.... HTMLpugHTML5초보자 Nuxt (v2.4 이상) + Typescript 설정 2019/06/10 현재의 주요 모듈 버전은 다음과 같습니다. nuxt: 2.8.1 다음 명령으로 응용 프로그램을 초기화합니다. 위의 명령을 실행하면 몇 가지 질문을받습니다. 여기에서는 다음과 같이 대답하여 작업을 진행한다. 대답이 끝나면 모듈 다운로드와 같은 응용 프로그램의 초기화가 수행됩니다. 처리가 종료되면 다음 메시지가 출력됩니다. 기본값으로 남아 있으면 http://localhost... Sasspugnuxt.jsTypeScript Node.js,Express 메모 ⑤의 4 이 튜토리얼 Part5의 하위 페이지 네 번째입니다. 여기에서 catalog/에서 액세스하는 웹 페이지를 만드는 것 같습니다. ①이미 기술하고 있는 컨트롤러 함수의 갱신 ② 렌더링용 .pug 파일의 작성 이 체트리얼은 Book에 대한 페이지 작성이므로 catalog/의 루트 페이지는 bookController.js에 쓰는 것 같습니다. 게다가 거기의 페이지를 이렇게 지정하고 있는 것은 rou... Express.jspugNode.js pug와 sass 올레올레 템플릿 드물게 새로운 사이트를 만들지 않는 탄포 탑승을위한 올레올레스 니펫입니다. 탄포포는 모처럼 기억한 모던한 구조를 바로 잊는다… See the Pen by H.NOTSU ( ) index.pug 참고 사이트 위 링크의 소스를 pug 용으로 다시 작성하여 추가 수정 main.scss 참고 사이트 상기를 참고로 이하 약 추가 포인트는 main의 min-height: calc( 100vh - ( [... HTMLCSSSasspug Vue.js 사이트에서의 사용은 NG이지만, Vue.js에서의 개발은 포기하지 않은 이야기 상대적으로 페이지 수가 많은 사이트를 만들 때, Vue.js의 구성 요소를 사용한 개발 고려 여러 가지 이유로 사이트에서 Vue.js에서의 사용이 NG가 되었다. 개발은 Vue의 컴퍼넌트를 이용해, 프리 렌더링 출력한 정적 HTML와 CSS를 프로덕션 환경에 사용하기로 했다 일반적으로 프리 렌더링은 SEO 대책을 위해서 실시하는 것입니다만, 이번은 어디까지나 컴퍼넌트 베이스로의 개발, 및 정... JadepugVue.js How to make animation on scroll ? There have so many animation for icon scroll, but today we will do animation type arrow run down like animated last post. Start with element html You just simple put html will is:<div class="icon-scroll"></div>and if you... pugHTMLscssothersanimation 【초보자라도 OK】Node+Express로 간단한 폼을 구현! 저 자신도 개발 업무는 거의 미경험입니다만, N예비교의 Web 어플리케이션 코스나 라고 하는 참고서를 바탕으로 서버 측을 공부하고 있습니다. Node.js 주의해야 할 것은 "express --view=◯◯ △△"로 ◯◯에는 사용하는 HTML 템플릿을 △△에는 임의의 이름을 붙여 주십시오. generator로 작성되는 템플릿의 구조 등을 자세히 알고 싶은 분은 이 시점에서 기본적으로 할당됩니... pug자바스크립트ExpressNode.js Firebase + Express + Pug로 동적 페이지를 localhost로 호스팅 아직의 사람은 이쪽의 페이지를 부디( ) Firebase 계정 및 호스팅 프로젝트 생성이 완료되었다고 가정합니다. 아직의 사람은 이쪽의 페이지를 부디 ( ) 기존 Express 프로젝트를 번거롭지 않고 Firebase에서 이동하고 싶습니다. 'firebase init' 뒤의 첫 번째 질문에서 'Functions'와 'Hosting'에 체크를 넣어두면, 나중의 질문은 모두 디폴트 그대로 건너뛸... pugFirebaseExpress지역Node.js fish로 여러 파일 이름 바꾸기 fish는 보완효과가 좋기 때문에 사용하고 있습니다 jade → pug에 100 파일 정도의 이름을 바꿀 수있는 기회가있었습니다. 현재의 디렉토리로부터 서브 디렉토리까지 리네임하고 있는 것은 발견되지 않았기 때문에 투고합니다. rename.sh 추가입니다. sed 사용하면 이해하기 어렵기 때문에 basename으로 문자열을 추출하는 방법도 써 둡니다. 이쪽이 정규 표현을 이스케이프하지 않기 ... JadefishBashpug nuxt.config.js에서 pug-loader에 options 전달 하고 싶었던 일 Nuxt.js에서 pug에 option basedir을 전달하고 싶었습니다. 유효했던 쓰기 쓸모 없었던 쓰기... pugnuxt.jsvue-loader atom-beautify로 .vue를 성형했을 때 pug의 들여 쓰기가 마음에 들지 않는다. 제목 시점에서 뭔가 틈새 느낌이 든다. 시간이 없을 때만 궁금해지는 것이군요… Vue 의 단일 컴퍼넌트 파일 *.vue 를 atom-beautify 로 성형하면 , 뭐 괜찮은 것 성형 하는 것이군요, 무서운 것에. 그런데 <template lang="pug"> 로 사용하고 있으면, 왠지 여기만 들여쓰기가 탭이 된다. 왜. 모두 (?) 곤란한 것입니다. pug-beautify의 코드 괴롭히고 ... pugVue.jsATOM 헤더에 설명하는 다양한 요약 | OGP 헤더에 설명 된 다양한 요약을 Pug와 html 모두 메모 index.pug index.html... HTMLpugOGP Node.js + Express4 + Passport + pug로 로그인 인증 화면 만들기 (오류 표시 있음) 웹 어플리케이션을 만들려고 하면 뭔가 필요하게 되는 로그인 인증 화면. 이번에는 Express4, Passport, pug를 사용하여 오류 메시지 (플래시 메시지)가 표시되는 것을 쓸 수 있었기 때문에 메모. 일부러 데이터베이스를 사용하는 것이 귀찮았기 때문에 일시적인 배열에 유저를 보관 유지하고 있습니다. ScreenName에 'user1', Password에 'pass1'로 로그인할 수 ... express4pugPassportNode.js Parcel에서 vue.js를 사용할 때 언젠가 플러그인이 더 이상 필요하지 않은 문제 거의 제목대로. 버전 1.7부터 대응한 모양. 이것을 쓰고 있는 2018년 4월 18일 현재, 「parcel vue」로 구그하면 「parcel-plugin-vue를 사용해」적인 기사가 대량으로 히트 하는 것이지만, 이것은 더 이상 불필요하다는 것 같다. 원래 에도 그 취지 써 있다. 역시 「에, 그래도 괜찮아요?」라고 하는 정도로 또 심플하다. 너무 담백하기 때문에 샘플적인 것이 뭔지 없는지... pugVue.jsparcel Parcel + Riot 고속으로 환경 구축 parcel은 설정 파일이 필요없는 고속 번들. 이번에는 공식적인 것이 아니지만 parcel 용 riot 플러그인 parcel-plugin-riotjs를 사용합니다. npm init -ynpm install --save riot parcel-bundler parcel-plugin-riotjs --index.html --main.js --app.tag --package.json 우선 index... pugriotparcel Excel 시트의 내용을 javascript에서 json으로 변환하여 pug용 파일로 출력한 메모 홈페이지 작성에 pug를 사용하게 되었지만, 표를 작성하기 위한 json을 수타하는 것이 귀찮아져 왔다. Excel에서 작성한 테이블을 명령 한 번으로 가져올 수 있도록 한다. windows10 Excel 2016 MSO(16.0.9001.2080) 32bit vagrant1.9.7 virtualbox5.1.26 ubuntu-16.04 Docker version 17.09.0-ce, buil... pug자바스크립트ExcelNode.js도커 VSCode에서 곤란한 두 가지 VSCode를 사용하고 있어 곤란한 것이 두 가지있었습니다. 1. 탭을 열어도 덮어쓰여져 버려 여러 탭으로 펼쳐지지 않는다 2. ⌘ + option + ↑ or ↓ 로 커서를 추가하여 들여쓰기를 변경하려고 하면 빈 줄이 막힌다 둘 다 어리석은 문제로 미안하지만 나는이 두 가지로 좌절했습니다 우선 1.의 해결방법에서 이것은 상당히 간단하며 두 가지 해결책이 있습니다. · 파일을 더블 클릭하여 ... pug탭커서VSCode들여쓰기 vue.js의 컴포넌트 컬렉션 "Element"를 사용하여 다중 선택을 구현합니다. 멀티플 셀렉트란 간단하게 말하면 복수 선택 가능한 셀렉트 박스입니다. 의외로 고객이 요구하는 UI상 필요한 것이 많아, 지금까지도 몇번이나 요망에 응해 왔습니다. 대체로 jQuery의 멀티플 셀렉트를 사용하고 있었습니다만, 어쩐지 맛이 없다. ●jQuery 멀티플 셀렉트 데모 vue.js에서 리셉션을 개발할 때 고객으로부터 「이 셀렉트 박스 복수 선택하고 싶다」라는 요망. 아~, 또? 라는 ... pugVue.jselement 이전 기사 보기