7

Vuepress添加侧边栏访问地图

 3 years ago
source link: https://wiki.eryajf.net/pages/76f813/#_2-%E9%85%8D%E7%BD%AE
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Vuepress添加侧边栏访问地图

博客迁移之后一直心心念念的老博客功能，莫过于首页右侧边栏的访问地球了，只是Vuepress似乎并不支持在边栏添加script，于是一直搁置了下来。

晚上在浏览主题官方文档的时候，无意看到一个定义html广告模块儿的姿势，于是乎开启了一段折腾之旅，这里赶忙做下记录。

# 1，效果

讲解配置过程之前，先看下配置完成之后的最终效果：

image-20210705230645552

# 2，配置

通过网站REVLVERMAPS (opens new window)可以自定义我们想要的地图样式：

image-20210705231110942

配置过程中，下边的方框中会自动生成对应的代码，我们可以拷贝对应的代码，一会儿用得到。

然后创建js文件 docs/.vuepress/config/htmlModules.js

// 官方文档：https://doc.xugaoyi.com/pages/a20ce8/#%E8%87%AA%E5%AE%9A%E4%B9%89html%E6%A8%A1%E5%9D%97
module.exports = {
  // 利用广告模块儿,添加访问地球🌎
  homeSidebarB: `<div style="width:100%;height:122px;color:#fff;background: #eee;"><a href="https://www.revolvermaps.com/livestats/5srkcv15atq/"><img src="//rf.revolvermaps.com/h/m/a/0/ff0000/128/10/5srkcv15atq.png" width="256" height="128" alt="Map" style="border:0;"></a></div>`,
}
1
2
3
4
5

然后在 docs/.vuepress/config/themeConfig.js中引用即可：

const htmlModules = require('./htmlModules.js');

// 主题配置
module.exports = {
	// 此处定义了访问地球功能
  htmlModules,
}
1
2
3
4
5
6
7

然后运行起来，就可以看到对应的访问地图了。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK