子兮子兮

No can, but will.

目录
B3log Solo 第三方皮肤 - 子兮子兮 - README
/      

B3log Solo 第三方皮肤 - 子兮子兮 - README 有更新!

B3log Solo 第三方皮肤 - 子兮子兮

本皮肤是基于官方版 yilia 皮肤进行美化修改的第三方皮肤,主色调修改为黑、白、灰(高冷三原色 😜 )、蓝(超链接)。
名称为 iMobile 的原因是,本人使用的此皮肤是直接把原 mobile 皮肤删除,将此皮肤的目录名和 skin.properties 中的配置改为 mobile,这样使用手机访问时也会使用此皮肤(原 mobile 皮肤实在无法欣赏 n(≧▽≦)n )。
此皮肤采用响应式布局,不用担心用手机访问会出现样式错乱。也建议使用者直接将此皮肤文件覆盖原 mobile 皮肤。

注意事项

此皮肤有些个性化的地方需要使用者自己去修改 ftl 模板文件,具体如下:

1. 自定义 ABOUT ME 介绍信息

点击博客标题会弹出 ABOUT ME 的窗口,当然若不想使用此弹窗你也可以在 side.ftl 中搜索 clickme 并删除相关代码。

效果图

关于我效果图

相关代码

ABOUT 代码

2. 自定义左侧个人导航链接

左侧新增的个人导航链接分别为 Github、微博、微信(可以是公众号)二维码、QQ 会话(需要在 QQ 推广 中开通)。

效果图

个人导航效果图

相关代码

从 side.ftl 第 47 行开始的注释,若使用请打开注释并将链接修改为自己的链接,包括下面的反馈邮箱链接。

个人链接代码
邮箱链接代码

3. 添加移动端顶部背景图

在屏幕宽度小于 750px(在 yilia7.min.css 中修改)时当做是移动端,由左右布局变为上下布局,顶部显示背景图,图片位置为 solo 根目录/images/bg.jpg,需要使用者将自己的图片放置于此。

相关代码

@media only screen and (max-width:750px) {
    .side {
        height: 400px;
        width: 100%;
        background: #666 url('/images/bg.jpg') center -40px;
    }
}

效果图

2018021061950jpg

4. 搜索页面

目前 Solo 的搜索页面还比较简陋,本人根据 yilia 的样式修改了一个搜索页面,放在 搜索页面(覆盖至根目录) 目录中,顾名思义,直接将目录中的文件剪切到 Solo 根目录即可。特别要注意的是里面的 opensearch.xml 文件,需要根据自己的实际情况进行修改,格式是在 hacpai 扒下来的,是用来在谷歌浏览器中通过输入域名加空格直接在地址栏实现站内搜索的。

特别注意需要在 WEB-INF/static-resources.xml 文件中添加一行 <include path="/opensearch.xml"/>,不然无法获取此静态资源。

相关代码

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" mlns:moz="http://www.mozilla.org/2006/browser/search/">
  <ShortName>子兮子兮</ShortName>
  <Description>子兮子兮风兮寒,三江七泽情洄沿。</Description>
  <InputEncoding>UTF-8</InputEncoding>
  <Image width="16" height="16" type="image/x-icon">https://res.zixizixi.cn/izcn.png</Image>
  <Url type="text/html" method="get" template="https://zixizixi.cn/search?keyword={searchTerms}"/>
</OpenSearchDescription>

效果图

搜索页面

地址栏搜索

5. 其他

为了搭配此皮肤,建议对 WEB-INF/classes 目录下的 lang_zh_CN.properties 参数文件做适当的修改,以及替换此目录下的验证码文件 captcha_static.zip(从 Solo 2.7.0 版开始验证码改版,不用替换此文件)。

修改 lang_zh_CN 参数文件

viewCount1Label=\u6D4F\u89C8\u6B21\u6570\uFF1A
# (浏览次数:)修改为(浏览:)
viewCount1Label=\u6D4F\u89C8\uFF1A

