實現張鑫旭博客的程序示例效果

前端開發者應該都知道張鑫旭老師以及他的鑫空間鑫生活博客，在業界實在是太有名了，我在大學第一次發現這個博客的時候簡直就像哥倫布發現了新大陸同樣，如獲至寶。參加工做後也常常會去拜讀研究，能夠說我和不少人同樣都是看着他的博客「長大」的。

張老師的博客有不少特色，除了聚焦前端偏前領域、博客的廣度深度、沉澱十年的優質博客數量……我認爲最具特點的就是基本每篇博客都有一個或多個被波浪線連接的「代碼效果」頁，這是一個能夠向讀者展現程序示例的頁面，對於晦澀難懂的技術博客而言，提供程序示例頁面是相當重要的，它能夠幫助用戶更生動地理解文章所描述的知識點。

本文介紹如何在本身的博客網站實現程序示例效果，由於大海愛奔跑是一個wordpress博客，因此沒有試過其餘的博客系統，但相信方法和思路都是通用的，但願本文能給你們帶來幫助。

查看最終實現效果請狠狠地點擊：

• js防抖demo
• js節流demo
• 圖片與字體圖標對比demo
• flex彈性盒子佈局實現sticky footer
• retina屏1像素邊框與普通邊框對比demo

實現步驟

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/t...；
• 再在wordpress後臺新建頁面，頁面內容能夠粘貼debounce.html的代碼（即左側代碼框的內容），寫完代碼後必定要另起一段寫@debounce.html這個內容（另起一段實際上是新增了<p></p>標籤），code-effect.js會讀取頁面的文字，檢索到@符號後面的網頁文件名debounce.html以後，拼接成可訪問的連接url；
• 模板文件中的<iframe class="iframe" :src="url"></iframe>就會引入剛剛獲得的url，渲染debounce.html頁面。

到此，成功實現程序示例效果！