[图片] Why do this ? 博客写好了之后也需要经常的去回顾,所以我也经常在手机上浏览自己的博客加深对知识的印象,可是每次阅读到最后的时候,那一排长长的地址的布局让人绝望,于是我就想能不能通过将长 URL 转换为短 URL,使得页面更加的简练。 让人难受的布局: [图片] 转换后的布局: [图片] How t ..

教你利用短 URL 替换 solo 博客的长 URL!!!

Why do this ?

博客写好了之后也需要经常的去回顾,所以我也经常在手机上浏览自己的博客加深对知识的印象,可是每次阅读到最后的时候,那一排长长的地址的布局让人绝望,于是我就想能不能通过将长 URL 转换为短 URL,使得页面更加的简练。
让人难受的布局:

深度截图选择区域 20191206225434.png

转换后的布局:

深度截图选择区域 20191206225609.png

How to do?

在早之前自己就准备弄一个短网址转换的工具(虽然网上有很多,但是自己写真的很想写!!!),这次博客这地址就让我直接动工了,然后直接查找相关的博客看看别人怎么实现的。这里参考了短网址(short URL)系统的原理及其实现
刚开始本来是想写个前端页面输入长 URL 得到短 URL,直接将转换后的短 URL 放在那个位置,但是自己真不太会,写来好丑。。。于是就想直接调用一个接口返回 js,然后这个 js 去获取 a 标签的值,然后在将该值通过 js 原生 AJAX 调用另一个接口得到转换后的短 URL,再将 URL 写入 a 标签。

How to use

(1)话不多说,可以直接直接用我搭的服务

给文章的签名档上的地址 a 标签一个id=“url”,然后调用我的服务返回一个 js 脚本即可。
代码示例如下:

地址<a href="{url}" target="_blank" id="url">{url}</a><br>
<script src="http://surl.zhqy.xyz/url/js" charset="utf-8"></script>
<script>setUrl();</script>

图片示例如下:
深度截图选择区域 20191207083126.png

(2)拉取我的源代码,直接修改部署到自己的服务器

githup 地址:https://github.com/geektomya/surl.git
欢迎 stars 呀,顺便帮我看看代码风格,,感觉自己风格不太好😭🙏
深度截图选择区域 20191207084301.png

数据库配置

mysql中新建数据库surl,字符集utf8 -- UTF-8 Unicode,排序规则utf8_general_ci然后运行 doc 中的数据库脚本

项目配置

application.yml中修改为你的数据库,然后在 Message 中修改INDEXPERURLPERINJS其中的PERURL修改为你的短 URL 的前缀(我这里后面用 nginx 监听这个服务,直接写了域名)PERINJS同理也可以写成域名/url/的形式,这里要注意 /url/后面的/一定不能少。

服务器配置
upstream shortUrl {
    server localhost:8087; # 监听端口
}

server {
    listen       80;
    server_name surl.zhqy.xyz; # 域名

    access_log off;

    location / {
        proxy_pass http://shortUrl$request_uri;
        proxy_set_header  Host $host:$server_port;
        proxy_set_header  X-Real-IP  $remote_addr;
        client_max_body_size  10m;
    }
}

当然这里你需要给你的域名一个新的二级域名解析到这里

solo 配置
地址<a href="{url}" target="_blank" id="url">{url}</a><br>
<script src="http://域名/url/js" charset="utf-8"></script>
<script>setUrl();</script>

将域名修改为你的域名配置即可

  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。

    Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!
    具体细节请浏览 B3log 构思

    1005 引用 • 7689 回帖 • 650 关注
  • 短网址
    1 引用 • 2 回帖
2 回帖
请输入回帖内容...
  • csfwff 1

    可以,有用trollface

    1 回复
  • geektomya

    哈哈哈,有用就好 😁