HiNinoJay / hexo-theme-A4

A hexo theme that looks like an A4 paper.(一个类A4纸张质感的hexo博客主题。)
https://ninojay.top
MIT License
320 stars 25 forks source link

fork了仓库准备魔改,有几点小想法 #15

Closed llsccm closed 1 year ago

llsccm commented 1 year ago

ejs语法我也不太熟悉... layout.ejs 这里应该要设置config的language配置项吧 <html lang="<%= config.language || 'en' %>">

footer.ejs <span style="border-top: 1px solid var(--line-1);margin-top: -30px;"></span> 这条线设置成.footer-last的样式比较好?

<div style="display: float;">
            <span style="float: left; font-size: 10px;">🌊看过大海的人不会忘记海的广阔🌊</span>
            <span class="footer-last-span-right"><i>本站由<a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/index.html">Hexo</a>驱动|使用<a target="_blank" rel="noopener" href="https://github.com/HiNinoJay/hexo-theme-A4">Hexo-theme-A4</a>主题</i></span>
</div>

这里的样式我认为去掉div,不用float,用flex+text-align: right;(不过得把上面的线的样式改掉)

由于还魔改了一些其他地方的样式,不太好PR,就在issues里提提自己的想法

HiNinoJay commented 1 year ago

感谢提出意见!

哈哈,其实我不仅对ejs语法不熟悉,对前端也不太熟悉,因为我是一名后端开发,所以写出来的前端代码只管是否呈现出效果了。。。

如果可以的话,在你魔改完毕后,希望你可以提个pull request到dev分支,我参考下做修改。

ps:刚才更新了v1.6.7版本,主题可支持自定义配色、首页header链接自定义、数学公式。


ejs语法我也不太熟悉... layout.ejs 这里应该要设置config的language配置项吧 <html lang="<%= config.language || 'en' %>">

这是正确的,已更新代码。

footer.ejs <span style="border-top: 1px solid var(--line-1);margin-top: -30px;"></span> 这条线设置成.footer-last的样式比较好?

<div style="display: float;">
            <span style="float: left; font-size: 10px;">🌊看过大海的人不会忘记海的广阔🌊</span>
            <span class="footer-last-span-right"><i>本站由<a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/index.html">Hexo</a>驱动|使用<a target="_blank" rel="noopener" href="https://github.com/HiNinoJay/hexo-theme-A4">Hexo-theme-A4</a>主题</i></span>
</div>

这里的样式我认为去掉div,不用float,用flex+text-align: right;(不过得把上面的线的样式改掉)

由于还魔改了一些其他地方的样式,不太好PR,就在issues里提提自己的想法

这里我原来就是采用text-align 并没有实现成功,所以改用了float,如果可以的话,能解释下为什么要去掉 div 吗?为什么这里float不太行?改成那个flex有什么好处?

先提前感谢解答!

llsccm commented 1 year ago

感谢提出意见!

哈哈,其实我不仅对ejs语法不熟悉,对前端也不太熟悉,因为我是一名后端开发,所以写出来的前端代码只管是否呈现出效果了。。。

如果可以的话,在你魔改完毕后,希望你可以提个pull request到dev分支,我参考下做修改。

ps:刚才更新了v1.6.7版本,主题可支持自定义配色、首页header链接自定义、数学公式。

ejs语法我也不太熟悉... layout.ejs 这里应该要设置config的language配置项吧 <html lang="<%= config.language || 'en' %>">

这是正确的,已更新代码。

footer.ejs <span style="border-top: 1px solid var(--line-1);margin-top: -30px;"></span> 这条线设置成.footer-last的样式比较好?

<div style="display: float;">
            <span style="float: left; font-size: 10px;">🌊看过大海的人不会忘记海的广阔🌊</span>
            <span class="footer-last-span-right"><i>本站由<a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/index.html">Hexo</a>驱动|使用<a target="_blank" rel="noopener" href="https://github.com/HiNinoJay/hexo-theme-A4">Hexo-theme-A4</a>主题</i></span>
</div>

这里的样式我认为去掉div,不用float,用flex+text-align: right;(不过得把上面的线的样式改掉) 由于还魔改了一些其他地方的样式,不太好PR,就在issues里提提自己的想法

这里我原来就是采用text-align 并没有实现成功,所以改用了float,如果可以的话,能解释下为什么要去掉 div 吗?为什么这里float不太行?改成那个flex有什么好处?

先提前感谢解答!

.footer-last 的flex应该设置为横向的flex-direction: row;

当page在index时,该div有一个子元素span用于email,带有样式border-top: 1px solid var(--line-1); 在list时,这条线由<span style="border-top: 1px solid var(--line-1);margin-top: -30px;"></span> 提供

就个人感觉,应该在.footer-last加上一个border-top,去掉两者的border-top 这样改完后,把 .footer-last 下面的div去掉(style="display: float;"其实浏览器不能识别),就有3个span子元素 为子元素设置好样式flex;1;text-align: right; 就是靠右的效果了 这里主要是父元素用了flex布局,直接设置子元素的样式要比浮动好一点,当然两者效果是一样...

我修改这部分的样式是打算用icon代替email超链接,并且加入更多的icon,选择了左对齐就想统一样式