Ví dụ về một gói mở rộng cực kỳ đơn giản: Highlight.js


nedka

nedka

Quản trị viên
31/08/2016 21:56

Highlight.js là gì?
Tập tin Javascript này sẽ 'tô màu' giúp bạn những đoạn mã nằm trong thẻ [ code ] ... [ /code ] theo cú pháp của nhiều ngôn ngữ lập trình khác nhau, giúp người đọc dễ nhìn hơn.


Tích hợp Highlight.js vào phpBB
Chưa từng có việc nào đơn giản hơn nữa! Hãy truy cập vào https://highlightjs.org/download/ bạn sẽ thấy 2 dòng mã họ để đầu trang:

Chép
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
Mở tập tin styles/*/template/overall_footer.html, trước thẻ </body> cuối trang, hãy thêm 2 dòng trên cộng với 1 dòng viết mới vào:
Chép
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

</body>
Thế là xong rồi đấy! Tuy nhiên, bạn sẽ phải thêm lại nếu lỡ sau này cập nhật giao diện hay phiên bản phpBB mới, và nó cũng chưa tối ưu vì trang nào cũng gọi 2 tập tin CSS và JS trên. Giờ sao ta không thử viết một gói mở rộng đơn giản từ ví dụ trên nhỉ?


Chuyển đổi thành gói mở rộng
  1. Vào trang https://highlightjs.org/download/, chỉ chọn những ngôn ngữ chúng ta thật sự cần trong phần Custom package rồi bấm Download. Bạn để mặc định cũng được, chúng ta đang làm ví dụ mà.
    Những ngôn ngữ liên quan phpBB?
    Hãy chọn từ trên xuống: Apache, CSS, Diff, HTML/XML, HTTP, Ini, JSON, JavaScript, Markdown, Nginx, PHP, SQL, Less, SCSS, Twig, YAML.
  2. Giải nén tập tin highlight.zip vừa tải về ra, ta chỉ lấy 2 tập tin cần dùng là:
    Chép
    highlight.pack.js
    styles/default.css
  3. Vào thư mục ext, tạo 2 thư mục con trong đó tạo thành đường dẫn sau: ext/demo/highlightjs/.
  4. Vào thư mục highlightjs, giờ tất cả mọi thứ ta tạo mới đều nằm trong này, cấm đụng đến các tập tin gốc bên ngoài của phpBB không là... chặt tay! >_< :D
  5. Tạo thư mục styles/all/theme/ rồi bỏ 2 tập tin highlight.pack.jsdefault.css vào đây.
  6. Tạo tập tin ext/demo/highlightjs/composer.json với nội dung sau:
    Chép
    {
    	"name": "demo/highlightjs",
    	"type": "phpbb-extension",
    	"description": "Syntax highlighting for phpBB.",
    	"homepage": "https://highlightjs.org/",
    	"version": "1.0.0",
    	"time": "2016-08-31",
    	"license": "GPL-2.0",
    	"authors": [{
    		"name": "Mr. Bean",
    		"email": "bean@gmail.com",
    		"homepage": "http://www.phpbb.com/",
    		"role": "Developer"
    	}],
    	"require": {
    		"php": ">=5.3.3",
    		"composer/installers": "~1.0"
    	},
    	"require-dev": {
    		"phpbb/epv": "dev-master"
    	},
    	"extra": {
    		"display-name": "Highlight.js",
    		"soft-require": {
    			"phpbb/phpbb": ">=3.1.3"
    		}
    	}
    }
  7. Tạo tập tin event/listener.php với nội dung sau:
    Chép
    <?php
    
    namespace demo\highlightjs\event;
    
    use Symfony\Component\EventDispatcher\EventSubscriberInterface;
    
    class listener implements EventSubscriberInterface
    {
    	protected $template;
    
    	public function __construct(\phpbb\template\template $template)
    	{
    		$this->template = $template;
    	}
    
    	static public function getSubscribedEvents()
    	{
    		return array(
    			'core.modify_text_for_display_after' => 'modify_text_for_display_after',
    		);
    	}
    
    	public function modify_text_for_display_after($event)
    	{
    		$this->template->assign_vars(array(
    			'S_LOAD_HIGHLIGHT'	=> true,
    		));
    	}
    }
  8. Tạo tập tin styles/all/template/event/overall_footer_body_after.html với nội dung sau:
    Chép
    {% if S_IN_POSTING or S_COMPOSE_PM or S_LOAD_HIGHLIGHT %}
    <!-- INCLUDECSS @demo_highlightjs/default.css -->
    <!-- INCLUDEJS @demo_highlightjs/highlight.pack.js -->
    
    <script>
    	$(document).ready(
    		function()
    		{
    			$('pre code').each(
    				function(i, block)
    				{
    					hljs.highlightBlock(block);
    				}
    			);
    		}
    	);
    </script>
    {% endif %}
  9. Tạo tập tin config/services.yml với nội dung sau:
    Chép
    services:
        demo.highlightjs.listener:
            class: demo\highlightjs\event\listener
            arguments:
                - '@template'
            tags:
                - { name: event.listener }
    Hãy sao chép đúng y những gì ở trên nhé, vì tập tin YML bắt buộc mỗi thụt vào đầu dòng phải là 2 hoặc 4 khoảng trắng, không được dùng phím Tab (\t) hay khoảng trắng lẻ.
  10. Vào ACP -> TÙY BIẾN -> Gói mở rộng, cài đặt và tận hưởng thành quả bằng cách tạo một bài viết mới với một vài đoạn mã nãy giờ bạn cắt-dán đặt trong thẻ [ code ] ... [ /code ] xem nào.
Nếu bạn muốn hiểu rõ những gì bạn vừa làm, đây là các bài viết theo thứ tự từng bước liên quan:
  1. (không)
  2. (không)
  3. Cấu trúc thư mục và tập tin
  4. (không)
  5. Gọi thêm tập tin CSS/JS
  6. Khai báo thông tin trong composer.json
  7. Chèn mã vào sự kiện PHP
  8. Chèn mã vào sự kiện giao diện
  9. Chèn mã vào sự kiện PHP
  10. (không)
Giờ đây, khi đã chuyển thành dạng gói mở rộng, Highlight.js chỉ được gọi trong những trang nào có dùng đến thẻ BBCode [ code ] của phpBB mà thôi.


Quan điểm

  • Không đề cập chính trị, tôn giáo, nội dung đồi trụy.
  • Giữ gìn sự trong sáng của Tiếng Việt.
  • Không chia sẻ phần mềm vi phạm bản quyền.
  • Không rao vặt và không nhận đặt quảng cáo.
  • Dù trong túi hết tiền thì diễn đàn phpBB của anh cũng phải ngay ngắn.

Chuyện tình VinaBB

17/07/2004: Yêu phpBB từ phiên bản 2.0.10.
22/10/2006: Cất tiếng cười chào đời.
11/06/2007: Chính thức định cư trên Olympus, Sao Hỏa.
11/06/2009: Mất liên lạc với Trái Đất. [ Phiên bản 2007 ]
28/07/2016: Trôi dạt đến mặt trăng Rhea, Sao Thổ.
12/12/2016: Cuộc hành trình mới lại bắt đầu…

Code in Viet Nam

Cống hiến hết mình vì Tổ Quốc Việt Nam Xã Hội Chủ Nghĩa

Quản trị viên

nedka

VinaBB

NEDKA Solutions

Đơn vị chủ quản

Chúng tôi chịu trách nhiệm toàn bộ nội dung có trên VinaBB.vn trước pháp luật.