是 Typora Markdown 編輯器的類似 Vue 文檔風格的自定義主題。

簡介

Typora是一款支持實時預覽的 Markdown 編輯器和閱讀器，支持Windows、macOS、Linux三大平臺。Typora 作為一款合格的 Markdown 編輯器，支持圖片、列表、表格、代碼、公式、目錄等功能，同時這款軟件還支持（一鍵）動態預覽功能，讓一切都變得如此干凈、純粹。并且有多種主題模板。typora-vue-theme就是參考了Vue文檔風格而開發的一個 Typora 自定義主題。

安裝主題

0. 下載本主題中的vue.css、vue-dark.css文件和包含字體的vue文件夾；
1. 打開 Typora，點擊“偏好設置”=> “打開主題文件夾”按鈕，將彈出 Typora 的主題文件夾；
2. 將下載好的vue.css和vue-dark.css文件和包含字體的vue文件夾放到 Typora 的主題文件夾中；
3. 關閉并重新打開 Typora，從菜單欄中選擇 “主題”=> “Vue” 或者 “Vue Dark” 即可。

效果圖

Vue 白天模式

Vue 夜晚模式

感謝: 本主題中的vue-dark.css來自typora-vue-dark-theme.

鏈接見下。該模版非常漂亮！必須贊一個

wordpress主題的動態模板中，搜索頁模板并不是必須的。但是，為了對用戶更加的友好，可以讓用戶在wordpress網站上能夠通過搜索來查找自己的想要的文章內容，我們還是有必要給trans主題添加一個搜索頁模板。一般情況下，wordpress主題動態模板的搜索頁的整體布局和文章列表頁模板是差不多的，所以，我們可以參照文章列表頁來做。

第一步：創建一個search.php文件。

在wordpress主題trans目錄下創建一個search.php文件，這是wordpress程序要求的默認搜索頁模板的文件，名字必須是search。然后，把trans靜態模板search.html文件中的代碼全部復制到search.php文件中。

第二步：修改頭部的代碼。

在search.php文件中，刪除從< !doctype>到< /header>標簽之間的所有代碼。然后，在同樣的位置，通過wordpress函數來引入公共的頭部模板文件：

< ?php get_header(); //引入頭部模板 ?>

修改頭部模板header.php文件中的搜索表單的代碼，代碼如下：

< form action="< ?php bloginfo("siteurl"); ?>" method="get">

< input type="search" name="s" placeholder="搜索...">

< input type="submit" value="搜索">

</form>

注：第一個input輸入框的name值必須是 s （如上圖），這也是wordpress的硬性要求。否則，就搜索不到任何內容。

第三步：修改search.php的側邊欄代碼。

在search.php文件中，刪除< div class="c_right">標簽所包含的所有側邊欄代碼，然后，在這個位置上，引入sidebar.php側邊欄公共模板：

< ?php get_sidebar(); //引入側邊欄模板 ?>

第四步：修改搜索頁模板的底部代碼。

在搜索頁模板中，刪除從< footer>標簽到模板代碼結束的所有底部代碼，然后，在當前的位置上，添加如下代碼引入底部公共模板：

< ?php get_footer(); //引入底部模板 ?>

第五步：修改search.php的左側主體部分的面包屑導航。

因為是搜索頁面模板，所以，這個面包屑導航，我們要體現出搜索結果。所以，我們刪除search.php模板中< div class="left_top">標簽內部的所有代碼，替換成如下的代碼：

< ul>< li>< span class="dashicons-before dashicons-admin-generic"></span>搜索</li>< li>< a href="<?php bloginfo("siteurl"); ?>">< span class="dashicons-before dashicons-admin-home"></span>首頁</a> > 搜索結果</li></ul>< ul> 關鍵詞“< ?php the_search_query(); ?>”共有 < ?php global $wp_query; echo $wp_query->found_posts; ?> 個搜索結果</ul>

上面代碼解說：

the_search_query()：輸出要搜索的關鍵詞；$wp_query：是wordpress提供的一個全局變量，它包含當前頁面的所有查詢數據；$wp_query->found_posts：搜索當前關鍵詞的數量

搜索頁面包屑導航效果如下圖：

第六步：修改搜索頁模板左側的文章列表。

刪除search.php搜索頁模板中< div class="left_bottom">標簽內部的所有代碼，然后，替換成如下代碼：

< ?php if ( have_posts() ): while ( have_posts() ) : the_post();?>< div class="list">< ul class="list_h">< a href="< ?php the_permalink(); ?>">< ?php the_title(); ?></a></ul>< ul class="list_con">< ul class="list_con_left">< a href="< ?php the_permalink(); ?>"> < ?php if(has_post_thumbnail()) { //如果有特色圖片，就調用特色圖片the_post_thumbnail( 'thumbnail' ,array( 'alt'=> trim(strip_tags( $post->post_title )), 'title'=> trim(strip_tags( $post->post_title )))); }else { //否則調用文章第一張圖片echo '<img src="'.catch_first_image().'" alt="'.$post->post_title.'" width="150" height="150" />';}?></a></ul>< ul class="list_con_right">< li>< ?php echo mb_substr(strip_tags($post->post_content),0,120,'utf-8'); ?> ... </li>< li>< span class="dashicons-before dashicons-admin-users">< ?php the_author(); ?> </span>< span class="dashicons-before dashicons-calendar-alt">< ?php the_time("Y年m月d日"); ?> </span>< span class="dashicons-before dashicons-visibility">< ?php echo get_post_meta($post->ID, 'views', true); ?> </span></li></ul></ul></div>

< ?php endwhile;endif;?>

這段代碼，我們在archive.php文章列表頁模板中我們已經介紹過了，就不多說了。

第七步：添加分頁代碼。

在trans靜態模板的代碼中，我們沒有分布代碼，這里，我們添加上搜索結果的分頁效果代碼：

< div class="left_page">< ?phpthe_posts_pagination( array('mid_size'=> 3, //當前頁碼數的 兩邊 顯示幾個頁碼。'prev_text'=>'<', //上一頁'next_text'=>'>', //下一南) );?></div>

這里，我們使用到了wordpress提供的分頁函數the_posts_pagination()來實現搜索頁的文章列表的分頁效果。這個函數我們在修改首頁模板時，我們就介紹過了，如果想了解它，可以回到我們創建首頁模板index.php的文章去看看。

?好了，通過以上幾步，我們就完成了wordpress主題動態模板trans的搜索頁面模板的創建和修改。此時，我們在頭部搜索框中輸入關鍵詞進行搜索后，搜索結果如上圖所示。從這幾節課，我們可以看出，有了公共模板后，我們創建其它動態模板時，就方便多了，只要按照本節的幾個步驟，就可以很輕松地創建出wordpress主題的動態模板文件。如果喜歡我的文章，別忘了幫我“點贊、評論和關注我”哦。

習 CSS 最好的方法就是去使用它，不像 XHTML 和 PHP 需要接觸模板的核心文件，同樣不要需要理解任何基本概念，只要去用它，通過使用和修正錯誤是可以讓你快速學會。

我們現在已經在 style.css 文件有些內容，讓我們先來看看這部分內容是干什么的？

• 第一行顯而易見就是主題的名字。
• 第二行是這個主題的地址，如果你的主題只是私用的而不準備發布的話，那就不用管它了。
• 第三行是主題的描述。
• 第四行是版本號，這是非常重要的，特別是當你公開發布你主題新版本的時候。
• 第五和第六行分別是主題作者的名字和主頁。

在主題信息兩邊的 /* 和 */ 符號是為了讓主題的信息不影響該文件的其他內容，這是 CSS 的注釋。當輸入 CSS 代碼去樣式化你的網頁的時候，你可能想在這里增加些注釋使得能夠在以后更清楚知道這部分是干什么的。顯然我們并不想你的注釋影響實際的代碼，所以可以使用 /* 和 */ 這一對符號使得注釋不被解釋。

下面是處理后的主題信息

第1步：打開 style.css 文件

• 打開 Xampp，主題文件夾，FireFox，IE 瀏覽器和 style.css 文件。
• 在兩個瀏覽器的地址欄都輸入：http://localhost/wordpress

從這里開始，我們需要同時在 FireFox 和 IE 上測試主題，不同的瀏覽器對應 CSS 的代碼解釋是不同的。如果能夠在盡可能多的瀏覽器器上和盡可能多的操作系統上測試你的主題是最好的（Safari，Opera，Linux，Netscape 等等）。如果你和我一樣懶，那就只在 FireFox 和 IE 上來測試你的主題吧。

第2步：添加 CSS 代碼

在 style.css 文件中輸入以下代碼：

body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background: #ffffff;
color: #000000;
}

像 XHTML 和 PHP 一樣，通過制表符增加縮進來的組織代碼：

保存 style.css 文件并刷新 兩個瀏覽器 Firefox 和 Internet Explorer 查看變化。

把 body{ } 看作一個標簽，然后把它里面所有的東西看作屬性和值，和處理 XHTML 時一樣。{ 是開始符，} 是結束符。在 { 和 } 之間，冒號意思是開始而分號意思是結束。（我在涉及到 XHTML，PHP，CSS的時候都使用標簽，屬性和值這些術語是為了保持簡單，實際上 PHP 和 CSS 有不同術語。如參數（parameters），選擇器（selector）和屬性（property）。）

在我們繼續走之前，我需要解釋下為什么使用 body{ } （CSS 選擇器），是因為你是在樣式化網頁的絕大基本部分（或者說是總體部分），<body> 標簽。你不會樣式 <head> 因為這個標簽沒有東西需要樣式化。你網頁上展示的絕大部分的東西是在<body> 和 </body> 標簽之間。

然后，在后面你會樣式化 ID 為 header 的 DIV 標簽。

進一步的解釋：

margin: 0; 處理 body 標簽的默認的頁邊空白，如果你要頁邊空白或者更大的頁面空白，把 0 改成 10px，20px 或者其他。PX 意思是像素。每個像素是你電腦屏幕的一個點。當你的頁面空白是 0 的話，就不需要在后面跟上 px。

在下面的圖片中，紅色高亮的區域就是應用于 body 標簽的默認的頁邊空白。

當給其樣式化為 margin: 0;，下面是沒有頁面空白的相同頁面：

font-family: Arial, Helvetica, Georgia, Sans-serif; 為你的網頁或者網站選擇使用哪種字體。這些字體中的第一個，Arial 是可替換的，如果你的用戶沒有在他們的電腦上安裝 Arial 這種字體，style.css 文件就會尋找 Helvetica，然后是 Georgia，再接著是 Sans-serif。你可以在字體文件夾（我的電腦 > 系統盤 > Windows下面）找到你的字體列表。

font-size: 12px; 顯而易見的是字體大小。可以把它改大或改小以查看變化。

text-align: left; 讓你的文本向左對齊。把它改成 text-align: right; 去查看不同之處。

vertical-align: top; 使得所有的東西從上面開始。如果是中部或底部排行你的 body 標簽，所有東西將會向下推。

background: #ffffff; 意思是白色背景。#ffffff 是白色十六進制代碼。#000000 是黑色十六進制代碼。

color: #000000; 意思是文本顏色是黑色。

如果你想向前更進一步或者自己學習 CSS，最好的地方是 w3schools.com