articleCount1Label=\u6587\u7AE0\u603B\u6570\uFF1A
# (文章总数:)修改为(文章:)
articleCount1Label=\u6587\u7AE0\uFF1A

commentCount1Label=\u8BC4\u8BBA\u603B\u6570\uFF1A
# (评论总数:)修改为(评论:)
commentCount1Label=\u8BC4\u8BBA\uFF1A

onlineVisitor1Label=\u5F53\u524D\u8BBF\u5BA2\uFF1A
# (当前访客:)修改为(在线:)
onlineVisitor1Label=\u5728\u7ebf\uFF1A

linkLabel=\u53CB\u60C5\u94FE\u63A5
# (友情链接)修改为(链接)
linkLabel=\u94FE\u63A5

需要使用者注意并自己修改代码的地方大概就这些。 另外建议与皮肤无关的 H2 数据 JDBC 连接配置: jdbc.URL=jdbc:h2:~/solo_h2/db;AUTO_SERVER=TRUE;DB_CLOSE_ON_EXIT=FALSE


整体效果

1. 首页

首页

2. 存档

存档

3. 标签墙

标签墙

4. 动态

动态

5. 链接

链接

6. 文章详情

文章详情

7. 评论回复

评论回复

特别鸣谢

此皮肤的发布离不开 D大(@88250)和 V姐(@Vanessa)对 Solo 的辛勤耕耘,以及 V姐 对此皮肤的的热情,本来此皮肤的代码被我改的乱七八糟,代码本来看不下去,开始 V姐 提出 PR 一份的时候我是拒绝的,因为弄起来真的很麻烦,事实也的确如此 😂 ,即使现在也这代码也不一定有多整洁。写完了此 README 感觉用这个皮肤真的好麻烦呀,应该不会有人用吧 O(∩_∩)O~

第三方项目

此改版皮肤的诞生要特别感谢以下这些第三方项目:
1. layer:一款美观易用的 jQuery 弹出层;
2. OwO:萌萌哒评论框表情内容输入工具(Revised OwO);
3. iconfont:阿里巴巴功能强大且图标内容很丰富的矢量图标库。

… 好吧只记得这 3 个了,可能也只有这三个 😂 。


平等,自由,奔放

Equality, Freedom, Passion


文章:B3log Solo 第三方皮肤 - 子兮子兮 - README作者:iTanken
链接:https://zixizixi.cn/solo-third-skin-imobile.html出处:https://zixizixi.cn
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。
本文发布于 子兮子兮 博客,欢迎转载,但未经作者同意请保留此声明,并在文章页面明显位置给出原文连接。

