หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ทรัพยากรอื่นๆ
ดาวน์โหลด

ชาวยะวิม

นี่คือส่วนหน้าของ NeoVim ที่สร้างขึ้นบนอิเล็กตรอน ตัวแก้ไข NeoVIM ประกอบด้วยส่วนประกอบของเว็บและผู้ใช้สามารถขยาย UI ด้วยส่วนประกอบเว็บที่ใช้ซ้ำได้ HTML, CSS และ JavaScript

:help design-not พูดว่า:

ใช้ VIM เป็นส่วนประกอบจากเปลือกหรือใน IDE

Nyaovim ถูกสร้างขึ้นด้วยจิตวิญญาณเดียวกัน Nyaovim มีตัวแก้ไข NeoVim เป็นส่วนประกอบของเว็บและขยาย UI ด้วยเทคโนโลยีเว็บเช่นเดียวกับบรรณาธิการและ IDEs ที่ทันสมัยอื่น ๆ (เช่นอะตอม, VS Code, LightTable)

เป้าหมาย

  • Nyaovim Bundles ไม่มี UI ขยายออกไปตามค่าเริ่มต้น มันให้สถาปัตยกรรมปลั๊กอิน UI ที่ดีเท่านั้น ผู้ใช้สามารถเขียน UI ที่ชื่นชอบด้วยส่วนประกอบเว็บ HTML และ CSS นอกจากนี้ยังเป็นเรื่องง่ายที่จะทำการแจกแจง Nyaovim ซึ่งส่วนประกอบที่มีประโยชน์ถูกรวมเข้าด้วยกัน
  • อย่าแนะนำตัวจัดการปลั๊กอินอื่น HTML สำหรับส่วนประกอบเว็บควรรวมกับปลั๊กอิน VIM ดังนั้นตัวจัดการปลั๊กอิน VIM สามารถจัดการส่วนประกอบ UI ได้ให้เรารวมกลุ่ม JS และรหัสสคริปต์ VIM
  • อย่าสูญเสียความสะดวกสบายของ Vim โดยค่าเริ่มต้น ควรตระหนักถึงประสิทธิภาพ
  • ผู้สร้างส่วนประกอบ UI สามารถใช้ API ที่ทรงพลังแพ็คเกจและเครื่องมือ Node.js APIs, API อิเล็กตรอน, NeoVim MSGPACK-RPC APIs), แพ็คเกจ NPM จำนวนมากและ Chrome Devtools
  • Cross Platform (Linux, OS X, Windows)

บันทึก: 'nyao' คือ 'meow' ในภาษาญี่ปุ่นและออกเสียงคล้ายกับ 'neo' นอกจากนี้ยังเป็นตัวย่อสำหรับ 'ยังไม่เป็นต้นฉบับอื่น'

โครงสร้างแอพ

Nyaovim ประกอบด้วยส่วนประกอบของเว็บบนอิเล็กตรอนดังแสดงในรูปต่อไปนี้ ในตอนแรกมีเพียง <neovim-editor> และคุณสามารถเพิ่ม/ลบส่วนประกอบเพิ่มเติมได้

ตัวอย่างปลั๊กอิน UI

ปลั๊กอิน UI สามารถติดตั้งได้อย่างง่ายดายเช่นเดียวกับปลั๊กอินทั่วไป แต่ละคนเขียนภายใน 100 ~ 300 บรรทัด นอกจากนี้คุณยังสามารถสร้างส่วนประกอบเว็บที่นำกลับมาใช้ใหม่ได้และรวมเข้ากับ Nyaovim

  • Nyaovim-Markdown-Preview

  • Nyaovim-popup-tooltip

  • Nyaovim-Mini-Mini-Browser

การใช้งาน

เริ่มต้น

คุณสามารถติดตั้ง Nyaovim เป็นแพ็คเกจ NPM ขณะนี้ยังไม่มีการเปิดตัวบรรจุภัณฑ์ หากคุณใช้ Windows และยังไม่ได้ติดตั้ง NeoVim โปรดอ่านเคล็ดลับแรกก่อน 

$ npm install -g nyaovim

npm อาจต้องใช้ sudo หากคุณติดตั้ง node Pacakge ผ่าน System Package Manager

หากคุณยังไม่ได้ติดตั้ง NeoVim โปรดติดตั้งตามคำแนะนำของ NeoVim เนื่องจาก Nyaovim ใช้คำสั่ง nvim ภายใน โปรดทราบว่าจำเป็นต้องใช้ nvim v0.1.6 หรือใหม่กว่า

คุณสามารถเริ่ม Nyaovim ด้วยคำสั่ง nyaovim หากคุณติดตั้งแอพนี้ด้วย NPM 

$ nyaovim [files...]

คุณจะเห็นตัวแก้ไข NeoVim GUI น้อยที่สุด (เช่น GVIM) นี่คือแอพอิเล็กตรอนและ NeoVim ถูกวาดบน <canvas> คุณสามารถดู devtools ของแอพนี้ด้วยรายการเมนู 'เครื่องมือนักพัฒนาซอฟต์แวร์'

