หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

รีโฟ

เทมเพลตเว็บไซต์สำหรับเว็บสมัยใหม่
ประสบการณ์นักพัฒนาอันทรงพลังพบกับผลลัพธ์ที่มีน้ำหนักเบา

การสร้างไซต์คงที่ที่ง่ายดายพร้อมความยืดหยุ่น

รู้สึกหนักใจกับภูมิทัศน์ตัวสร้างไซต์แบบคงที่ใช่ไหม Refo นำเสนอแนวทางที่เรียบง่ายและปรับแต่งได้ ซึ่งสร้างขึ้นบน Node.js ทั้งหมด

ซึ่งแตกต่างจาก Jekyll, Gatsby, Astro และอื่นๆ เราให้คุณใช้ประโยชน์จากพลังของโมดูล Node.js ได้โดยตรง ซึ่งหมายความว่าคุณสามารถสร้างเว็บไซต์ประเภทใดก็ได้ที่คุณสามารถจินตนาการได้ ทั้งหมดนี้ด้วยความยืดหยุ่นของไลบรารีและเซิร์ฟเวอร์ Node.js ที่คุณชื่นชอบ

ประโยชน์ที่สำคัญ:

  • การพัฒนาที่ง่ายดาย : แก้ไขโมดูลของคุณและดูการอัปเดตทันทีด้วยการโหลดซ้ำที่ร้อนแรง
  • ความยืดหยุ่นที่ไม่มีใครเทียบได้ : นำเข้า SVG ใช้การนำเข้า raw และ style ส่วนประกอบของคุณได้อย่างง่ายดาย
  • เนื้อหาที่ขับเคลื่อนด้วยข้อมูล : สร้างสรรค์เรซูเม่ พอร์ตโฟลิโอ หรือเว็บไซต์ที่ขับเคลื่อนด้วยข้อมูลได้อย่างง่ายดาย
  • ปรับแต่งได้สูง : ไม่มีโครงสร้างโฟลเดอร์ที่เข้มงวด ลดขนาดชื่อคลาส หรือแม้แต่เปลี่ยน SolidJS เป็น React ขึ้นอยู่กับคุณเลย

ก้าวข้ามขีดจำกัดของเครื่องมือสร้างไซต์แบบสแตติกแบบเดิมๆ โอบรับพลังและความยืดหยุ่นของ Refo สำหรับโครงการต่อไปของคุณ!

️ติดดาวสนับสนุนผลงานเราได้เลย!
รับการแจ้งเตือนเกี่ยวกับการเปิดตัวใหม่ผ่านทางอีเมล

คุณสมบัติ

  • ( Hot ot) M odule R eloading โดยใช้ dynohot
  • ภาษามาร์กอัป JavaScript eXtensible โดยใช้และ babel-preset-solid
  • การปรับแต่งโมดูล Node.js
    • การนำเข้า SVG เป็นส่วนประกอบ
    • การนำเข้า raw
    • (Java) การรวมสคริปต์
    • การนำเข้าแบบไม่มีส่วนขยายโดยใช้โหนดความละเอียดตัวระบุ
  • องค์ประกอบสไตล์โดยใช้อารมณ์
    • ชื่อคลาสแบบสั้น (เช่น a , b , c , ..., aa , ab , ...)
    • ป้ายกำกับชื่อคลาสในโหมด development โดยใช้ stack-tracer
  • การตั้งค่าขนาดภาพโดยใช้ขนาดภาพ
  • การลดขนาด HTML และ CSS และ JS แบบอินไลน์โดยใช้ HTMLMinifier terser
  • (Java) การลดขนาดสคริปต์โดยใช้ UglifyJS
  • การนำทางฝั่งไคลเอ็นต์
  • การดึงลิงค์ล่วงหน้าโดยใช้ Quicklink
  • การโหลดแบบ Lazy โดยใช้ Lazysizes
  • รองรับ Markdown สำหรับสตริงในไฟล์ JSON ที่มี markdown-it
    • การคำนวณระยะเวลาด้วย Moment.js
  • การใช้การสร้าง PDF นักเชิดหุ่น นักเชิดหุ่นพร้อมตัวค้นหาโครเมียม

