前端開發者應該都知道張鑫旭老師以及他的鑫空間鑫生活博客，在業界實在是太有名了，我在大學第一次發現這個博客的時候簡直就像哥倫布發現了新大陸一樣，如獲至寶。參加工作後也經常會去拜讀研究，可以說我和很多人一樣都是看着他的博客“長大”的。
張老師的博客有很多特點，除了聚焦前端偏前領域、博客的廣度深度、沉澱十年的優質博客數量……我認爲最具特色的就是基本每篇博客都有一個或多個被波浪線鏈接的“代碼效果”頁，這是一個可以向讀者展示程序示例的頁面，對於晦澀難懂的技術博客而言，提供程序示例頁面是至關重要的，它可以幫助用戶更生動地理解文章所描述的知識點。
本文介紹如何在自己的博客網站實現程序示例效果，因爲大海愛奔跑是一個wordpress博客，所以沒有試過其他的博客系統，但相信方法和思路都是通用的，希望本文能給大家帶來幫助。
查看最終實現效果請狠狠地點擊：
實現步驟
1. 頁面佈局
先來看看代碼效果頁的DOM結構，最上面是網站頭部，中間是主內容區（示例標題 + 左右佈局的代碼框和效果框），最下面是網站尾部。熟悉wordpress框架的同學，知道在博客主題源文件的page-templates目錄下包含了頁面模板文件，在wordpress後臺新建頁面的時候，你可以在右下角的頁面屬性/模板下拉框中找到它們。於是，我們可以通過修改（或新建）一個模板文件來實現上面的DOM結構和樣式，如下圖，通過修改最後一個文件，把它變成我們需要的“代碼效果”頁：
2. 模板文件
我沒有新增第五個模板文件，而是在一個使用率比較低的模板template-pagebuilder-full-width.php基礎上修改代碼，然後上傳至服務器替換原文件。於是，我們完成了代碼效果頁的佈局和功能（一個空殼，下一節介紹如何製造內容），下面是該文件的內容：
<?php
/**
* Template Name: 代碼效果頁
*
* 原模版名稱：Page Builder Full Width
* 包含網站頭部、中部的標題/代碼/效果、網站尾部三部分
* 標題和左側的代碼：通過wordpress後臺/頁面/新建頁面創建（另起一段寫"<p>@pagename.html</p>"，以告知右側引入哪個文件）
* 右側的網頁：將左側代碼內描述的"pagename.html"文件手動上傳至服務器主題根目錄下的my-pages(需新建)目錄內
*
* @package Hestia
* @since Hestia 1.1.24
* @author 大海（wy310.cn）
*/
// 根據自己的設計，寫好code-effect.css放入服務器主題根目錄下，然後引入該樣式文件
echo '<link rel="stylesheet" type="text/css" href="https://wy310.cn/wp-content/themes/hestia/code-effect.css" />';
// 獲取網站頭部（博客名稱+菜單那一欄）
get_header(); ?>
<!--自己定義的中部（標題+代碼+效果）-->
<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">
<!--這裏通過iframe引入外部文件，:src是vue.js的寫法-->
<iframe class="iframe" :src="url"></iframe>
</div>
</div>
</div>
</div>
<!--獲取網站尾部（菜單+備案號那一欄）-->
<?php get_footer(); ?>
<!--因爲習慣vue編程，所以引入cdn上的vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--引入自己定義的code-effect.js，它的作用是生成vue實例掛在到#code-effect元素上，並且獲取左側代碼框內容中的"pagename.html"，拼接成可訪問的頁面鏈接，iframe引入該鏈接後就可以渲染該頁面了-->
<script src="https://wy310.cn/wp-content/themes/hestia/code-effect.js"></script>
- 代碼頂部註釋中的
Template Name對應的值會在wordpress後臺新建頁面時右下角頁面模板的下拉框中展示（見第3小節截圖中的第4點） -
code-effect.css文件內容：傳送門 -
code-effect.js文件內容：傳送門
3. 標題和代碼框
我們寫博客的時候，可能需要爲一個或多個知識點提供示例頁面，對於這種頻繁發佈的頁面我們需要想一個一勞永逸的方法：代碼框裏的代碼（或文字）最好是可以通過wordpress後臺編輯發佈的，這樣修改起來就很方便，於是我想到完全可以用頁面或者文章的形式去承載啊（如果用文章的形式，那麼這篇文章將來會出現在博客目錄裏，僅僅只有代碼的文章也沒多大閱讀意義，而且數量一多，躺在博客列表裏的這些代碼文章們總會顯得不倫不類，還會影響用戶的查閱，所以還是用頁面去承載最好，除非用戶直接訪問指定頁面的地址，要不然一般情況下是看不到這個頁面的，非常完美），這樣一來，新建頁面時填入的標題也正好給“代碼效果”頁的標題使用了，一舉兩得！看了下面的圖還不懂你來打我：
4. 效果框
其實第2小節的代碼已經說明了如何將文件載入效果框，這裏總結一下：
- 首先需要先寫好這個可運行的網頁文件，比如debounce.html，傳入服務器項目主題根目錄下的
my-pages（事先新建的文件夾，用於存放所有示例的網頁文件），確保鏈接https://wy310.cn/wp-content/themes/hestia/my-pages/debounce.html可以訪問成功； - 再在wordpress後臺新建頁面，頁面內容可以粘貼debounce.html的代碼（即左側代碼框的內容），寫完代碼後一定要另起一段寫
@debounce.html這個內容（另起一段其實是新增了<p></p>標籤），code-effect.js會讀取頁面的文字，檢索到@符號後面的網頁文件名debounce.html之後，拼接成可訪問的鏈接url； - 模板文件中的
<iframe class="iframe" :src="url"></iframe>就會引入剛剛得到的url，渲染debounce.html頁面。
到此，成功實現程序示例效果！