Giới thiệu Viblo's Atom Plugin

![viblo-atom-plugin](https://viblo.asia/uploads/full/1e2eee75-450e-4232-a118-f21d460405c8.jpg) # Giới thiệu Với mong muốn đem đến sự thuận tiện hơn nữa cho người dùng trong việc tạo, chỉnh sửa, lưu trữ và publish bài viết trên Viblo, đội ngũ phát triển xin được ra mắt phiên bản **Beta** của **Viblo plugin** cho editor [Atom](https://atom.io/) Hy vọng rằng với việc sử dụng **Atom** cùng với **Viblo Plugin**, công việc viết bài sẽ trở nên dễ dàng, thú vị hơn. # Tại sao lại là Atom? Chắc hẳn sẽ có nhiều bạn đặt câu hỏi rằng **Atom** là gì? Tại sao Viblo Team lại chọn **Atom** là editor để phát triển plugin? ... Dưới đây nhóm xin có một vài chia sẻ về quyết định này. - [Atom](https://atom.io/), **A hackable text editor for the 21st Century**, là một editor nổi tiếng, hoàn toàn miễn phí, open source, được phát triển bởi **Github** - Atom là một editor hiện đại, mạnh mẽ, và cho phép người dùng tuỳ biến, chỉnh sửa ở mức độ cao. Trên trang chủ của mình, Atom được miêu tả như sau: > Atom is a text editor that's modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file. - Atom là một cross-platform-editor. Bạn có thể sử dụng Atom trên Windows, Mac hay Linux. - Atom có một hệ sinh thái các packages đi kèm, được phát triển bởi một cộng đồng rộng lớn. Các bạn có thể dễ dàng tìm kiếm và cài đặt các packages cần thiết cho công việc. Danh sách các packages cho Atom có thể xem tại [đây](https://atom.io/packages), và đương nhiên, [Viblo](https://atom.io/packages/viblo) cũng đã có mặt trên đó :D - Plugin cho Atom được viết bằng `Javascript`, điều đó cho phép chúng tôi tích hợp những đoạn code vốn được sử dụng tại editor truyền thống trên Browser vào trong plugin. Kết quả là các bạn sẽ có thể xem được preview bài viết ngay tại Atom, và nội dung preview sẽ gần sát với những gì sẽ được hiển thị trên Viblo khi bạn publish bài viết. # Cài đặt - Trước tiên, bạn hãy vào trang https://atom.io/ để tải và cài đặt Atom trước. Công việc hết sức đơn giản và nhanh gọn. - Dùng tổ hợp phím `Ctrl + Shift + P` để mở `Atom Search Menu`. Hãy gõ vào đó keywords: `Install packages`, rồi click vào tuỳ chọn **Settings View:Install Packages and Themes**. Sau đó bạn sẽ được dẫn đến trang Setting của Atom. Ngoài việc sử dụng phím tắt, bạn có thể truy cập đến trang Setting này bằng cách vào `Packages` > `Settings View` > `Open`. - Khi đến được trang Setting, hãy gõ vào ô tìm kiếm của mục **Install Packages** từ khoá `viblo`. Khi kết quả hiện ra thì hãy bắt đầu tiến hành cài đặt. - Để sử dụng được Plugin, bạn cần có API key của tài khoản của mình. Hãy vào trang [Viblo Setting Page](https://viblo.asia/settings/oauth) để tạo một API key mới, nếu bạn chưa có. ![viblo-create-api-key](https://viblo.asia/uploads/9d002b58-05f6-4969-b5f4-d3b4d19661b8.png) ![viblo-create-api-key-2](https://viblo.asia/uploads/0abf22cc-3282-4350-a6dc-b075900bfca3.png) - Sau khi tạo API key xong, mởi trang **Viblo: Settings** (bằng cách dùng `Ctrl + Shift + P` rồi tìm kiếm từ khoá **viblo**), rồi paste API key vào. Bạn sẽ cần phải reload lại Atom sau khi API key được cập nhật. - Công việc đến đây là hoàn thành, hãy vào trang **Viblo: Posts** để check danh sách các bài viết, bài drafts của bạn xem mọi thứ có hoạt động không nhé. # Chức năng ![](https://viblo.asia/uploads/full/c3f2f8c5-d619-4ff7-98e0-c77e614fdce9.png) **Viblo Plugin** cho Atom hiện có một số tính năng chính như sau: - Xem danh sách các Posts và Drafts - Tạo bài viết mới, publish bài viết lên Viblo, hoặc lưu trữ bài viết lên Viblo dưới dạng Draft. - Chỉnh sửa bài viết, bài draft đã có trên Viblo - Upload ảnh lên Viblo - Hỗ trợ Preview bài viết với các cú pháp Markdown đặc biệt được Viblo hỗ trợ (như embed slide, video ...) # Hướng dẫn sử dụng ## Tạo bài viết mới - Trước tiên, hãy tạo một file và lưu lại dưới định dạng `markdown` (có đuôi là `.md`) và bắt đầu viết nội dung lên đó. Đương nhiên bạn cũng có thể mở một file `.md` đã có sẵn để tiếp tục chỉnh sửa. ![](https://viblo.asia/uploads/full/3494ace7-26d1-42d0-a6eb-dbc548c11dc5.png) - Click chuột phải vào Atom, chọn **Viblo Preview** để xem nội dung bài viết sau khi được render. - Click chuột phải vào Atom, chọn **Publish to Viblo** để tiến hành lưu bài viết lên Viblo. Một popup sẽ được hiện ra, và bạn bắt đầu nhập tên tiêu đề bài viết, các tag, chọn ngôn ngữ, chọn category ... Sau đó bạn có thể chọn xem là sẽ lưu bài viết dưới dạng Draft, hay tiến hành publish luôn bài viết. - Khi muốn chèn ảnh vào bài viết, click chuột phải vào Atom, và chon **Viblo Image Helper**. Từ popup được hiện ra, bạn có thể upload một ảnh mới, hoặc chọn một ảnh cũ đã upload trước đây để sử dụng. ## Chỉnh sửa bài viết hay bài draft cũ ![](https://viblo.asia/uploads/full/d2f1b666-a415-4364-9de7-604169ba63f8.png) - Từ Atom, vào trang **Viblo: Posts** để xem danh sách các bài viết cũng như các bài drafts. - Click vào một bài viết hoặc một bài draft để tiến hành chỉnh sửa. - Sau khi chỉnh sửa xong, nhấn `Ctrl + S` để tiến hành lưu lại nội dung lên Viblo. # Feedbacks **Hiện tại phiên bản Viblo Atom Plugin vẫn đang trong giai đoạn beta testing, chúng tôi sẽ liên tục cập nhật tính năng, cải thiện trải nghiệm, fix những lỗi được phát hiện, dựa trên feedbacks của người dùng.** Nếu như bạn có bất kỳ thắc mắc, hay ý tưởng gì trong việc phát triển editor Plugins nói riêng hay Viblo nói chung, hãy cho chúng tôi biết thông qua tính năng Feedback ở cuối trang Web. Những ý kiến của các bạn là điều cần thiết để chúng tôi xây dựng một dịch vụ tốt hơn cho cộng đồng Công Nghệ Thông Tin Việt Nam. Xin cảm ơn các bạn. **Viblo Team.**