ไฮไลท์

  • แก้ไขข้อมูลเรซูเม่ของคุณในไฟล์ JSON
  • ดูและเผยแพร่ประวัติย่อของคุณในรูปแบบ PDF document HTML และหรือเป็นหน้าบนเว็บไซต์
    • ออกแบบและปรับแต่งเค้าโครงเรซูเม่ด้วย HTML และ CSS
  • สร้าง PDF 1 ไฟล์ขึ้นไปที่รองรับรูปแบบที่แตกต่างกัน เช่น Letter และ A4
    • รีเฟรช PDF หลังจากบันทึกการเปลี่ยนแปลงเพื่อดู PDF ที่เป็นปัจจุบัน

เริ่มต้นใช้งาน

  • ขั้นตอนเบื้องต้น
    • ติดตั้ง และ .
    • ดาวน์โหลดหรือโคลนพื้นที่เก็บข้อมูลนี้
    • เปิดพรอมต์คำสั่งในโฟลเดอร์นี้

ติดตั้งการพึ่งพา: 

pnpm install

คุณใช้ระบบที่ใช้ Unix หรือไม่? แม็ก? ลินุกซ์? หากเป็นเช่นนั้น คุณอาจต้องการเปลี่ยน port ในโมดูล index ซึ่งตั้งค่าเป็น 80 ซึ่งใช้งานได้บน Windows ค่าเริ่มต้นของ Superstatic คือ 3474 ดังนั้นคุณจึงสามารถลบออกได้หากต้องการ

เริ่มเซิร์ฟเวอร์ในโหมดการพัฒนา: 

pnpm dev

เยี่ยมชม http://localhost/ เพื่อเข้าถึงเว็บไซต์

การสร้างไซต์แบบคงที่

สร้างไซต์แบบคงที่: 

pnpm static

เปิด index.html ภายในโฟลเดอร์ static เพื่อเข้าถึงเว็บไซต์

แนวคิดหลัก

import ไฟล์ที่สร้างขึ้น
ดัชนี/ static /
• favicon .ico ( file ไอคอน (โมดูล Node.js)) • favicon .ico
• main .js .js ( module Node.js ) • .js
• ดัชนี .html .jsx ( module Node.js ) • ดัชนี .html
firebase .json .js ( module Node.js) ไฟร์เบส .json

file ที่นำเข้า (ซึ่งมีนามสกุลไฟล์ที่แน่นอน ( ico , png )) (Node.js) โมดูล) จะคัดลอกไฟล์ลงในโฟลเดอร์ static เมื่อโมดูลถูกโหลด ในโหมดการอ่านโมดูล พวกเขาจะลบออกหากไม่ได้นำเข้าอีกต่อไป

export default ของ module (Node.js) (ซึ่งมีนามสกุลไฟล์บางอย่าง ( js , json , html ) ในชื่อไฟล์ฐาน) จะถูกเขียนเป็นเนื้อหาของไฟล์เอาต์พุต (ลงในโฟลเดอร์ static ) ชื่อไฟล์เต็มของไฟล์เอาต์พุตคือชื่อไฟล์พื้นฐานของ module (Node.js)

️ติดดาวสนับสนุนผลงานเราได้เลย!

ซอร์สโค้ดตัวอย่างหน้าอย่างง่าย

ดัชนี .html .jsx ( import module ed ): 

 import template from '#@SolidJS/template'

import use from '#@style'

const [ { styled } , extract ] = use ( )

const Body = styled . body `
	font-weight: bold;
`

export default < >
	{ template ( `<!DOCTYPE HTML>` ) }
	< html lang = "en" >
		{ template ( `<head>` ) }
			< style > { extract ( ) } </ style >
		{ template ( `</head>` ) }
		< Body >
			example content
		</ Body >
	</ html >
</ >

ดัชนี .html (ไฟล์ที่สร้างขึ้น): 

 <!DOCTYPE HTML > < html lang = en > < head > < style > .a{font-weight:700} </ style > </ head > < body class = a > example content </ body > </ html >

การปรับใช้

หน้า GitHub

คุณสามารถปรับใช้โฟลเดอร์ docs คงที่ได้เหมือนเดิม

