Skip to content

毛俊的博客

GithubStackoverflowRSS

博客迁移到Typecho

— typecho — 1 min read

博客平台历经HEXO,HUGO,Wordpress``,GitHub Issues，使用这些作为博客平台有过不同的体验。但最终我都每有坚持使用下去。目前除了`HEXO`博客托管在`GitLab网站，以及GitHub Issues做为省事的博客平台外。其他博客平台都已经被我下线，结束了他们早期作为我提供博客平台的使命。

当然，以上的博客平台都属于开源项目，还有一些商业的博客平台我目前也注销和放弃了。这里不在一一举例。

直到今天迁移到Typecho，迁移的时候有过犹豫。会不会是下一个被我放弃的平台。以后的事我不好打保票，当时在我在这写下这篇迁移博文时，我是打算长期使用下去的。之前那些博客平台放弃的原因无乎不是折腾完了，没有了之前安装时的兴致，伴随着时间也就慢慢冷淡了。没想到当初抱着以写博客为开始，到最终以折腾捣鼓为结束。好似忘记了搭建博客的初心了。

迁移到Typecho后，打开默认的首页后，惊乎有个似曾相识的感觉。没错，这和我使用较长时间WordPress有那么的相似。相似的是界面和风格，但是不相似的是Typecho的思想。为什么这么说，体验下来Typecho是轻量及支持MarkDown语法，可以开箱即用。WordPress虽也可以开箱即用，但是作为一个拥有多功能的后台而言，免不了要进行一版配置和优化。而Typecho就不用了，毕竟本身就没过多的配置。

当然，为了达到我想要的效果。我还是对Typecho进行了一般研究和配置。修改了默认主题以下内容：

  • 页面宽度
  • 代码高亮
  • 导航链接
  • 图片阴影
  • 设置favicon
  • 链接重定向去掉index.php

其他一些配置是在网站后台管理界面修改。

由于安装是基于经典的LAMP平台，所以没有过多要说明的。后期考虑迁移到Docker,有机会再做介绍。

安装后默认网站是没有配置favicon.ico的，所以这个需要自己配置。进入对应的项目目录:

1$ cd <WebHome>/usr/themes/default

然后编辑header.php,指定favicon.ico文件位置:

1<!-- favicon ico -->
2<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

注意:/favicon.ico对应的是网站根目录

修改后即可刷新页面查看到网站已经可以显示自定义的favicon.ico图标了。

链接重定向去掉index.php

进入网站后台配置管理页面，选择设置->永久链接->启用地址重写功能,如下图所示： photo_2020-02-20_22-07-10.jpg 如果有警告信息，点击保存即可。然后需要配置重定向：这里以Apache服务器为示例。 进入网站的服务器根目录，编写.htaccess配置文件，写入以下内容：

1Options +FollowSymLinks
2RewriteEngine on
3RewriteBase /
4RewriteCond %{REQUEST_FILENAME} !-f
5RewriteCond %{REQUEST_FILENAME} !-d
6RewriteRule ^(.*)$ /index.php/$1 [L]

保存然后去网站首页刷新页面，点击文章链接查看效果。

修改页面宽度

主题默认提供的是二栏分布，我偏爱更宽的内容区域，这样阅读起来比较舒服。所以去网站后台管理界面，控制台->设置外观->关闭侧边栏显示。如下图所示： 2020-02-20_22-18.png

接着配置php页面,进入默认主题Default目录，编辑以下文件：

  • archive.php
  • index.php
  • page.php
  • post.php

找到<div class="col-mb-12 col-8" id="main" role="main">所在的行，将col-8修改为col-12。即占满12个单元。 去页面刷新查看效果，发现宽度边宽了。但是两边有较大留白空隙，去页面查看元素，发现是有container属性控制的。在Default**目录下编写`diy.css文件，加入以下内容：

1@media (min-width: 1200px) {
2    .container{
3        max-width: 1400px;
4    }
5}

即将container的最大宽度设置为1400px.保存后编辑header.php，添加自定义的CSS文件：

1<!-- diy css -->
2 <link rel="stylesheet" href="<?php $this->options->themeUrl('diy.css'); ?>">

保存后刷新页面查看效果。

增加图片阴影

Typecho上传图片后默认是没有效果的，显得非常的平。于是想到给增加些阴影更有立体感，图片的阴影样式是引用自王垠博客的图片样式。编辑原先定义的diy.css样式，追加以下内容：

1img {
2    display: block;
3    box-shadow: 0 0 10px #555;
4    border-radius: 6px;
5    margin-left: auto;
6    margin-right: auto;
7    margin-top: 10px;
8    margin-bottom: 10px;
9    -webkit-box-shadow: 0 0 10px #555;
10}

在配置页面宽度时，已经引用过该css文件，所以直接去页面刷新查看效果即可。

代码高亮

Typecho默认是不支持代码高亮的，为了显示和阅读上更加美观。我们可以通过插件或脚本让Typecho支持代码高亮。这里采用导入JS和CSS的方案让代码高亮，使用的是prismjs。去官网下载选择配置代码高亮主题及支持的代码类型，同时可以勾选插件让支持更多的功能。

配置好用，下载对应的JS和CSS文件上传到主题的目录，配置header.php文件，引入prismjs的依赖：

1<link rel="stylesheet" href="<?php $this->options->themeUrl('prism.css'); ?>">
2 <script src="<?php $this->options->themeUrl('prism.js');?>"></script>

保存后，刷新网站的页面查看效果。

增加导航链接

Typeche新增的自定义页面只支持站内链接。如果需要点击导航跳转到外部链接就不能通过新建独立页面的方式。同样的，我们可以在header.php中配置想要的外部链接。找到<nav id="nav-menu" class="clearfix" role="navigation">这行，在对应的</nav>标签前增加自定义链接：

1<a href="//blog.maojun.xyz">博客</a>
2<a href="//maojun.xyz/feed/">RSS</a>

保存后，去页面刷新查看效果。

到此为止，配置后的Typecho已经能满足我的要求了。

（完）

© 2020 by 毛俊的博客. All rights reserved.
Theme by LekoArts