Typecho Theme Handsome Modify: Better Leftbar Layout

Feeling that handsome’s built-in left sidebar display method is not suitable, so I modified it by referring to the tutorial Optimizing Sidebar Display: Achieving More Beautiful Classification Display by UCW.


Modify steps

Suggest import Font Awesome library before start, you can add codes below to Theme settings -> developer settings -> custom output HTML <head> code .

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">

First, open libs/Content.php and insert codes at the location shown by the blue line:

* @param $categories
* @return string
public static function returnAsideCategories($categories){
$html = "";
$options = mget();
$icons = array(
'default' => 'glyphicon glyphicon-tasks',
'github' => 'fa fa-github'
* 格式: '分类缩略名' => '图标名称',
while($categories->next()) {
if ($categories->levels === 0) {
$children = $categories->getAllChildren($categories->mid);
if (!empty($children)) {
$html .= '<li><a class="auto"><span class="pull-right text-muted"><i class="fontello icon-fw fontello-angle-right text"></i><i class="fontello icon-fw fontello-angle-down text-active"></i></span><span class="nav-icon"><i class="' . $icons[$categories->slug] . '"></i></span><span>' . $categories->name . '</span></a>';
$childCategoryHtml = '<ul class="nav nav-sub dk"><li class="nav-sub-header"><a><span>' . $categories->name . '</span></a></li>';
foreach($children as $mid){
$child = $categories->getCategory($mid);
$childCategoryHtml .= '<li><a href="' . $child['permalink'] . '"><b class="badge pull-right">' . $child['count'] . '</b><i class="' . $icons[$child['slug']] . '"></i><span>' . $child['name'] . '</span></a></li>';
$childCategoryHtml .= '</ul>';
$html .= $childCategoryHtml;
$html .= "</li>";
} else {
$html .= '<li><a href="' . $categories->permalink . '" class="auto"><b class="badge pull-right">' . $categories->count . '</b><span class="nav-icon"><i class="'.$icons[$categories->slug].'"></i></span><span>' . $categories->name . '</span></a></li>';
return $html;

Open component/aside.php and delete these codes (at about line 131~160).

$class = "";
if (in_array("openCategory",$this->options->featuresetup)){
$class = "class=\\"active\\"";
<li <?php echo $class; ?>>
<a class="auto">
<span class="pull-right text-muted">
<i class="fontello icon-fw fontello-angle-right text"></i>
<i class="fontello icon-fw fontello-angle-down text-active"></i>
<!-- <i class="glyphicon glyphicon-th"></i>-->
<span class="nav-icon"><i data-feather="grid"></i></span>
<span><?php _me("分类") ?></span>
<ul class="nav nav-sub dk">
<li class="nav-sub-header">
<span><?php _me("分类") ?></span>
echo Content::returnCategories($categorys) ?>

Then open component/aside.php and insert codes at the location shown by the blue line (at about line 127):

<li class="line dk"></li>

<li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
<span><?php _me("分类") ?></span>
echo Content::returnAsideCategories($categorys);

Save files and reload any page on your blog, and you’ll see new leftbar layout.

Set Up Icons

Method: Insert 'name' => 'icon', to $icons array.

Font Awesome

Open https://fontawesome.com/v4.7/icons/ and choose any icon you like, just add fa fa- prefix to icon item.


Handsome has some fontello icons, here is a list of supported icons, just add fontello fontello- prefix to icon item like font awesome.

Feather Icons

Choose any icon you like in https://feathericons.com ,just add " data-feather=" prefix to icon item.

Other SVG Icons

Use this template: "></i>${svg}<i , use your svg icon to relpace ${svg} .


If PHP throwed a error like syntax error, unexpected 'xxx' (T_CONSTANT_ENCAPSED_STRING), expecting ')' , please check for sanyax errors like losing the , at the end of each line except for the last line.

This post was published under CC BY-NC-SA 4.0 license on April 12, 2020, translated on July 22, 2021 by @baoshuo.

🇨🇳 15 y.o. / Student & Developer & OIer / GitHub: git.io/renbaoshuo / AS141776 / Website: baoshuo.ren