search

ppoffice / hexo-theme-icarus

A simple, delicate, and modern theme for the static site generator Hexo.
https://ppoffice.github.io/hexo-theme-icarus/
MIT License
6.36k stars 1.54k forks source link

请问icarus有什么简单的方法新增一个友链界面，并弄成卡片形式吗？ #578

Closed Icecream-blue-sky closed 4 years ago

Icecream-blue-sky commented 4 years ago

Icarus自带友链功能(links)，但是只是简单的列表形式，友链一旦多起来就不好看了，请问有什么简单的方法能弄出这样吗？ 新建一个友链page，作为一个单独的界面 QQ图片20191227133035 弄成卡片形式 QQ图片20191227132741 具体效果： https://dp2px.com/links/

ppoffice commented 4 years ago

https://bulma.io/documentation/elements/box/ https://bulma.io/documentation/layout/media-object/

Icecream-blue-sky commented 4 years ago

https://bulma.io/documentation/elements/box/ https://bulma.io/documentation/layout/media-object/

Thks!

Icecream-blue-sky commented 4 years ago

请问在markdown是不能直接使用bulma吗？bulma的box布局好像在markdown中不生效，是我的操作问题吗？ 我的css样式如下：

<div class="box">
  <article class="media">
    <div class="media-left">
      <figure class="image is-64x64">
        <img src="https://pjmike.github.io/css/images/pjmike.jpg" alt="Image" width=128 height=128>
      </figure>
    </div>
    <div class="media-content">
      <div class="content">
        <p>
          <strong>pjmike的博客</strong> <a href="https://pjmike.github.io/">https://pjmike.github.io/</a>
          <br>
          努力做一个笔耕者
        </p>
      </div>
    </div>
  </article>
</div>

markdown（VSCode)中运行结果如下： test

问题： 没有出现预期的边框，并且图片和文字的位置未达到预期位置

ppoffice commented 4 years ago

@Icecream-blue-sky 请运行hexo s或者hexo g查看生成的页面。直接预览的markdown中是没有加载bulma的样式表的。

Icecream-blue-sky commented 4 years ago

@Icecream-blue-sky 请运行hexo s或者hexo g查看生成的页面。直接预览的markdown中是没有加载bulma的样式表的。

成功了，再次感谢！

bwensun commented 4 years ago

@Icecream-blue-sky 你怎么解决的 没看懂