Advertisement
  1. Web Design
  2. Atom

Το Atom σε 60 δευτερόλεπτα: Εργασία με Αποσπάσματα

Scroll to top
Read Time: 2 min
This post is part of a series called 60 Second Video Tutorials.
Atom in 60 Seconds: 3 Beautiful Themes
Sketch Mirror in 60 Seconds

() translation by (you can also view the original English article)

Τα αποσπάσματα σας επιτρέπουν να γράψετε μια λέξη-κλειδί και στη συνέχεια αναπτύξτε το στοιχείο σε ένα προκαθορισμένο κομμάτι κώδικα. Εδώ είναι μερικά από μου αγαπημένο αποσπάσματα Atom, σε εξήντα δευτερόλεπτα!

Πώς να δημιουργήσετε ένα απόσπασμα Atom

Για να δημιουργήσετε το δικό σας απόσπασμα πηγαίνετε πρώτα στο Atom > Snippets για να ανοίξετε το snippets.cson (ένα αρχείο CoffeeScript Object Notation). Στη συνέχεια πρέπει να ορίσετε το πεδίο εφαρμογής ή τους τύπους αρχείων όπου το απόσπασμα θα είναι διαθέσιμο.

Εδώ είναι μια λίστα ευρών για να σας βοηθήσει:

  • HTML:. text.html.basic
  • CSS:. source.css
  • Sass:. source.sass
  • JavaScript:. source.js
  • JSON:. source.json
  • PHP:. text.html.php
  • Java:. source.java
  • Ruby: .text.html.erb
  • Python: .source.python
  • Απλό κείμενο (συμπεριλαμβανομένων markdown):. text.plain

Στη συνέχεια, μπορείτε να δώσετε στο απόσπασμα σας ένα όνομα και μια  "λέξη-κλειδί trigger" ακολουθούμενη από το  ίδιο το απόσπασμα. Για παράδειγμα, εδώ το απόσπασμα ονομάζεται "5 item list", το trigger είναι το "five", και το περιεχόμενο το οποίο θα εμφανιστεί είναι μια unordered λίστα με πέντε στοιχεία λίστας:

1
'5 item list':
2
    'prefix': 'five'
3
  'body': """

4
		<ul>

5
			<li>$1</li>

6
			<li>$2</li>

7
			<li>$3</li>

8
			<li>$4</li>

9
			<li>$5</li>

10
		</ul>

11
	"""

Όπως θα δείτε σε αυτό το παράδειγμα, μπορείτε να προσθέσετε χαρακτήρες κράτησης θέσης (placeholders) ως το σύμβολο του δολαρίου, ακολουθούμενο από έναν αριθμό. Επίσης, εάν το κείμενο σώματος έχει περισσότερες από μία γραμμές χρησιμοποιείστε τριπλά εισαγωγικά για διαχωρισμό.

Μόλις γίνει αυτό, αποθηκεύστε και πληκτρολογήστε τη λέξη-κλειδί σε ένα αρχείο HTML. Το απόσπασμα θα επεκταθεί και θα είστε σε θέση να προχωρήσετε με tab μέσα από τα σύμβολα κράτησης θέσης που δημιουργήσατε.

Μάθετε περισσότερα πάνω στο Atom

Υπάρχει πολλά περισσότερα σχετικά με το Atom στο Envato Tuts+, ρίξτε τους μια ματιά!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.