คุณอาจต้องการเปลี่ยน prefixum ในไฟล์ต่อไปนี้ตามชื่อของที่เก็บ project site ของคุณ: index/index/site/ main/

  • ส่วนหัว/index.jsx#L6
  • index.jsx#L7
  • index/resume/index/index
    • .jsx#L13
    • /controls.jsx#L5

คุณสามารถลบ prefixum ออกได้อย่างสมบูรณ์ในกรณีที่คุณกำลังเผยแพร่ user or an organization site

โฮสติ้ง Firebase

  • ขั้นตอนเบื้องต้น
    • ลบ prefixum ออกจากไฟล์ที่แสดงด้านบนภายใต้การปรับใช้เพจ GitHub
    • ติดตั้งและตั้งค่า CLI
    • เพิ่มไฟล์ .firebaserc ด้วยรหัสโปรเจ็กต์ Firebase ของคุณ: 
       {
 	"projects" : {
 		"default" : " <projectId> "
 	}
 }

ทำให้ไซต์ของคุณใช้งานได้กับ Firebase Hosting: 

pnpm deploy

ผลงาน

การแยกเทมเพลตเรซูเม่และเผยแพร่เป็นแพ็คเกจ Refo ใหม่อาจมีประโยชน์

เปิดประเด็นใหม่หากคุณคิดเช่นนั้นและมาหารือเรื่องนี้กัน เราสามารถนำสิ่งนี้ไปใช้ได้อย่างแน่นอนหากพบว่ามีประโยชน์

เกี่ยวกับ

ตัวอย่างนี้ใช้ตัวจัดการ JSON ของ Refo ดังนั้นคุณจึงสามารถควบคุมวิธีการและไม่ว่าจะแสดงคุณสมบัติบางอย่างจากไฟล์ index/index/site/index/resume/data.js ตามที่อธิบายไว้ใน readme ของ Refo ที่ส่วนการใช้งานตัวจัดการ JSON

เซิร์ฟเวอร์

โครงการนี้ใช้ superstatic เพื่อให้บริการไฟล์คงที่ที่สร้างขึ้น คุณสามารถใช้ไลบรารีที่คล้ายกันเพื่อให้บริการไฟล์หรือไม่ใช้ไลบรารีเลยก็ได้ ในกรณีที่คุณต้องการเรียกดูไฟล์โดยตรง สิ่งนี้อาจมีประโยชน์สำหรับเอกสารออฟไลน์เป็นต้น

คุณสามารถลบ superstatic และใช้เครื่องมือ firebase แทน (ซึ่งใช้ superstatic) ได้หากต้องการ ในกรณีนี้ คุณสามารถแก้ไข scripts ในไฟล์ package.json และแทนที่ superstatic ด้วยคำสั่ง firebase serve ได้

โปรเจ็กต์นี้ใช้พร้อมกันเพื่อรัน Refo ในโหมดดูและให้บริการไฟล์แบบซูเปอร์สแตติก คุณสามารถใช้ไลบรารีที่คล้ายกันเช่น npm-run-all เพื่อรัน Refo และเซิร์ฟเวอร์แบบขนานหรือไม่มีไลบรารีเลย หากคุณไม่ต้องการไฟล์เซิร์ฟเวอร์

ไฟล์ firebase.json สามารถตั้งชื่อเป็น superstatic.json ได้หากต้องการ เทมเพลตนี้ไม่ได้ขึ้นอยู่กับ Firebase เอง อย่างไรก็ตาม พวกเขาให้หนึ่งในโซลูชันโฮสติ้งแบบคงที่ที่เร็วที่สุดอย่างต่อเนื่อง

การสร้างเทมเพลต

ตัวอักษรเทมเพลต JavaScript ใช้สำหรับการสร้างเทมเพลตเอกสาร HTML

ตัวอย่างนี้ยังใช้แท็กทั่วไปในบางเทมเพลตซึ่งอนุญาตให้ใช้ไวยากรณ์ที่สั้นกว่าในหลายกรณี

ต่อไปนี้เป็นสถานการณ์บางส่วนที่ใช้กันทั่วไปในตัวอย่างนี้:

