Code for Dek-d Customization

ลำดับตอนที่ #10 : [bookmarklet] เมื่อธีมมันรกตา ก็ต้องเคลียมันทิ้งไปบ้าง

สมัยก่อนที่เริ่มเล่นเด็กดี ใหม่ๆ นั้น เราไม่สามารถค้นหาโค้ดและของตบแต่งบทความ/นิยาย/My.iD ได้ (เนื่องจากใช้ keyword ผิด ใครจะรู้ว่า ณ ที่แห่งนี้เมื่อตอนนั้นเขาไม่ค่อยใช้คำว่า JavaScrip HTML CSS กัน) แต่หลังจากเริ่มรู้ว่าจะหาว่าเขาแจกของตบแต่งบทความ/นิยายกันที่ไหน เราก็เริ่มมหกรรมการค้นหาของแต่งและโค้ดตามบทความ/นิยายต่างๆ แต่เนื่องจากมีการแจกธีมเพื่อใช้ในการตบแต่งบทความ/นิยายอยู่ด้วย และบทความแจกโค้ดและธีมส่วนมากนั้นก็ตบแต่งด้วยธีมที่สวยงาม แต่ว่าการตบแต่งด้วยธีมนั้นบางครั้ง (บางธีม) ทำให้ในการเข้าชมบางเพจนั้นเราประสบปัญหาคือ ไม่สามารถอ่านข้อความที่เขียนอยู่ในบทความได้ เนื่องจากสีที่ใช้เป็นพื้นหลังของเพจนั้นๆ กลมกลืนกับตัวอักษร หรือบางเพจนั้นมีของตบแต่งเยอะมากจนลายตา

ด้วยความที่บางครั้งเนื้อความในเพจนั้นสำคัญกว่าการตบแต่ง จึงจำเป็นต้องหาทางที่จะเคลียการตบแต่งในส่วนของเจ้าของบทความออกไป แต่ยังต้องคงการตบแต่งที่เป็นของเว็บเด็กดีอยู่แล้วเอาไว้ ไม่เช่นนั้นมันอาจจะดูแย่กว่าเก่าได้

ถ้าเราเข้าไปดูรหัสต้นฉบับของเว็บเพจนั้นๆ เราจะพบว่า การตบแต่งส่วนใหญ่จะอยู่ภายในแท็กที่ชื่อว่า style ที่อยู่ภายใต้ tag div ที่มีคลาสเป็น story จากข้อมูลส่วนนี้เราจะพบว่า แท็กนี้นั้นคือ ส่วนของเนื้อหาของบทความนั้นเอง ซึ่งก็เป็นส่วนเดียวที่เจ้าของบทความจะสามารถนำโค้ดมาใส่ได้

อย่างไรก็ตาม ถ้าเจ้าของบทความใช้วิธีการใส่โค้ดแบบพลวัต ก็จะทำให้โค้ดการตบแต่ง หรือแท็ก style ไม่อยู่ภายใต้แท็ก div ดังที่กล่าวข้างต้น แต่ ณ จุดนี้ยังไม่พบปัญหาอะไรก็จะใช้วิธีแรกไปก่อน และจริงๆ แล้วถ้ามีปัญหาจริงๆ ก็ยังไม่พบทางแก้แต่อย่างใด

อีกหนึ่งปัญหาที่จะเกิดขึ้นก็คือ วิธีการข้างต้นจะไม่สามารถใช้งานกับบทความแบบเก่า ๆ ได้ เนื่องจากบทความเหล่านั้นมีโครงสร้างของรหัสต้นฉบับที่ต่างออกไป ซึ่งมันวุ่นวายมาก

หลังจากได้ที่เราได้แท็กที่มีโค้ดตบแต่งของเจ้าของบทความออกมาแล้วนั้น ขั้นต่อไปก็จะเป็นการปิดการใช้งาน CSS ในแท็กเหล่านั้น ซึ่งเราสามารถทำได้โดยกำหนดค่า true ให้กับ attribute ที่ชื่อว่า disabled ของแท็ก style แต่ละแท็กนั้น

เพียงเท่านี้โค้ตบแต่งของเจ้าของบทความก็จะไม่ถูกนำไปประมวลผลเพื่อแสงผล ก็จะทำให้โค้ดการตบแต่งของเว็บเด็กดีกลับมาทำงานปกติเช่นเดิม

เนื่องจากโค้ดนี้จำเป็นต้องถูกรันในเพจต่างๆ กัน ดังนั้นการใช้เทคนิค Bookmarklet ที่ได้เคยอธิบายไปแล้วนั้นก็จะทำให้สะดวกมากขึ้น

javascript:$("div.story style").get().forEach(function (e) {e.disabled = true});

หมายเหตุ เนื่องจากเป็นโค้ดแค่บรรทัดเดียว ก็จะไม่นำไปใส่ใน Codepen.io แล้วกันนะครับ