|
|
2 p( k3 D1 q5 i$ S) m1 G8 d
可以将 SpeciaTheme 中 Heropress Pro 主题转换成 Typecho 主题,下面是具体的实现过程:' T- Z& L8 p- `4 e
( K" a9 k* ]$ }) z( f! U3 a1.下载主题文件
- q$ k9 j6 s }) N+ m% T+ o) W) Y6 y- u5 ?, q8 n
在 SpeciaTheme 网站购买 Heropress Pro 主题后,从下载链接中下载主题文件压缩包。
' n+ r, a# e- g @* I) g+ ]4 U0 b9 T+ W! ?: N; p$ O, |5 g
2.创建 Typecho 主题目录$ S+ e$ a3 U9 }0 E+ D9 @! g, \
+ _: F; Z9 o* R& o+ i) j在 Typecho 根目录下的 usr/themes 目录中新建一个名为 heropress-pro 的文件夹,这将是新的主题目录。
& l( I8 |+ d: q" F @! q5 q5 F6 e. p% C/ Y, M6 S( f- n1 G
3.解压主题文件, H n5 I! f. X4 U$ H4 X j) F
9 r" `7 X ^& Y& }( \. \将下载的 Heropress Pro 主题文件压缩包解压缩,然后复制文件到 heropress-pro 目录中。应该会有以下文件和目录:
+ h" ?+ M0 ~: l1 }2 H* \
/ X) x9 }3 \( y- Z! l, j7 qassets/7 x" R6 A+ |; `; q9 r. G
dist/
) q0 W4 L1 V7 J" F( B3 Xinc/2 B$ b! G! Z9 W) l2 a
node_modules/# a/ G+ B( |$ A
partials/
, s; O! v) o( m3 \" Q+ Qtemplates/! B' E, a1 k1 ^6 m
.babelrc
5 a# T3 C1 {" S.eslintrc.js. X6 x* Q" a6 I N
gulpfile.js
) a: A) N9 @4 E0 ^4 r& wpackage.json
4 D8 s# `' F# ^ l( a% Pwebpack.config.js
! v, q* E, r; i. r2 D4.修改主题样式表文件" {. M0 \: e2 a2 G( }
! t; g& v4 p* U+ B/ @' |修改主题样式表文件 assets/css/style.css,将其中所有图片、字体等路径都指向 Typecho 主题所在的地址。例如:
, x) U4 M) H+ }5 r- W: s6 i
7 a9 c0 C) l4 s, B Z4 Z4 n8 Hcss+ }8 c# b& j2 X
background-image: url('https://example.com/usr/themes/heropress-pro/assets/images/bg.jpg');
; D, B3 l0 D8 }5 ~9 R s( T修改为:
: s; T5 l Z+ i2 O1 [! |
6 G' a* X. P$ [4 m! r- ]css
, s% ~" s3 H1 ~$ kbackground-image: url('/usr/themes/heropress-pro/assets/images/bg.jpg');' }0 b& ]0 v, D$ t. @
5.创建 Typecho 主题配置文件
: [) h6 |* w3 \/ y% @
2 @% U0 E; O# ^& ]. T6 W在主题目录中创建一个名为 config.inc.php 的文件,并添加以下代码:
' g0 m+ A, k8 a H, E% o1 A3 j7 U' g! q0 C5 R5 ^! I
php+ k6 _7 ?( c1 D4 F& M. R
<?php9 ~6 M# R+ b3 S7 \/ x6 N/ F* v8 k5 X
return array(
* n" R6 ]& u7 J; A 'name' => 'Heropress Pro',: z& F, u0 F3 A+ _! _, b3 G
'description' => 'Typecho adaptation of Heropress Pro theme',0 p$ b9 W) A( _
'version' => '1.0',
6 C, }2 q" z u) D. u# g9 S: b4 j 'author' =>'Your Name',/ C, O& I5 K# _( E) B
);$ f, O# S+ ~% L" L' c$ C8 [
6.配置主题布局文件# b. h/ k y+ k* f0 _ `& ^
6 S% |( e1 Q* j# G* h
在 heropress-pro 目录中创建一个名为 index.php 的文件,并添加以下代码:
) }+ i, V0 v. c3 u/ ~* d5 B' Z/ n3 j9 ]4 R8 Q- ?
php0 c' a U9 t4 S
<?php while ($this->next()): ?>% w+ j7 d4 Q# d
<div class="post">3 ^' k, c; N( E- J( _% N$ B8 z+ Z: ]& C
<h2 class="post-title">' U8 B L n C5 x! H
<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>7 X/ ^7 p5 T M: y- j+ B: A6 j
</h2>8 j9 L, ?% c. h4 T
<div class="post-meta">! g3 o& b6 [2 i9 T, O! R
<span><?php $this->date('F j, Y'); ?></span>
9 j2 w9 [! B. o; j <?php if($this->tags): ?>% n/ [* A1 t2 v% y0 S) S
<span class="post-tags">6 U% I, B! @0 e# u/ {) p& [
<?php $this->tags(', ', true, 'none'); ?>1 l5 Z( Q: x& m
</span>' g, K: `+ k2 c* w* A5 e* R2 v
<?php endif; ?>. n' D6 `7 U) a2 J9 q% U
</div>( S# h7 f1 A, y) I8 V
<div class="post-content">; y$ R0 ?$ X) b# _
<?php $this->content('Read more »'); ?>
1 U+ l. o* m, S# r1 N% v; n </div>
" s2 B$ T. N, L" p a7 n</div> f) l: u: A2 V7 @4 l3 D% g! a
<?php endwhile; ?>
6 F. o0 S7 y/ F7.调用 Typecho 函数- i- _$ i' u$ G4 w" ^# M$ T
% \* w3 w( {1 P7 n在 index.php 文件中,将需要显示文章的地方改为 Typecho 的函数。例如:
8 A% Q* ]$ m K9 \9 [
8 V% {1 j) \. p0 C+ D! c' \用 the_title() 替换 get_the_title()。% _9 r$ r& O" D2 |3 i! Y' @* {& ~
5 _/ h Q7 T+ \: J( q9 n
用 the_permalink() 替换 get_permalink()。) D5 n5 P( |4 _( A* q
* l6 C# ~: z* F, }! I5 c用 $this->date('F j, Y'); 替换 the_time('F j, Y')。5 h: Q9 D5 `! x5 G( h
f# V7 g. W2 H- V- y9 a# W用 $this->content('Read more »'); 替换 the_content('Read more »')。6 I* s$ J# C- N" J/ p
- D3 s$ M+ w! D
8.添加 Typecho 标记9 g2 W- C: C- T0 r
- b5 ?: q) l; ~/ q! q- y
在 index.php 文件中,添加 Typecho 的头部和页面循环,以及必要的 js 和 css 文件:, U; G( f# b# B& s+ c# I: x* F
- N3 y3 Y5 O2 n. B/ B( G% Ephp/ `4 r `$ f1 _+ `, J& K* U$ `
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
5 W# k/ q$ H1 v: ?<?php $this->need('header.php'); ?>
`& ?, s G7 s% {<div id="main" class="container">$ X+ f; ^; M2 N0 x+ a" R$ |
<div id="content" class="row">- n+ s- ~0 j* q! p* p5 N: i
<?php while ($this->next()): ?>* V3 e! ?( H! C, J8 B
<div class="col-md-8 col-md-offset-2">
- |+ @- w# n* E7 O$ n <div class="post">
2 z' h$ `7 G% ^1 Y" D <h2 class="post-title">/ R$ l: |0 E# k0 r% n# f7 k
<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>: p0 i: ]2 \0 V; O9 s, i
</h2>4 k/ j8 O* C4 }* o3 _) q' B; W. { S
<div class="post-meta">
! W- l7 {# L( t r8 G# X1 E) A; g <span><?php $this->date('F j, Y'); ?></span>
; r8 b6 E5 G% I! D$ R! s d3 p$ ` <?php if($this->tags): ?>- t: j' B0 f: Z6 M' X3 K
<span class="post-tags">: f. u+ q* p0 v, t
<?php $this->tags(', ', true, 'none'); ?>
6 x+ Z# I+ V+ @; Z( M& d+ U4 \ </span>
! ^2 x$ x6 ?3 q- k# _ <?php endif; ?>. D( q+ z9 V% G. Q
</div>4 {; E% B3 r/ a
<div class="post-content">
0 {( k% l) Y% h, R0 q8 z% H <?php $this->content('Read more »'); ?>& i' f9 h' |; H: c" j
</div>
' W0 o1 T/ F$ q9 ^, m& L. |, o </div>
5 g4 _$ w: U+ S" _0 e </div>: V3 P- G( [" m$ b+ P' Y
<?php endwhile; ?>
) \# N4 U( D* w s- g: e9 o. l0 Z </div>
0 s+ a( N1 @' E) n/ b5 Z) V" c! a2 h</div>- Q& w/ f x1 g5 |1 U5 o* f { K
<?php $this->need('footer.php'); ?> V* ` E0 a0 Z/ U3 M
9.调整其他可能需要的文件和代码
1 k% Y7 E( Q, o7 ]* x/ `0 d8 y
* e. l) F6 o0 l$ m& C. m8 J1 P根据 Typecho 的特点,需要调整主题中的一些文件和代码。例如,需要将 header.php 中的 <title> 标签改为:& `. A! v8 h1 H" P) k1 p2 `- j
3 X) }6 n( g" p8 bhtml7 w( o8 x. D/ J
<title><?php $this->archiveTitle(array(; z4 ]1 G7 K- z# g4 X" D
'category' => _t('%s'), I+ ` A0 L3 @3 G
'search' => _t('Search "%s"'),
% W/ B5 y3 k( F J" G3 [ 'tag' => _t('Tag "%s"'),
3 x9 @. |, a. Z+ w+ ^# n, g 'author' => _t('Author "%s"'),
9 `9 ~( {0 h$ }1 A& I. S 'date' => _t('Archive "%s"'),: X% O5 E, U; P
'default' => ''2 O" w4 w1 V( s+ Q& c
), '', ' - '); ?><?php $this->options->title(); ?>+ w* |1 M2 s, J; j+ ^/ A( x
</title>
! e: c2 n- X+ y/ U! R10.使用主题7 g: v* u4 i( l; c h# {/ G' V O
' o% e* n- z1 @: g5 Z: v. ]5 {& D
登录 Typecho 管理页面,选择外观,找到 Heropress Pro 主题,并选择该主题即可。8 @3 k8 ~: x; Q' F% G6 \ Y: V6 l
* j2 D2 x0 e8 X) L, Q: ?: y8 m
以上就是将 Heropress Pro 主题转换成 Typecho 主题的具体过程,希望对你有所帮助。
2 i9 f$ T: J ~5 w
7 U6 }5 {7 @8 |/ G# U& m+ A% x |
|