前端開(kāi)發(fā)者應(yīng)該都知道張?chǎng)涡窭蠋熞约八?a target="_blank">鑫空間鑫生活博客扰肌，在業(yè)界實(shí)在是太有名了能曾，我在大學(xué)第一次發(fā)現(xiàn)這個(gè)博客的時(shí)候簡(jiǎn)直就像哥倫布發(fā)現(xiàn)了新大陸一樣瘫里，如獲至寶轩猩。參加工作后也經(jīng)常會(huì)去拜讀研究卷扮，可以說(shuō)我和很多人一樣都是看著他的博客“長(zhǎng)大”的。
張老師的博客有很多特點(diǎn)界轩，除了聚焦前端偏前領(lǐng)域画饥、博客的廣度深度、沉淀十年的優(yōu)質(zhì)博客數(shù)量……我認(rèn)為最具特色的就是基本每篇博客都有一個(gè)或多個(gè)被波浪線鏈接的“代碼效果”頁(yè)浊猾，這是一個(gè)可以向讀者展示程序示例的頁(yè)面抖甘，對(duì)于晦澀難懂的技術(shù)博客而言，提供程序示例頁(yè)面是至關(guān)重要的葫慎，它可以幫助用戶更生動(dòng)地理解文章所描述的知識(shí)點(diǎn)衔彻。
本文介紹如何在自己的博客網(wǎng)站實(shí)現(xiàn)程序示例效果，因?yàn)?a target="_blank">大海愛(ài)奔跑是一個(gè)wordpress博客偷办，所以沒(méi)有試過(guò)其他的博客系統(tǒng)艰额，但相信方法和思路都是通用的，希望本文能給大家?guī)?lái)幫助椒涯。
查看最終實(shí)現(xiàn)效果請(qǐng)狠狠地點(diǎn)擊：
- js防抖demo
- js節(jié)流demo
- 圖片與字體圖標(biāo)對(duì)比demo
- flex彈性盒子布局實(shí)現(xiàn)sticky footer
- retina屏1像素邊框與普通邊框?qū)Ρ萪emo
實(shí)現(xiàn)步驟
1. 頁(yè)面布局
先來(lái)看看代碼效果頁(yè)的DOM結(jié)構(gòu)柄沮，最上面是網(wǎng)站頭部，中間是主內(nèi)容區(qū)（示例標(biāo)題 + 左右布局的代碼框和效果框），最下面是網(wǎng)站尾部祖搓。熟悉wordpress框架的同學(xué)狱意，知道在博客主題源文件的page-templates目錄下包含了頁(yè)面模板文件，在wordpress后臺(tái)新建頁(yè)面的時(shí)候拯欧，你可以在右下角的頁(yè)面屬性/模板下拉框中找到它們详囤。于是，我們可以通過(guò)修改（或新建）一個(gè)模板文件來(lái)實(shí)現(xiàn)上面的DOM結(jié)構(gòu)和樣式镐作，如下圖藏姐，通過(guò)修改最后一個(gè)文件，把它變成我們需要的“代碼效果”頁(yè)：
2. 模板文件
我沒(méi)有新增第五個(gè)模板文件该贾，而是在一個(gè)使用率比較低的模板template-pagebuilder-full-width.php基礎(chǔ)上修改代碼羔杨，然后上傳至服務(wù)器替換原文件。于是靶庙，我們完成了代碼效果頁(yè)的布局和功能（一個(gè)空殼问畅，下一節(jié)介紹如何制造內(nèi)容）娃属，下面是該文件的內(nèi)容：
<?php
/**
* Template Name: 代碼效果頁(yè)
*
* 原模版名稱：Page Builder Full Width
* 包含網(wǎng)站頭部六荒、中部的標(biāo)題/代碼/效果、網(wǎng)站尾部三部分
* 標(biāo)題和左側(cè)的代碼：通過(guò)wordpress后臺(tái)/頁(yè)面/新建頁(yè)面創(chuàng)建（另起一段寫(xiě)"<p>@pagename.html</p>"矾端，以告知右側(cè)引入哪個(gè)文件）
* 右側(cè)的網(wǎng)頁(yè)：將左側(cè)代碼內(nèi)描述的"pagename.html"文件手動(dòng)上傳至服務(wù)器主題根目錄下的my-pages(需新建)目錄內(nèi)
*
* @package Hestia
* @since Hestia 1.1.24
* @author 大海（wy310.cn）
*/
// 根據(jù)自己的設(shè)計(jì)掏击，寫(xiě)好code-effect.css放入服務(wù)器主題根目錄下，然后引入該樣式文件
echo '<link rel="stylesheet" type="text/css" />';
// 獲取網(wǎng)站頭部（博客名稱+菜單那一欄）
get_header(); ?>
<!--自己定義的中部（標(biāo)題+代碼+效果）-->
<div class="code-effect-wrapper" id="code-effect">
<h1 class="title"><?php the_title(); ?></h1>
<div class="body">
<div class="code part">
<h3>代碼：</h3>
<div class="board" ref="post">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', 'pagebuilder' );
endwhile;
endif;
?>
</div>
</div>
<div class="effect part">
<h3>效果：</h3>
<div class="board">
<!--這里通過(guò)iframe引入外部文件秩铆，:src是vue.js的寫(xiě)法-->
<iframe class="iframe" :src="url"></iframe>
</div>
</div>
</div>
</div>
<!--獲取網(wǎng)站尾部（菜單+備案號(hào)那一欄）-->
<?php get_footer(); ?>
<!--因?yàn)榱?xí)慣vue編程砚亭，所以引入cdn上的vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--引入自己定義的code-effect.js，它的作用是生成vue實(shí)例掛在到#code-effect元素上殴玛，并且獲取左側(cè)代碼框內(nèi)容中的"pagename.html"捅膘，拼接成可訪問(wèn)的頁(yè)面鏈接，iframe引入該鏈接后就可以渲染該頁(yè)面了-->
<script src="https://wy310.cn/wp-content/themes/hestia/code-effect.js"></script>
- 代碼頂部注釋中的
Template Name對(duì)應(yīng)的值會(huì)在wordpress后臺(tái)新建頁(yè)面時(shí)右下角頁(yè)面模板的下拉框中展示（見(jiàn)第3小節(jié)截圖中的第4點(diǎn)） -
code-effect.css文件內(nèi)容：傳送門 -
code-effect.js文件內(nèi)容：傳送門
3. 標(biāo)題和代碼框
我們寫(xiě)博客的時(shí)候滚粟，可能需要為一個(gè)或多個(gè)知識(shí)點(diǎn)提供示例頁(yè)面寻仗，對(duì)于這種頻繁發(fā)布的頁(yè)面我們需要想一個(gè)一勞永逸的方法：代碼框里的代碼（或文字）最好是可以通過(guò)wordpress后臺(tái)編輯發(fā)布的，這樣修改起來(lái)就很方便凡壤，于是我想到完全可以用頁(yè)面或者文章的形式去承載笆鹩取（如果用文章的形式，那么這篇文章將來(lái)會(huì)出現(xiàn)在博客目錄里亚侠，僅僅只有代碼的文章也沒(méi)多大閱讀意義曹体，而且數(shù)量一多，躺在博客列表里的這些代碼文章們總會(huì)顯得不倫不類硝烂，還會(huì)影響用戶的查閱箕别，所以還是用頁(yè)面去承載最好，除非用戶直接訪問(wèn)指定頁(yè)面的地址，要不然一般情況下是看不到這個(gè)頁(yè)面的串稀，非常完美）啥酱，這樣一來(lái)，新建頁(yè)面時(shí)填入的標(biāo)題也正好給“代碼效果”頁(yè)的標(biāo)題使用了厨诸，一舉兩得镶殷！看了下面的圖還不懂你來(lái)打我：
4. 效果框
其實(shí)第2小節(jié)的代碼已經(jīng)說(shuō)明了如何將文件載入效果框，這里總結(jié)一下：
- 首先需要先寫(xiě)好這個(gè)可運(yùn)行的網(wǎng)頁(yè)文件微酬，比如debounce.html绘趋，傳入服務(wù)器項(xiàng)目主題根目錄下的
my-pages（事先新建的文件夾，用于存放所有示例的網(wǎng)頁(yè)文件）颗管，確保鏈接https://wy310.cn/wp-content/themes/hestia/my-pages/debounce.html可以訪問(wèn)成功陷遮； - 再在wordpress后臺(tái)新建頁(yè)面，頁(yè)面內(nèi)容可以粘貼debounce.html的代碼（即左側(cè)代碼框的內(nèi)容）垦江，寫(xiě)完代碼后一定要另起一段寫(xiě)
@debounce.html這個(gè)內(nèi)容（另起一段其實(shí)是新增了<p></p>標(biāo)簽）帽馋，code-effect.js會(huì)讀取頁(yè)面的文字，檢索到@符號(hào)后面的網(wǎng)頁(yè)文件名debounce.html之后比吭，拼接成可訪問(wèn)的鏈接url绽族； - 模板文件中的
<iframe class="iframe" :src="url"></iframe>就會(huì)引入剛剛得到的url，渲染debounce.html頁(yè)面衩藤。
到此吧慢，成功實(shí)現(xiàn)程序示例效果！
