Emlog小程序-Brief3.0
Emlog小程序-Brief3.0
关于Brief小程序 这是一个简洁的程序,所以给它取了个英文名叫Brief,开发者:大彭Sir 新版本需安装小程序辅助插件 插件地址:点我去安装 适配:QQ小程序、微信小程序、百度小程序 小程序设置教程以及SG11脚本安装教程:点我去看 程序售价 授权加密版:88元 无授权加密版:188元 后续会出APP 更新内容 2022-05-26: 完善文章附件 优化页面样式 程序设置全部放在config.js 新增代码高亮语言若干 2022-05-16: 适配百度小程序 修复bug若干 2021-09-16: 3.0支持Emlog Pro(其他版本自测) 优化全局UI,部分UI借鉴其他小程序(枫瑞博客网、花生阁) 更换富文本解析组件(mp-html),可以看下面新的演示 新富文本解析支持代码高亮、链接复制 优化表格的显示 取消首页文章列表,分类文章列表图片边框 首页列表自动获取文章内第一章图片 首页列表描述文字改为只显示中文(不会显示英文和符号了) 新增文章模糊搜索 新增文章附件下载(暂时无法使用) 小程序演示 QQ/微信小程序搜索:彭先生博客即可访问 百度小程序请联系我(QQ:6283354)看预览 http://hkiii.cn/
 2021-9-16
置顶文章
小程序设置教程
小程序设置教程
基本配置: 在Emlog Pro后台安装wxa插件并启用,修改混淆码生成加密字符串 在微信开发者工具中导入小程序,(导入时修改自己的appid) 修改小程序代码,主要是在config.js中将接口域名地址和加密字符串修改为插件中显示的。 安装sg11 宝塔面板安装sg11点这里 服务器域名设置 注意:做完上面几步您的小程序就能提交上线了,下面微信端请忽略! 小程序内加好友设置 先找到目录下pages/add-comment/add-comment.js文件修改你的appid和secret,secret在小程序后台设置 然后找你的openid 注意:openID不会获取或者获取到了没有反应可以联系我帮你改,需要改openID的路径(pages/blog-info/blog-info.wxml)(pages/home/home.wxml)微信端不需要改 加好友授权 请先在blog.js里面添加两行代码 this.friends(); 位置如下 friends: function () { qq.getSetting({ success(res) { if (!res.authSetting['setting.addFriend']) { qq.authorize({ scope: 'setting.addFriend', success() { qq.showModal({ title: '提示', content: '授权成功,请删除该方法调用', success(res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cancel) { console.log('用户点击取消') } } }) } }) } } }) }, 位置如下: 授权成功请使用你的手机QQ打开小程序 进入会自动弹出授权-点击允许即可 如果不会可联系我远程协助-先安装ToDesk远程软件!
 2021-9-15
置顶文章
EmlogPro获取微语(笔记)
EmlogPro获取微语(笔记)
实现效果 完整代码 先在模板文件添加 <?php //获取微语 function twitter_all(){ $DB=MySql::getInstance(); $query=$DB->query("select * from ".DB_PREFIX."twitter order by id desc"); echo "<div class='twitter-box'>"; while($row = $DB->fetch_array($query)){ echo "<div class='twitter-item'> <div class='twitter-time'>".$row["content"]."</div> <div class='twitter-title'>-".date('y-n-j',$row["date"])."</div> </div>"; } echo "</div>"; } ?> 在你需要展示的地方调用 <?php twitter_all() ?> 样式 可忽略 .twitter-item { /* background: #E4EBF5; box-shadow: 1px 1px 2px #999da4, -1px -1px 2px #ffffff; */ padding: 5px; display: flex; justify-content: space-between; } .twitter-box { width: 70%; } .twitter-title { font-weight: 300; font-size: 13px; } .twitter-item .twitter-time::before { padding: 3px 6px; color: #fff; border-radius: 5px; margin: 0px 5px; font-size: 10px; } .twitter-item:nth-child(1) .twitter-time::before { background-color: #4cb4e7; content: "1"; } .twitter-item:nth-child(2) .twitter-time::before { background-color: #9bc272; content: "2"; } .twitter-item:nth-child(3) .twitter-time::before { background-color: #f6d6ff; content: "3"; } .twitter-item:nth-child(4) .twitter-time::before { background-color: #ffebcc; content: "4"; } .twitter-item:nth-child(5) .twitter-time::before { background-color: #aed3f4; content: "5"; } .twitter-item:nth-child(6) .twitter-time::before { background-color: #c0c0c0; content: "6"; } .twitter-time { font-weight: 300; word-break: break-all; font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; transition: 2s; width: 80%; margin: 0px 5px; border-bottom: 1px #d0cbcb dashed; } .twitter-timee { font-weight: 300; word-break: break-all; font-size: 14px; text-indent: 2em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 20; -webkit-box-orient: vertical; transition: 2s; min-height: 42px; } .jindu { height: 100px; width: 15px; background: #E4EBF5; border-radius: 5px; padding: 5px; margin: 10px; box-shadow: inset 1px 1px 2px #999da4, inset -1px -1px 2px #ffffff; display: flex; align-items: flex-end; } .jindu-box, .jindu-title-box { display: flex; justify-content: space-around; } .jindu-item { width: 10px } .jindu-color { background-color: red; opacity: 0.5; } .jindu:nth-child(2) .jindu-color { background-color: green; opacity: 0.5; } .jindu:nth-child(3) .jindu-color { background-color: blue; opacity: 0.5; } .jindu:nth-child(4) .jindu-color { background-color: orange; opacity: 0.5; } .jindu-title { font-size: 14px; font-weight: 300; } .sj-tj { display: flex; width: 30%; flex-direction: column; border-left: 0.1px #c7c7c7 solid; justify-content: center; } .all-box { display: flex; } .bj-box { margin: 10px 0px; } @media (max-width:576px) { .bj-box { margin: 10px 10px; } .twitter-box { width: 100%; } .sj-tj { display: none; } } @media (max-width:768px) { .bj-box { margin: 10px 10px; } .twitter-box { width: 100%; } .sj-tj { display: none; } }
 2022-5-27