ในการเริ่มต้นครั้งแรกของ Nyaovim มันจะสร้าง ~/.config/nyaovim/nyaovimrc.html สำหรับการกำหนดค่า UI ( %AppData% แทนที่จะเป็น .config ใน windows) ใช่คุณสามารถขยายและกำหนดค่าส่วนประกอบ UI ด้วย HTML และ CSS!

กำหนดค่าตัวเลือกตัวแก้ไข

ฉันเดาว่าตอนนี้คุณกำลังคิดว่า 'อืมตัวอักษรไม่ดีและเล็กเกินไป ... ' คุณสามารถกำหนดค่าตัวเลือกตัวแก้ไขบางตัวได้ตามคุณสมบัติของคุณสมบัติ <neovim-editor> ตัวอย่างเช่นด้านล่างกำหนดค่าขนาดตัวอักษรและขนาดตัวอักษรตามคุณสมบัติ font และ font-size จากนั้นตั้งค่าความสูงบรรทัดเป็น 1.5 (ตัวอย่างเช่นอะตอมใช้ 1.5 เป็นความสูงของบรรทัด) 

 < neovim-editor
    id =" nyaovim-editor "
    argv =" [[argv]] "
    font-size =" 14 "
    font =" Ricty,monospace "
    line-height =" 1.5 "
> </ neovim-editor >

และคุณยังสามารถกำหนดค่าตัวเลือกหน้าต่างเบราว์เซอร์ด้วย browser-config.json (เช่นการรักษาสถานะหน้าต่างแอพอินสแตนซ์เดี่ยวและอื่น ๆ ) ดูเคล็ดลับสำหรับรายละเอียดเพิ่มเติม

ติดตั้งปลั๊กอิน UI

ตัวอย่างเช่นให้ติดตั้ง nyaovim-popup-tooltip กันเถอะ

ตามที่อธิบายไว้ในส่วนเป้าหมายปลั๊กอิน UI เป็นปลั๊กอิน NeoVim ปกติ คุณสามารถติดตั้งได้เหมือนปลั๊กอิน NeoVim อื่น ๆ หากคุณใช้ VIM-plug สิ่งที่คุณต้องการคือการเพิ่มบรรทัดด้านล่างลงใน init.vim ของคุณ 

Plug ' rhysd/nyaovim-popup-tooltip '

จากนั้นคุณต้องใส่คำแนะนำเครื่องมือป๊อปอัพ UI บนอินเทอร์เฟซ Nyaovim ของคุณ กรุณาเปิด ~/.config/nyaovim/nyaovimrc.html ( %AppData% แทนที่จะเป็น .config ใน windows) ตามที่อธิบายไว้ในส่วนเป้าหมายผู้ใช้สามารถสร้าง UI ด้วย HTML และ CSS ด้วยการปรับแต่งสูง

โปรดเพิ่มแท็ก <popup-tooltip> ภายใต้ <neovim-editor> แท็กด้านล่าง 

 < neovim-editor id =" nyaovim-editor " argv =" [[argv]] " > </ neovim-editor >
< popup-tooltip editor =" [[editor]] " > </ popup-tooltip >

<popup-tooltip> เป็นองค์ประกอบของพอลิเมอร์ editor="[[editor]]" เป็นข้อมูลที่มีผลผูกพันในเฟรมเวิร์กพอลิเมอร์เพื่อส่งผ่านอินสแตนซ์ของตัวแก้ไขไปยัง <popup-tooltip> มันหมายถึงการไหลของข้อมูลทิศทางเดียวจากผู้ปกครองไปยังเด็ก

หลังจากติดตั้ง nyaovim-popup-tooltip เป็นปลั๊กอิน NeoVim และเพิ่ม UI ไปยัง HTML คุณก็เสร็จแล้ว! เปิด Nyaovim ย้ายเคอร์เซอร์ไปยังเส้นทางภาพใด ๆ และป้อน gi Nyaovim จะโหลดภาพและแสดงในคำแนะนำเครื่องมือป๊อปอัปดังด้านล่าง

เอกสาร

มีเอกสารเพิ่มเติมในไดเรกทอรีเอกสาร

  • วิธีทำปลั๊กอิน UI
  • เคล็ดลับ
  • คำถามที่พบบ่อย
  • Runtime API
  • การกำหนดค่าเบราว์เซอร์

การกำหนดเวอร์ชัน

Nyaovim อยู่ภายใต้ช่วงเบต้า เวอร์ชันหลักได้รับการแก้ไขเป็น 0 จนกว่าจะมีการเปิดตัวที่เสถียร

การอัปเดตเวอร์ชันเล็ก ๆ น้อย ๆ หมายความว่ามีการเปลี่ยนแปลงที่แตกหัก และการอัปเดตเวอร์ชันแพตช์หมายความว่าไม่มีการเปลี่ยนแปลงที่แตกหักดังนั้นคุณสามารถอัปเดตเวอร์ชันได้อย่างง่ายดาย

ใบอนุญาต

ใบอนุญาต MIT

โลโก้ของแอพนี้ถูกสร้างขึ้นตามโลโก้ Neovim ที่ได้รับใบอนุญาตภายใต้ CCA 3.0 Unported

โลโก้ NeoVim โดย Jason Long ได้รับใบอนุญาตภายใต้ใบอนุญาต Creative Commons Attribution 3.0 unported

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