ตามค่าเริ่มต้น คุณสามารถแสดงค่าที่ไม่บังคับและใช้ตัวดำเนินการตามเงื่อนไขเพื่อป้องกันการแสดงค่าเท็จ เช่น undefined เช่น: 

 module . exports = `
	${ item ? item : '' }
`

แท็กทั่วไปทำสิ่งนี้เพื่อคุณ ดังนั้นคุณจึงใช้ไวยากรณ์ที่สั้นลงพร้อมกับแท็กเทมเพลตลิเทอรัลได้: 

 const { html } = require ( 'common-tags' )

module . exports = html `
	${ item }
`

ตามค่าเริ่มต้น คุณสามารถแสดงส่วนเทมเพลตเสริมได้ และใช้ตัวดำเนินการแบบมีเงื่อนไขเพื่อป้องกันการแสดงค่าเท็จ เช่น undefined เช่น: 

 module . exports = `
	${ item ? `
		<div>
			` + item + `
		</div>
	` : '' }
`

ด้วยแท็กทั่วไป คุณสามารถใช้เงื่อนไขง่ายๆ กับตัวดำเนินการเชิงตรรกะเพื่อให้ได้สิ่งเดียวกัน: 

 const { html } = require ( 'common-tags' )

module . exports = html `
	${ item && `
		<div>
			` + item + `
		</div>
	` }
`

ตามค่าเริ่มต้น คุณสามารถ join ผลลัพธ์ได้เมื่อวนซ้ำอาร์เรย์ของรายการเพื่อป้องกันการแสดงลูกน้ำระหว่างรายการที่ส่งคืน: 

 module . exports = `<section>
	${ items . map ( item => `
		<div>
			${ item }
		</div>
	` ) . join ( '' ) }
</section>`

แท็กทั่วไปทำสิ่งนี้เพื่อคุณ ดังนั้นคุณสามารถใช้ไวยากรณ์ที่สั้นลงได้: 

 const { html } = require ( 'common-tags' )

module . exports = html ` < section >
	${ items . map ( item => `
		<div>
			${ item }
		</div>
	` ) }
</ section > `

เมื่อคุณไม่ได้ใช้ลิเทอรัลเทมเพลตที่ติดแท็กด้วยแท็กทั่วไปหรือกับไลบรารีที่คล้ายกัน คุณสามารถเชื่อมส่วนเทมเพลตเข้ากับตัวดำเนินการ + ได้ หากคุณต้องการ: 

 module . exports = `
	<div>
		` + item + `
	</div>
`

หรือคุณสามารถใช้ตัวยึดตำแหน่งที่มีไวยากรณ์ ${expression} แทน: 

 module . exports = `
	<div>
		${ item }
	</div>
`

ในบางกรณี รูปแบบใดรูปแบบหนึ่งสามารถอ่านได้ง่ายกว่ารูปแบบอื่น ดังนั้นคุณอาจใช้สไตล์ตามบริบทหรือคุณสามารถเลือกรูปแบบใดรูปแบบหนึ่งและคงความสม่ำเสมอได้ ตัวอย่างนี้ใช้ทั้งสองอย่าง

การเน้นไวยากรณ์

ตัวอย่างเช่น โปรแกรมแก้ไขโค้ดบางตัว เช่น Atom และ GitHub จะเน้นตัวอักษรเทมเพลตที่แท็ก html เป็น HTML ดังที่คุณเห็นด้านบนเช่นกัน

ข้อความประเสริฐ

  • ติดตั้ง Package Control และ JS Custom
  • ไปที่ Preferencies / Package Settings / JS Custom / Settings
  • แก้ไข JS Custom.sublime-settings — User : 
    {
	"configurations" : {
		"jsx" : true
		, "custom_templates" : {
			"styled_components" : true
			, "lookaheads" : {
				" \ <" : " scope:text.html.basic "

				, " \ .|height|padding|margin" : " scope:source.js.css "

				, "import|minify|await|export|if|window| \ (|," : " scope:source.js "
			}
			, "tags" : {
				"injectGlobal" : " scope:source.js.css "
				, "css" : " scope:source.js.css "

				, "html" : " scope:text.html.basic "
			}
		}
	}
}

