npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

astros-resource-refer

v1.0.7

Published

扩展JS及CSS中的资源引用

Downloads

1

Readme

扩展JS及CSS中的资源引用

配置

{
    name: 'astros-resource-refer',
    config: {
        jsImgRefer:'$res(.__path__.)',
        jsImgPath : './'
    }
}

jsImRefer表示JS引用资源的语法,默认值如示例。其中 __path__是固定格式,代表图片路径。如 $.res(__path__)%__path__%

JS中引用的图片,在HTML上展示时,如果使用相对路径,会造成404(图片在静态资源服务器上)。

因此,在开发过程中,中间件会自动加上静态资源服务器的域名补全图片的路径。 发布后,如果静态资源和Web服务同服务器,可通过jsImaPath参数设置引用图片的相对路径,如果静态资源是独立的服务器,则可通过它设置静态资源服务器域名。

引用本页面(模块或组件)的图片

html结构、样式、JS中均有可能引用到图片。

在html结构中,可通过'$res'方法本页面(模块、组件)下的图片资源:

<img src="$res(avatar.png)" >

是的,它相对引用

样式中:

background:url(avatar.png) no-repeat;

js中:

var avatar = $res('avatar.png');

公共图片

除了页面(模块、组件)自有的图片,还有logo,icon等公共图片,这些都需要存放在 root/asset/img目录下,引用时,在URL前面加上 ~/即可。以HTML为例:

<img src="$res(~/img/avatar.png)" >

样式和JS中同理。