|
|
& ?7 @$ F# m* ?2 J) t' ?7 ~
可以将 SpeciaTheme 中 Heropress Pro 主题转换成 Typecho 主题,下面是具体的实现过程:
# k0 @" g0 L) i' ~. C! A8 M0 V' w, e* P8 y; b5 l9 a$ n0 }
1.下载主题文件- n" v* l5 K$ B$ U9 x Y
7 s; m2 }' s2 J在 SpeciaTheme 网站购买 Heropress Pro 主题后,从下载链接中下载主题文件压缩包。
% y$ z6 F/ f; Z% x) T
8 R4 }; O! o0 _8 g2.创建 Typecho 主题目录 \+ k& Z: _ l: d7 }6 {+ K
. m0 C! |8 R) Q: X- ]. J在 Typecho 根目录下的 usr/themes 目录中新建一个名为 heropress-pro 的文件夹,这将是新的主题目录。
2 j, f Q, K3 u' z" u# k/ _' I5 Z0 n8 Y# f6 T0 p8 U# l
3.解压主题文件3 c: e" m1 f+ a n. Q& W
* O! u* {8 L' N: [将下载的 Heropress Pro 主题文件压缩包解压缩,然后复制文件到 heropress-pro 目录中。应该会有以下文件和目录:
5 a0 t* z* `" C8 U* h8 f2 Q- H3 p/ t w' p1 B' ?
assets/
; v# d; I9 d0 fdist/) u5 i- B( o: v% J2 C1 _% r2 u. m
inc/
' a3 g/ i: x9 ]- nnode_modules/3 z/ h5 N) ~' s0 W+ g8 \. s# F9 d
partials/
! u' v/ V ]1 e6 h$ Gtemplates/3 y& ~) R8 `+ Y8 q1 ]+ ^
.babelrc$ v4 B- a8 I/ p$ [7 [7 w3 d/ C
.eslintrc.js `; D2 K8 I! [
gulpfile.js
- M9 {* i! c1 I. Z/ c1 o; ppackage.json
8 p7 v( u! n% D: R& x: _2 W8 Y% Twebpack.config.js+ |4 a+ [0 D& d- b8 j& R$ U
4.修改主题样式表文件
2 J: \. u" D2 t! v1 Q- D
3 T$ j2 {, d% d% K3 c# l* V% k修改主题样式表文件 assets/css/style.css,将其中所有图片、字体等路径都指向 Typecho 主题所在的地址。例如:
/ z6 c( `* g# q( N' i$ a9 L
( q, P& z, U/ ~- Q% B7 Ccss& H! T- J8 ~3 J* h
background-image: url('https://example.com/usr/themes/heropress-pro/assets/images/bg.jpg');
0 E) ~$ f7 B' V# G. v- `& _修改为:
2 w: }/ O, e3 K5 D
% q x: `' X6 Z, kcss
3 u, U _* b' k1 z- M$ bbackground-image: url('/usr/themes/heropress-pro/assets/images/bg.jpg');" T! h* d/ z' W# y( T5 }
5.创建 Typecho 主题配置文件
/ B" S6 t% |+ v2 n; T0 X
8 R" r+ u- F% F. ` R i# v5 n* I- k在主题目录中创建一个名为 config.inc.php 的文件,并添加以下代码:
! z( x* x* ]0 w. ^& _8 W | O$ p' I7 X
php
Q' f& }. E# _/ `& E<?php4 t/ [- }) B5 q0 R" u+ K
return array(0 L1 s- H# e' D: I) I! s
'name' => 'Heropress Pro',$ E+ C/ `$ I8 S: a6 o
'description' => 'Typecho adaptation of Heropress Pro theme',7 _0 `. n1 k9 `0 r1 I
'version' => '1.0',
1 O* F/ s$ a3 z 'author' =>'Your Name',7 N5 k$ f% j; U. T5 {: _
);
9 K9 U# l# F$ p3 l% A; ^6.配置主题布局文件
9 h# ?7 X. s1 y2 C: N2 ]0 c' H# M6 k* D$ _* Q8 F: w
在 heropress-pro 目录中创建一个名为 index.php 的文件,并添加以下代码:
) S6 O* }( a- Q! G/ s: g8 I4 R+ I: |" _! M
php
' |' t% V2 w7 O( d<?php while ($this->next()): ?>2 j7 K1 L5 _! o# V; `
<div class="post">8 u' I' Z! }- X) P7 a9 `
<h2 class="post-title">0 p! y$ Y; S, G5 T. K2 F+ w9 u
<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>5 y: C, s3 m' ~
</h2>
) S! Z% U# b& F d/ [ <div class="post-meta">; y, J" U. m' B$ F! Y w
<span><?php $this->date('F j, Y'); ?></span>9 z# t A1 b- U4 o5 K
<?php if($this->tags): ?>
5 A$ N$ F8 F5 k s; F8 v <span class="post-tags">
! ?- Y; P0 P' w; T0 U <?php $this->tags(', ', true, 'none'); ?>
5 s0 M" c$ ~% a$ X; ^9 y1 O </span>2 |- o5 u4 Y, n; f( e
<?php endif; ?>
; F' B! {4 q/ t- s* i </div>
( k* p W6 e# s' V% `* r3 C5 k <div class="post-content">3 F8 N6 e! E9 o+ k) p$ T
<?php $this->content('Read more »'); ?>
- _, R g5 N# N6 z4 l8 L </div>
( s: S8 y% f! K7 x" G</div>
& Y6 `0 \% @: r6 s, r<?php endwhile; ?>
. o! l" F. s9 T- u* j' }7.调用 Typecho 函数' m/ x4 D( y- h1 p
. |# x4 a; X6 M+ `: H在 index.php 文件中,将需要显示文章的地方改为 Typecho 的函数。例如:
: S* K+ _, m4 \7 i U1 ?! y
6 } m) y5 `1 B7 [# W4 C% x用 the_title() 替换 get_the_title()。 M! p: F, h! f7 M3 }, }
( v8 L/ p+ Z& H8 Z8 W
用 the_permalink() 替换 get_permalink()。) T( A( p2 l3 Q1 N, s# w+ n7 W
: \8 O1 y7 a, g* N1 \
用 $this->date('F j, Y'); 替换 the_time('F j, Y')。
# U Z6 R7 C& S1 K8 P ^( }# V" u" z. Z- U
用 $this->content('Read more »'); 替换 the_content('Read more »')。
H. w3 Q5 c/ i8 A9 @. d4 H4 ^" m. X S0 ]" p+ f- A
8.添加 Typecho 标记1 g8 \" d) `$ w- v, j: H
, Z$ w0 i; `4 d0 Q# D在 index.php 文件中,添加 Typecho 的头部和页面循环,以及必要的 js 和 css 文件:
2 }! J' ?) F) H6 K- w: u
, L/ U) Z( }2 W) sphp
4 c: [7 U4 S* ?<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>* C X0 J$ F% c1 c" h* c- F. }0 [
<?php $this->need('header.php'); ?>* ?8 s$ x# l7 @; C- \7 X
<div id="main" class="container">
( o+ a9 J6 H9 X" F1 }% _; a <div id="content" class="row">, @5 F2 O8 A; S% K
<?php while ($this->next()): ?>
. O( \2 \3 K7 I3 i- p3 i <div class="col-md-8 col-md-offset-2">' W( z% @3 c6 R# H
<div class="post">: y/ } r: R! C' q
<h2 class="post-title">
9 E. c/ o( x) K& U e% c" W4 n! r" E <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a> n$ v: t* H2 G2 }. W; {
</h2>
6 H7 }. X1 u: y9 ~4 b. G <div class="post-meta">
( V6 Y/ p, O" Y6 W. g7 p0 w <span><?php $this->date('F j, Y'); ?></span>
# T- a6 e7 m( R3 W) K; I6 C+ X1 g2 ^ <?php if($this->tags): ?>
1 a& f, l' X/ _/ e$ k <span class="post-tags">
7 s) {5 ~# B* @$ u4 f2 h9 H, e <?php $this->tags(', ', true, 'none'); ?>
7 B S3 m$ D: q) E8 Z0 c/ Y: y </span>
& w# w6 \2 M j) y0 H/ b <?php endif; ?>
0 k( x) L, L( \: z' u5 ] </div>5 e- t! D) E8 J6 s3 i
<div class="post-content">; P' c& d! M& D% |+ ?
<?php $this->content('Read more »'); ?>
, ]. K; q, s! v+ W1 S: e0 ^( I </div>
! Q/ m; o9 \. Q( c, [% k </div>" T$ }, k1 S5 o, I
</div> ]8 ~/ B; W8 u! p6 H q
<?php endwhile; ?>
* P: J3 \. P( v- F! T( c </div>
( F9 a1 b* b% l/ c; I/ ?</div> P* Z+ N" w9 s9 b' J, x0 P
<?php $this->need('footer.php'); ?>2 s( Z2 Z' H: E! i3 M" z8 L
9.调整其他可能需要的文件和代码6 m2 y' R+ j; O: N/ a
/ d1 a8 M( K, X, U4 L, d
根据 Typecho 的特点,需要调整主题中的一些文件和代码。例如,需要将 header.php 中的 <title> 标签改为:8 {: o# I: q6 l
; b6 r' \8 b) S; n+ O5 z
html
# |/ c; ?# P" F. n- ?<title><?php $this->archiveTitle(array(
) {$ `/ m0 ~ y$ _! [; R& Y4 r 'category' => _t('%s'),
. M8 F0 X0 ? ?+ u1 S2 o2 ]. ?* X 'search' => _t('Search "%s"'),
# y# R8 h, E; D6 T* _# t" q 'tag' => _t('Tag "%s"'),
4 `) S2 N5 H4 o1 M5 ?1 e+ v 'author' => _t('Author "%s"'),
. k, k2 r) r& K2 x& H. j 'date' => _t('Archive "%s"'),
4 F, n L7 B+ U. G: ]/ a! j 'default' => ''
# _ _* O7 R- z ), '', ' - '); ?><?php $this->options->title(); ?>( t. z i1 }7 u0 t
</title>
6 m+ T8 K% `) W10.使用主题2 Z2 l; k r' f" J- \7 r; G/ \
# _7 Z/ z3 V, q4 }% V登录 Typecho 管理页面,选择外观,找到 Heropress Pro 主题,并选择该主题即可。
[+ o8 [) Q1 W( |0 f4 H$ p; N( v6 ~9 Y$ }
以上就是将 Heropress Pro 主题转换成 Typecho 主题的具体过程,希望对你有所帮助。- p. p/ O% e3 N, Q0 y. P# g. ~- F3 s
0 y/ R7 D% U6 e7 v; B: u9 I( _% V
|
|