Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

希望增加 Hexo 主题 maupassant 的评论支持~ #111

Closed
XiaoPika opened this issue Jan 11, 2021 · 6 comments
Closed

希望增加 Hexo 主题 maupassant 的评论支持~ #111

XiaoPika opened this issue Jan 11, 2021 · 6 comments
Labels

Comments

@XiaoPika
Copy link

Maupassant最初是由Cho大神为Typecho平台设计开发的一套响应式模板,体积只有20KB,在各种尺寸的设备上表现出色。
目前已由屠夫9441移植到 Hexo 平台,其风格简洁大气,Stars 达2.3k,足以证明该主题受到许多用户喜爱。

主题通过多位大佬共同PR,已经支持包括Disqus、友言、来必力、畅言、Gitment、Gitalk、 Valine等多种评论系统的配置。

鉴于Twikoo相对于其他评论系统拥有许多独特优势,申请PR,希望虹墨能花时间帮忙给 maupassant 适配一下 Twikoo,感谢!

主题源码:https://github.com/tufu9441/maupassant-hexo

@imaegoo imaegoo added the help wanted Extra attention is needed label Feb 8, 2021
@imaegoo imaegoo removed the help wanted Extra attention is needed label Feb 18, 2021
@imaegoo
Copy link
Member

imaegoo commented Feb 19, 2021

已支持

twikoo: ## See: https://twikoo.js.org
  enable: false ## If you want to use twikoo comment system, please set the value to true.
  envId: ## Tencent CloudBase envId
  region: ## Tencent CloudBase region, e.g. ap-shanghai
  path: ## Article path, e.g. window.location.pathname

@XiaoPika
Copy link
Author

Thank you very much.

@XiaoPika
Copy link
Author

XiaoPika commented Feb 20, 2021

已经在该主题下测试部署Twikoo成功!感谢虹墨大佬!
@imaegoo
另外有个小两个小问题,
1、Valine导入Twikoo的评论,如果网站URL中存在中文时会被encode导致无法被识别,这个问题可以在path中配置decodeurl(window.location.pathname) 解决。
2、评论样式与博客样式的段间距不是很统一:①评论内容段间距稍小②评论内容段前距稍大③评论与评论之间距离稍小;群里提问时有大佬提到可能是博客的CSS污染,不知道虹墨大佬能否指点一下这种小的样式修改我应该从哪方面入手调整呢?

再次感谢虹墨大佬的fantastic work!

@imaegoo
Copy link
Member

imaegoo commented Feb 20, 2021

  1. 好方法!但好像拼错了,应该是 decodeURI(window.location.pathname)
  2. 在主题的 CSS 文件 themes/maupassant/source/css/style.scss 底部追加你想自定义的 CSS,比如缩小评论正文的上间距:
.tk-content {
    margin-top: 0 !important;
}

@XiaoPika
Copy link
Author

再次感谢虹墨大佬的耐心教导,谢谢您!

@XiaoPika
Copy link
Author

XiaoPika commented Feb 20, 2021

非常感谢虹墨大佬的指点,我对CSS几乎完全小白,对着src里的锚点参照,一个一个改了一下,现在效果还可以接受,实现方式非常沙雕,给同样使用 maupassant 主题的小白参考,大佬轻拍
 
 

调整前:
1.png
 
 
调整后:
2.png

 
 
 
themes/maupassant/source/css/style.scss 最后面添加以下内容实现:

.tk-content {
    margin-top: 0em !important;
    margin-bottom: 0em !important;
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;

  }

.tk-tag-green {
    border-radius: 12px !important;
    border: 0px solid #e1f3d8!important;
  }

.twikoo .tk-submit .el-textarea__inner {
    min-height: 150px !important;
  }

.tk-comment {
    margin-top: 1rem !important;
    line-height:25px !important;
  }

.tk-main {
    padding-bottom: 1em !important;
  }


.tk-extras  {
  display:none !important;
  }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants