是 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