typecho新增我的足迹模版及页面

博主：黄炜
发布时间：2024 年 12 月 16 日
17 次浏览
2829字数
分类：技术 css

## 引言

在网上看到一个很棒的项目，可以在`typecho`里嵌入一个中国地图，把自己的所有足迹信息放进去，高亮显示，感觉还很不错，下面是地址：

[http://www.lopwon.com/attachment/3741/](http://www.lopwon.com/attachment/3741/)

成品页面：

![某分类页面下展示我的足迹](https://static.hw13.cn/usr/uploads/2024/12/1310179017.png)

![时光机内嵌入我的足迹](https://static.hw13.cn/usr/uploads/2024/12/1520683140.png)

## 步骤

### 下载独立页面的模版文件

首先，先去这个[网站](http://www.lopwon.com/attachment/3741/)（就是上面这个网址）下载一个压缩包：`Lopwon-Unlock-pkg`

![Lopwon网站](https://static.hw13.cn/usr/uploads/2024/12/2333588264.png)

压缩包里有个名叫`Lopwon_Unlock.php`的文件，解压出来。

然后找到你的博客网站目录，放到你主题下的目录里。

比如，我的博客网站根目录是`/web/blog/`，

那么就是要放到`/web/blog/usr/themes/主题名字/`下

如果是默认主题，那就是`/web/blog/usr/themes/default/`下，

我的主题叫`handsome`，所以这个文件路径就是：`/web/blog/usr/themes/handsome/Lopwon_Unlock.php`

### 查找对应城市的编码

你得让程序知道你到底去过哪些城市，这个需要你自己去把去过的城市名字转换为对应城市编码。

两个办法，第一个是通过我博客文章进行查找：

<div class="inner-content" >
<p class="inser-title">各省市区地区编码一览表</p>
<div class="inster-summary text-muted">
adcode中文名100000中华人民共和国110000北京市110100北京市市辖区110101东城区11010...
</div>
</div>
</a>

</div>

</div>

第二个是通过上面的网站，里头提供了一个下载地址

你可以去下载一个名叫`AMap_adcode_citycode.xlsx`的文件，里头的`adcode`就是这里的城市编码。

### 创建独立页面

首先，进入后台，点开**撰写**菜单，其中的**创建页面**

![创建页面](https://static.hw13.cn/usr/uploads/2024/12/3683493996.png)

第二步，在弹出的页面里，左侧输入框把上面城市编码列表写出来。

右侧的自定义模板选择，选择这个`Lopwon_Unlock`

如果这个名字没有，那就要去检查上面是否把那个文件放进去了。

![输入城市编码](https://static.hw13.cn/usr/uploads/2024/12/499142281.png)

如果你不想这个页面正常显示在左侧菜单，可以在高级设置当中，隐藏起来

![隐藏](https://static.hw13.cn/usr/uploads/2024/12/3714021715.png)

> 我不想让它在左侧显示的原因是：
> 
> 这个页面打开来光秃秃的，啥也没有，又没有返回按钮，也没有侧边栏
> 
> 所以，我建议最好以`iframe`的方式嵌入到其他页面里

如果你没有选择隐藏，创建完成后，就完成了这篇教程了。

如果你想嵌入到其他页面（任何页面都可以）的话，可以看后续的教程

### 【可选】嵌入时光机页面

这里我选择嵌入时光机页面，当然，你甚至可以嵌入包括首页在内的任意页面的任意位置。

首先，把时光机页面的代码打开，`cross.php`文件。

具体路径是：`你的博客网站/usr/themes/主题名字/cross.php`

其中有一个引用文件的代码，引用了`component/say.php`文件

```php
<?php $this->need('component/say.php') ?>
```

这里嵌入一行代码：

`iframe`的方式嵌入到时光机页面里

```html
<iframe src="/996.html" frameborder="0" width="100%" height="300"></iframe>
```

这里的`996.html`代表了这个地图独立页面的cid值，你可以改成你自己的。

![嵌入代码](https://static.hw13.cn/usr/uploads/2024/12/3118440526.png)

这样就可以看到开头的效果了。

![时光机内嵌入我的足迹](https://static.hw13.cn/usr/uploads/2024/12/1520683140.png)

### 【可选】嵌入某一个分类页面

与上面的步骤一样，先找到你这个地图独立页面的`cid`值，比如我这里是`996`

那么`iframe`标签应该这么写。

```html
<iframe src="/996.html" frameborder="0" width="100%" height="300"></iframe>
```

找到分类页面（注意，也同样是首页）

`博客网站目录\usr\themes\你的主题名字\libs\Content.php`

其中的`524行`之后，插入你的上述代码

就可以实现显示，如图。

![简单嵌入到页面里](https://static.hw13.cn/usr/uploads/2024/12/4229845679.png)

但是这样的话，就会导致任何页面都输出此`iframe`标签，所以需要判断一下当前分类的`mid`是否等于我要的`mid`值。

另外补充一下外层的盒子，这样显得好看一些。

```php
if (@$obj->categories[0]['mid'] == 81) {
    echo '<div class="panel-small single-post box-shadow-wrap-normal" style="flex: auto;">';
    echo '<iframe src="/996.html" frameborder="0" width="100%" height="300"></iframe>';
    echo '</div>';
}
```

![嵌入到指定的分类页面里](https://static.hw13.cn/usr/uploads/2024/12/3187850154.png)

> PS：如果你不想让屏幕宽度过高的时候，这个足迹页面只占用一半的话
> 
> 可以另外加一行css代码在这个盒子上：
> 
> `style="flex: auto;`

最后展示一下成品(两种宽度样式)：

![宽屏展示](https://static.hw13.cn/usr/uploads/2024/12/1310179017.png)

![窄屏展示](https://static.hw13.cn/usr/uploads/2024/12/904072788.png)

欢迎关注拓行公众号，分享各种技术博客文章

拓行——奋勇进取，开拓未来，砥砺前行

最后修改：2024 年 12 月 16 日

如果您对各种技术博客文章感兴趣，欢迎关注拓行公众号，分享各种专业技术知识~

typecho新增我的足迹模版及页面

黄炜 • 2024 年 12 月 16 日

## 引言

在网上看到一个很棒的项目，可以在`typecho`里嵌入一个中国地图，把自己的所有足迹信息放进去，高亮显示，感觉还很不错，下面是地址：

[http://www.lopwon.com/attachment/3741/](http://www.lopwon.com/attachment/3741/)

成品页面：

![某分类页面下展示我的足迹](https://static.hw13.cn/usr/uploads/2024/12/1310179017.png)

![时光机内嵌入我的足迹](https://static.hw13.cn/usr/uploads/2024/12/1520683140.png)

## 步骤

### 下载独立页面的模版文件

首先，先去这个[网站](http://www.lopwon.com/attachment/3741/)（就是上面这个网址）下载一个压缩包：`Lopwon-Unlock-pkg`

![Lopwon网站](https://static.hw13.cn/usr/uploads/2024/12/2333588264.png)

压缩包里有个名叫`Lopwon_Unlock.php`的文件，解压出来。

然后找到你的博客网站目录，放到你主题下的目录里。

比如，我的博客网站根目录是`/web/blog/`，

那么就是要放到`/web/blog/usr/themes/主题名字/`下

如果是默认主题，那就是`/web/blog/usr/themes/default/`下，

我的主题叫`handsome`，所以这个文件路径就是：`/web/blog/usr/themes/handsome/Lopwon_Unlock.php`

### 查找对应城市的编码

你得让程序知道你到底去过哪些城市，这个需要你自己去把去过的城市名字转换为对应城市编码。

两个办法，第一个是通过我博客文章进行查找：

第二个是通过上面的网站，里头提供了一个下载地址

你可以去下载一个名叫`AMap_adcode_citycode.xlsx`的文件，里头的`adcode`就是这里的城市编码。

### 创建独立页面

首先，进入后台，点开**撰写**菜单，其中的**创建页面**

![创建页面](https://static.hw13.cn/usr/uploads/2024/12/3683493996.png)

第二步，在弹出的页面里，左侧输入框把上面城市编码列表写出来。

右侧的自定义模板选择，选择这个`Lopwon_Unlock`

如果这个名字没有，那就要去检查上面是否把那个文件放进去了。

![输入城市编码](https://static.hw13.cn/usr/uploads/2024/12/499142281.png)

如果你不想这个页面正常显示在左侧菜单，可以在高级设置当中，隐藏起来

![隐藏](https://static.hw13.cn/usr/uploads/2024/12/3714021715.png)

如果你没有选择隐藏，创建完成后，就完成了这篇教程了。

如果你想嵌入到其他页面（任何页面都可以）的话，可以看后续的教程

### 【可选】嵌入时光机页面

这里我选择嵌入时光机页面，当然，你甚至可以嵌入包括首页在内的任意页面的任意位置。

首先，把时光机页面的代码打开，`cross.php`文件。

具体路径是：`你的博客网站/usr/themes/主题名字/cross.php`

其中有一个引用文件的代码，引用了`component/say.php`文件

```php
<?php $this->need('component/say.php') ?>
```

这里嵌入一行代码：

`iframe`的方式嵌入到时光机页面里

```html
<iframe src="/996.html" frameborder="0" width="100%" height="300"></iframe>
```

这里的`996.html`代表了这个地图独立页面的cid值，你可以改成你自己的。

![嵌入代码](https://static.hw13.cn/usr/uploads/2024/12/3118440526.png)

这样就可以看到开头的效果了。

![时光机内嵌入我的足迹](https://static.hw13.cn/usr/uploads/2024/12/1520683140.png)

### 【可选】嵌入某一个分类页面

与上面的步骤一样，先找到你这个地图独立页面的`cid`值，比如我这里是`996`

那么`iframe`标签应该这么写。

```html
<iframe src="/996.html" frameborder="0" width="100%" height="300"></iframe>
```

找到分类页面（注意，也同样是首页）

`博客网站目录\usr\themes\你的主题名字\libs\Content.php`

其中的`524行`之后，插入你的上述代码

就可以实现显示，如图。

![简单嵌入到页面里](https://static.hw13.cn/usr/uploads/2024/12/4229845679.png)

但是这样的话，就会导致任何页面都输出此`iframe`标签，所以需要判断一下当前分类的`mid`是否等于我要的`mid`值。

另外补充一下外层的盒子，这样显得好看一些。

![嵌入到指定的分类页面里](https://static.hw13.cn/usr/uploads/2024/12/3187850154.png)

> PS：如果你不想让屏幕宽度过高的时候，这个足迹页面只占用一半的话
> 
> 可以另外加一行css代码在这个盒子上：
> 
> `style="flex: auto;`

最后展示一下成品(两种宽度样式)：

![宽屏展示](https://static.hw13.cn/usr/uploads/2024/12/1310179017.png)

![窄屏展示](https://static.hw13.cn/usr/uploads/2024/12/904072788.png)