Blogger | Thuật ngữ CDATA trong Blogger ( Dữ liệu ký tự )

CDATA trong lập trình Blogger đóng vai trò rất quan trọng.

1. Khái niệm:

Để lập trình giao diện Blogger, ta xây dựng lên cấu trúc XML với quy ước chặt chẽ mà Blogger quy định, để đánh dấu, xây dựng lên Theme mà ta muốn hiển thị.

Trình phân tích cú pháp của Blogger Server sẽ phân tích mã XML của chúng ta để trả về mã HTML cho trình duyệt với database bài đăng/ static page được Blogger CMS quản lý.

Vậy CDATA làm vai trò gì trong cấu trúc XML lập trình viên cung cấp cho nền tảng Blogger?

Phần XML CDATA, trong đó thuật ngữ CDATA có nghĩa là 'Dữ liệu Ký tự'. CDATA bọc lấy các khối văn bản, để nói rằng các khối văn bản này không được trình phân tích cú pháp ( bởi trình phân tích cú pháp của Blogger ) mã hóa hoặc phân tích cú pháp, nhưng được công nhận là đánh dấu.

Khi phân tích cú pháp phân tích cú pháp khối mã, các thực thể được xác định trước như <,>, & sẽ dẫn đến & lt ;, & gt ;, và & amp; dưới dạng đầu ra. Bằng cách sử dụng phần CDATA, chúng ta đang ra lệnh cho trình phân tích cú pháp rằng phần cụ thể của tài liệu không chứa đánh dấu và phải được coi là văn bản thông thường. Điều này có nghĩa là bất kỳ Ngôn ngữ Blogger nào sẽ không được xử lý trong phần này nếu có.

2. Cú pháp:

<! [CDATA [
	phần nội dung muốn giữ nguyên, không muốn trình phân tích cú pháp của Blogger can thiệp
]]>

CDATA bắt đầu bằng dấu phân cách chín ký tự <! [CDATA [ (ta quy ước đây là đánh dấu mở)
Phần CDATA kết thúc bằng ]]> kèm dấu phân cách. (ta quy ước đây là đánh dấu đóng)
Không được phép lồng trong phần CDATA. ( theo sau một mở, luôn là một đóng )
Một dòng nhận xét phải được thêm vào nếu nó được sử dụng cho CSS hoặc JS.

3. Dẫn chứng cụ thể:

3.1. Ứng dụng trong khối mã CSS hoặc JS

Sau khi bạn chỉnh sửa khối mã XML trong Blogger Theme, phần CSS (<style></style>) hoặc JS (<script></script>), trước khi chúng ta rời Trình chỉnh sửa HTML của Blogger, khối mã trông bình thường. Nếu chúng ta quay lại trình chỉnh sửa và xem mã của mình, chúng ta sẽ thấy chúng trông thật khó chịu.

CSS không có CDATA

<style type='text/css'>
.class ul&gt;li:after {
    	content: &quot;&#9829;&quot;;
 	color: yellow;
}
</style>

CSS có đánh dấu CDATA

<style type='text/css'>
/*<![CDATA[*/
    .class ul>li:after {
        	content: "♥";
		color: yellow;
    }
 /*]]>*/
</style>

Đôi khi, Javascript của chúng ta được đánh dấu là Lỗi và Trình chỉnh sửa HTML của Blogger XML sẽ không chấp nhận mã của chúng ta, điều này, vì chúng ta có ký tự đặc biệt trong mã của chúng ta, chẳng hạn như dấu & (dấu và) để tránh lỗi, chúng tôi phải giải mã JS của mình hoặc gói chúng bên trong khối CDATA.

JAVASCRIPT không có CDATA

<script>
if (var1 &gt; var2 &amp;&amp; var2 &lt; var3 ) {
    alert(&#39;Thong bao&#39;);
}
</script>

JAVASCRIPT có đánh dấu CDATA

<script>
//<![CDATA[
if (var1 < var2 && var2 < var3) {
    alert('Thong bao');
}
//]]>
</script>

Chú ý đến cú pháp comment điểm đầu và điểm cuối của CDATA cho CSS và JS có sự khác biệt.

3.2. Ứng dụng trong nội dung của <b: widget-setting>

Nội dung của <b: widget-setting> được phân tích cú pháp bằng XML, vậy nên chúng ta có thể sử dụng cdata nội dòng với chúng với giá trị của nó để tránh văn bản được mã hóa.

GIÁ TRỊ CỦA MỘT CÀI ĐẶT WIDGET KHÔNG CÓ CDATA

<b:widget-setting name='content'>
  	&lt;p&gt;String want to no passing&lt;/p&gt;
</b:widget-setting>

GIÁ TRỊ CỦA MỘT CÀI ĐẶT WIDGET CÓ CDATA

<b:widget-setting name='content'>
	<![CDATA[
    		<p>String want to no passing</p>
	]]>
</b:widget-setting>

3.3. Sử dụng cặp thẻ CDATA một cách linh hoạt:

Suy cho cùng bản chất của cặp thẻ CDATA block chỉ là chỉ cho trình phân tích cú pháp của Blogger server biết chỗ nào thì có thể tương tác, thay đổi, chỗ nào thì giữ nguyên các ký tự như lập trình viên đã đánh dấu.
Vậy nên đoạn mã script dưới đây vẫn chạy, và trong một số hoàn cảnh, bắt buộc ta cần làm như vậy.

<script type='text/javascript'>
	{
		let myString = &quot;<data:content/>&quot;;

		let myArray = myString.split("+");
		functionA(myArray);

		//<![CDATA[
		function functionA(_arr) {
			for(let i = 0; i < _arr.length; ++i) {
		//]]>
				functionB(_arr[i].trim(), "callBackFunc", 10);
				
			}
		}
	}
</script>

Đoạn trên cặp thẻ CDATA là cần thiết để đoạn lệnh script hợp lệ với ký tự "<".
Đoạn script trên là nội tuyến (inline) trong một widget của blogger.

Đoạn trích dưới đây nằm ngoài CDATA nhưng vẫn nằm trong nội dung của thẻ script, và cho phép trình phân tích XML của Blogger render HTML data lại cho browser.

let myString = &quot;<data:content/>&quot;;

👉 mã trả về cho browser sẽ được như sau.

<script type='text/javascript'>
	{
		let myString = "value của thẻ data:content";

		let myArray = myString.split("+");
		functionA(myArray);

		//<![CDATA[
		function functionA(_arr) {
			for(let i = 0; i < _arr.length; ++i) {
		//]]>
				functionB(_arr[i].trim(), "callBackFunc", 10);
				
			}
		}
	}
</script>