评论
  • soga

    Reply
  • 应该是同步地址系统 自动改成 Pipe 的地址了 :joy:

    Reply
  • 可能同步的时候刚好重启了

    Reply
  • 抽他

    Reply
  • 没有关过呀,但是我看好像是有一条评论没有同步过来…

    Reply
  • 已经提过了,但是 D 大貌似不认为是个 Bug :smile:

    Reply
  • 你刚才把同步关了?

    Reply
  • 你的匿名没用了,快去提 bug

    Reply
  • 哈哈哈

    Reply
  • @xjtushilei 又发现一个周杰伦

    Reply
  • 在footer.ftl哪个位置加?

    Reply
  • 嗯嗯,好的

    Reply
  • https://github.com/b3log/solo/issues/12470#issuecomment-402753165

    麻烦在 footer.ftl 添加一下 Util.parseMarkdown();

    Reply
  • 这样是可以解决了!但是很多链接都不能新开标签页打开了。

    Reply
  • 那应该是 footer.ftl 里面的 .attr("target", "_blank"); 的原因,你把这行代码删了试试。

    Reply
  • 我知道问题所在了,生成的链接中多了一个target=“_blank”:

    <a class="fn-right iconfont icon-send itip" id="reply-original" href="javascript:replyTo('','')" target="_blank" lang="回帖"></a>
    

    但是我看你的站没有!而且我看了macro-comments.ftl,也没有。为什么会自动产生呢?

    Reply
  • 你看看我的站吧,我部署了这个皮肤就出现问题,firefox也不行!你的站可以!点我头像可以看!

    Reply
  • 我用 Firefox 试了一下,没有问题,至于 IE 就完全没有考虑过了。想兼容的话可以自己改一下。

    Reply
  • 为什么我的在firefox和IE上点回帖或者回复,都不能弹出这个评论的对话框,而是打开了一个新的空白的浏览器标签页?
    在google chrome上测试没问题!

    Reply
  • 等空了重新整理一个出来 :grin:

    Reply
  • 记得去 github 上更新一把哦

    Reply
  • 这个真的没想到,这皮肤问题还挺多的 :joy:

    Reply
  • OωO 真的需要的话,加 QQ 吧,点 QQ 图标就行,我很少用微信。

    Reply
  • 看来你这个皮很火呀

    Reply
  • 嗯嗯,谢啦老哥,我能加你vx吗?有疑问可以叨扰你嘛:yum:

    Reply
  • 访客评论的头像是根据邮箱获取的,在 Gravatar 设置。

    Reply
  • :smile: 老哥我这评论的咋都是一个头像啊

    Reply
  • 直接查看源码,拉到最下面就能看到。

    Reply
  • 鼠标点击出现效果的这个代码在哪儿找,,,挺好玩的这个。。。

    Reply
  • ok,谢谢

    Reply
  • 配置好 solo 的 mail.properties,在后台管理修改好 邮件模板,有回复的时候就会发送邮件到评论时留下的邮箱。

    Reply
  • :stuck_out_tongue_winking_eye: 嗯嗯,我用的就是min.js,我把报错的那段删了,嘿嘿。你回复我了邮件咋推送的老哥?

    Reply
  • 可以把 OwO 相关的代码都删掉,或者用 OwO.min.js,不要用 OwO.js 或 OwO.dev.js。

    Reply
  • :sob: Uncaught SyntaxError: Unexpected token v in JSON at position 0
    at JSON.parse ()
    at XMLHttpRequest.OwO.xhr.onreadystatechange (OwO.dev.js:31)查看博客详情报了这个错,哥,这个咋弄

    Reply
  • :smile:

    Reply
  • (…有问题可以互相交流,但叫大佬就不必了,感觉很怪)
    阿里巴巴矢量图标库

    Reply
  • 大佬好了,是因为我没配成生产环境。谢谢大佬了,大佬你的备案号下面的那些图标是CSS样式库是从哪找的啊?

    Reply
  • 没有 只有切换到这个皮肤才会出现:joy: 要不我全都手动替换掉 先用着,因为太喜欢这个皮肤了:smile: 我在GitHub提issue了,看看有人能帮忙看看吗:joy:

    Reply
  • 这个的话就不清楚了,你可以用官方主题试试有没有这个问题

    Reply
  • 不知道为什么那个获取不到值,大佬是用的的最新版solo吗

    Reply
  • 这些你可以去 Github 上查看源码:

    imagepng

    Reply
  • minipostfix是官方自动生成的数据库字段吗?这个字段是什么用的,如果正常这个字段的值是不是就是min?大佬知道哪里有这个solo项目的数据库设计文档吗?:joy:

    Reply
  • 不行只能手动加上.min 那个值我查了查在数据库里是空的….

    Reply
  • ${miniPostfix} 处理后就是 .min ,写了.min 就不需要再写 ${miniPostfix} 了,奇怪的是你那的 ${miniPostfix} 为什么没有转成 .min。
    .dev 和 .min 用其中之一就行了。
    OwO 这个不是必须的,删除相关代码也可以评论。

    Reply
  • 我改成/OwO.min.${miniPostfix}.js后就好了
    ${miniPostfix}这个是获取什么参数的?
    为什么在这个引用js文件里加了个这个?
    OwO.dev.js 是不是就是上面那个实际获取的js文件?

    Reply
  • 这个皮肤的 macro-comments.ftl 里是有 ${miniPostfix}
    imagepng

    但是我在你的博客里并没有看到 .minOwO.js 是 json 格式的数据, OwO.min.jsOwO.dev.js 才是这个插件
    imagepng

    还有里面 api: 后面的地址需要修改成自己的
    imagepng

    Reply
  • 好了 我重启了一下

    Reply
  • 你网站报 502,访问不了。
    502

    Reply
  • 大佬 能帮我看看 为啥回帖不能用吗:joy: 直接点我头像就能进

    Reply
  • Reply
  • QuinnTian @ Seves

    还有下面说的 那个js文件乱码确实 但是我用开发工具打开一下 重新指定一下UTF-8就好了 但是原文件的编码本来就是UTF-8 挺奇怪的

    Reply
  • :joy: 哦哦,这个皮肤代码都是在生产环境下一边用一边修改的,在开发环境下可能会有些问题。

    Reply
  • QuinnTian @ Seves

    楼主我知道了 我把Tomcat 配置成直接用域名访问就可以了 看了看你的皮肤里代码 是直接指向/skin/… 前面并没加staticServePath

    Reply
  • QuinnTian @ Seves

    我是用本地的Tomcat跑的,用浏览器调试模式看了看是那些静态资源是直接指向的:8080/skin/…. 没有带项目名所以访问不到,请问是不是我前面配置有些地方没配?

    Reply
  • 你可以用开发者工具调试一下看看,或者你把链接地址发我看一下呢

    Reply
  • quinntian

    为什么安装你这个皮肤后无法加载js css等,我看了看这些资源请求的是服务器根目录 没有带项目名,新手求教

    Reply
    • onselectstart=“return false;”

    Reply
  • imagepng

    把 css 里的这些删掉

    Reply
  • 话说,禁止鼠标选中,然后复制 这个功能怎样才能关闭

    Reply
  • … 可能是你修改了 js 后保存的编码格式不是 UTF-8。

    Reply
  • changeu.club

    :smile: 你好,首页会访问这个 /skins/iMobile/js/welcome.js 我的中文乱码,怎么处理下?

    Reply
  • 用习惯你就会觉得比较方便

    Reply
  • 好,谢谢您,解决了。我再重新看一下那个markdown文档了,太渣了~~~

    Reply
  • 空格。

    Reply
  • 楼主,问一下这个markdowm编辑器,不支持标题格式还是我这样写有问题啊?,麻烦您帮我看一下。

    UX6B3_L2P6KR5MBD4Kpng

    为什么字体没有变大啊?

    Reply
  • :trollface:

    Reply
  • 楼主,抱歉打扰了,我部署到服务器上去那个搜索页面又显示正常了,谢谢您的答复!!!

    Reply
  • 好,稍等一下,我部署一下项目

    Reply
  • 把你的链接发我看看呢

    Reply
  • 是的,只有移动端样式显示错误,桌面端正常

    Reply
  • 只有移动端样式错误吗,桌面端正常?

    Reply
  • 移动端点击主页搜索按钮,显示的搜索页面样式错误,楼主,请问一下是什么原因呀?谢谢

    Reply
  • 按 F12 看一下控制台报错没有,或者留一下你的博客地址,我看一下

    Reply
  • Weidong @ Seves

    那个,关闭文章目录栏那个按钮点了没反应该怎么处理呢?
    ALT

    Reply
  • 客气了 ٩(๑>◡<๑)۶

    Reply
  • Weidong @ Seves

    非常感谢!:heart:

    Reply
  • 标签颜色

    在 css 里面搜索 .color 开头的,修改里面的颜色

    Reply
  • Weidong

    请问一下标签墙和友情链接怎么改成其他颜色呀?:cold_sweat:

    Reply
  • :laughing: :laughing: :laughing:

    Reply
  • 嗯嗯,好的,那我再改一下里面的链接

    Reply
  • 一定会有人用的,写的比官方的都好 :joy:

    Reply
  • 不好意思,我挪了一下目录。。。。 把皮肤丢到 skins 目录下了

    https://github.com/b3log/solo-third-skins/tree/master/skins/iMobile

    Reply