Skip to content

毛俊的博客

博客迁移到Typecho

typecho1 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支持代码高亮。这里采用导入JSCSS的方案让代码高亮,使用的是prismjs。去官网下载选择配置代码高亮主题及支持的代码类型,同时可以勾选插件让支持更多的功能。

配置好用,下载对应的JSCSS文件上传到主题的目录,配置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