VuePress项目搭建
VuePress项目搭建
VuePress项目搭建 AirHua-byte 6/2/2021 other 10分钟搭建个人博客,属于自己的小屋 这是一个纷繁的时代,信息渠道已经多到快让人喘不过气来。 而个人博客这种来自互联网初的载体,似乎与这个环境显得格格不入。 就像大海中的小岛,在海浪中显得那么不起眼,但它的存在本身就彰显了一种意义。 无论是波涛汹涌,还是风平浪静,它都在那里,而你的心也就找到了一处可以停靠的港湾。 关于VuePress VuePress(opens new window) 主题:一款简洁而优雅的 vuepress 博客 & 文档 主题。 vuepress-theme-reco(opens new window) 环境搭建 安装node8.0+ node官网(opens new window) # 设置淘宝镜像源 npm config set registry https://registry.npm.taobao.org # 查看使用的镜像源 npm config get registry # 安装淘宝镜像源 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装官网提示下载安装包安装即可 安装完成后打开命令行工具,输入node -v,若返回版本信息则安装成功。 创建博客工程 # 安装vuepress npm install vuepress -g # 安装脚手架工具 npm install @vuepress-reco/theme-cli -g # 创建项目 theme-cli init my-blog #my-blog可替换成自己需要的项目名称AIA 上述命令执行后,在命令行窗口会进行一系列的信息配置 ? What's the title of your project? #键入您的项目标题 ? What's the description of your project? #键入您的项目描述 ? What's the author's name? #键入作者姓名 ? What style do you want your home page to be?(Select afternoon-grocery, if you want to download reco_luan's '午后南杂') (Use arrow keys) ❯ blog # 此处通过方向键选择您首页风格,这里我们选择blog doc afternoon-grocery 接下来进入您的工程目录,启动您的项目吧 # 接入项目目录 cd my-blog #my-blog替换为之前您填入的项目名称 # 安装npm npm install # 运行测试环境 npm run dev 访问命令行输出的ip地址,一般为http://localhost:8080(若端口被占用则依次递增,以终端输出为准),即可访问您的博客了! 博客配置 工程结构 ├─ node_modules #存放着项目所需的依赖,我们不需要关心 ├─ docs #该目录下存放您编写的文档 │ └─ theme-reco │ ├─ api.md │ ├─ plugin.md │ ├─ theme.md │ └─ README.md ├─ blogs #该目录下存放您编写的博客文章 │ ├─ category1 │ │ ├─ 2018 │ │ │ └─ 121501.md │ │ └─ 2019 │ │ └─ 092101.md │ ├─ category2 │ │ ├─ 2016 │ │ │ └─ 121501.md │ │ └─ 2017 │ │ └─ 092101.md │ └─ other │ └─ guide.md ├─ .vuepress # 该目录下存放项目配置文件与静态资源 │ ├─ config.js #该文件用于配置项目 │ └─ public # 该目录下存放网页中所需的静态资源 │ ├─ hero.png # 首页大图 │ ├─ logo.png # 站点logo │ ├─ favicon.ico #站点图标 │ └─ avatar.png #头像 ├─ package.json #依赖管理文件 └─ README.md #这里存放着博客首页的内容 配置启动页 启动页展示的内容为博客标题与描述,即您在创建工程时输入的内容 您可以在.vuepress/config.js下找到如下内容,通过修改对应的字符来改变您的启动页 // .vuepress/config.js module.exports = { "title": "test", "description": "test", } 配置首页 首页即为启动页之后的主页面 首页的内容由项目根目录下的README.md 配置生成,您可以通过更改其中的配置项来变更您的首页 --- home: true #指定该文件为您的首页,改为false则不作为首页 heroText: vuepress-theme-reco #首页居中显示的文本 tagline: A simple and beautiful vuepress blog theme. # 首页显示的标语 # heroImage: /hero.png #首页显示的主图,默认被注释,取消注释可显示图片 # heroImageStyle: { # 首页主图的样式控制,默认被注释 # maxWidth: '600px', # width: '100%', # display: block, # margin: '9rem auto 2rem', # background: '#fff', # borderRadius: '1rem', # } bgImageStyle: { #背景图片样式 height: '450px' } # 以下内容基本上不生效,可以不用关心 isShowTitleInHome: false actionText: Guide actionLink: /views/other/guide features: - title: Yesterday details: 开发一款看着开心、写着顺手的 vuepress 博客主题 - title: Today details: 希望帮助更多的人花更多的时间在内容创作上,而不是博客搭建上 - title: Tomorrow details: 希望更多的爱好者能够参与进来,帮助这个主题更好的成长 --- Tip:代码中所引用的图片,均以.vuepress/public 为根目录 到此为主,您会注意到首页内容远不止这些,例如个人资料卡、文章列表,这些如何更改呢? 文章列表是根据您的文章自动生成的,一旦您发布的文章中的含有Front Matter,系统会自动将其收集至首页,默认按时间顺序展示 个人资料卡的头像和昵称由.vuepress/config.js进行配置,您可以找到如下内容,并进行修改配置。Category和Tag项则跟您的文章中标注的分类和标签自动生成 "author": "AirHua-byte", //昵称 "authorAvatar": "/avatar.png", //头像 Friend Link 则是您可以自由更改的,它的配置在.vuepress/config.js中,您可以找到如下内容,并对应进行修改配置,如果可以的话,您可以尝试将本站点添加为友链~ "friendLink": [ { "title": "AirHua-byte", //友联标题 "desc": "敲键盘、按快门与拨琴弦", //友链描述 "email": "3301833942@qq.com", //友链邮箱 "link": "http://huabyte.com" //友链地址 }, { "title": "vuepress-theme-reco", "desc": "A simple and beautiful vuepress Blog & Doc theme.", "avatar": "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png", "link": "https://vuepress-theme-reco.recoluan.com" } ], 配置底部 底边栏展示了如主题、备案信息、版权、年份等信息,这些内容仍需要您前往.vuepress/config.js进行修改 "author": "me", //版权信息,与昵称为同一数据 "record": "xxxx", //备案信息 "startYear": "2017" //开始年份 配置导航栏 logo 您需要前往.vuepress/config.js找到如下内容,修改您的logo图片,该图片存储在.vuepress/public中 "logo": "/logo.png", 搜索 您需要前往.vuepress/config.js找到如下内容,修改搜索相关配置 "search": true, //是否开启搜索 "searchMaxSuggestions": 10, //最多的搜索建议条目 导航 您需要前往.vuepress/config.js找到如下内容,修改导航相关配置 其中: 导航文本为导航按钮所展示的文字信息 路由地址即为跳转路径,根目录/对应您项目的根目录,在项目打包时会将对应目录下的README.md文件生成为index.html,例如您想将链接指向您的/docs/myDocument/README.md,则将link内容改为`/docs/myDocument,便可访问到您的文档。 图标则为导航文本左边显示的图标,可以在reco图标库 (opens new window)中寻找您需要的图标,也可以不要图标 "nav": [ //如下代码中,每个{...}即为一个导航块 { "text": "Home", //导航文本 "link": "/", //路由地址 "icon": "reco-home" //图标 }, { "text": "TimeLine", "link": "/timeline/", "icon": "reco-date" }, { "text": "Docs", "icon": "reco-message", "items": [ { "text": "vuepress-reco", "link": "/docs/theme-reco/" } ] }, { "text": "Contact", "icon": "reco-message", "items": [ { "text": "GitHub", "link": "https://github.com/recoluan", "icon": "reco-github" } ] } ], 或许您已经注意到,如果需要配置一个像Docs或者Contact这样的折叠的导航应该如何做呢?他们并不会直接跳转到对应的目标地址。 折叠导航的配置仍在之前所展示的导航配置代码中,现在将其单独提取出来进行分析。 即在导航块中加入一个items数组,数组元素为多个{...},是的,此{...}与导航块的{...}是同样的,所以您可以继续在其中添加文本、图标、路由等属性。 { "text": "Docs", //导航文本 "icon": "reco-message", //导航图标 "items": [ //导航子模块 { "text": "vuepress-reco", //子模块文本 "link": "/docs/theme-reco/" //子模块链接 } ] }, { "text": "Contact", "icon": "reco-message", "items": [ { "text": "GitHub", "link": "https://github.com/recoluan", "icon": "reco-github" } ] } 文档写作 Front Matter 在markdown文档的顶部插入一段yaml配置代码 一个完整的 Front Matter 案例: --- title: 烤鸭的做法 date: 2019-08-08 sidebar: 'auto' categories: - 烹饪 - 爱好 tags: - 烤 - 鸭子 keys: - '123456' publish: false --- 常用变量说明: title :文章标题,放弃通过一级目录定义标题的方式,改在 Front Matter 中定义。 date :文章创建日期,格式 2019-08-08 或 2019-08-08 08:08:08。 sidebar:是否开启侧边栏。 categories :所属分类。 tags :所属标签。 keys: 所属标签。 publish :文章是否发布。 另外还有一些Vuepress 默认主题的变量例如prev, next,请移步 官方文档(opens new window) 摘要 在markdown代码中,您将看到注释,注释前面的代码将显示在列表页面上的文章摘要中。 --- title: Vuepress使用指南(reco) date: 2020-08-16 sidebar: 'auto' categories: - 工具 tags: - vue publish: true --- ::: tip Vuepress是Vue作者尤雨溪开发的文档工具,本文采用Vuepress的reco主题进行相关配置说明 ::: <!-- more --> ### markdown正文 deploy.sh #!/usr/bin/env sh # 确保脚本抛出遇到的错误 set -e # 生成静态文件 npm run build # 进入生成的文件夹 cd public # 如果是发布到自定义域名 # echo 'www.yourwebsite.com' > CNAME git init git add -A git commit -m 'deploy' # 如果你想要部署到 https://USERNAME.github.io git push -f git@github.com:AirHua-byte/AirHua-byte.github.io.git master # 如果发布到 https://USERNAME.github.io/<REPO> REPO=github上的项目 # git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages cd -
 2022-5-26
小程序组件-父子组件之间的通信
小程序组件-父子组件之间的通信
属性绑定 用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容的数据 父组件的data data: { count: 99 }, 父组件的结构 <test4 ccount="{{count}}"></test4> <view> 数据:{{count}}</view> 子组件 /** * 组件的属性列表 */ properties: { ccount:Number }, 子组件的结构 <view>这是组件4</view> <view>父组件传递过来的数据:{{ccount}}</view> 事件绑定 用于子组件向父组件传递数据,可以传递任意数据 在父组件的 js 中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件 syncount(e){ console.log(e.detail.value); this.setData({ count1:e.detail.value }) }, 在父组件的 wxml 中,通过自定义事件的形式,将步骤 1 中定义的函数引用,传递给子组件 {{count1}} <test5 bind:sync="syncount"></test5> 在子组件的 js 中,通过调用 this.triggerEvent('自定义事件名称', { / 参数对象 / }) ,将数据发送到父组件 addcount(){ this.setData({ count:this.data.count+1 }) // 调用父组件的sync函数 this.triggerEvent('sync',{value:this.data.count}) } 在父组件的 js 中,通过 e.detail 获取到子组件传递过来的数据 syncount(e){ console.log(e.detail.value); this.setData({ count1:e.detail.value }) }, 获取组件实例 可在父组件里调用this.selectComponent("id或class选择器") ,获取子组件的实例对象,从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器,例如 this.selectComponent(".my-component") 子组件 <view>子组件</view> <view> 姓名:{{username}}===密码:{{password}}===年龄:{{age}} </view> /** * 组件的初始数据 */ data: { username:"tomcat", password:"123", age:18 }, /** * 组件的方法列表 */ methods: { // 修改子组件年龄 addAge(){ this.setData({ age:100 }) } } 父组件 <test3 id="abc"></test3> <view>````````````````````````````````````````````````````````````````````</view> <button bindtap="getComp" type="warn" size="mini">获取子组件的实例对象</button> //获取子组件的实例对象 getComp(){ //参数是一个选择器 const child = this.selectComponent('#abc') console.log(child) console.log("用户名:"+child.data.username) child.addAge(); },
 2022-5-26
小程序组件-插槽
小程序组件-插槽
什么是插槽 在自定义组件的 wxml 结构中,可以提供一个 slot 节点(插槽),用于承载组件使用者提供的 wxml 结构。 单个插槽 在小程序中,默认每个自定义组件中只允许使用一个 slot 进行占位,这种个数上的限制叫做单个插槽。 新建组件-在wxml中添加 <slot></slot> 在app.json里面定义组件 "usingComponents": { "test3":"/components/test3/test3" } 多个插槽 <slot name="a1"></slot> <slot name="a2"></slot> <slot name="a3"></slot> 在组件的js里面开启插槽 options:{ // 开启多个插槽 multipleSlots:true },
 2022-5-26
Python爬虫
Python爬虫
安装requests和bs4 安装requests pip install requests 安装bs4 pip install bs4 爬取豆瓣电影数据 # 获取页面 import requests as req # 1.向服务器发送请求 url="https://movie.douban.com/top250" header={ "User-Agent":"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.62 Safari/537.36" } html = req.get(url,headers=header).content.decode("utf-8") # 2.保存文件到本地 with open("top250.html","w",encoding="utf-8") as f: f.write(html) print(html) 数据处理 from bs4 import BeautifulSoup soup = BeautifulSoup(open("top250.html",encoding="utf-8"),"html.parser") print(soup) print(soup.find_all("a",class_="")) 获取所有标题 # 这里获取的爬取之后保存到本地的文件 soup = BeautifulSoup(open("hkiii.html",encoding="utf-8"),"html.parser") text = soup.select(".loglist_title") # 获取标签内的文字 for t in text: print(t.text) 爬取结果
 2022-5-25

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录