ตอนนี้คุณสามารถใช้ตัวเลือก JS Custom - Default สำหรับไฟล์ JavaScript

การใช้งาน

ตัวจัดการ JSON

ตัวจัดการ JSON เป็นแพ็คเกจแบบสแตนด์อโลน ส่วนใหญ่จะมีประโยชน์ในการจัดการข้อมูลที่เกี่ยวข้องกับเรซูเม่ แต่คุณสามารถใช้เพื่อสิ่งอื่นได้เช่นกัน

คุณสามารถใช้มันได้ตามที่เห็นในตัวอย่าง (asset/resume/getHandledJson.js) เช่นกัน: 

 const handleJSON = require ( 'refo-handle-json' )

var json = JSON . parse ( JSON . stringify ( require ( './data' ) ) )

json = handleJSON ( json )

ขอแนะนำให้สร้างสำเนาของ JSON ที่จำเป็นโดยใช้ฟังก์ชัน JSON.parse(JSON.stringify(json)) เช่น เมื่อคุณใช้ Refo ในโหมด watch (ความคิดเห็นที่เกี่ยวข้อง) เนื่องจากตัวจัดการ JSON กำลังเปลี่ยนแปลงคุณสมบัติของอ็อบเจ็กต์

ตัวจัดการ JSON กำลังแยกวิเคราะห์ค่าวัตถุสตริงเป็น Markdown โดยใช้ markdown-it ตัวอย่าง: example/asset/resume/data.json#L7

คุณสมบัติที่ลงท้ายด้วย -private ได้แก่ ลบออก - ตัวอย่าง: example/asset/resume/data.json#L4
วัตถุที่มีคุณสมบัติชื่อ private จะถูกลบออกด้วย

คุณสมบัติที่ลงท้ายด้วย -full จะถูกรวมเฉพาะเมื่อมีการส่งพารามิเตอร์ค่าจริงตัวที่สองไปยังฟังก์ชันตัวจัดการเท่านั้น ตัวอย่าง: example/asset/resume/data.json#L8, example/asset/resume/getHandledJson.js#L9
ออบเจ็กต์ที่มีคุณสมบัติชื่อ full จะถูกรวมเฉพาะเมื่อพารามิเตอร์ค่าจริงตัวที่สองถูกส่งผ่านไปยังฟังก์ชันตัวจัดการ

ระยะเวลา

เมื่อออบเจ็กต์มีคุณสมบัติ startDate โดยไม่มีคุณสมบัติ endDate ก็สามารถใช้คุณสมบัติ hidePresent เพื่อซ่อนป้ายกำกับปัจจุบันและแสดงปีปัจจุบันแทนได้
คุณสมบัติ hideEndDate สามารถใช้เพื่อซ่อนปีปัจจุบันที่แสดงแทนป้ายกำกับปัจจุบัน

คุณสมบัติ hideDuration สามารถใช้เพื่อซ่อนระยะเวลาที่คำนวณได้ มิฉะนั้น คุณสมบัติ duration จะถูกกำหนดด้วยระยะเวลาที่คำนวณได้ (ตัวอย่าง: 7 เดือน, 1 ปี, 1.5 ปี, 2 ปี)

ผลงาน

การสร้างเอกสารเชิงลึกเกี่ยวกับแพ็คเกจ Refo แต่ละแพ็คเกจอาจเป็นประโยชน์

เปิดประเด็นใหม่หากคุณคิดเช่นนั้นและมาหารือเรื่องนี้กัน เราสามารถนำสิ่งนี้ไปใช้ได้อย่างแน่นอนหากพบว่ามีประโยชน์

ใครใช้ Refo

  • Oengi.com – เว็บไซต์และประวัติย่อของ Erik Engi

เสนอการเปลี่ยนแปลงไฟล์เพื่อเพิ่มโครงการของคุณที่นี่

แรงบันดาลใจ

  • JSON เรซูเม่

ผู้เขียน

  • เอริค เอนกิ

เกี่ยวกับชื่อ

เรื่อง + พอร์ต สำหรับ lio = Refo

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด