ICDYCT / I Can Do, You Can Too

Source code GitHub:  https://github.com/crazypeace/Url-Shorten-Worker Setup tutorial:  https://zelikk.blogspot.com/2022/07/url-shorten-worker-hide-tutorial.html In localStorage, only write the random string of the short URL Omitted No need to use wrapping for displaying the urlList. Change to wrapping Omitted When displaying the short URL, add a delete button in front First turn off auto-loading localStorage, then try writing it in the HTML to see the effect.       X       some text       X       some text some text some text some text some text some text some text some text some text some text some text API supports deleting short URLs POST adds fields cmd: value add, del; keyPhrase: when adding, it's a custom short URL; when deleting, it's the short URL specified for deletion. For the part displaying the urlList, add an onclick event inside the button     onclick='deleteShortUrl("4rEbzm")' >X     some text     onclick='deleteShortUrl("8NKY34...

源码 GitHub:  https://github.com/crazypeace/Url-Shorten-Worker 搭建教程:  https://zelikk.blogspot.com/2022/07/url-shorten-worker-hide-tutorial.html localStorage里只写短链的随机字符串 略 显示urlList的部分不用<ul>里面套<li>了。改为<div>里面套<div> 略 显示短链的时候，前面加个删除按钮 先把自动加载localStorage关了，然后在html里试着写一下，看看效果。 <div class="card-text">   <div classs="list-group" id="urlList">      <div class="list-group-item">       <button type="button" class="btn btn-danger">X</button>       <span>some text</span>     </div>     <div class="list-group-item">       <button type="button" class="btn btn-danger">X</button>       <span>some text some text some text some text some text some text some text some text some text some text some text </span>     </div>   </div> </div> API支持删除短链 POST增加字段 cmd: 取值add,...

The previous modification allowed the homepage to display popular posts (PopularPosts) However, under Blogger's Notable template, the homepage layout looks very strange. After analysis, it is caused by the floating layout of "More Posts". Edit the template file Before modification: .blog-pager{ float:$endSide; margin-$endSide:468px; margin-top:48px } .blog-pager .blog-pager-older-link{ color:$(feed.button.color); float:right; font:$(feed.button.font); text-transform:uppercase } After modification: .blog-pager{ text-align: center; margin: 2em 0; } .blog-pager .blog-pager-older-link{ color:$(feed.button.color); font:$(feed.button.font); text-transform:uppercase } Result: =========== Recording other modifications together: Too much spacing before and after ads Before modification: .shown-ad {     margin-bottom: 85px;     margin-top: 85px; } After modification: .shown-ad {     margin-bottom: 45px;     margin-top: 45px; } Ad width between posts Before modification: .shown-ad ....

之前这个修改可以让 首页显示热门博文PopularPosts 但是在Blogger的 Notable 类模板下，首页的排版显得很奇怪。 经过分析，是"更多博文"的浮动排版造成的影响。 修改模板文件 修改前： .blog-pager{ float:$endSide; margin-$endSide:468px; margin-top:48px } .blog-pager .blog-pager-older-link{ color:$(feed.button.color); float:right; font:$(feed.button.font); text-transform:uppercase } 修改后： .blog-pager{ text-align: center; margin: 2em 0; } .blog-pager .blog-pager-older-link{ color:$(feed.button.color); font:$(feed.button.font); text-transform:uppercase } 效果： =========== 其它修改一并记录一下： 广告前后留空太多 修改前： .shown-ad {     margin-bottom: 85px;     margin-top: 85px; } 修改后： .shown-ad {     margin-bottom: 45px;     margin-top: 45px; } 博文之间广告宽度 修改前： .shown-ad .inline-ad{ display:block; max-width:$(feed.width - 604px) } 修改后： .shown-ad .inline-ad{ display:block; max-width:$(feed.width - 204px) }

Source code GitHub: https://github.com/crazypeace/Url-Shorten-Worker Setup tutorial: https://zelikk.blogspot.com/2022/07/url-shorten-worker-hide-tutorial.html Effect:

源码 GitHub: https://github.com/crazypeace/Url-Shorten-Worker 搭建教程: https://zelikk.blogspot.com/2022/07/url-shorten-worker-hide-tutorial.html 效果: