Typecho 建站那点事情

1、理论上说，typecho的代码比wordpress要精简，当然功能也要少许多，体验下来，就个人感觉来说，typecho的速度比wordpress并不突出多少。但是很安静是真的。

2、安装typecho：

先用BT搭建一个网站，建一个空白的mysql数据库；
到typecho网站下载安装包，上传到新建网站的根目录解压就可。
浏览器打开新网站，自动进入typecho的安装流程，其中一个需要填写数据库的地方就按照第一步中提到的空白数据库填写。
建站完成

3、数据迁移

如果是typecho迁移到typecho，就可以直接利用数据库导入即可。其中option表中有一个涉及到网站地址的，需要手动修改一下。
如果是从wordpress迁移到typecho，可以直接安装官方提供的迁移包，经测试迁移效果基本完美，有一个居中的class="has-text-align-center"的需要手动添加到主题的css里面去（可能官方的主题自带了这个class，第三方主题一般都不会带。
其他的站点迁移，一般也基本上就是用excel通过cvs来导入，就是费点时间。

唯一用的是BackToTop，原作者可能是一个二次元的，返回用美少女图像，可以自己修改。
WordPress to Typecho，这个是wordpress迁移的插件，属于即抛型。
插件的地址为：/usr/plugins目录下面。

5、模板一些修改备忘
5.1、顶部导航栏菜单显示分类，将原来header.php这面这段代码：

<a class="<?php if($this->is('index')): ?>current<?php endif; ?> <?php if($this->is('post')): ?>current<?php endif; ?>" href="<?php $this->options->siteUrl(); ?>"><?php _e('博客'); ?></a>

<?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>

<?php while($pages->next()): ?>

<a<?php if($this->is('page', $pages->slug)): ?> class="current"<?php endif; ?> href="<?php $pages->permalink(); ?>" title="<?php $pages->title(); ?>"><?php $pages->title(); ?></a>

<?php endwhile; ?>

修改为下面的代码：

<a<?php if($this->is('index')): ?> class="current"<?php endif; ?> href="<?php $this->options->siteUrl(); ?>"><?php _e('首页'); ?></a>

<?php $this->widget('Widget_Metas_Category_List')->to($category); ?>

<?php while($category->next()): ?>

<a<?php if($this->is('category', $category->slug)): ?> class="current"<?php endif; ?> href="<?php $category->permalink(); ?>" title="<?php $category->name(); ?>"><?php $category->name(); ?></a>

<?php endwhile; ?>

不过这个导航菜单会列出所有的分类，这点就远不如wordpress对分类可以隐藏的设定。也可以在这段手动添加自定义导航，不过这样会失去class=current这个功能，当然个人觉得php应该是能实现的，不过我目前还不会。
另外第三方插件NavMenu也是实现这个功能的，不过没试验过。

补充：根据上面代码是可以实现隐藏指定分类的，代码如下：

<a <?php if($this->is('index')): ?> class="current"<?php endif; ?> href="<?php $this->options->siteUrl(); ?>"><?php _e('首页'); ?></a>

    <?php $this->widget('Widget_Metas_Category_List')->to($category); ?>

    <?php while($category->next()): ?>

    <!--下面这行就是关键，增加一个判断，
    判断当前的slug名称是否不是指定的closed或者software，
    这两个名称对应要隐藏的分类缩略名，如果不是就显示，如果是就不显示。
    从而达到隐藏的目的。
    来源：https://www.typeecho.cn/post/21.html
    -->

    <?php if ($category->slug!=='closed' and $category->slug!=='software'): ?>   
                     
    <a<?php if($this->is('category', $category->slug)): ?> class="current"<?php endif; ?> href="<?php $category->permalink(); ?>" title="<?php $category->name(); ?>"><?php $category->name(); ?></a>

    <?php endif; ?>    <!--这行endif别忘记了-->

    <?php endwhile; ?>

5.2、代码页面的对应文件

header.php 头部文件
index.php 主页主题，包括首页显示文章元素
sidebar.php 侧栏内容，包括搜索分类等等
archive.php 类别显示，包括分类显示，标签显示，搜索显示等等。
post.php 单文章显示
page.php 单页面文件（没修改过）
footer.php 页脚文件，包括版权备案信息等。
comments.php 评论文件 (也很少修改这个)

6、关于代码高亮
如果从wordpress迁移过来,代码高亮默认截面太素,可以利用prism或者highlight这两种来实现。其中highlight似乎适应性更好，我直接用prism还需要人工继续调整帖子，那么太费事。而highlight则更智能化。可以去highlight.js官网，下载一个js文件（挑选好自己需要的语言），一个css文件（css文件时该代码呈现的样式），官网下载的时候下载一个压缩包，只需要提取它里面的两个文件：highlight.min.js和solarized-dark.min.css（举例），将这两个文件上传到服务器根目录，然后在主题的header.php中添加下面的代码：

/*注意修改自己对应的路径和文件名*/
    <link href="/solarized-dark.min.css" rel="stylesheet" type="text/css">
    <script src="/highlight.min.js"></script>
    <script>
      hljs.highlightAll();
    </script>

就可以实现代码自动高亮了。

7、终于实现了响应式导航菜单，首先是参考如何创建响应式菜单，基本是参考它的源码，结合上面自动生成的分类，主要记录几点：

缩小宽度的时候，出现汉堡包按钮，点击弹出菜单后，则菜单会将页面下移，有点不好看。可以在响应事件的css中将菜单postion设为absloute就可以（包括1级和2级）
根据参考的菜单，汉堡图标点开后，会与菜单的条目竖直方向重叠，点击有点困难，可以考虑在第二个a之前插入一个空白的a段，在正常水平宽度菜单的时候不显示，在宽度小的时候指定其高度。这样就可以将弹出菜单的条目整体下移，操作就比较方便了。
菜单采用flex布局，正常为水平布局，在宽度缩小的时候改为垂直布局，更改其轴方向。更多参考：flex 布局的基本概念

这样以来，typecho这个模版就基本实现了自己想要的状态，比较满意了。

最新文章

标签