hexo-matery-url

a simple matery url card display plugin for hexo. Modified formed hexo-vulkyr-url

install

npm install hexo-matery-url

notice! You have to included this css your own!

.vkr-url-wrapper {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid;
    border-color: #eee #ddd #bbb;
    box-shadow: rgba(0,0,0,.14) 0 1px 3px;
    margin-bottom: 10px;
    display: flex;
}
.vkr-url-wrapper .desc-wrapper > hr {
    margin: 10px 0;
    height: 1px;
}
.vkr-url-wrapper .avatar {
    width: 150px !important;
    height: 150px !important;
    border: solid 1px #eee;
    box-shadow: none !important;
    margin: 0;
    margin-right: 10px;
}
.vkr-url-wrapper h2 {
    border: none;
    margin: 0;
    padding: 0;
}
.vkr-url-wrapper .desc-wrapper {
    flex: 1;
}
.vkr-url-wrapper .desc-wrapper a {
    font-size: 22px;
    font-weight: 700;
}

usage

{% valkyrurl [url=http://example.com] [otherOpt=value] %}

options

options are formed like [key=value] (bracket included)

supported options are:

• avatar image that describe your link (optional)
• title title
• desc description
• url destination when you click image url or title

example

{% valkyrurl
[url=https://github.com/toastsgithub/valkyr-ssh]
[title="valkyr ssh manager"]
[avatar=http://images2.dzmtoast.top/post-cover/github-logo_hub2899c31b6ca7aed8d6a218f0e752fe4_46649_1200x1200_fill_box_center_2.png]
[desc="valkyr-ssh, a simple commandline tool to help you store ssh login address"]
%}

example above will produce this in your article

🚨 Attention please if your option value contains whitespace, you should quote value with ""

i.e. : [title="my name is peter"] instead of [title=my name is peter]

cause in latter case, hexo will split it into different arguments: [title=my(arg1), name(arg2), is(arg3), peter](arg4)

demo

new matery url: appotry's blog vulkyr url: zmou's blog