文章的方法参考自 Mashiro 大佬的博客，与大佬博客展示的效果几乎一模一样。=￣ω￣=
由于公开的 Sakura 主题与 Mashiro 主站存在一些差异，因此需要自己动手来实现，如此才能自给自足。

开工

1. 在 WordPress 后台设置

   进入 Sakura 主题设置，找到 CDN 选项并开启本地调用主题的 JS 和 CSS 文件。

2. 修改 style.css 文件

   主题根目录下找到 style.css 文件，并在文件底部添加以下 CSS 代码：

   /* 诗歌样式 */
   .poem-wrap {
       position: relative;
       width: 730px;
       max-width: 80%;
       border: 2px solid #797979;
       border-top: none;
       text-align: center;
       margin: 80px auto;
   }
   
   .poem-wrap h1 {
       position: relative;
       margin-top: -20px;
       display: inline-block;
       letter-spacing: 4px;
       color: #797979;
   }
   
   .poem-wrap p {
       width: 70%;
       margin: auto;
       line-height: 30px;
       color: #797979;
   }
   
   .poem-wrap p#poem {
       font-size: 25px;
   }
   
   .poem-wrap p#info {
       font-size: 15px;
       margin: 15px auto;
   }
   
   .poem-border {
       position: absolute;
       height: 2px;
       width: 27%;
       background-color: #797979;
   }
   
   .poem-right {
       right: 0;
   }
   
   .poem-left {
       left: 0;
   }
   
   @media (max-width: 685px) {
       .poem-border {
           width: 18%;
       }
   }
   
   @media (max-width: 500px) {
       .poem-wrap {
           margin-top: 60px;
           margin-bottom: 20px;
           border-top: 2px solid #797979;
       }
   
       .poem-wrap h1 {
           margin: 20px 6px;
       }
   
       .poem-border {
           display: none;
       }
   }

3. 修改 sakura-app.js 文件

   找到主题目录下的 js/sakura-app.js 文件，约在第 10 行，修改如下代码：

   mashiro_global.ini = new function() {
       this.normalize = function() { // 页面首次加载时的初始化函数
           lazyload();
           social_share();
           post_list_show_animation();
           copy_code_block();
           // 诗加载
           if ($("div").hasClass("poem-wrap")) {
               get_poem('#poem', '#info');
           }
           coverVideoIni();
           checkskinSecter();
           scrollBar();
       }
       this.pjax = function() { // PJAX 重载函数
           pjaxInit();
           social_share();
           post_list_show_animation();
           copy_code_block();
           // 诗重载
           if ($("div").hasClass("poem-wrap")) {
               get_poem('#poem', '#info');
           }
           coverVideoIni();
           checkskinSecter();
       }
   }

4. 添加获取诗歌的函数

   在 sakura-app.js 文件底部增加如下代码：

   /* 诗歌加载 */
   function get_poem(poem_ele, info_ele) {
       var poem = document.querySelector(poem_ele);
       var info = document.querySelector(info_ele);
       var xhr = new XMLHttpRequest();
       xhr.open('get', 'https://v2.jinrishici.com/one.json');
       xhr.withCredentials = true;
       xhr.onreadystatechange = function() {
           if (xhr.readyState === 4) {
               var data = JSON.parse(xhr.responseText);
               poem.innerHTML = data.data.content;
               info.innerHTML = '【' + data.data.origin.dynasty + '】' + data.data.origin.author + '《' + data.data.origin.title + '》';
           }
       };
       xhr.send();
   }

5. 在 WordPress 中新建页面模板

   创建一个新的页面模板，选择“默认模板”，并在内容中填入以下代码：

   <div class="poem-wrap">
       <div class="poem-border poem-left"></div>
       <div class="poem-border poem-right"></div>
       <h1>念两句诗</h1>
       <p id="poem">挑选中...</p>
       <p id="info"></p>
   </div>

预览

可以在这里查看效果：https://fairysen.com/leave/